afterbefore 0.2.21 → 0.2.23

package/dist/overlay/index.js

@@ -308,13 +308,13 @@ function injectInterFont() {
 
 // src/overlay/ui/toolbar.tsx
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
 import {
   ArrowUp,
   Camera,
   Check,
   ChevronDown as ChevronDown2,
   Image as Image2,
-  Eye,
   FolderOpen,
   LoaderCircle,
   FileText,
@@ -1379,9 +1379,7 @@ function Toolbar({
                 selectedMode,
                 frameSettings,
                 onFrameSettingsChange,
-                panelSide,
-                tooltipSide,
-                bottom
+                tooltipSide
               }
             )
           ]
@@ -1530,28 +1528,120 @@ function Separator({
     }
   );
 }
-function PanelTab({
-  children,
-  active,
-  onClick
+function BrowserChromeBar({ theme }) {
+  const colors = theme === "dark" ? { titleBar: "#1C1C1C", urlBar: "#262626", text: "#7B7B7B", border: "#333333" } : { titleBar: "#F5F5F5", urlBar: "#FFFFFF", text: "#999999", border: "#EBEBEB" };
+  return /* @__PURE__ */ jsxs2("div", { style: { background: colors.titleBar, flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", height: 18, padding: "0 8px" }, children: /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 5 }, children: ["#FF5F57", "#FEBC2E", "#28C840"].map((c) => /* @__PURE__ */ jsx2("div", { style: { width: 6, height: 6, borderRadius: "50%", background: c } }, c)) }) }),
+    /* @__PURE__ */ jsx2("div", { style: { padding: "2px 40px 3px" }, children: /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          background: colors.urlBar,
+          borderRadius: 3,
+          padding: "2px 0",
+          textAlign: "center",
+          ...theme === "light" ? { border: `1px solid ${colors.border}` } : {}
+        },
+        children: /* @__PURE__ */ jsx2(
+          "span",
+          {
+            style: {
+              fontSize: 7,
+              color: colors.text,
+              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+            },
+            children: "localhost"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx2("div", { style: { height: 1, background: colors.border } })
+  ] });
+}
+function FramePreview({
+  previewUrl,
+  frameSettings,
+  loading,
+  onClickLightbox
 }) {
+  const { enabled: frameEnabled, browserChrome, browserTheme, size, bgType, bgColor, bgImage, padding } = frameSettings;
+  const aspectRatio = frameEnabled ? `${size.w} / ${size.h}` : "16 / 10";
+  const outerBg = frameEnabled ? bgType === "image" && bgImage ? { backgroundImage: `url(${bgImage})`, backgroundSize: "cover", backgroundPosition: "center" } : { background: bgColor } : { background: bg.elevated };
+  const paddingPct = frameEnabled ? `${padding / size.w * 100}%` : void 0;
+  const emptyState = /* @__PURE__ */ jsx2("span", { style: { ...text.paragraph.xs, color: fg.faint }, children: loading ? "Loading..." : "No screenshots yet" });
+  const imageEl = previewUrl ? /* @__PURE__ */ jsx2(
+    "img",
+    {
+      src: previewUrl,
+      alt: "",
+      style: {
+        maxWidth: "100%",
+        maxHeight: "100%",
+        objectFit: "contain",
+        display: "block"
+      }
+    }
+  ) : null;
   return /* @__PURE__ */ jsx2(
-    "button",
+    "div",
     {
-      onClick,
+      onClick: onClickLightbox,
       style: {
-        flex: 1,
-        padding: "6px 0",
-        border: "none",
-        borderBottom: `2px solid ${active ? fg.strong : "transparent"}`,
-        background: "transparent",
-        color: active ? fg.strong : fg.muted,
-        ...text.label.xs,
-        fontFamily: "inherit",
-        cursor: "pointer",
-        transition: "color 0.12s ease, border-color 0.12s ease"
+        width: "100%",
+        aspectRatio,
+        borderRadius: 10,
+        overflow: "hidden",
+        border: `1px solid ${stroke.soft}`,
+        cursor: previewUrl ? "zoom-in" : "default",
+        marginBottom: 10,
+        display: "flex",
+        flexDirection: "column",
+        ...outerBg
       },
-      children
+      children: frameEnabled ? /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            padding: paddingPct,
+            minHeight: 0
+          },
+          children: [
+            browserChrome && /* @__PURE__ */ jsx2(BrowserChromeBar, { theme: browserTheme }),
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  minHeight: 0,
+                  overflow: "hidden"
+                },
+                children: imageEl || emptyState
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        browserChrome && /* @__PURE__ */ jsx2(BrowserChromeBar, { theme: browserTheme }),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: 0
+            },
+            children: imageEl || emptyState
+          }
+        )
+      ] })
     }
   );
 }
@@ -1561,11 +1651,8 @@ function HistoryButton({
   selectedMode,
   frameSettings,
   onFrameSettingsChange,
-  panelSide,
-  tooltipSide,
-  bottom
+  tooltipSide
 }) {
-  const [activeTab, setActiveTab] = useState3("screenshots");
   const [toast, setToast] = useState3(null);
   const [pushing, setPushing] = useState3(false);
   const [saveDir, setSaveDir] = useState3(null);
@@ -1581,7 +1668,7 @@ function HistoryButton({
   const [lightboxSrc, setLightboxSrc] = useState3(null);
   const [editingFile, setEditingFile] = useState3(null);
   const [editValue, setEditValue] = useState3("");
-  const [hoveredThumb, setHoveredThumb] = useState3(null);
+  const [selectedFile, setSelectedFile] = useState3(null);
   useEffect2(() => {
     if (!open) return;
     fetch("/__afterbefore/config").then((r) => r.json()).then((data) => setSaveDir(data.saveDir)).catch(() => {
@@ -1619,7 +1706,15 @@ function HistoryButton({
     fetch(`/__afterbefore/history?${params}`).then((r) => r.json()).then((data) => {
       setRepos(data.repos || []);
       setBranches(data.branches || []);
-      setScreenshots(data.screenshots || []);
+      const shots = data.screenshots || [];
+      setScreenshots(shots);
+      if (shots.length > 0) {
+        setSelectedFile(
+          (prev) => prev && shots.some((s) => s.filename === prev) ? prev : shots[0].filename
+        );
+      } else {
+        setSelectedFile(null);
+      }
       if (!selectedRepo && data.currentRepo) setSelectedRepo(data.currentRepo);
       if (!selectedBranch && data.currentBranch) setSelectedBranch(data.currentBranch);
     }).catch(() => {
@@ -1666,6 +1761,7 @@ function HistoryButton({
           (s) => s.filename === oldName ? { ...s, filename: data.filename, timestamp: data.filename.replace(/\.png$/, "") } : s
         )
       );
+      if (selectedFile === oldName) setSelectedFile(data.filename);
       showToast("Renamed", "success");
     } catch {
       showToast("Rename failed", "error");
@@ -1685,6 +1781,10 @@ function HistoryButton({
       });
       if (!res.ok) throw new Error();
       setScreenshots((prev) => prev.filter((s) => s.filename !== filename));
+      if (selectedFile === filename) {
+        const remaining = screenshots.filter((s) => s.filename !== filename);
+        setSelectedFile(remaining.length > 0 ? remaining[0].filename : null);
+      }
       showToast("Deleted", "success");
     } catch {
       showToast("Delete failed", "error");
@@ -1708,358 +1808,369 @@ function HistoryButton({
       setPushing(false);
     }
   };
-  const verticalAlign = bottom ? { bottom: 0 } : { top: 0 };
-  const panelStyle = panelSide === "left" ? { right: "calc(100% + 10px)", ...verticalAlign } : { left: "calc(100% + 10px)", ...verticalAlign };
-  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+  const previewUrl = selectedFile ? `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(selectedFile)}` : null;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx2(IconButton, { active: open, tooltipSide, tooltip: !open ? "Screenshots" : void 0, onClick, children: /* @__PURE__ */ jsx2(Image2, { size: 16, strokeWidth: 1.7 }) }),
-    open && /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          ...panelStyle,
-          minWidth: 300,
-          maxWidth: 360,
-          padding: "10px 12px",
-          borderRadius: 12,
-          background: bg.base,
-          border: `1px solid ${stroke.default}`,
-          boxShadow: shadow.panel,
-          animation: "ab-panel-in 150ms cubic-bezier(0.23, 1, 0.32, 1)"
-        },
-        children: [
-          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 2, marginBottom: 10 }, children: [
-            /* @__PURE__ */ jsx2(PanelTab, { active: activeTab === "screenshots", onClick: () => setActiveTab("screenshots"), children: "Screenshots" }),
-            /* @__PURE__ */ jsx2(PanelTab, { active: activeTab === "settings", onClick: () => setActiveTab("settings"), children: "Settings" })
-          ] }),
-          activeTab === "settings" && /* @__PURE__ */ jsx2(
-            SettingsContent,
-            {
-              frameSettings,
-              onFrameSettingsChange,
-              saveDir: shortDir,
-              picking,
-              onPickFolder: handlePickFolder
-            }
-          ),
-          activeTab === "screenshots" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 10 }, children: [
-              /* @__PURE__ */ jsx2(
-                FilterDropdown,
-                {
-                  label: "Project",
-                  value: selectedRepo,
-                  options: repos,
-                  isOpen: repoDropOpen,
-                  onToggle: () => {
-                    setRepoDropOpen((p) => !p);
-                    setBranchDropOpen(false);
-                  },
-                  onSelect: (repo) => {
-                    setSelectedRepo(repo);
-                    setSelectedBranch(null);
-                    setRepoDropOpen(false);
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                FilterDropdown,
-                {
-                  label: "Branch",
-                  value: selectedBranch,
-                  options: branches,
-                  isOpen: branchDropOpen,
-                  onToggle: () => {
-                    setBranchDropOpen((p) => !p);
-                    setRepoDropOpen(false);
-                  },
-                  onSelect: (branch) => {
-                    setSelectedBranch(branch);
-                    setBranchDropOpen(false);
-                  }
-                }
-              )
-            ] }),
-            loading ? /* @__PURE__ */ jsx2(
-              "div",
-              {
-                style: {
-                  padding: "12px 0",
-                  textAlign: "center",
-                  ...text.paragraph.xs,
-                  color: fg.faint
-                },
-                children: "Loading..."
-              }
-            ) : screenshots.length === 0 ? /* @__PURE__ */ jsx2(
+    open && createPortal(
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          "data-afterbefore": "true",
+          onClick,
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 2147483647,
+            background: "rgba(0, 0, 0, 0.45)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            ...fontBase
+          },
+          children: [
+            /* @__PURE__ */ jsxs2(
               "div",
               {
+                onClick: (e) => e.stopPropagation(),
                 style: {
-                  padding: "12px 0",
-                  textAlign: "center",
-                  ...text.paragraph.xs,
-                  color: fg.faint
+                  width: 580,
+                  maxHeight: "80vh",
+                  borderRadius: 14,
+                  background: bg.base,
+                  border: `1px solid ${stroke.default}`,
+                  boxShadow: shadow.panel,
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden",
+                  animation: "ab-panel-in 150ms cubic-bezier(0.23, 1, 0.32, 1)"
                 },
-                children: "No screenshots yet"
-              }
-            ) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-              /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  style: {
-                    maxHeight: 240,
-                    overflowY: "auto",
+                children: [
+                  /* @__PURE__ */ jsxs2("div", { style: {
                     display: "flex",
-                    flexDirection: "column",
-                    gap: 8
-                  },
-                  children: screenshots.map((shot) => {
-                    const imgUrl = `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(shot.filename)}`;
-                    const isEditing = editingFile === shot.filename;
-                    return /* @__PURE__ */ jsxs2(
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "16px 20px 0"
+                  }, children: [
+                    /* @__PURE__ */ jsxs2("div", { children: [
+                      /* @__PURE__ */ jsx2("div", { style: { ...text.label.sm, color: fg.strong }, children: "Screenshots" }),
+                      /* @__PURE__ */ jsx2("div", { style: { ...text.paragraph.xs, color: fg.muted, marginTop: 2 }, children: "Capture history & settings" })
+                    ] }),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick,
+                        style: {
+                          width: 28,
+                          height: 28,
+                          borderRadius: 7,
+                          border: "none",
+                          background: "transparent",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          cursor: "pointer",
+                          color: fg.muted,
+                          padding: 0,
+                          transition: "background 0.12s ease, color 0.12s ease"
+                        },
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.background = state.hover;
+                          e.currentTarget.style.color = fg.default;
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.background = "transparent";
+                          e.currentTarget.style.color = fg.muted;
+                        },
+                        children: /* @__PURE__ */ jsx2(X2, { size: 14, strokeWidth: 2 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs2("div", { style: { flex: 1, overflowY: "auto", padding: "16px 20px 20px" }, children: [
+                    /* @__PURE__ */ jsx2(
+                      FramePreview,
+                      {
+                        previewUrl,
+                        frameSettings,
+                        loading,
+                        onClickLightbox: () => {
+                          if (previewUrl) setLightboxSrc(previewUrl);
+                        }
+                      }
+                    ),
+                    selectedFile && !loading && /* @__PURE__ */ jsxs2("div", { style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      marginBottom: 12
+                    }, children: [
+                      /* @__PURE__ */ jsx2("div", { style: { flex: 1, minWidth: 0 }, children: editingFile === selectedFile ? /* @__PURE__ */ jsx2(
+                        "input",
+                        {
+                          autoFocus: true,
+                          value: editValue,
+                          onChange: (e) => setEditValue(e.target.value),
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter") handleRename(selectedFile, editValue);
+                            if (e.key === "Escape") setEditingFile(null);
+                          },
+                          onBlur: () => handleRename(selectedFile, editValue),
+                          style: {
+                            width: "100%",
+                            ...text.label.xs,
+                            color: fg.strong,
+                            background: state.hover,
+                            border: `1px solid ${stroke.interactive}`,
+                            borderRadius: 4,
+                            padding: "2px 6px",
+                            outline: "none",
+                            fontFamily: "inherit"
+                          }
+                        }
+                      ) : /* @__PURE__ */ jsx2(
+                        "div",
+                        {
+                          onClick: () => {
+                            setEditingFile(selectedFile);
+                            setEditValue(selectedFile.replace(/\.png$/, ""));
+                          },
+                          style: {
+                            ...text.label.xs,
+                            color: fg.strong,
+                            cursor: "pointer",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          title: "Click to rename",
+                          children: formatTimestamp(selectedFile)
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          onClick: () => handleDelete(selectedFile),
+                          title: "Delete screenshot",
+                          style: {
+                            flexShrink: 0,
+                            width: 28,
+                            height: 28,
+                            borderRadius: 6,
+                            border: "none",
+                            background: "transparent",
+                            color: fg.faint,
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            padding: 0
+                          },
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.color = feedback.error;
+                            e.currentTarget.style.background = feedback.errorBg;
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.color = fg.faint;
+                            e.currentTarget.style.background = "transparent";
+                          },
+                          children: /* @__PURE__ */ jsx2(Trash22, { size: 14, strokeWidth: 1.8 })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx2("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx2(
+                      SettingsContent,
+                      {
+                        frameSettings,
+                        onFrameSettingsChange,
+                        saveDir: shortDir,
+                        picking,
+                        onPickFolder: handlePickFolder
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 10, marginBottom: 10 }, children: [
+                      /* @__PURE__ */ jsx2("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx2(
+                        FilterDropdown,
+                        {
+                          label: "Project",
+                          value: selectedRepo,
+                          options: repos,
+                          isOpen: repoDropOpen,
+                          onToggle: () => {
+                            setRepoDropOpen((p) => !p);
+                            setBranchDropOpen(false);
+                          },
+                          onSelect: (repo) => {
+                            setSelectedRepo(repo);
+                            setSelectedBranch(null);
+                            setRepoDropOpen(false);
+                          }
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx2("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx2(
+                        FilterDropdown,
+                        {
+                          label: "Branch",
+                          value: selectedBranch,
+                          options: branches,
+                          isOpen: branchDropOpen,
+                          onToggle: () => {
+                            setBranchDropOpen((p) => !p);
+                            setRepoDropOpen(false);
+                          },
+                          onSelect: (branch) => {
+                            setSelectedBranch(branch);
+                            setBranchDropOpen(false);
+                          }
+                        }
+                      ) })
+                    ] }),
+                    screenshots.length > 0 && /* @__PURE__ */ jsx2(
                       "div",
                       {
                         style: {
                           display: "flex",
-                          gap: 10,
-                          alignItems: "center"
+                          gap: 6,
+                          overflowX: "auto",
+                          paddingBottom: 4,
+                          marginBottom: 10
                         },
-                        children: [
-                          /* @__PURE__ */ jsxs2(
+                        children: screenshots.map((shot) => {
+                          const thumbUrl = `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(shot.filename)}`;
+                          const isSelected = selectedFile === shot.filename;
+                          return /* @__PURE__ */ jsx2(
                             "div",
                             {
+                              onClick: () => setSelectedFile(shot.filename),
                               style: {
-                                position: "relative",
-                                width: 56,
-                                height: 36,
+                                width: 64,
+                                height: 44,
                                 flexShrink: 0,
-                                borderRadius: 4,
+                                borderRadius: 6,
                                 overflow: "hidden",
-                                cursor: "pointer"
-                              },
-                              onMouseEnter: () => setHoveredThumb(shot.filename),
-                              onMouseLeave: () => setHoveredThumb(null),
-                              onClick: () => setLightboxSrc(imgUrl),
-                              children: [
-                                /* @__PURE__ */ jsx2(
-                                  "img",
-                                  {
-                                    src: imgUrl,
-                                    alt: "",
-                                    style: {
-                                      width: 56,
-                                      height: 36,
-                                      objectFit: "cover",
-                                      border: `1px solid ${stroke.default}`,
-                                      borderRadius: 4,
-                                      background: state.subtle,
-                                      display: "block"
-                                    }
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx2(
-                                  "div",
-                                  {
-                                    style: {
-                                      position: "absolute",
-                                      inset: 0,
-                                      background: "rgba(0, 0, 0, 0.55)",
-                                      display: "flex",
-                                      alignItems: "center",
-                                      justifyContent: "center",
-                                      borderRadius: 4,
-                                      opacity: hoveredThumb === shot.filename ? 1 : 0,
-                                      transition: "opacity 0.15s ease"
-                                    },
-                                    children: /* @__PURE__ */ jsx2(Eye, { size: 16, strokeWidth: 1.8, color: fg.strong })
-                                  }
-                                )
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsx2("div", { style: { flex: 1, minWidth: 0 }, children: isEditing ? /* @__PURE__ */ jsx2(
-                            "input",
-                            {
-                              autoFocus: true,
-                              value: editValue,
-                              onChange: (e) => setEditValue(e.target.value),
-                              onKeyDown: (e) => {
-                                if (e.key === "Enter") handleRename(shot.filename, editValue);
-                                if (e.key === "Escape") setEditingFile(null);
-                              },
-                              onBlur: () => handleRename(shot.filename, editValue),
-                              style: {
-                                width: "100%",
-                                ...text.label.xs,
-                                color: fg.strong,
-                                background: state.hover,
-                                border: `1px solid ${stroke.interactive}`,
-                                borderRadius: 4,
-                                padding: "2px 6px",
-                                outline: "none",
-                                fontFamily: "inherit"
-                              }
-                            }
-                          ) : /* @__PURE__ */ jsx2(
-                            "div",
-                            {
-                              onClick: () => {
-                                setEditingFile(shot.filename);
-                                setEditValue(shot.filename.replace(/\.png$/, ""));
-                              },
-                              style: {
-                                ...text.label.xs,
-                                color: fg.strong,
                                 cursor: "pointer",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                                whiteSpace: "nowrap"
+                                border: isSelected ? `2px solid ${accent.highlight}` : `1px solid ${stroke.soft}`,
+                                opacity: isSelected ? 1 : 0.7,
+                                transition: "opacity 0.12s ease, border-color 0.12s ease"
                               },
-                              title: "Click to rename",
-                              children: formatTimestamp(shot.filename)
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsx2(
-                            "button",
-                            {
-                              onClick: () => handleDelete(shot.filename),
-                              title: "Delete screenshot",
-                              style: {
-                                flexShrink: 0,
-                                width: 24,
-                                height: 24,
-                                borderRadius: 4,
-                                border: "none",
-                                background: "transparent",
-                                color: fg.faint,
-                                cursor: "pointer",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                padding: 0
-                              },
-                              onMouseEnter: (e) => {
-                                e.currentTarget.style.color = feedback.error;
-                                e.currentTarget.style.background = feedback.errorBg;
-                              },
-                              onMouseLeave: (e) => {
-                                e.currentTarget.style.color = fg.faint;
-                                e.currentTarget.style.background = "transparent";
-                              },
-                              children: /* @__PURE__ */ jsx2(Trash22, { size: 13, strokeWidth: 1.8 })
-                            }
-                          )
-                        ]
-                      },
-                      shot.filename
-                    );
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  style: {
-                    height: 1,
-                    background: state.active,
-                    margin: "8px 0"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-                /* @__PURE__ */ jsxs2(ActionButton, { onClick: handleOpenFolder, children: [
-                  /* @__PURE__ */ jsx2(FolderOpen, { size: 13, strokeWidth: 1.8 }),
-                  "Open Folder"
-                ] }),
-                /* @__PURE__ */ jsxs2(ActionButton, { onClick: handlePush, disabled: pushing, children: [
-                  /* @__PURE__ */ jsx2(ArrowUp, { size: 13, strokeWidth: 1.8 }),
-                  pushing ? "Pushing..." : "Push to PR"
-                ] })
-              ] })
-            ] })
-          ] }),
-          toast && /* @__PURE__ */ jsx2(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                bottom: "100%",
-                left: "50%",
-                transform: "translateX(-50%)",
-                marginBottom: 8,
-                padding: "6px 12px",
-                borderRadius: 6,
-                ...text.label.xs,
-                whiteSpace: "nowrap",
-                color: "white",
-                background: toast.type === "success" ? feedback.success : feedback.error,
-                boxShadow: shadow.toast
-              },
-              children: toast.message
-            }
-          )
-        ]
-      }
+                              children: /* @__PURE__ */ jsx2(
+                                "img",
+                                {
+                                  src: thumbUrl,
+                                  alt: "",
+                                  style: {
+                                    width: "100%",
+                                    height: "100%",
+                                    objectFit: "cover",
+                                    display: "block"
+                                  }
+                                }
+                              )
+                            },
+                            shot.filename
+                          );
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 6 }, children: [
+                      /* @__PURE__ */ jsxs2(ActionButton, { onClick: handleOpenFolder, children: [
+                        /* @__PURE__ */ jsx2(FolderOpen, { size: 13, strokeWidth: 1.8 }),
+                        "Open Folder"
+                      ] }),
+                      /* @__PURE__ */ jsxs2(ActionButton, { onClick: handlePush, disabled: pushing, children: [
+                        /* @__PURE__ */ jsx2(ArrowUp, { size: 13, strokeWidth: 1.8 }),
+                        pushing ? "Pushing..." : "Push to PR"
+                      ] })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            toast && /* @__PURE__ */ jsx2(
+              "div",
+              {
+                onClick: (e) => e.stopPropagation(),
+                style: {
+                  position: "fixed",
+                  bottom: 32,
+                  left: "50%",
+                  transform: "translateX(-50%)",
+                  padding: "6px 14px",
+                  borderRadius: 8,
+                  ...text.label.xs,
+                  whiteSpace: "nowrap",
+                  color: "white",
+                  background: toast.type === "success" ? feedback.success : feedback.error,
+                  boxShadow: shadow.toast
+                },
+                children: toast.message
+              }
+            )
+          ]
+        }
+      ),
+      document.body
     ),
-    lightboxSrc && /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        onClick: () => setLightboxSrc(null),
-        onKeyDown: (e) => {
-          if (e.key === "Escape") setLightboxSrc(null);
-        },
-        style: {
-          position: "fixed",
-          inset: 0,
-          bottom: 100,
-          zIndex: 2147483646,
-          background: "rgba(0, 0, 0, 0.85)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "zoom-out"
-        },
-        children: [
-          /* @__PURE__ */ jsx2(
-            "img",
-            {
-              src: lightboxSrc,
-              alt: "",
-              onClick: (e) => e.stopPropagation(),
-              style: {
-                maxWidth: "90vw",
-                maxHeight: "calc(100% - 32px)",
-                borderRadius: 8,
-                boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
-                cursor: "default"
+    lightboxSrc && createPortal(
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          "data-afterbefore": "true",
+          onClick: () => setLightboxSrc(null),
+          onKeyDown: (e) => {
+            if (e.key === "Escape") setLightboxSrc(null);
+          },
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 2147483647,
+            background: "rgba(0, 0, 0, 0.85)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "zoom-out"
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "img",
+              {
+                src: lightboxSrc,
+                alt: "",
+                onClick: (e) => e.stopPropagation(),
+                style: {
+                  maxWidth: "90vw",
+                  maxHeight: "calc(100vh - 64px)",
+                  borderRadius: 8,
+                  boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
+                  cursor: "default"
+                }
               }
-            }
-          ),
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              onClick: () => setLightboxSrc(null),
-              style: {
-                position: "absolute",
-                top: 16,
-                right: 16,
-                width: 32,
-                height: 32,
-                borderRadius: "50%",
-                border: "none",
-                background: state.pressed,
-                color: "white",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: 0
-              },
-              children: /* @__PURE__ */ jsx2(X2, { size: 18, strokeWidth: 2 })
-            }
-          )
-        ]
-      }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: () => setLightboxSrc(null),
+                style: {
+                  position: "absolute",
+                  top: 16,
+                  right: 16,
+                  width: 32,
+                  height: 32,
+                  borderRadius: "50%",
+                  border: "none",
+                  background: state.pressed,
+                  color: "white",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: 0
+                },
+                children: /* @__PURE__ */ jsx2(X2, { size: 18, strokeWidth: 2 })
+              }
+            )
+          ]
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -2125,7 +2236,7 @@ function FilterDropdown({
         {
           style: {
             position: "absolute",
-            bottom: "calc(100% + 4px)",
+            top: "calc(100% + 4px)",
             left: 0,
             right: 0,
             maxHeight: 160,