more ui fixes

Author: anchen9

apps/extension/src/App.tsx

@@ -19,9 +19,12 @@ export interface AppProps {
   onPreviewSlot?: (event: EventItem | null) => void;
 }
 
-const DASHBOARD_URL =
-  (import.meta.env.VITE_DASHBOARD_URL as string | undefined) ??
-  "https://cornellloop.com";
+const DASHBOARD_URL = (() => {
+  const value = import.meta.env.VITE_DASHBOARD_URL;
+  return typeof value === "string" && value.length > 0
+    ? value
+    : "https://cornellloop.com";
+})();
 
 export default function App({
   onClose,
@@ -59,9 +62,9 @@ export default function App({
   const isSearchMode = view === "search" || view === "email";
 
   const handleTabChange = (tab: string) => {
-    const t = tab as "feed" | "bookmarks";
-    setActiveTab(t);
-    setView(t);
+    if (tab !== "feed" && tab !== "bookmarks") return;
+    setActiveTab(tab);
+    setView(tab);
     setEmailEvent(null);
   };
 
@@ -92,7 +95,7 @@ export default function App({
       style={{ boxShadow: "0px 4px 16px rgba(0, 0, 0, 0.18)" }}
     >
       {/* ── Sticky header ── */}
-      <div className="shrink-0 px-6 pt-7">
+      <div className="shrink-0 px-6 pt-7" data-loop-panel-drag>
         <SearchHeader
           variant={isSearchMode ? "search" : "main"}
           activeTab={activeTab}
@@ -109,7 +112,10 @@ export default function App({
       {/* ── Main content: search uses pinned footer CTA; other views scroll with CTA inline ── */}
       {view === "search" ? (
         <div className="flex min-h-0 flex-1 flex-col">
-          <div className="min-h-0 flex-1 overflow-y-auto px-6 py-[21px]">
+          <div
+            className="min-h-0 flex-1 overflow-y-auto px-6 py-[21px]"
+            data-loop-scroll
+          >
             <SearchView
               query={searchQuery}
               onSearchSelect={handleSearchSelect}
@@ -137,7 +143,10 @@ export default function App({
           </div>
         </div>
       ) : (
-        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-[21px]">
+        <div
+          className="min-h-0 flex-1 overflow-y-auto px-6 py-[21px]"
+          data-loop-scroll
+        >
           {view === "feed" && (
             <FeedView
               bookmarkedIds={bookmarkedIds}

apps/extension/src/background.ts

@@ -1,2 +1,10 @@
-// No side panel logic needed — UI is injected via content script.
-export {};
+// When the user clicks the toolbar icon, tell the active tab's content script
+// to re-show the floating panel (in case it was previously dismissed).
+chrome.action.onClicked.addListener((tab) => {
+  if (tab.id === undefined) return;
+  void chrome.tabs
+    .sendMessage(tab.id, { type: "LOOP_SHOW_PANEL" })
+    .catch(() => {
+      // Content script not injected on this page — silently ignore.
+    });
+});

apps/extension/src/content.tsx

@@ -5,10 +5,14 @@ import { ConvexReactClient } from "convex/react";
 import FloatingPanel from "./components/FloatingPanel.tsx";
 import contentStyles from "./content.css?inline";
 import { showSlotPreview, removeSlotPreview } from "./gcalHighlight";
+import { panelEvents } from "./panelBridge";
 import type { EventItem } from "./data/types";
 import type { PageContext } from "./App";
 
-const convexUrl = import.meta.env.VITE_CONVEX_URL as string | undefined;
+const convexUrl = (() => {
+  const value = import.meta.env.VITE_CONVEX_URL;
+  return typeof value === "string" && value.length > 0 ? value : undefined;
+})();
 
 function loadFonts() {
   if (document.getElementById("cornell-loop-fonts")) return;
@@ -90,3 +94,20 @@ function mount() {
 }
 
 mount();
+
+// Re-show the floating panel when the user clicks the toolbar icon
+// (handled in background.ts via chrome.action.onClicked).
+function readMessageType(raw: unknown): string | null {
+  if (typeof raw !== "object" || raw === null) return null;
+  for (const [k, v] of Object.entries(raw)) {
+    if (k === "type" && typeof v === "string") return v;
+  }
+  return null;
+}
+
+chrome.runtime.onMessage.addListener((rawMessage) => {
+  if (readMessageType(rawMessage) === "LOOP_SHOW_PANEL") {
+    panelEvents.dispatchEvent(new Event("show"));
+  }
+  return false;
+});

apps/extension/vite.config.ts

@@ -8,12 +8,31 @@ import { fileURLToPath } from "url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+// PLAYWRIGHT is set by the package script (`PLAYWRIGHT=true vite build`), not .env.
+function isPlaywrightBuild(): boolean {
+  return process.env["PLAYWRIGHT"] === "true";
+}
+
 export default defineConfig({
   plugins: [
     react(),
     tailwindcss(),
     svgr(),
-    webExtension({ manifest: "./manifest.json" }),
+    webExtension({
+      manifest: "./manifest.json",
+      transformManifest(manifest) {
+        if (!isPlaywrightBuild()) return manifest;
+        const cs = manifest.content_scripts;
+        if (!Array.isArray(cs)) return manifest;
+        for (const entry of cs) {
+          if (!Array.isArray(entry.matches)) continue;
+          if (!entry.matches.includes("http://localhost/*")) {
+            entry.matches.push("http://localhost/*");
+          }
+        }
+        return manifest;
+      },
+    }),
   ],
   build: {
     cssCodeSplit: false,