@autono/open-pages 0.1.0

package/src/app/components/sidebar/folder-item.tsx

@@ -0,0 +1,269 @@
+import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { Folder, FolderIcon } from '@/lib/sdk';
+import { useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+import { IconPicker } from './icon-picker';
+
+export const DOC_DND_MIME = 'application/x-page-id';
+
+function useDocDragActive() {
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    const onStart = (e: DragEvent) => {
+      if (e.dataTransfer?.types?.includes(DOC_DND_MIME)) setActive(true);
+    };
+    const onEnd = () => setActive(false);
+    document.addEventListener('dragstart', onStart);
+    document.addEventListener('dragend', onEnd);
+    document.addEventListener('drop', onEnd);
+    return () => {
+      document.removeEventListener('dragstart', onStart);
+      document.removeEventListener('dragend', onEnd);
+      document.removeEventListener('drop', onEnd);
+    };
+  }, []);
+  return active;
+}
+
+export function FolderIconChip({ icon, className }: { icon: FolderIcon; className?: string }) {
+  if (icon.type === 'emoji') {
+    return (
+      <span
+        className={cn(
+          'inline-flex size-5 items-center justify-center text-[15px] leading-none',
+          className,
+        )}
+      >
+        {icon.value}
+      </span>
+    );
+  }
+  return (
+    <span
+      className={cn(
+        'inline-block size-3 rounded-[3px] ring-1 ring-foreground/15 shadow-[inset_0_1px_0_oklch(1_0_0/0.18)]',
+        className,
+      )}
+      style={{ background: icon.value }}
+    />
+  );
+}
+
+type Row =
+  | {
+      kind: 'folder';
+      folder: Folder;
+      onRename: (name: string) => void;
+      onChangeIcon: (icon: FolderIcon) => void;
+      onDelete: () => void;
+    }
+  | {
+      kind: 'all';
+    }
+  | {
+      kind: 'draft';
+    }
+  | {
+      kind: 'themes';
+    }
+  | {
+      kind: 'assets';
+    };
+
+export function FolderItem({
+  row,
+  count,
+  selected,
+  onSelect,
+  onDropDoc,
+}: {
+  row: Row;
+  count: number;
+  selected: boolean;
+  onSelect: () => void;
+  onDropDoc: (pageId: string) => void;
+}) {
+  const [renaming, setRenaming] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const dragDepth = useRef(0);
+  const [draftName, setDraftName] = useState(row.kind === 'folder' ? row.folder.name : '');
+  const docDragActive = useDocDragActive();
+  const t = useLocale();
+
+  const acceptsDocDrop = row.kind === 'draft' || row.kind === 'folder';
+  const isDocDrag = (e: React.DragEvent) =>
+    acceptsDocDrop && e.dataTransfer.types.includes(DOC_DND_MIME);
+  const handleDragEnter = (e: React.DragEvent) => {
+    if (!isDocDrag(e)) return;
+    dragDepth.current += 1;
+    if (dragDepth.current === 1) setDragOver(true);
+  };
+  const handleDragOver = (e: React.DragEvent) => {
+    if (!isDocDrag(e)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  };
+  const handleDragLeave = (e: React.DragEvent) => {
+    if (!isDocDrag(e)) return;
+    dragDepth.current = Math.max(0, dragDepth.current - 1);
+    if (dragDepth.current === 0) setDragOver(false);
+  };
+  const handleDrop = (e: React.DragEvent) => {
+    if (!acceptsDocDrop) return;
+    const pageId = e.dataTransfer.getData(DOC_DND_MIME);
+    dragDepth.current = 0;
+    setDragOver(false);
+    if (!pageId) return;
+    e.preventDefault();
+    onDropDoc(pageId);
+  };
+
+  const icon: FolderIcon =
+    row.kind === 'all'
+      ? { type: 'emoji', value: '🎞️' }
+      : row.kind === 'draft'
+        ? { type: 'emoji', value: '📝' }
+        : row.kind === 'themes'
+          ? { type: 'emoji', value: '🎨' }
+          : row.kind === 'assets'
+            ? { type: 'emoji', value: '🗂️' }
+            : row.folder.icon;
+  const label =
+    row.kind === 'all'
+      ? t.home.pages
+      : row.kind === 'draft'
+        ? t.home.draft
+        : row.kind === 'themes'
+          ? t.home.themes
+          : row.kind === 'assets'
+            ? t.home.assets
+            : row.folder.name;
+
+  const commitRename = () => {
+    if (row.kind !== 'folder') return;
+    const trimmed = draftName.trim();
+    if (trimmed && trimmed !== row.folder.name) row.onRename(trimmed);
+    setRenaming(false);
+  };
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop target wraps interactive children
+    <div
+      className={cn(
+        'group relative flex items-center gap-2.5 rounded-[5px] px-2 py-[5px] text-[12.5px] transition-colors',
+        selected
+          ? 'bg-muted text-foreground before:absolute before:inset-y-1.5 before:-left-0.5 before:w-[2px] before:rounded-full before:bg-brand'
+          : 'text-foreground/70 hover:bg-muted/60 hover:text-foreground',
+        docDragActive && acceptsDocDrop && !dragOver && 'ring-1 ring-foreground/10',
+        dragOver &&
+          'bg-brand/10 text-foreground ring-1 ring-brand ring-offset-1 ring-offset-sidebar motion-safe:scale-[1.01] motion-safe:transition-transform',
+      )}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {row.kind === 'folder' && import.meta.env.DEV ? (
+        <Popover>
+          <PopoverTrigger
+            render={
+              <button
+                type="button"
+                className="flex size-5 shrink-0 items-center justify-center rounded transition-transform hover:scale-110"
+                aria-label={t.home.changeIcon}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <FolderIconChip icon={icon} />
+              </button>
+            }
+          />
+          <PopoverContent side="right" align="start" className="w-auto p-2">
+            <IconPicker value={row.folder.icon} onChange={(next) => row.onChangeIcon(next)} />
+          </PopoverContent>
+        </Popover>
+      ) : (
+        <button
+          type="button"
+          onClick={onSelect}
+          aria-label={label}
+          className="flex size-5 shrink-0 items-center justify-center"
+        >
+          <FolderIconChip icon={icon} />
+        </button>
+      )}
+
+      {renaming && row.kind === 'folder' ? (
+        <input
+          value={draftName}
+          onChange={(e) => setDraftName(e.target.value)}
+          onBlur={commitRename}
+          onKeyDown={(e) => {
+            if (e.nativeEvent.isComposing) return;
+            if (e.key === 'Enter') commitRename();
+            if (e.key === 'Escape') {
+              setDraftName(row.folder.name);
+              setRenaming(false);
+            }
+          }}
+          maxLength={40}
+          className="min-w-0 flex-1 rounded-[3px] bg-card px-1 text-[12.5px] outline-none ring-1 ring-foreground/20"
+        />
+      ) : (
+        <button type="button" onClick={onSelect} className="min-w-0 flex-1 truncate text-left">
+          {label}
+        </button>
+      )}
+
+      <span
+        className={cn(
+          'folio ml-auto shrink-0 transition-opacity',
+          row.kind === 'folder' &&
+            import.meta.env.DEV &&
+            'group-hover:opacity-0 group-has-[[aria-expanded=true]]:opacity-0',
+        )}
+      >
+        {count.toString().padStart(2, '0')}
+      </span>
+
+      {row.kind === 'folder' && import.meta.env.DEV && (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <button
+                type="button"
+                onClick={(e) => e.stopPropagation()}
+                className="absolute right-2 top-1/2 size-5 -translate-y-1/2 rounded opacity-0 transition-opacity hover:bg-foreground/10 group-hover:opacity-100 aria-expanded:opacity-100"
+                aria-label={t.home.folderActions}
+              >
+                <MoreHorizontal className="mx-auto size-3.5" />
+              </button>
+            }
+          />
+          <DropdownMenuContent align="end" className="min-w-[140px]">
+            <DropdownMenuItem
+              onClick={() => {
+                setDraftName(row.folder.name);
+                setRenaming(true);
+              }}
+            >
+              <Pencil />
+              {t.common.rename}
+            </DropdownMenuItem>
+            <DropdownMenuItem variant="destructive" onClick={() => row.onDelete()}>
+              <Trash2 />
+              {t.common.delete}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  );
+}

package/src/app/components/sidebar/icon-picker.tsx

@@ -0,0 +1,61 @@
+import EmojiPicker, { EmojiStyle, Theme } from 'emoji-picker-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import type { FolderIcon } from '@/lib/sdk';
+import { useLocale } from '@/lib/use-locale';
+
+export const PRESET_COLORS = [
+  '#e5484d', // red
+  '#f76b15', // orange
+  '#ffb224', // amber
+  '#30a46c', // green
+  '#12a594', // teal
+  '#0091ff', // blue
+  '#6e56cf', // violet
+  '#60646c', // gray
+];
+
+export function IconPicker({
+  value,
+  onChange,
+}: {
+  value: FolderIcon;
+  onChange: (icon: FolderIcon) => void;
+}) {
+  const t = useLocale();
+  return (
+    <Tabs defaultValue={value.type} className="w-[320px]">
+      <TabsList className="w-full">
+        <TabsTrigger value="emoji">{t.home.iconEmojiTab}</TabsTrigger>
+        <TabsTrigger value="color">{t.home.iconColorTab}</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="emoji">
+        <EmojiPicker
+          lazyLoadEmojis
+          emojiStyle={EmojiStyle.NATIVE}
+          theme={Theme.AUTO}
+          width="100%"
+          height={360}
+          onEmojiClick={(data) => onChange({ type: 'emoji', value: data.emoji })}
+          previewConfig={{ showPreview: false }}
+          skinTonesDisabled
+        />
+      </TabsContent>
+
+      <TabsContent value="color">
+        <div className="grid grid-cols-8 gap-1.5 py-2">
+          {PRESET_COLORS.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => onChange({ type: 'color', value: c })}
+              className="size-6 rounded-[4px] ring-1 ring-foreground/10 shadow-[inset_0_1px_0_oklch(1_0_0/0.18)] transition-transform hover:scale-110"
+              style={{ background: c }}
+              aria-label={c}
+            />
+          ))}
+        </div>
+      </TabsContent>
+    </Tabs>
+  );
+}

package/src/app/components/sidebar/sidebar-footer.tsx

@@ -0,0 +1,139 @@
+import config from 'virtual:open-pages/config';
+import { Loader2, RefreshCw, RotateCw } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { format, useLocale } from '@/lib/use-locale';
+import { useRestartServer } from '@/lib/use-restart-server';
+
+type UpdateCheck = { current: string; latest: string | null; outdated: boolean };
+type UpdateStatus = 'idle' | 'running' | 'done' | 'error';
+
+const buttonClassName =
+  'h-6 w-fit rounded-[5px] border border-background/15 bg-background/8 px-2 text-[11px] text-background shadow-none hover:bg-background/14';
+
+export function SidebarFooter() {
+  const t = useLocale();
+  const [update, setUpdate] = useState<UpdateCheck | null>(null);
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatus>('idle');
+  const { canRestart, restarting, restartServer } = useRestartServer();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    let cancelled = false;
+    fetch('/__update-check')
+      .then((res) => (res.ok ? (res.json() as Promise<UpdateCheck>) : null))
+      .then((data) => {
+        if (!cancelled && data?.outdated) setUpdate(data);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const label = `v${config.version}`;
+  const isUpdating = updateStatus === 'running';
+  const keepOpen = updateStatus === 'running' || restarting;
+
+  async function updatePackage() {
+    if (isUpdating) return;
+    setUpdateStatus('running');
+    setOpen(true);
+    try {
+      const res = await fetch('/__update-package', { method: 'POST' });
+      if (!res.ok) throw new Error('update failed');
+      setUpdateStatus('done');
+      toast.success(t.home.updatePackageDone);
+    } catch {
+      setUpdateStatus('error');
+      toast.error(t.home.updatePackageFailed);
+    }
+  }
+
+  const versionRow = (
+    <span className="inline-flex cursor-default items-center gap-1.5">
+      {update?.latest && <span className="size-1.5 rounded-full bg-brand" aria-hidden />}
+      {label}
+    </span>
+  );
+
+  return (
+    <div className="px-4 py-3 text-[11px] text-muted-foreground/70 tabular-nums">
+      {update?.latest ? (
+        <TooltipProvider delay={200}>
+          <Tooltip
+            open={open}
+            onOpenChange={(next) => {
+              if (!next && keepOpen) return;
+              setOpen(next);
+            }}
+          >
+            <TooltipTrigger render={versionRow} />
+            <TooltipContent
+              side="top"
+              align="start"
+              alignOffset={-8}
+              sideOffset={9}
+              collisionPadding={12}
+              className="flex w-[232px] max-w-[calc(100vw-24px)] flex-col gap-2.5 rounded-[8px] border border-background/10 bg-foreground/95 p-2.5 text-[11.5px] leading-4 shadow-[0_12px_32px_oklch(0_0_0/0.28)] backdrop-blur"
+            >
+              {updateStatus === 'done' ? (
+                <>
+                  <span className="pr-1 text-background/92">{t.home.updatePackageDone}</span>
+                  {canRestart && (
+                    <Button
+                      type="button"
+                      size="xs"
+                      variant="secondary"
+                      className={buttonClassName}
+                      disabled={restarting}
+                      onClick={restartServer}
+                    >
+                      {restarting ? (
+                        <Loader2 className="animate-spin" aria-hidden />
+                      ) : (
+                        <RotateCw aria-hidden />
+                      )}
+                      {restarting ? t.home.restartingServer : t.home.restartServer}
+                    </Button>
+                  )}
+                </>
+              ) : (
+                <>
+                  <span className="pr-1 text-background/92">
+                    {format(t.home.updateAvailable, { version: update.latest })}
+                  </span>
+                  <Button
+                    type="button"
+                    size="xs"
+                    variant="secondary"
+                    className={buttonClassName}
+                    disabled={isUpdating}
+                    onClick={updatePackage}
+                  >
+                    {isUpdating ? (
+                      <Loader2 className="animate-spin" aria-hidden />
+                    ) : (
+                      <RefreshCw aria-hidden />
+                    )}
+                    {isUpdating ? t.home.updatingPackage : t.home.updatePackage}
+                  </Button>
+                  {updateStatus === 'error' && (
+                    <span className="text-[11px] leading-4 text-background/65">
+                      {t.home.updatePackageFailed}
+                    </span>
+                  )}
+                </>
+              )}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        versionRow
+      )}
+    </div>
+  );
+}