@open-aippt/core 1.13.2

package/src/app/components/present/use-touch-swipe.ts

@@ -0,0 +1,66 @@
+import { type RefObject, useEffect, useRef } from 'react';
+
+const MIN_SWIPE_PX = 50;
+const MAX_SWIPE_MS = 600;
+
+type Options<T extends HTMLElement> = {
+  ref: RefObject<T | null>;
+  enabled?: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+};
+
+/**
+ * Single-finger horizontal swipe → prev/next. Vertical-dominant gestures
+ * are left alone so scroll-y on tablets keeps working. The handler only
+ * binds when `enabled`, so overlay layers can suppress it.
+ */
+export function useTouchSwipe<T extends HTMLElement>({
+  ref,
+  enabled = true,
+  onPrev,
+  onNext,
+}: Options<T>) {
+  const start = useRef<{ x: number; y: number; t: number } | null>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+
+    const onStart = (e: TouchEvent) => {
+      if (e.touches.length !== 1) {
+        start.current = null;
+        return;
+      }
+      const t = e.touches[0];
+      start.current = { x: t.clientX, y: t.clientY, t: performance.now() };
+    };
+    const onEnd = (e: TouchEvent) => {
+      const s = start.current;
+      start.current = null;
+      if (!s) return;
+      const t = e.changedTouches[0];
+      if (!t) return;
+      const dx = t.clientX - s.x;
+      const dy = t.clientY - s.y;
+      if (performance.now() - s.t > MAX_SWIPE_MS) return;
+      if (Math.abs(dx) < MIN_SWIPE_PX) return;
+      if (Math.abs(dx) <= Math.abs(dy)) return;
+      if (dx < 0) onNext();
+      else onPrev();
+    };
+
+    const onCancel = () => {
+      start.current = null;
+    };
+
+    el.addEventListener('touchstart', onStart, { passive: true });
+    el.addEventListener('touchend', onEnd);
+    el.addEventListener('touchcancel', onCancel);
+    return () => {
+      el.removeEventListener('touchstart', onStart);
+      el.removeEventListener('touchend', onEnd);
+      el.removeEventListener('touchcancel', onCancel);
+    };
+  }, [ref, enabled, onPrev, onNext]);
+}

package/src/app/components/shared-element.tsx

@@ -0,0 +1,48 @@
+import {
+  Children,
+  type CSSProperties,
+  cloneElement,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+
+export type unstable_SharedElementProps = {
+  id: string;
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+};
+
+type SharedElementChildProps = {
+  className?: string;
+  style?: CSSProperties;
+  'data-osd-shared-element'?: string;
+};
+
+export function unstable_SharedElement({
+  id,
+  children,
+  className,
+  style,
+}: unstable_SharedElementProps) {
+  const child = Children.toArray(children)[0] ?? null;
+
+  if (
+    Children.count(children) === 1 &&
+    isValidElement<SharedElementChildProps>(child) &&
+    typeof child.type === 'string'
+  ) {
+    return cloneElement(child as ReactElement<SharedElementChildProps>, {
+      'data-osd-shared-element': id,
+      className: [child.props.className, className].filter(Boolean).join(' ') || undefined,
+      style: style ? { ...child.props.style, ...style } : child.props.style,
+    });
+  }
+
+  return (
+    <div className={className} style={style} data-osd-shared-element={id}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,258 @@
+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 SLIDE_DND_MIME = 'application/x-slide-id';
+
+function useSlideDragActive() {
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    const onStart = (e: DragEvent) => {
+      if (e.dataTransfer?.types?.includes(SLIDE_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: 'draft';
+    }
+  | {
+      kind: 'themes';
+    }
+  | {
+      kind: 'assets';
+    };
+
+export function FolderItem({
+  row,
+  count,
+  selected,
+  onSelect,
+  onDropSlide,
+}: {
+  row: Row;
+  count: number;
+  selected: boolean;
+  onSelect: () => void;
+  onDropSlide: (slideId: 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 slideDragActive = useSlideDragActive();
+  const t = useLocale();
+
+  const acceptsSlideDrop = row.kind !== 'themes' && row.kind !== 'assets';
+  const isSlideDrag = (e: React.DragEvent) =>
+    acceptsSlideDrop && e.dataTransfer.types.includes(SLIDE_DND_MIME);
+  const handleDragEnter = (e: React.DragEvent) => {
+    if (!isSlideDrag(e)) return;
+    dragDepth.current += 1;
+    if (dragDepth.current === 1) setDragOver(true);
+  };
+  const handleDragOver = (e: React.DragEvent) => {
+    if (!isSlideDrag(e)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  };
+  const handleDragLeave = (e: React.DragEvent) => {
+    if (!isSlideDrag(e)) return;
+    dragDepth.current = Math.max(0, dragDepth.current - 1);
+    if (dragDepth.current === 0) setDragOver(false);
+  };
+  const handleDrop = (e: React.DragEvent) => {
+    if (!acceptsSlideDrop) return;
+    const slideId = e.dataTransfer.getData(SLIDE_DND_MIME);
+    dragDepth.current = 0;
+    setDragOver(false);
+    if (!slideId) return;
+    e.preventDefault();
+    onDropSlide(slideId);
+  };
+
+  const icon: FolderIcon =
+    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 === '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',
+        slideDragActive && acceptsSlideDrop && !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 asChild>
+            <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>
+          </PopoverTrigger>
+          <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 asChild>
+            <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>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="min-w-[140px]">
+            <DropdownMenuItem
+              onSelect={() => {
+                setDraftName(row.folder.name);
+                setRenaming(true);
+              }}
+            >
+              <Pencil />
+              {t.common.rename}
+            </DropdownMenuItem>
+            <DropdownMenuItem variant="destructive" onSelect={() => 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 = [
+  '#c0392b', // vermillion
+  '#b8743e', // ochre
+  '#6f7a3a', // olive
+  '#2f6a4f', // forest
+  '#3a5a7c', // ink blue
+  '#6b4675', // plum
+  '#a3543b', // terracotta
+  '#3a3a3a', // graphite
+];
+
+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/mobile-pill.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import type { FolderIcon } from '../../lib/sdk';
+import { FolderIconChip } from './folder-item';
+
+export function MobileFolderPill({
+  icon,
+  label,
+  count,
+  active,
+  onClick,
+}: {
+  icon: FolderIcon;
+  label: string;
+  count: number;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'flex shrink-0 items-center gap-1.5 rounded-[5px] border px-2.5 py-1 text-[11.5px] font-medium transition-colors',
+        active
+          ? 'border-foreground/40 bg-foreground text-background'
+          : 'border-border bg-card text-muted-foreground hover:text-foreground',
+      )}
+    >
+      <FolderIconChip icon={icon} className="size-3.5 text-sm" />
+      <span className="max-w-[8rem] truncate">{label}</span>
+      <span className="folio nums">{count.toString().padStart(2, '0')}</span>
+    </button>
+  );
+}

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

@@ -0,0 +1,105 @@
+import config from 'virtual:open-aippt/config';
+import { Loader2, RefreshCw } 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';
+
+type UpdateCheck = { current: string; latest: string | null; outdated: boolean };
+type UpdateStatus = 'idle' | 'running' | 'done' | 'error';
+
+export function SidebarFooter() {
+  const t = useLocale();
+  const [update, setUpdate] = useState<UpdateCheck | null>(null);
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatus>('idle');
+
+  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';
+
+  async function updatePackage() {
+    if (isUpdating) return;
+    setUpdateStatus('running');
+    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 delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>{versionRow}</TooltipTrigger>
+            <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"
+            >
+              <span className="pr-1 text-background/92">
+                {format(t.home.updateAvailable, { version: update.latest })}
+              </span>
+              <Button
+                type="button"
+                size="xs"
+                variant="secondary"
+                className="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"
+                disabled={isUpdating || updateStatus === 'done'}
+                onClick={updatePackage}
+              >
+                {isUpdating ? (
+                  <Loader2 className="animate-spin" aria-hidden />
+                ) : (
+                  <RefreshCw aria-hidden />
+                )}
+                {isUpdating ? t.home.updatingPackage : t.home.updatePackage}
+              </Button>
+              {updateStatus === 'done' && (
+                <span className="text-[11px] leading-4 text-background/65">
+                  {t.home.updatePackageDone}
+                </span>
+              )}
+              {updateStatus === 'error' && (
+                <span className="text-[11px] leading-4 text-background/65">
+                  {t.home.updatePackageFailed}
+                </span>
+              )}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        versionRow
+      )}
+    </div>
+  );
+}