@lon-ask/dockit 0.1.1 → 0.1.4

package/apps/client/src/components/EntryForm.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ArrowLeft, Save } from 'lucide-react';
+import { api } from '../api/client';
+
+export default function EntryForm() {
+  const { id } = useParams<{ id: string }>();
+  const isEdit = Boolean(id);
+  const navigate = useNavigate();
+
+  const [name, setName] = useState('');
+  const [version, setVersion] = useState('');
+  const [description, setDescription] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(isEdit);
+
+  useEffect(() => {
+    if (!id) return;
+    api.entries.get(id).then((data) => {
+      setName(data.name);
+      setVersion(data.version);
+      setDescription(data.description);
+    }).catch((err) => setError((err as Error).message))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || !version.trim()) {
+      setError('Name and version are required');
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      if (isEdit && id) {
+        await api.entries.update(id, { name: name.trim(), version: version.trim(), description: description.trim() });
+      } else {
+        await api.entries.create({ name: name.trim(), version: version.trim(), description: description.trim() });
+      }
+      navigate('/');
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="py-20 text-center text-sm text-text-muted">Loading...</div>;
+  }
+
+  return (
+    <div className="p-6 md:p-8 max-w-xl">
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center gap-1.5 text-sm text-text-dim hover:text-text mb-6 transition-colors"
+      >
+        <ArrowLeft size={16} />
+        Back
+      </button>
+
+      <h1 className="text-xl font-semibold text-text mb-6">
+        {isEdit ? 'Edit Entry' : 'Create New Entry'}
+      </h1>
+
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div>
+          <label className="block text-sm font-medium text-text mb-2">Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. Quarkus"
+            className="w-full px-3.5 py-2.5 bg-surface ring-1 ring-border rounded-lg text-sm text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-text mb-2">Version</label>
+          <input
+            type="text"
+            value={version}
+            onChange={(e) => setVersion(e.target.value)}
+            placeholder="e.g. 3.8.0"
+            className="w-full px-3.5 py-2.5 bg-surface ring-1 ring-border rounded-lg text-sm text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-text mb-2">Description <span className="text-text-muted font-normal">(optional)</span></label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Brief description of this documentation entry"
+            rows={3}
+            className="w-full px-3.5 py-2.5 bg-surface ring-1 ring-border rounded-lg text-sm text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all resize-none"
+          />
+        </div>
+
+        {error && (
+          <div className="px-3 py-2 bg-danger/5 ring-1 ring-danger/20 rounded-lg text-sm text-danger">
+            {error}
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={saving}
+          className="flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary-hover transition-colors disabled:opacity-50"
+        >
+          <Save size={16} />
+          {saving ? 'Saving...' : isEdit ? 'Save Changes' : 'Create Entry'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/apps/client/src/components/EntryList.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Plus, BookOpen, Clock, CheckCircle, AlertCircle, Loader2, Trash2, Package } from 'lucide-react';
+import type { Entry } from '../types';
+import { api } from '../api/client';
+
+const statusConfig: Record<string, { icon: typeof CheckCircle; color: string; bg: string; label: string }> = {
+  pending:  { icon: Clock, color: 'text-text-muted', bg: 'bg-bg-alt', label: 'Pending' },
+  building: { icon: Loader2, color: 'text-warning', bg: 'bg-warning/5', label: 'Building' },
+  ready:    { icon: CheckCircle, color: 'text-success', bg: 'bg-success/5', label: 'Ready' },
+  error:    { icon: AlertCircle, color: 'text-danger', bg: 'bg-danger/5', label: 'Error' },
+};
+
+export default function EntryList() {
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  const fetchEntries = async () => {
+    try {
+      setLoading(true);
+      const data = await api.entries.list();
+      setEntries(data);
+      setError(null);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchEntries(); }, []);
+
+  const handleDelete = async (e: React.MouseEvent, id: string, name: string) => {
+    e.stopPropagation();
+    if (!confirm(`Delete entry "${name}" and all its data?`)) return;
+    try {
+      await api.entries.delete(id);
+      setEntries((prev) => prev.filter((e) => e.id !== id));
+    } catch (err) {
+      alert(`Failed to delete: ${(err as Error).message}`);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 size={24} className="animate-spin text-text-muted" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3">
+        <AlertCircle size={32} className="text-danger" />
+        <p className="text-sm text-danger">{error}</p>
+        <button onClick={fetchEntries} className="text-sm text-primary hover:underline">Retry</button>
+      </div>
+    );
+  }
+
+  if (entries.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-5">
+        <div className="w-16 h-16 rounded-2xl bg-bg-alt flex items-center justify-center">
+          <BookOpen size={28} className="text-text-muted" />
+        </div>
+        <div className="text-center max-w-xs">
+          <h2 className="text-lg font-semibold text-text">No documentation entries yet</h2>
+          <p className="text-sm text-text-dim mt-1.5">Create your first entry to start building your documentation hub.</p>
+        </div>
+        <Link
+          to="/entries/new"
+          className="flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary-hover transition-colors"
+        >
+          <Plus size={16} />
+          New Entry
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 md:p-8">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-xl font-semibold text-text">Documentation Hub</h1>
+          <p className="text-sm text-text-dim mt-0.5">{entries.length} entr{entries.length === 1 ? 'y' : 'ies'}</p>
+        </div>
+        <Link
+          to="/entries/new"
+          className="flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary-hover transition-colors"
+        >
+          <Plus size={15} />
+          New Entry
+        </Link>
+      </div>
+
+      <div className="ring-1 ring-border rounded-xl overflow-hidden">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-bg-alt text-xs text-text-dim uppercase tracking-wider">
+              <th className="text-left px-4 py-2.5 font-medium">Name</th>
+              <th className="text-left px-4 py-2.5 font-medium w-24">Version</th>
+              <th className="text-left px-4 py-2.5 font-medium w-20">Status</th>
+              <th className="text-left px-4 py-2.5 font-medium w-20">Sources</th>
+              <th className="text-left px-4 py-2.5 font-medium hidden md:table-cell">Description</th>
+              <th className="w-10"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map((entry) => {
+              const status = statusConfig[entry.status] || statusConfig.pending;
+              const StatusIcon = status.icon;
+              const animClass = entry.status === 'building' ? 'animate-spin' : '';
+              return (
+                <tr
+                  key={entry.id}
+                  onClick={() => navigate(`/entries/${entry.id}`)}
+                  className="border-t border-border hover:bg-bg-alt/50 cursor-pointer transition-colors group"
+                >
+                  <td className="px-4 py-3">
+                    <span className="text-sm font-medium text-text group-hover:text-primary transition-colors">
+                      {entry.name}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="text-xs text-text-dim font-mono">{entry.version}</span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${status.color} ${status.bg}`}>
+                      <StatusIcon size={11} className={animClass} />
+                      {status.label}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="text-xs text-text-dim">
+                      {entry.source_count ?? 0}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 hidden md:table-cell">
+                    <span className="text-xs text-text-dim truncate block max-w-xs">
+                      {entry.description || '—'}
+                    </span>
+                  </td>
+                  <td className="px-2 py-3">
+                    <button
+                      onClick={(e) => handleDelete(e, entry.id, entry.name)}
+                      className="p-1 rounded text-text-muted hover:text-danger opacity-0 group-hover:opacity-100 transition-all"
+                      title="Delete"
+                    >
+                      <Trash2 size={14} />
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/apps/client/src/components/GlobalSearchBar.tsx

@@ -0,0 +1,166 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Search, FileText, X } from 'lucide-react';
+
+interface GlobalResult {
+  entryId: string;
+  entryName: string;
+  entryVersion: string;
+  path: string;
+  title: string;
+  headings: string[];
+  snippet: string;
+}
+
+export default function GlobalSearchBar() {
+  const navigate = useNavigate();
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<GlobalResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [debounceTimer, setDebounceTimer] = useState<ReturnType<typeof setTimeout>>();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const doSearch = useCallback(async (q: string) => {
+    if (!q.trim()) {
+      setResults([]);
+      setOpen(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const data = await fetch(`/api/search?q=${encodeURIComponent(q)}`).then((r) => r.json());
+      setResults(data);
+      setOpen(true);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const handleChange = (value: string) => {
+    setQuery(value);
+    if (debounceTimer) clearTimeout(debounceTimer);
+    const timer = setTimeout(() => doSearch(value), 300);
+    setDebounceTimer(timer);
+  };
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+      if (e.key === 'Escape') {
+        setOpen(false);
+        inputRef.current?.blur();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const handleSelect = (result: GlobalResult) => {
+    setOpen(false);
+    setQuery('');
+    navigate(`/entries/${result.entryId}?doc=${encodeURIComponent(result.path)}`);
+  };
+
+  const groupedResults: Array<{ entryId: string; entryName: string; entryVersion: string; items: GlobalResult[] }> = [];
+  for (const r of results) {
+    let group = groupedResults.find((g) => g.entryId === r.entryId);
+    if (!group) {
+      group = { entryId: r.entryId, entryName: r.entryName, entryVersion: r.entryVersion, items: [] };
+      groupedResults.push(group);
+    }
+    group.items.push(r);
+  }
+
+  return (
+    <div ref={containerRef} className="relative flex-1 max-w-xl">
+      <div className="relative">
+        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => handleChange(e.target.value)}
+          onFocus={() => { setFocused(true); if (results.length > 0) setOpen(true); }}
+          placeholder="Search all docs..."
+          className="w-full pl-9 pr-16 py-1.5 bg-surface ring-1 ring-border rounded-md text-sm text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all"
+        />
+        {loading && (
+          <div className="absolute right-12 top-1/2 -translate-y-1/2">
+            <div className="w-3.5 h-3.5 border-2 border-border border-t-primary rounded-full animate-spin" />
+          </div>
+        )}
+        {query && (
+          <button
+            onClick={() => { setQuery(''); setResults([]); setOpen(false); }}
+            className="absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded text-text-muted hover:text-text transition-colors"
+          >
+            <X size={13} />
+          </button>
+        )}
+        {!query && (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+            <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 text-[10px] font-mono text-text-muted bg-bg-alt ring-1 ring-border rounded">
+              ⌘K
+            </kbd>
+          </div>
+        )}
+      </div>
+
+      {open && groupedResults.length > 0 && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div className="absolute left-0 right-0 z-50 top-full mt-1.5 bg-surface ring-1 ring-border rounded-xl shadow-xl max-h-96 overflow-auto">
+            {groupedResults.map((group) => (
+              <div key={group.entryId}>
+                <div className="px-3 py-1.5 text-[11px] font-semibold text-text-muted uppercase tracking-wider bg-bg-alt/50 border-b border-border">
+                  {group.entryName} <span className="font-normal lowercase text-text-dim">({group.entryVersion})</span>
+                </div>
+                {group.items.map((r, i) => (
+                  <button
+                    key={`${group.entryId}-${i}`}
+                    type="button"
+                    onClick={() => handleSelect(r)}
+                    className="flex items-start gap-2.5 px-3 py-2.5 hover:bg-bg-alt transition-colors border-b border-border last:border-b-0 w-full text-left cursor-pointer"
+                  >
+                    <FileText size={14} className="text-text-muted mt-0.5 shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <div className="text-sm font-medium text-text truncate">{r.title}</div>
+                      <div className="text-xs text-text-dim mt-0.5 line-clamp-2">{r.snippet}</div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+
+      {open && query && !loading && results.length === 0 && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div className="absolute left-0 right-0 z-50 top-full mt-1.5 bg-surface ring-1 ring-border rounded-xl shadow-xl p-4 text-center text-sm text-text-dim">
+            No results found for &ldquo;{query}&rdquo;
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/apps/client/src/components/Layout.tsx

@@ -0,0 +1,57 @@
+import { Link, useLocation } from 'react-router-dom';
+import { BookOpen, Sun, Moon, Plus } from 'lucide-react';
+import { useTheme } from '../hooks/useTheme';
+import GlobalSearchBar from './GlobalSearchBar';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const location = useLocation();
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <div className="flex flex-col h-screen overflow-hidden">
+      <header className="h-12 bg-bg-alt border-b border-border flex items-center px-4 gap-4 shrink-0">
+        <Link to="/" className="flex items-center gap-2 no-underline shrink-0">
+          <BookOpen size={18} className="text-primary" />
+          <span className="font-semibold text-sm tracking-tight text-text">Dockit</span>
+        </Link>
+
+        <nav className="flex items-center gap-1">
+          <Link
+            to="/"
+            className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+              location.pathname === '/'
+                ? 'bg-primary/10 text-primary'
+                : 'text-text-dim hover:text-text'
+            }`}
+          >
+            Entries
+          </Link>
+        </nav>
+
+        <GlobalSearchBar />
+
+        <div className="flex-1" />
+
+        <Link
+          to="/entries/new"
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium bg-primary text-white hover:bg-primary-hover transition-colors"
+        >
+          <Plus size={14} />
+          New
+        </Link>
+
+        <button
+          onClick={toggleTheme}
+          className="p-1.5 rounded-md text-text-dim hover:text-text hover:bg-surface transition-colors"
+          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+        >
+          {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
+        </button>
+      </header>
+
+      <main className="flex-1 overflow-auto">
+        {children}
+      </main>
+    </div>
+  );
+}

package/apps/client/src/components/SearchBar.tsx

@@ -0,0 +1,103 @@
+import { useState, useCallback } from 'react';
+import { Search, FileText, Filter } from 'lucide-react';
+import type { SearchResult } from '../types';
+import { api } from '../api/client';
+
+interface Props {
+  entryId: string;
+  onSelectFile: (path: string) => void;
+  scopeLabel?: string;
+}
+
+export default function SearchBar({ entryId, onSelectFile, scopeLabel }: Props) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [debounceTimer, setDebounceTimer] = useState<ReturnType<typeof setTimeout>>();
+
+  const doSearch = useCallback(async (q: string) => {
+    if (!q.trim()) {
+      setResults([]);
+      setOpen(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const data = await api.search(entryId, q);
+      setResults(data);
+      setOpen(true);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, [entryId]);
+
+  const handleChange = (value: string) => {
+    setQuery(value);
+    if (debounceTimer) clearTimeout(debounceTimer);
+    const timer = setTimeout(() => doSearch(value), 300);
+    setDebounceTimer(timer);
+  };
+
+  return (
+    <div className="relative">
+      <div className="flex items-center gap-2">
+        {scopeLabel && (
+          <span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] font-medium text-text-muted bg-bg-alt ring-1 ring-border shrink-0">
+            <Filter size={10} />
+            {scopeLabel}
+          </span>
+        )}
+        <div className="relative flex-1">
+          <Search size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-muted" />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => handleChange(e.target.value)}
+            onFocus={() => results.length > 0 && setOpen(true)}
+            placeholder="Search documentation..."
+            className="w-full pl-10 pr-3 py-2.5 bg-surface ring-1 ring-border rounded-lg text-sm text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all"
+          />
+          {loading && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2">
+              <div className="w-4 h-4 border-2 border-border border-t-primary rounded-full animate-spin" />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {open && results.length > 0 && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+          <div className="absolute z-20 top-full mt-2 w-full bg-surface ring-1 ring-border rounded-xl shadow-lg max-h-80 overflow-auto">
+            {results.map((r, i) => (
+              <button
+                key={i}
+                type="button"
+                onClick={() => { onSelectFile(r.path); setOpen(false); }}
+                className="flex items-start gap-3 px-4 py-3 hover:bg-bg-alt transition-colors border-b border-border last:border-b-0 w-full text-left cursor-pointer"
+              >
+                <FileText size={16} className="text-text-muted mt-0.5 shrink-0" />
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-medium text-text truncate">{r.title}</div>
+                  <div className="text-xs text-text-dim mt-0.5 line-clamp-2">{r.snippet}</div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+
+      {open && query && !loading && results.length === 0 && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+          <div className="absolute z-20 top-full mt-2 w-full bg-surface ring-1 ring-border rounded-xl shadow-lg p-4 text-center text-sm text-text-dim">
+            No results found for &ldquo;{query}&rdquo;
+          </div>
+        </>
+      )}
+    </div>
+  );
+}