@knotpad/app 0.1.0 → 0.1.2

package/components/notes/note-editor-dropdowns.tsx

@@ -1,484 +0,0 @@
-"use client";
-
-import React, { useRef } from "react";
-import {
-  Brackets, Parentheses, AtSign, CalendarDays, Flag,
-} from "lucide-react";
-import type { Member, NoteRef, TaskRef, SlashCommandId, PriorityLevel } from "./note-types";
-import { SLASH_COMMANDS, TEMPLATES, PRIORITY_LEVELS } from "./note-types";
-
-// Shared type for optional position — when absent, renders in bottom-sheet mode.
-type DropdownPos = { top: number; left: number };
-
-// Touch helpers: distinguish a tap (select) from a scroll-drag (let it scroll).
-// onTouchStart records the start position without preventDefault, so native
-// scrolling still works; onTouchEnd only fires the pick if the touch didn't move.
-const TAP_MOVE_THRESHOLD = 10;
-
-function useTapHandlers<T>(onPick: (value: T) => void) {
-  const startPos = useRef<{ x: number; y: number } | null>(null);
-
-  return (value: T) => ({
-    onMouseDown: (e: React.MouseEvent) => { e.preventDefault(); onPick(value); },
-    onTouchStart: (e: React.TouchEvent) => {
-      const t = e.touches[0];
-      startPos.current = { x: t.clientX, y: t.clientY };
-    },
-    onTouchMove: (e: React.TouchEvent) => {
-      if (!startPos.current) return;
-      const t = e.touches[0];
-      const dx = Math.abs(t.clientX - startPos.current.x);
-      const dy = Math.abs(t.clientY - startPos.current.y);
-      if (dx > TAP_MOVE_THRESHOLD || dy > TAP_MOVE_THRESHOLD) startPos.current = null;
-    },
-    onTouchEnd: (e: React.TouchEvent) => {
-      if (!startPos.current) return;
-      startPos.current = null;
-      e.preventDefault();
-      onPick(value);
-    },
-  });
-}
-
-// ── Slash command palette ────────────────────────────────────────────────────
-export function SlashPalette({
-  suggestions,
-  activeIndex,
-  pos,
-  onPick,
-}: {
-  suggestions: typeof SLASH_COMMANDS;
-  activeIndex: number;
-  pos?: DropdownPos;
-  onPick: (id: SlashCommandId) => void;
-}) {
-  const tapHandlers = useTapHandlers(onPick);
-
-  return (
-    <div
-      className={pos
-        ? "absolute z-30 w-72 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl overflow-hidden"
-        : "w-full rounded-lg border border-zinc-700 bg-zinc-900 overflow-hidden"
-      }
-      style={pos ? { top: pos.top, left: pos.left } : undefined}
-    >
-      <div className="border-b border-zinc-800 px-3 py-1.5">
-        <span className="text-xs text-zinc-600">Commands · ↑↓ navigate · Enter to insert</span>
-      </div>
-      <div className="max-h-64 overflow-y-auto">
-        {suggestions.map((cmd, idx) => (
-          <button
-            key={cmd.id}
-            {...tapHandlers(cmd.id)}
-            className={`flex w-full items-center gap-3 px-3 py-2 text-sm text-left transition-colors ${
-              idx === activeIndex ? "bg-zinc-700 text-zinc-100" : "text-zinc-300 hover:bg-zinc-800"
-            }`}
-          >
-            <span className="flex w-6 shrink-0 items-center justify-center text-xs font-mono text-zinc-500">
-              {cmd.icon}
-            </span>
-            <span className="font-medium">{cmd.label}</span>
-            <span className="ml-auto text-xs text-zinc-600 truncate">{cmd.hint}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// ── @mention dropdown ────────────────────────────────────────────────────────
-export function MentionDropdown({
-  suggestions,
-  activeIndex,
-  pos,
-  onPick,
-}: {
-  suggestions: Member[];
-  activeIndex: number;
-  pos?: DropdownPos;
-  onPick: (handle: string) => void;
-}) {
-  const tapHandlers = useTapHandlers(onPick);
-
-  return (
-    <div
-      className={pos
-        ? "absolute z-30 w-64 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl overflow-hidden"
-        : "w-full rounded-lg border border-zinc-700 bg-zinc-900 overflow-hidden"
-      }
-      style={pos ? { top: pos.top, left: pos.left } : undefined}
-    >
-      <div className="max-h-64 overflow-y-auto">
-        {suggestions.map((s, idx) => (
-          <button
-            key={s.handle}
-            {...tapHandlers(s.handle)}
-            className={`flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${
-              idx === activeIndex ? "bg-zinc-700 text-zinc-100" : "text-zinc-300 hover:bg-zinc-800"
-            }`}
-          >
-            <span className={s.isAgent ? "text-blue-400" : "text-zinc-400"}>{s.handle}</span>
-            {s.isAgent ? (
-              <span className="text-xs text-zinc-600 ml-auto">agent</span>
-            ) : (
-              <span className="text-xs text-zinc-500 truncate">{s.label}</span>
-            )}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// ── !priority picker ─────────────────────────────────────────────────────────
-export function PriorityPickerDropdown({
-  suggestions,
-  activeIndex,
-  pos,
-  onPick,
-}: {
-  suggestions: typeof PRIORITY_LEVELS;
-  activeIndex: number;
-  pos?: DropdownPos;
-  onPick: (level: PriorityLevel) => void;
-}) {
-  const tapHandlers = useTapHandlers(onPick);
-
-  return (
-    <div
-      className={pos
-        ? "absolute z-30 w-52 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl overflow-hidden"
-        : "w-full rounded-lg border border-zinc-700 bg-zinc-900 overflow-hidden"
-      }
-      style={pos ? { top: pos.top, left: pos.left } : undefined}
-    >
-      <div className="border-b border-zinc-800 px-3 py-1.5">
-        <span className="text-xs text-zinc-600">! Set priority · ↑↓ navigate · Enter to insert</span>
-      </div>
-      <div className="max-h-64 overflow-y-auto">
-        {suggestions.map((level, idx) => (
-          <button
-            key={level.id}
-            {...tapHandlers(level.id)}
-            className={`flex w-full items-center gap-3 px-3 py-2 text-sm text-left transition-colors ${
-              idx === activeIndex ? "bg-zinc-700 text-zinc-100" : "text-zinc-300 hover:bg-zinc-800"
-            }`}
-          >
-            <Flag size={14} className={level.color} />
-            <span>{level.label}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// ── [[note]] link picker ─────────────────────────────────────────────────────
-export function NotePickerDropdown({
-  suggestions,
-  activeIndex,
-  pos,
-  onPick,
-}: {
-  suggestions: NoteRef[];
-  activeIndex: number;
-  pos?: DropdownPos;
-  onPick: (n: NoteRef) => void;
-}) {
-  const tapHandlers = useTapHandlers(onPick);
-
-  return (
-    <div
-      className={pos
-        ? "absolute z-30 w-72 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl overflow-hidden"
-        : "w-full rounded-lg border border-zinc-700 bg-zinc-900 overflow-hidden"
-      }
-      style={pos ? { top: pos.top, left: pos.left } : undefined}
-    >
-      <div className="border-b border-zinc-800 px-3 py-1.5">
-        <span className="text-xs text-zinc-600">[[ Link note · ↑↓ navigate · Enter to insert</span>
-      </div>
-      {suggestions.length === 0 ? (
-        <p className="px-3 py-2 text-xs text-zinc-600">No notes found</p>
-      ) : (
-        <div className="max-h-64 overflow-y-auto">
-          {suggestions.map((n, idx) => (
-            <button
-              key={n.id}
-              {...tapHandlers(n)}
-              className={`flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${
-                idx === activeIndex ? "bg-zinc-700 text-zinc-100" : "text-zinc-300 hover:bg-zinc-800"
-              }`}
-            >
-              <span className="text-violet-400">[[</span>
-              <span className="flex-1 truncate">{n.title}</span>
-              <span className="text-violet-400">]]</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── ((task)) reference picker ────────────────────────────────────────────────
-export function TaskPickerDropdown({
-  suggestions,
-  activeIndex,
-  pos,
-  onPick,
-}: {
-  suggestions: TaskRef[];
-  activeIndex: number;
-  pos?: DropdownPos;
-  onPick: (t: TaskRef) => void;
-}) {
-  const tapHandlers = useTapHandlers(onPick);
-
-  return (
-    <div
-      className={pos
-        ? "absolute z-30 w-72 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl overflow-hidden"
-        : "w-full rounded-lg border border-zinc-700 bg-zinc-900 overflow-hidden"
-      }
-      style={pos ? { top: pos.top, left: pos.left } : undefined}
-    >
-      <div className="border-b border-zinc-800 px-3 py-1.5">
-        <span className="text-xs text-zinc-600">(( Link task · ↑↓ navigate · Enter to insert</span>
-      </div>
-      {suggestions.length === 0 ? (
-        <p className="px-3 py-2 text-xs text-zinc-600">No tasks found</p>
-      ) : (
-        <div className="max-h-64 overflow-y-auto">
-          {suggestions.slice(0, 8).map((t, idx) => (
-            <button
-              key={t.id}
-              {...tapHandlers(t)}
-              className={`flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${
-                idx === activeIndex ? "bg-zinc-700 text-zinc-100" : "text-zinc-300 hover:bg-zinc-800"
-              }`}
-            >
-              <span className="text-amber-400 shrink-0">((</span>
-              <span className="flex-1 truncate">{t.title}</span>
-              <span className="text-xs text-zinc-600 shrink-0 truncate max-w-[80px]">{t.noteTitle}</span>
-              <span className="text-amber-400 shrink-0">))</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── + quick-pick (note / task / person / date / priority) ────────────────────
-export function PlusPickerDropdown({
-  pos,
-  onPick,
-}: {
-  pos?: DropdownPos;
-  onPick: (option: "note" | "task" | "person" | "date" | "priority") => void;
-}) {
-  return (
-    <div
-      className={pos
-        ? "absolute z-30 w-52 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl overflow-hidden"
-        : "w-full rounded-lg border border-zinc-700 bg-zinc-900 overflow-hidden"
-      }
-      style={pos ? { top: pos.top, left: pos.left } : undefined}
-    >
-      <div className="border-b border-zinc-800 px-3 py-1.5">
-        <span className="text-xs text-zinc-600">Insert · press 1 / 2 / 3 / 4 / 5</span>
-      </div>
-      {([
-        { key: "1", label: "Link note",   icon: <Brackets size={14} />,     option: "note" as const },
-        { key: "2", label: "Link task",   icon: <Parentheses size={14} />,  option: "task" as const },
-        { key: "3", label: "Mention",     icon: <AtSign size={14} />,       option: "person" as const },
-        { key: "4", label: "Insert date", icon: <CalendarDays size={14} />, option: "date" as const },
-        { key: "5", label: "Priority",    icon: <Flag size={14} />,         option: "priority" as const },
-      ]).map(({ key, label, icon, option }) => (
-        <button
-          key={key}
-          onMouseDown={(e) => { e.preventDefault(); onPick(option); }}
-          onTouchStart={(e) => { e.preventDefault(); onPick(option); }}
-          className="flex w-full items-center gap-3 px-3 py-2 text-sm text-left text-zinc-300 hover:bg-zinc-800 transition-colors"
-        >
-          <span className="flex w-6 shrink-0 items-center justify-center text-zinc-400">{icon}</span>
-          <span>{label}</span>
-          <span className="ml-auto text-xs text-zinc-700">{key}</span>
-        </button>
-      ))}
-    </div>
-  );
-}
-
-// ── Inline date / date-range picker ──────────────────────────────────────────
-export function DatePickerDropdown({
-  pos,
-  startDate,
-  endDate,
-  onStartChange,
-  onEndChange,
-  onConfirm,
-  onCancel,
-}: {
-  pos?: DropdownPos;
-  startDate: string;
-  endDate: string;
-  onStartChange: (v: string) => void;
-  onEndChange: (v: string) => void;
-  onConfirm: () => void;
-  onCancel: () => void;
-}) {
-  return (
-    <div
-      className={pos
-        ? "absolute z-30 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl p-3 flex flex-col gap-3 w-64"
-        : "w-full rounded-lg border border-zinc-700 bg-zinc-900 p-4 flex flex-col gap-4"
-      }
-      style={pos ? { top: pos.top, left: pos.left } : undefined}
-    >
-      <span className={pos ? "text-xs font-medium text-zinc-400" : "text-sm font-medium text-zinc-400"}>
-        Pick a date or range
-      </span>
-
-      <div className="flex flex-col gap-1.5">
-        <label className="text-[10px] text-zinc-600 uppercase tracking-wider">Start</label>
-        <input
-          autoFocus
-          type="date"
-          value={startDate}
-          onChange={(e) => {
-            onStartChange(e.target.value);
-            if (endDate && e.target.value > endDate) onEndChange("");
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") onConfirm();
-            if (e.key === "Escape") onCancel();
-          }}
-          className={pos
-            ? "rounded bg-zinc-800 px-2 py-1.5 text-sm text-zinc-100 outline-none ring-1 ring-zinc-700 focus:ring-blue-500 [color-scheme:dark] w-full"
-            : "rounded bg-zinc-800 px-3 py-3 text-base text-zinc-100 outline-none ring-1 ring-zinc-700 focus:ring-blue-500 [color-scheme:dark] w-full"
-          }
-        />
-      </div>
-
-      <div className="flex flex-col gap-1.5">
-        <label className="text-[10px] text-zinc-600 uppercase tracking-wider">
-          End <span className="text-zinc-700 normal-case">(optional — makes a range)</span>
-        </label>
-        <input
-          type="date"
-          value={endDate}
-          min={startDate}
-          onChange={(e) => onEndChange(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") onConfirm();
-            if (e.key === "Escape") onCancel();
-          }}
-          className={pos
-            ? "rounded bg-zinc-800 px-2 py-1.5 text-sm text-zinc-100 outline-none ring-1 ring-zinc-700 focus:ring-blue-500 [color-scheme:dark] w-full"
-            : "rounded bg-zinc-800 px-3 py-3 text-base text-zinc-100 outline-none ring-1 ring-zinc-700 focus:ring-blue-500 [color-scheme:dark] w-full"
-          }
-        />
-      </div>
-
-      {/* Preview */}
-      <p className={pos ? "text-[11px] text-zinc-500 font-mono" : "text-xs text-zinc-500 font-mono"}>
-        {startDate
-          ? endDate && endDate !== startDate
-            ? `${startDate}..${endDate}`
-            : startDate
-          : "—"}
-      </p>
-
-      <div className={pos ? "flex gap-2 justify-end pt-0.5" : "flex gap-3 pt-1"}>
-        <button
-          onMouseDown={(e) => { e.preventDefault(); onCancel(); }}
-          onTouchStart={(e) => { e.preventDefault(); onCancel(); }}
-          className={pos
-            ? "text-xs text-zinc-600 hover:text-zinc-400"
-            : "flex-1 rounded bg-zinc-800 py-2.5 text-sm text-zinc-400 hover:bg-zinc-700 transition-colors"
-          }
-        >Cancel</button>
-        <button
-          onMouseDown={(e) => { e.preventDefault(); onConfirm(); }}
-          onTouchStart={(e) => { e.preventDefault(); onConfirm(); }}
-          disabled={!startDate}
-          className={pos
-            ? "rounded bg-blue-600 px-2.5 py-1 text-xs text-white hover:bg-blue-500 disabled:opacity-40"
-            : "flex-1 rounded bg-blue-600 py-2.5 text-sm text-white hover:bg-blue-500 disabled:opacity-40 transition-colors"
-          }
-        >Insert</button>
-      </div>
-    </div>
-  );
-}
-
-// ── Template sub-picker ──────────────────────────────────────────────────────
-export function TemplatePickerDropdown({
-  pos,
-  onPick,
-}: {
-  pos?: DropdownPos;
-  onPick: (content: string) => void;
-}) {
-  const tapHandlers = useTapHandlers(onPick);
-
-  return (
-    <div
-      className={pos
-        ? "absolute z-30 w-56 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl overflow-hidden"
-        : "w-full rounded-lg border border-zinc-700 bg-zinc-900 overflow-hidden"
-      }
-      style={pos ? { top: pos.top, left: pos.left } : undefined}
-    >
-      <div className="border-b border-zinc-800 px-3 py-1.5">
-        <span className="text-xs text-zinc-600">Templates · click to insert</span>
-      </div>
-      <div className="max-h-64 overflow-y-auto">
-        {TEMPLATES.map((t) => (
-          <button
-            key={t.id}
-            {...tapHandlers(t.content)}
-            className="flex w-full items-center gap-2 px-3 py-2 text-sm text-left text-zinc-300 hover:bg-zinc-800 transition-colors"
-          >
-            <span className="text-zinc-500">📋</span>
-            <span>{t.label}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// ── "Did you mean @name?" soft hint bar ──────────────────────────────────────
-export function SoftHintBar({
-  handle,
-  onAccept,
-  onDismiss,
-}: {
-  handle: string;
-  onAccept: () => void;
-  onDismiss: () => void;
-}) {
-  return (
-    <div className="absolute z-30 bottom-2 left-0 flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-xs shadow-lg">
-      <span className="text-zinc-500">Did you mean</span>
-      <button
-        onMouseDown={(e) => { e.preventDefault(); onAccept(); }}
-        onTouchStart={(e) => { e.preventDefault(); onAccept(); }}
-        className="text-blue-400 font-medium hover:text-blue-300"
-      >
-        {handle}
-      </button>
-      <span className="text-zinc-500">?</span>
-      <button
-        onMouseDown={(e) => { e.preventDefault(); onDismiss(); }}
-        onTouchStart={(e) => { e.preventDefault(); onDismiss(); }}
-        className="ml-1 text-zinc-600 hover:text-zinc-400"
-      >
-        ✕
-      </button>
-    </div>
-  );
-}