@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/CustomSelect.tsx

@@ -1,256 +0,0 @@
-'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

@@ -1,217 +0,0 @@
-'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

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