@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/CustomSelect.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Check } from 'lucide-react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  suffix?: React.ReactNode;
+}
+
+export interface SelectOptionGroup {
+  label: string;
+  options: SelectOption[];
+}
+
+export type SelectItem = SelectOption | SelectOptionGroup;
+
+function isGroup(item: SelectItem): item is SelectOptionGroup {
+  return 'options' in item;
+}
+
+function flatOptions(items: SelectItem[]): SelectOption[] {
+  const result: SelectOption[] = [];
+  for (const item of items) {
+    if (isGroup(item)) result.push(...item.options);
+    else result.push(item);
+  }
+  return result;
+}
+
+interface CustomSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectItem[];
+  className?: string;
+  /** 'sm' for inline/compact, 'md' (default) for form fields */
+  size?: 'sm' | 'md';
+  placeholder?: string;
+}
+
+export default function CustomSelect({
+  value,
+  onChange,
+  options,
+  className = '',
+  size = 'md',
+  placeholder,
+}: CustomSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [highlightIdx, setHighlightIdx] = useState(-1);
+  const [panelPos, setPanelPos] = useState<{ top: number; left: number; width: number; flipUp: boolean } | null>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const allOptions = useMemo(() => flatOptions(options), [options]);
+
+  const selectedLabel = useMemo(() => {
+    return allOptions.find(o => o.value === value) ?? null;
+  }, [allOptions, value]);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setHighlightIdx(-1);
+  }, []);
+
+  const select = useCallback((val: string) => {
+    onChange(val);
+    close();
+  }, [onChange, close]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e: MouseEvent) => {
+      if (
+        btnRef.current && !btnRef.current.contains(e.target as Node) &&
+        listRef.current && !listRef.current.contains(e.target as Node)
+      ) {
+        close();
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open, close]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          e.preventDefault();
+          close();
+          btnRef.current?.focus();
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          setHighlightIdx(prev => Math.min(prev + 1, allOptions.length - 1));
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setHighlightIdx(prev => Math.max(prev - 1, 0));
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (highlightIdx >= 0 && highlightIdx < allOptions.length) {
+            select(allOptions[highlightIdx].value);
+            btnRef.current?.focus();
+          }
+          break;
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [open, close, highlightIdx, allOptions, select]);
+
+  // Scroll highlighted option into view
+  useEffect(() => {
+    if (!open || !listRef.current || highlightIdx < 0) return;
+    const el = listRef.current.querySelector(`[data-idx="${highlightIdx}"]`);
+    if (el) el.scrollIntoView({ block: 'nearest' });
+  }, [open, highlightIdx]);
+
+  const calcPosition = useCallback(() => {
+    if (!btnRef.current) return;
+    const rect = btnRef.current.getBoundingClientRect();
+    const maxH = size === 'sm' ? 200 : 260;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    setPanelPos({
+      top: spaceBelow < maxH + 8 && spaceAbove > spaceBelow ? rect.top : rect.bottom,
+      left: rect.left,
+      width: rect.width,
+      flipUp: spaceBelow < maxH + 8 && spaceAbove > spaceBelow,
+    });
+  }, [size]);
+
+  // Initialize highlight + position when opening; reposition on scroll/resize
+  useEffect(() => {
+    if (!open) { setPanelPos(null); return; }
+    const idx = allOptions.findIndex(o => o.value === value);
+    setHighlightIdx(idx >= 0 ? idx : 0);
+    calcPosition();
+    window.addEventListener('scroll', calcPosition, true);
+    window.addEventListener('resize', calcPosition);
+    return () => {
+      window.removeEventListener('scroll', calcPosition, true);
+      window.removeEventListener('resize', calcPosition);
+    };
+  }, [open, allOptions, value, calcPosition]);
+
+  const isSm = size === 'sm';
+
+  const triggerCls = isSm
+    ? `inline-flex items-center gap-1 appearance-none rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring transition-colors text-2xs px-1.5 py-0.5 pr-5 ${className}`
+    : `w-full flex items-center gap-2 appearance-none rounded-lg border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring transition-colors text-sm px-3 py-2 pr-8 ${className}`;
+
+  const chevronCls = isSm
+    ? 'absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none'
+    : 'absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none';
+
+  const listBaseCls = isSm
+    ? 'fixed z-50 overflow-y-auto rounded-md border border-border bg-card shadow-lg py-0.5'
+    : 'fixed z-50 overflow-y-auto rounded-lg border border-border bg-card shadow-lg py-1';
+
+  const itemBaseCls = isSm
+    ? 'w-full flex items-center gap-1.5 px-2 py-1 text-2xs text-left transition-colors cursor-pointer'
+    : 'w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors cursor-pointer';
+
+  // Track flat index across groups for keyboard highlight
+  let flatIdx = -1;
+
+  function renderOption(opt: SelectOption) {
+    flatIdx++;
+    const idx = flatIdx;
+    const isSelected = opt.value === value;
+    const isHighlighted = idx === highlightIdx;
+    return (
+      <button
+        key={opt.value}
+        type="button"
+        role="option"
+        aria-selected={isSelected}
+        data-idx={idx}
+        onClick={() => select(opt.value)}
+        onMouseEnter={() => setHighlightIdx(idx)}
+        className={`${itemBaseCls} ${
+          isHighlighted ? 'bg-muted text-foreground' : 'text-foreground'
+        }`}
+      >
+        {opt.icon}
+        <span className="flex-1 truncate">{opt.label}</span>
+        {opt.suffix}
+        {isSelected && <Check size={isSm ? 10 : 12} className="shrink-0 text-[var(--amber)]" />}
+      </button>
+    );
+  }
+
+  const listPortal = open && panelPos && createPortal(
+    <div
+      ref={listRef}
+      className={listBaseCls}
+      role="listbox"
+      style={{
+        left: panelPos.left,
+        minWidth: panelPos.width,
+        maxHeight: isSm ? 200 : 260,
+        ...(panelPos.flipUp
+          ? { bottom: window.innerHeight - panelPos.top + 4 }
+          : { top: panelPos.top + 4 }),
+      }}
+    >
+      {options.map((item, idx) => {
+        if (isGroup(item)) {
+          return (
+            <div key={item.label}>
+              {idx > 0 && <div className="my-0.5 border-t border-border/50" />}
+              <div className={`py-1 text-2xs font-medium text-muted-foreground uppercase tracking-wider ${isSm ? 'px-2' : 'px-3'}`}>
+                {item.label}
+              </div>
+              {item.options.map(renderOption)}
+            </div>
+          );
+        }
+        return renderOption(item);
+      })}
+    </div>,
+    document.body,
+  );
+
+  return (
+    <div className="relative">
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={() => setOpen(v => !v)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={triggerCls}
+      >
+        {selectedLabel?.icon}
+        <span className="flex-1 truncate text-left">
+          {selectedLabel?.label ?? placeholder ?? '—'}
+        </span>
+        {selectedLabel?.suffix}
+        <ChevronDown
+          size={isSm ? 12 : 14}
+          className={`${chevronCls} transition-transform duration-150 ${open ? 'rotate-180' : ''}`}
+        />
+      </button>
+      {listPortal}
+    </div>
+  );
+}

package/_standalone/components/DirPicker.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Folder, ChevronDown, ChevronRight, Check } from 'lucide-react';
+import { stripEmoji } from '@/lib/utils';
+
+interface DirPickerProps {
+  /** Flat list of all directory paths (e.g. ['Notes', 'Notes/Daily', 'Projects']) */
+  dirPaths: string[];
+  /** Currently selected path ('' = root) */
+  value: string;
+  /** Called when user selects a directory */
+  onChange: (path: string) => void;
+  /** Label for root level */
+  rootLabel?: string;
+}
+
+const PANEL_MAX_H = 200;
+
+/**
+ * Hierarchical directory picker — trigger button stays in layout flow;
+ * the expanded panel renders via portal with position:fixed so it escapes
+ * any ancestor overflow:hidden / overflow:auto containers.
+ */
+export default function DirPicker({ dirPaths, value, onChange, rootLabel = 'Root' }: DirPickerProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [browsing, setBrowsing] = useState(value);
+  const [panelPos, setPanelPos] = useState<{ top: number; left: number; width: number; flipUp: boolean } | null>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => { setBrowsing(value); }, [value]);
+
+  const calcPosition = useCallback(() => {
+    if (!btnRef.current) return;
+    const rect = btnRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const flip = spaceBelow < PANEL_MAX_H + 8 && spaceAbove > spaceBelow;
+    setPanelPos({
+      top: flip ? rect.top : rect.bottom,
+      left: rect.left,
+      width: rect.width,
+      flipUp: flip,
+    });
+  }, []);
+
+  // Recalculate position on open, scroll, and resize (throttled to rAF)
+  const rafRef = useRef(0);
+  const throttledCalc = useCallback(() => {
+    if (rafRef.current) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = 0;
+      calcPosition();
+    });
+  }, [calcPosition]);
+
+  useEffect(() => {
+    if (!expanded) { setPanelPos(null); return; }
+    calcPosition();
+    window.addEventListener('scroll', throttledCalc, true);
+    window.addEventListener('resize', throttledCalc);
+    return () => {
+      window.removeEventListener('scroll', throttledCalc, true);
+      window.removeEventListener('resize', throttledCalc);
+      if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = 0; }
+    };
+  }, [expanded, calcPosition, throttledCalc]);
+
+  const collapse = useCallback(() => setExpanded(false), []);
+
+  useEffect(() => {
+    if (!expanded) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.preventDefault(); collapse(); }
+    };
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        btnRef.current?.contains(target) ||
+        panelRef.current?.contains(target)
+      ) return;
+      collapse();
+    };
+    document.addEventListener('keydown', handleKey);
+    document.addEventListener('mousedown', handleClick);
+    return () => {
+      document.removeEventListener('keydown', handleKey);
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [expanded, collapse]);
+
+  const children = useMemo(() => {
+    const prefix = browsing ? browsing + '/' : '';
+    return dirPaths
+      .filter(p => {
+        if (!p.startsWith(prefix)) return false;
+        const rest = p.slice(prefix.length);
+        return rest.length > 0 && !rest.includes('/');
+      })
+      .sort();
+  }, [dirPaths, browsing]);
+
+  const segments = useMemo(() => browsing ? browsing.split('/') : [], [browsing]);
+
+  const navigateTo = (idx: number) => {
+    if (idx < 0) { setBrowsing(''); onChange(''); }
+    else { const p = segments.slice(0, idx + 1).join('/'); setBrowsing(p); onChange(p); }
+  };
+
+  const drillInto = (childPath: string) => {
+    setBrowsing(childPath);
+    onChange(childPath);
+  };
+
+  const displayLabel = value
+    ? value.split('/').map(s => stripEmoji(s)).join(' / ')
+    : '/ ' + rootLabel;
+
+  const panel = expanded && panelPos && createPortal(
+    <div
+      ref={panelRef}
+      className="fixed z-50 rounded-lg border border-[var(--amber)] bg-card shadow-lg overflow-hidden flex flex-col"
+      style={{
+        left: panelPos.left,
+        width: panelPos.width,
+        maxHeight: PANEL_MAX_H,
+        ...(panelPos.flipUp
+          ? { bottom: window.innerHeight - panelPos.top + 4 }
+          : { top: panelPos.top + 4 }),
+      }}
+    >
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-0.5 px-3 py-1.5 bg-muted/30 border-b border-border overflow-x-auto text-xs shrink-0">
+        <button
+          type="button"
+          onClick={() => navigateTo(-1)}
+          className={`shrink-0 px-1.5 py-0.5 rounded transition-colors ${
+            browsing === '' ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          / {rootLabel}
+        </button>
+        {segments.map((seg, i) => (
+          <span key={i} className="flex items-center gap-0.5 shrink-0">
+            <ChevronRight size={10} className="text-muted-foreground/50" />
+            <button
+              type="button"
+              onClick={() => navigateTo(i)}
+              className={`px-1.5 py-0.5 rounded transition-colors truncate max-w-[100px] ${
+                i === segments.length - 1 ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {seg}
+            </button>
+          </span>
+        ))}
+      </div>
+      {/* Child directories */}
+      {children.length > 0 ? (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          {children.map(childPath => {
+            const childName = childPath.split('/').pop() || childPath;
+            const hasChildren = dirPaths.some(p => p.startsWith(childPath + '/'));
+            return (
+              <button
+                key={childPath}
+                type="button"
+                onClick={() => drillInto(childPath)}
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-muted/60 transition-colors"
+              >
+                <Folder size={12} className="shrink-0 text-[var(--amber)]" />
+                <span className="flex-1 text-left truncate">{childName}</span>
+                {hasChildren && <ChevronRight size={11} className="shrink-0 text-muted-foreground/40" />}
+              </button>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="px-3 py-2 text-xs text-muted-foreground/50 text-center">—</div>
+      )}
+      {/* Confirm & collapse */}
+      <button
+        type="button"
+        onClick={collapse}
+        className="w-full py-1.5 flex items-center justify-center gap-1 text-xs font-medium text-[var(--amber)] border-t border-border hover:bg-muted/30 transition-colors shrink-0"
+      >
+        <Check size={12} />
+      </button>
+    </div>,
+    document.body,
+  );
+
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={() => setExpanded(v => !v)}
+        aria-haspopup="true"
+        aria-expanded={expanded}
+        className={`w-full flex items-center gap-2 px-3 py-2 text-sm rounded-lg border bg-background text-foreground transition-colors text-left focus-visible:ring-1 focus-visible:ring-ring outline-none ${
+          expanded ? 'border-[var(--amber)]' : 'border-border hover:border-[var(--amber)]/40'
+        }`}
+      >
+        <Folder size={14} className="shrink-0 text-[var(--amber)]" />
+        <span className="flex-1 truncate">{displayLabel}</span>
+        <ChevronDown
+          size={14}
+          className={`shrink-0 text-muted-foreground transition-transform duration-150 ${expanded ? 'rotate-180' : ''}`}
+        />
+      </button>
+      {panel}
+    </>
+  );
+}

package/_standalone/components/EchoSpotlight.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { Feather, ArrowRight } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+
+const STORAGE_KEY = 'mindos-echo-daily-line';
+
+/**
+ * Echo Spotlight on the homepage.
+ * - If user has a daily line → shows it with a subtle edit-in-place
+ * - If no daily line → shows a warm invite to record one
+ * - Always links to /echo/imprint for deeper reflection
+ */
+export default function EchoSpotlight() {
+  const { t } = useLocale();
+  const echo = t.echoSpotlight;
+  const [dailyLine, setDailyLine] = useState('');
+  const [editing, setEditing] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setDailyLine(localStorage.getItem(STORAGE_KEY) ?? '');
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (editing && inputRef.current) inputRef.current.focus();
+  }, [editing]);
+
+  const saveLine = (val: string) => {
+    setDailyLine(val);
+    localStorage.setItem(STORAGE_KEY, val);
+  };
+
+  if (!mounted) return null;
+
+  // ── Has daily line → compact display ──
+  if (dailyLine.trim()) {
+    return (
+      <section className="mb-10">
+        <div className="flex items-center gap-2.5 mb-5">
+          <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]">
+            <Feather size={13} />
+          </div>
+          <h2 className="text-[13px] font-semibold text-foreground tracking-wide">{echo.title}</h2>
+          <span className="text-xs text-muted-foreground/50">{echo.dailyLine}</span>
+          <Link
+            href="/echo/imprint"
+            className="ml-auto text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity"
+          >
+            {echo.goToEcho}
+          </Link>
+        </div>
+        <div className="group">
+          {editing ? (
+            <input
+              ref={inputRef}
+              type="text"
+              value={dailyLine}
+              onChange={e => saveLine(e.target.value)}
+              onBlur={() => setEditing(false)}
+              onKeyDown={e => { if (e.key === 'Enter') setEditing(false); }}
+              className="w-full px-3.5 py-3 rounded-xl border border-[var(--amber)]/40 bg-card text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring italic"
+              placeholder={echo.placeholder}
+            />
+          ) : (
+            <button
+              onClick={() => setEditing(true)}
+              className="w-full text-left px-3.5 py-3 rounded-xl border border-border/40 hover:border-[var(--amber)]/30 transition-all duration-150 cursor-text group-hover:shadow-sm"
+            >
+              <p className="text-sm text-foreground/80 font-display italic leading-relaxed">
+                &ldquo;{dailyLine}&rdquo;
+              </p>
+              <p className="text-xs text-muted-foreground/40 mt-1">{echo.savedLocally}</p>
+            </button>
+          )}
+        </div>
+      </section>
+    );
+  }
+
+  // ── No daily line → invite ──
+  return (
+    <section className="mb-10">
+      <div className="flex items-center gap-2.5 mb-5">
+        <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]">
+          <Feather size={13} />
+        </div>
+        <h2 className="text-[13px] font-semibold text-foreground tracking-wide">{echo.title}</h2>
+      </div>
+      <div className="flex items-center gap-4 px-3.5 py-3.5 rounded-xl border border-dashed border-border/60 hover:border-[var(--amber)]/30 transition-all duration-150 group">
+        <div className="flex-1 min-w-0">
+          <input
+            type="text"
+            value={dailyLine}
+            onChange={e => saveLine(e.target.value)}
+            className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground/40 focus-visible:outline-none italic"
+            placeholder={echo.placeholder}
+          />
+          <p className="text-xs text-muted-foreground/40 mt-1">{echo.inviteDesc}</p>
+        </div>
+        <Link
+          href="/echo/imprint"
+          className="shrink-0 inline-flex items-center gap-1 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity"
+        >
+          {echo.goToEcho}
+          <ArrowRight size={11} />
+        </Link>
+      </div>
+    </section>
+  );
+}