@open-slide/core 0.0.1 → 0.0.3

package/src/app/components/sidebar/FolderItem.tsx

@@ -0,0 +1,191 @@
+import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import type { Folder, FolderIcon } from '@/lib/sdk';
+import { cn } from '@/lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { IconPicker } from './IconPicker';
+
+export const SLIDE_DND_MIME = 'application/x-slide-id';
+
+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-base leading-none',
+          className,
+        )}
+      >
+        {icon.value}
+      </span>
+    );
+  }
+  return (
+    <span
+      className={cn('inline-block size-4 rounded-[4px] ring-1 ring-black/10', className)}
+      style={{ background: icon.value }}
+    />
+  );
+}
+
+type Row =
+  | {
+      kind: 'folder';
+      folder: Folder;
+      onRename: (name: string) => void;
+      onChangeIcon: (icon: FolderIcon) => void;
+      onDelete: () => void;
+    }
+  | {
+      kind: 'draft';
+    };
+
+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 [draftName, setDraftName] = useState(row.kind === 'folder' ? row.folder.name : '');
+
+  const handleDragOver = (e: React.DragEvent) => {
+    if (e.dataTransfer.types.includes(SLIDE_DND_MIME)) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      setDragOver(true);
+    }
+  };
+  const handleDragLeave = () => setDragOver(false);
+  const handleDrop = (e: React.DragEvent) => {
+    const slideId = e.dataTransfer.getData(SLIDE_DND_MIME);
+    setDragOver(false);
+    if (!slideId) return;
+    e.preventDefault();
+    onDropSlide(slideId);
+  };
+
+  const icon =
+    row.kind === 'draft' ? ({ type: 'emoji', value: '📝' } satisfies FolderIcon) : row.folder.icon;
+  const label = row.kind === 'draft' ? 'Draft' : 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 (
+    <div
+      className={cn(
+        'group relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+        selected ? 'bg-muted text-foreground' : 'text-foreground/80 hover:bg-muted/60',
+        dragOver && 'ring-2 ring-primary ring-offset-1 ring-offset-background',
+      )}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {row.kind === 'folder' ? (
+        <Popover>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className="flex size-5 shrink-0 items-center justify-center rounded transition-transform hover:scale-110"
+              aria-label="Change icon"
+              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>
+      ) : (
+        <span className="flex size-5 shrink-0 items-center justify-center">
+          <FolderIconChip icon={icon} />
+        </span>
+      )}
+
+      {renaming && row.kind === 'folder' ? (
+        <input
+          autoFocus
+          value={draftName}
+          onChange={(e) => setDraftName(e.target.value)}
+          onBlur={commitRename}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') commitRename();
+            if (e.key === 'Escape') {
+              setDraftName(row.folder.name);
+              setRenaming(false);
+            }
+          }}
+          maxLength={40}
+          className="min-w-0 flex-1 rounded-sm bg-background px-1 text-sm outline-none ring-1 ring-ring/40"
+        />
+      ) : (
+        <button type="button" onClick={onSelect} className="min-w-0 flex-1 truncate text-left">
+          {label}
+        </button>
+      )}
+
+      <span
+        className={cn(
+          'shrink-0 text-xs tabular-nums text-muted-foreground',
+          count === 0 && 'opacity-0 group-hover:opacity-100',
+        )}
+      >
+        {count}
+      </span>
+
+      {row.kind === 'folder' && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              onClick={(e) => e.stopPropagation()}
+              className="size-5 shrink-0 rounded opacity-0 transition-opacity hover:bg-muted-foreground/10 group-hover:opacity-100 aria-expanded:opacity-100"
+              aria-label="Folder actions"
+            >
+              <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 />
+              Rename
+            </DropdownMenuItem>
+            <DropdownMenuItem variant="destructive" onSelect={() => row.onDelete()}>
+              <Trash2 />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  );
+}

package/src/app/components/sidebar/IconPicker.tsx

@@ -0,0 +1,59 @@
+import EmojiPicker, { EmojiStyle, Theme } from 'emoji-picker-react';
+import type { FolderIcon } from '@/lib/sdk';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+export const PRESET_COLORS = [
+  '#8b5cf6',
+  '#6366f1',
+  '#3b82f6',
+  '#10b981',
+  '#f59e0b',
+  '#ef4444',
+  '#ec4899',
+  '#64748b',
+];
+
+export function IconPicker({
+  value,
+  onChange,
+}: {
+  value: FolderIcon;
+  onChange: (icon: FolderIcon) => void;
+}) {
+  return (
+    <Tabs defaultValue={value.type} className="w-[320px]">
+      <TabsList className="w-full">
+        <TabsTrigger value="emoji">Emoji</TabsTrigger>
+        <TabsTrigger value="color">Color</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-md ring-1 ring-black/10 transition-transform hover:scale-110"
+              style={{ background: c }}
+              aria-label={c}
+            />
+          ))}
+        </div>
+      </TabsContent>
+    </Tabs>
+  );
+}

package/src/app/components/sidebar/Sidebar.tsx

@@ -0,0 +1,118 @@
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import type { Folder, FolderIcon } from '@/lib/sdk';
+import { FolderItem } from './FolderItem';
+import { PRESET_COLORS } from './IconPicker';
+
+export const DRAFT_ID = 'draft';
+
+export function Sidebar({
+  folders,
+  countFor,
+  selectedId,
+  onSelect,
+  onCreate,
+  onRename,
+  onChangeIcon,
+  onDelete,
+  onDropToFolder,
+  onDropToDraft,
+}: {
+  folders: Folder[];
+  countFor: (folderId: string | null) => number;
+  selectedId: string;
+  onSelect: (id: string) => void;
+  onCreate: (name: string, icon: FolderIcon) => Promise<Folder> | void;
+  onRename: (id: string, name: string) => void;
+  onChangeIcon: (id: string, icon: FolderIcon) => void;
+  onDelete: (id: string) => void;
+  onDropToFolder: (folderId: string, slideId: string) => void;
+  onDropToDraft: (slideId: string) => void;
+}) {
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+
+  const commitCreate = () => {
+    const trimmed = newName.trim();
+    if (!trimmed) {
+      setCreating(false);
+      setNewName('');
+      return;
+    }
+    const color = PRESET_COLORS[folders.length % PRESET_COLORS.length];
+    onCreate(trimmed, { type: 'color', value: color });
+    setNewName('');
+    setCreating(false);
+  };
+
+  return (
+    <aside className="flex h-full w-[17rem] shrink-0 flex-col border-r bg-card/40">
+      <div className="px-5 pt-6 pb-3">
+        <h1 className="font-heading text-lg font-bold tracking-tight">open-slide</h1>
+      </div>
+
+      <div className="px-2">
+        <FolderItem
+          row={{ kind: 'draft' }}
+          count={countFor(null)}
+          selected={selectedId === DRAFT_ID}
+          onSelect={() => onSelect(DRAFT_ID)}
+          onDropSlide={onDropToDraft}
+        />
+      </div>
+
+      <div className="mt-4 px-4 pb-1 text-xs font-medium tracking-wide text-muted-foreground/70">
+        FOLDERS
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-2 pb-2">
+        {folders.map((folder) => (
+          <FolderItem
+            key={folder.id}
+            row={{
+              kind: 'folder',
+              folder,
+              onRename: (name) => onRename(folder.id, name),
+              onChangeIcon: (icon) => onChangeIcon(folder.id, icon),
+              onDelete: () => onDelete(folder.id),
+            }}
+            count={countFor(folder.id)}
+            selected={selectedId === folder.id}
+            onSelect={() => onSelect(folder.id)}
+            onDropSlide={(slideId) => onDropToFolder(folder.id, slideId)}
+          />
+        ))}
+
+        {creating ? (
+          <div className="mt-1 flex items-center gap-2 rounded-md border border-dashed bg-background px-2 py-1.5">
+            <input
+              autoFocus
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              onBlur={commitCreate}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') commitCreate();
+                if (e.key === 'Escape') {
+                  setCreating(false);
+                  setNewName('');
+                }
+              }}
+              placeholder="Folder name"
+              maxLength={40}
+              className="min-w-0 flex-1 bg-transparent text-sm outline-none"
+            />
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setCreating(true)}
+            className="mt-1 flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-border/70 px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 hover:text-foreground"
+          >
+            <Plus className="size-3.5" />
+            Add folder
+          </button>
+        )}
+      </div>
+    </aside>
+  );
+}

package/src/app/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}