@knotpad/app 0.1.4 → 0.1.6

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

@@ -0,0 +1,484 @@
+"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>
+  );
+}