feat: typography overhaul, custom scrollbars, import/export, settings UI

Includes changes from prior sessions: Epilogue + Space Mono fonts, OverlayScrollbars integration, markdown editor fixes, settings dialog, import/export buttons, and various UI refinements.
2026-02-16 14:56:36 +02:00
parent 6bbf4c973b
commit bb1b6312ba
9 changed files with 343 additions and 205 deletions
--- a/src/components/boards/BoardList.tsx
+++ b/src/components/boards/BoardList.tsx
@@ -1,16 +1,63 @@
-import { useState, useEffect } from "react";
-import { Plus } from "lucide-react";
+import { useState, useEffect, useCallback } from "react";
+import { Plus, ArrowUpDown } from "lucide-react";
 import { motion } from "framer-motion";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import {
+  DndContext,
+  DragOverlay,
+  closestCenter,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  type DragStartEvent,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  rectSortingStrategy,
+} from "@dnd-kit/sortable";
 import { staggerContainer, scaleIn, springs } from "@/lib/motion";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { useAppStore } from "@/stores/app-store";
 import { BoardCard } from "@/components/boards/BoardCard";
+import { BoardCardOverlay } from "@/components/boards/BoardCardOverlay";
 import { NewBoardDialog } from "@/components/boards/NewBoardDialog";
-import { ImportExportButtons } from "@/components/import-export/ImportExportButtons";
+import { ImportButton } from "@/components/import-export/ImportExportButtons";
+import type { BoardSortOrder } from "@/types/settings";
+
+const SORT_LABELS: Record<BoardSortOrder, string> = {
+  manual: "Manual",
+  title: "Name",
+  updated: "Last modified",
+  created: "Date created",
+};

 export function BoardList() {
  const boards = useAppStore((s) => s.boards);
+  const sortOrder = useAppStore((s) => s.settings.boardSortOrder);
+  const setSortOrder = useAppStore((s) => s.setBoardSortOrder);
+  const setBoardManualOrder = useAppStore((s) => s.setBoardManualOrder);
+  const getSortedBoards = useAppStore((s) => s.getSortedBoards);
  const [dialogOpen, setDialogOpen] = useState(false);
+  const [activeBoardId, setActiveBoardId] = useState<string | null>(null);
+
+  const sortedBoards = getSortedBoards();
+  const isManual = sortOrder === "manual";
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 5 },
+    }),
+    useSensor(KeyboardSensor)
+  );

  // Listen for custom event to open new board dialog from command palette
  useEffect(() => {
@@ -23,6 +70,33 @@ export function BoardList() {
    };
  }, []);

+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    setActiveBoardId(event.active.id as string);
+  }, []);
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      setActiveBoardId(null);
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+
+      const currentOrder = useAppStore.getState().getSortedBoards().map((b) => b.id);
+      const oldIndex = currentOrder.indexOf(active.id as string);
+      const newIndex = currentOrder.indexOf(over.id as string);
+      if (oldIndex === -1 || newIndex === -1) return;
+
+      const newOrder = [...currentOrder];
+      newOrder.splice(oldIndex, 1);
+      newOrder.splice(newIndex, 0, active.id as string);
+      setBoardManualOrder(newOrder);
+    },
+    [setBoardManualOrder]
+  );
+
+  const handleDragCancel = useCallback(() => {
+    setActiveBoardId(null);
+  }, []);
+
  if (boards.length === 0) {
    return (
      <>
@@ -47,7 +121,7 @@ export function BoardList() {
              <Plus className="size-4" />
              Create Board
            </Button>
-            <ImportExportButtons />
+            <ImportButton />
          </div>
        </motion.div>
        <NewBoardDialog open={dialogOpen} onOpenChange={setDialogOpen} />
@@ -55,16 +129,51 @@ export function BoardList() {
    );
  }

+  const activeBoard = activeBoardId
+    ? sortedBoards.find((b) => b.id === activeBoardId)
+    : null;
+
  return (
    <>
-      <div className="h-full overflow-y-auto p-6">
+      <OverlayScrollbarsComponent
+        className="h-full"
+        options={{ scrollbars: { theme: "os-theme-pylon", autoHide: "scroll", autoHideDelay: 600, clickScroll: true } }}
+        defer
+      >
+      <div className="p-6">
        {/* Heading row */}
        <div className="mb-4 flex items-center justify-between">
          <h2 className="font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary">
            Your Boards
          </h2>
          <div className="flex items-center gap-2">
-            <ImportExportButtons />
+            {/* Sort dropdown */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-pylon-text-secondary hover:text-pylon-text"
+                >
+                  <ArrowUpDown className="size-3.5" />
+                  <span className="font-mono text-xs">{SORT_LABELS[sortOrder]}</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuRadioGroup
+                  value={sortOrder}
+                  onValueChange={(v) => setSortOrder(v as BoardSortOrder)}
+                >
+                  {(Object.keys(SORT_LABELS) as BoardSortOrder[]).map((key) => (
+                    <DropdownMenuRadioItem key={key} value={key}>
+                      {SORT_LABELS[key]}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <ImportButton />
            <Button size="sm" onClick={() => setDialogOpen(true)}>
              <Plus className="size-4" />
              New
@@ -73,17 +182,35 @@ export function BoardList() {
        </div>

        {/* Board grid */}
-        <motion.div
-          className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-          variants={staggerContainer(0.05)}
-          initial="hidden"
-          animate="visible"
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+          onDragCancel={handleDragCancel}
        >
-          {boards.map((board) => (
-            <BoardCard key={board.id} board={board} />
-          ))}
-        </motion.div>
+          <SortableContext
+            items={sortedBoards.map((b) => b.id)}
+            strategy={rectSortingStrategy}
+          >
+            <motion.div
+              className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+              variants={staggerContainer(0.05)}
+              initial="hidden"
+              animate="visible"
+            >
+              {sortedBoards.map((board) => (
+                <BoardCard key={board.id} board={board} sortable={isManual} />
+              ))}
+            </motion.div>
+          </SortableContext>
+
+          <DragOverlay dropAnimation={null}>
+            {activeBoard ? <BoardCardOverlay board={activeBoard} /> : null}
+          </DragOverlay>
+        </DndContext>
      </div>
+      </OverlayScrollbarsComponent>

      <NewBoardDialog open={dialogOpen} onOpenChange={setDialogOpen} />
    </>
--- a/src/components/card-detail/LabelPicker.tsx
+++ b/src/components/card-detail/LabelPicker.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Plus, Check } from "lucide-react";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { Button } from "@/components/ui/button";
 import {
  Popover,
@@ -81,29 +82,35 @@ export function LabelPicker({

              {/* Existing labels */}
              {boardLabels.length > 0 && (
-                <div className="flex max-h-40 flex-col gap-1 overflow-y-auto">
-                  {boardLabels.map((label) => {
-                    const isSelected = cardLabelIds.includes(label.id);
-                    return (
-                      <button
-                        key={label.id}
-                        onClick={() => toggleCardLabel(cardId, label.id)}
-                        className="flex items-center gap-2 rounded px-2 py-1 text-left text-sm transition-colors hover:bg-pylon-column"
-                      >
-                        <span
-                          className="size-3 shrink-0 rounded-full"
-                          style={{ backgroundColor: label.color }}
-                        />
-                        <span className="flex-1 truncate text-pylon-text">
-                          {label.name}
-                        </span>
-                        {isSelected && (
-                          <Check className="size-3.5 shrink-0 text-pylon-accent" />
-                        )}
-                      </button>
-                    );
-                  })}
-                </div>
+                <OverlayScrollbarsComponent
+                  className="max-h-40"
+                  options={{ scrollbars: { theme: "os-theme-pylon", autoHide: "scroll", autoHideDelay: 600, clickScroll: true }, overflow: { x: "hidden" } }}
+                  defer
+                >
+                  <div className="flex flex-col gap-1">
+                    {boardLabels.map((label) => {
+                      const isSelected = cardLabelIds.includes(label.id);
+                      return (
+                        <button
+                          key={label.id}
+                          onClick={() => toggleCardLabel(cardId, label.id)}
+                          className="flex items-center gap-2 rounded px-2 py-1 text-left text-sm transition-colors hover:bg-pylon-column"
+                        >
+                          <span
+                            className="size-3 shrink-0 rounded-full"
+                            style={{ backgroundColor: label.color }}
+                          />
+                          <span className="flex-1 truncate text-pylon-text">
+                            {label.name}
+                          </span>
+                          {isSelected && (
+                            <Check className="size-3.5 shrink-0 text-pylon-accent" />
+                          )}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </OverlayScrollbarsComponent>
              )}

              {/* Create new label */}
--- a/src/components/card-detail/MarkdownEditor.tsx
+++ b/src/components/card-detail/MarkdownEditor.tsx
@@ -1,9 +1,14 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { Button } from "@/components/ui/button";
 import { useBoardStore } from "@/stores/board-store";

+const OS_OPTIONS = {
+  scrollbars: { theme: "os-theme-pylon" as const, autoHide: "scroll" as const, autoHideDelay: 600, clickScroll: true },
+};
+
 interface MarkdownEditorProps {
  cardId: string;
  value: string;
@@ -21,10 +26,13 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
    setDraft(value);
  }, [value]);

-  // Auto-focus textarea when switching to edit mode
+  // Auto-focus and auto-size textarea when switching to edit mode
  useEffect(() => {
    if (mode === "edit" && textareaRef.current) {
-      textareaRef.current.focus();
+      const el = textareaRef.current;
+      el.style.height = "auto";
+      el.style.height = el.scrollHeight + "px";
+      el.focus();
    }
  }, [mode]);

@@ -41,6 +49,10 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
    const text = e.target.value;
    setDraft(text);

+    // Auto-size textarea to fit content (parent OverlayScrollbars handles overflow)
+    e.target.style.height = "auto";
+    e.target.style.height = e.target.scrollHeight + "px";
+
    // Debounced auto-save
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => {
@@ -90,17 +102,25 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {

      {/* Editor / Preview */}
      {mode === "edit" ? (
-        <textarea
-          ref={textareaRef}
-          value={draft}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          placeholder="Add a description... (Markdown supported)"
-          className="min-h-[100px] max-h-[160px] w-full resize-y rounded-md border border-pylon-text-secondary/20 bg-pylon-surface px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
-        />
+        <OverlayScrollbarsComponent
+          className="max-h-[160px] rounded-md border border-pylon-text-secondary/20 bg-pylon-surface focus-within:border-pylon-accent focus-within:ring-1 focus-within:ring-pylon-accent"
+          options={{ ...OS_OPTIONS, overflow: { x: "hidden" as const } }}
+          defer
+        >
+          <textarea
+            ref={textareaRef}
+            value={draft}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            placeholder="Add a description... (Markdown supported)"
+            className="min-h-[100px] w-full resize-none overflow-hidden bg-transparent px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60"
+          />
+        </OverlayScrollbarsComponent>
      ) : (
-        <div
-          className="min-h-[100px] max-h-[160px] overflow-y-auto cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
+        <OverlayScrollbarsComponent
+          className="min-h-[100px] max-h-[160px] cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
+          options={{ ...OS_OPTIONS, overflow: { x: "hidden" as const } }}
+          defer
          onClick={() => setMode("edit")}
        >
          {draft ? (
@@ -114,7 +134,7 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
              Click to add a description...
            </p>
          )}
-        </div>
+        </OverlayScrollbarsComponent>
      )}
    </div>
  );
--- a/src/components/import-export/ImportExportButtons.tsx
+++ b/src/components/import-export/ImportExportButtons.tsx
@@ -1,60 +1,23 @@
 import { useRef } from "react";
-import { Download, Upload } from "lucide-react";
+import { Upload } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { useAppStore } from "@/stores/app-store";
 import { useBoardStore } from "@/stores/board-store";
 import { useToastStore } from "@/stores/toast-store";
 import { saveBoard } from "@/lib/storage";
 import {
-  exportBoardAsJson,
-  exportBoardAsCsv,
  importBoardFromJson,
  importFromTrelloJson,
 } from "@/lib/import-export";

-function downloadBlob(content: string, filename: string, mimeType: string) {
-  const blob = new Blob([content], { type: mimeType });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-}
-
-export function ImportExportButtons() {
+export function ImportButton() {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const addToast = useToastStore((s) => s.addToast);
-  const board = useBoardStore((s) => s.board);
  const refreshBoards = useAppStore((s) => s.refreshBoards);
  const setView = useAppStore((s) => s.setView);
  const addRecentBoard = useAppStore((s) => s.addRecentBoard);
  const openBoard = useBoardStore((s) => s.openBoard);

-  function handleExportJson() {
-    if (!board) return;
-    const json = exportBoardAsJson(board);
-    const safeName = board.title.replace(/[^a-zA-Z0-9-_]/g, "_");
-    downloadBlob(json, `${safeName}.json`, "application/json");
-    addToast("Board exported as JSON", "success");
-  }
-
-  function handleExportCsv() {
-    if (!board) return;
-    const csv = exportBoardAsCsv(board);
-    const safeName = board.title.replace(/[^a-zA-Z0-9-_]/g, "_");
-    downloadBlob(csv, `${safeName}.csv`, "text/csv");
-    addToast("Board exported as CSV", "success");
-  }
-
  function handleImportClick() {
    fileInputRef.current?.click();
  }
@@ -94,8 +57,7 @@ export function ImportExportButtons() {
  }

  return (
-    <div className="flex gap-2">
-      {/* Import button */}
+    <>
      <Button variant="outline" size="sm" onClick={handleImportClick}>
        <Upload className="size-4" />
        Import
@@ -107,24 +69,6 @@ export function ImportExportButtons() {
        onChange={handleFileSelected}
        className="hidden"
      />
-
-      {/* Export dropdown */}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline" size="sm" disabled={!board}>
-            <Download className="size-4" />
-            Export
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem onClick={handleExportJson}>
-            Export as JSON
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={handleExportCsv}>
-            Export as CSV
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
+    </>
  );
 }
--- a/src/components/settings/SettingsDialog.tsx
+++ b/src/components/settings/SettingsDialog.tsx
@@ -1,6 +1,6 @@
-import { useState } from "react";
+import { useState, useRef, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { springs, scaleIn, microInteraction } from "@/lib/motion";
+import { springs, microInteraction } from "@/lib/motion";
 import {
  Sun, Moon, Monitor, RotateCcw,
 } from "lucide-react";
@@ -94,45 +94,68 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
  const setDensity = useAppStore((s) => s.setDensity);
  const setDefaultColumnWidth = useAppStore((s) => s.setDefaultColumnWidth);

+  const roRef = useRef<ResizeObserver | null>(null);
+  const [height, setHeight] = useState<number | "auto">("auto");
+
+  // Callback ref: sets up ResizeObserver when dialog content mounts in portal
+  const contentRef = useCallback((node: HTMLDivElement | null) => {
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+    if (node) {
+      const measure = () => setHeight(node.getBoundingClientRect().height);
+      measure();
+      roRef.current = new ResizeObserver(measure);
+      roRef.current.observe(node);
+    }
+  }, []);
+
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-pylon-surface sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle className="font-heading text-pylon-text">
-            Settings
-          </DialogTitle>
-          <DialogDescription className="text-pylon-text-secondary">
-            Configure your OpenPylon preferences.
-          </DialogDescription>
-        </DialogHeader>
+      <DialogContent className="bg-pylon-surface sm:max-w-lg overflow-hidden p-0">
+        <motion.div
+          animate={{ height: typeof height === "number" && height > 0 ? height : "auto" }}
+          initial={false}
+          transition={{ type: "spring", stiffness: 500, damping: 30 }}
+          className="overflow-hidden"
+        >
+          <div ref={contentRef} className="flex flex-col gap-4 p-6">
+            <DialogHeader>
+              <DialogTitle className="font-heading text-pylon-text">
+                Settings
+              </DialogTitle>
+              <DialogDescription className="text-pylon-text-secondary">
+                Configure your OpenPylon preferences.
+              </DialogDescription>
+            </DialogHeader>

-        {/* Tab bar */}
-        <div className="flex gap-1 border-b border-border pb-2">
-          {TABS.map((t) => (
-            <Button
-              key={t.value}
-              variant={tab === t.value ? "secondary" : "ghost"}
-              size="sm"
-              onClick={() => setTab(t.value)}
-              className="font-mono text-xs"
-            >
-              {t.label}
-            </Button>
-          ))}
-        </div>
+            {/* Tab bar */}
+            <div className="flex gap-1 border-b border-border pb-2">
+              {TABS.map((t) => (
+                <Button
+                  key={t.value}
+                  variant={tab === t.value ? "secondary" : "ghost"}
+                  size="sm"
+                  onClick={() => setTab(t.value)}
+                  className="font-mono text-xs"
+                >
+                  {t.label}
+                </Button>
+              ))}
+            </div>

-        {/* Tab content */}
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={tab}
-            className="flex flex-col gap-5 pt-1"
-            variants={scaleIn}
-            initial="hidden"
-            animate="visible"
-            exit="exit"
-            transition={springs.snappy}
-          >
-          {tab === "appearance" && (
+            {/* Tab content — entire dialog height animates between tabs */}
+            <AnimatePresence mode="popLayout" initial={false}>
+              <motion.div
+                key={tab}
+                className="flex flex-col gap-5"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.15 }}
+              >
+              {tab === "appearance" && (
            <>
              {/* Theme */}
              <div>
@@ -292,8 +315,10 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
              </p>
            </div>
          )}
-          </motion.div>
-        </AnimatePresence>
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </motion.div>
      </DialogContent>
    </Dialog>
  );