From adc8cb37fcec21afac848b1e5dd724394c344050 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 27 Aug 2025 00:52:39 +0200
Subject: another huge refactor

---
 .../components/editor/panel-preset-selector.tsx    | 91 ++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 apps/web/src/components/editor/panel-preset-selector.tsx

(limited to 'apps/web/src/components/editor/panel-preset-selector.tsx')

diff --git a/apps/web/src/components/editor/panel-preset-selector.tsx b/apps/web/src/components/editor/panel-preset-selector.tsx
new file mode 100644
index 00000000..e6ae97b3
--- /dev/null
+++ b/apps/web/src/components/editor/panel-preset-selector.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { ChevronDown, RotateCcw, LayoutPanelTop } from "lucide-react";
+import { usePanelStore, type PanelPreset } from "@/stores/panel-store";
+
+const PRESET_LABELS: Record<PanelPreset, string> = {
+  default: "Default",
+  media: "Media",
+  inspector: "Inspector",
+  "vertical-preview": "Vertical Preview",
+};
+
+const PRESET_DESCRIPTIONS: Record<PanelPreset, string> = {
+  default: "Media, preview, and inspector on top row, timeline on bottom",
+  media: "Full height media on left, preview and inspector on top row",
+  inspector: "Full height inspector on right, media and preview on top row",
+  "vertical-preview": "Full height preview on right for vertical videos",
+};
+
+export function PanelPresetSelector() {
+  const { activePreset, setActivePreset, resetPreset } = usePanelStore();
+
+  const handlePresetChange = (preset: PanelPreset) => {
+    setActivePreset(preset);
+  };
+
+  const handleResetPreset = (preset: PanelPreset, event: React.MouseEvent) => {
+    event.stopPropagation();
+    resetPreset(preset);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="secondary"
+          size="sm"
+          className="h-8 px-2 flex items-center gap-1 text-xs"
+          title="Panel Presets"
+        >
+          <LayoutPanelTop className="h-4 w-4" />
+          <ChevronDown className="h-3 w-3" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64">
+        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+          Panel Presets
+        </div>
+        <DropdownMenuSeparator />
+        {(Object.keys(PRESET_LABELS) as PanelPreset[]).map((preset) => (
+          <DropdownMenuItem
+            key={preset}
+            onClick={() => handlePresetChange(preset)}
+            className="flex items-start justify-between gap-2 py-2 cursor-pointer"
+          >
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="font-medium text-sm">
+                  {PRESET_LABELS[preset]}
+                </span>
+                {activePreset === preset && (
+                  <div className="h-2 w-2 rounded-full bg-primary" />
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-0.5 leading-tight">
+                {PRESET_DESCRIPTIONS[preset]}
+              </p>
+            </div>
+            <Button
+              variant="secondary"
+              size="icon"
+              className="h-6 w-6 shrink-0 opacity-60 hover:opacity-100"
+              onClick={(e) => handleResetPreset(preset, e)}
+              title={`Reset ${PRESET_LABELS[preset]} preset`}
+            >
+              <RotateCcw className="h-3 w-3" />
+            </Button>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
-- 
cgit v1.3.1


From 88c4d160e02c040c50c5b9252c761c50f56e1ae5 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 27 Aug 2025 01:02:43 +0200
Subject: more padding

---
 apps/web/src/components/editor/panel-preset-selector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'apps/web/src/components/editor/panel-preset-selector.tsx')

diff --git a/apps/web/src/components/editor/panel-preset-selector.tsx b/apps/web/src/components/editor/panel-preset-selector.tsx
index e6ae97b3..af22a171 100644
--- a/apps/web/src/components/editor/panel-preset-selector.tsx
+++ b/apps/web/src/components/editor/panel-preset-selector.tsx
@@ -51,7 +51,7 @@ export function PanelPresetSelector() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-64">
-        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+        <div className="px-3 py-2 text-xs font-medium text-muted-foreground">
           Panel Presets
         </div>
         <DropdownMenuSeparator />
@@ -59,7 +59,7 @@ export function PanelPresetSelector() {
           <DropdownMenuItem
             key={preset}
             onClick={() => handlePresetChange(preset)}
-            className="flex items-start justify-between gap-2 py-2 cursor-pointer"
+            className="flex items-start justify-between gap-2 py-2 px-3 cursor-pointer"
           >
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2">
-- 
cgit v1.3.1