opensidian 1.0.0

package/web/src/components/NoteEditor.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { marked } from 'marked';
+import { api, Note } from '../api/client';
+
+interface NoteEditorProps {
+  vaultPath: string;
+}
+
+export default function NoteEditor({ vaultPath }: NoteEditorProps) {
+  const { path: notePath } = useParams();
+  const [note, setNote] = useState<Note | null>(null);
+  const [content, setContent] = useState('');
+  const [html, setHtml] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [dirty, setDirty] = useState(false);
+  const navigate = useNavigate();
+
+  const decodePath = useCallback(() => {
+    return notePath ? decodeURIComponent(notePath) : '';
+  }, [notePath]);
+
+  useEffect(() => {
+    if (!vaultPath || !notePath) return;
+    const load = async () => {
+      try {
+        const res = await api.notes.get(vaultPath, decodePath());
+        setNote(res.note);
+        setContent(res.note.content);
+      } catch {
+        setNote(null);
+        setContent('');
+      }
+    };
+    load();
+  }, [vaultPath, notePath]);
+
+  useEffect(() => {
+    marked.setOptions({ gfm: true, breaks: true });
+    Promise.resolve(marked.parse(content)).then(h => setHtml(h));
+  }, [content]);
+
+  useEffect(() => {
+    if (!dirty || saving) return;
+    const timer = setTimeout(async () => {
+      setSaving(true);
+      try {
+        await api.notes.update(vaultPath, decodePath(), content);
+        setDirty(false);
+      } catch {
+        // ignore
+      } finally {
+        setSaving(false);
+      }
+    }, 1500);
+    return () => clearTimeout(timer);
+  }, [content, dirty, saving]);
+
+  const handleChange = (val: string) => {
+    setContent(val);
+    setDirty(true);
+  };
+
+  const handleDelete = async () => {
+    if (!confirm('Deletar esta nota?')) return;
+    try {
+      await api.notes.delete(vaultPath, decodePath());
+      navigate('/notes');
+    } catch {
+      // ignore
+    }
+  };
+
+  const handleCreateLink = () => {
+    const target = prompt('Nome da nota para link:');
+    if (!target) return;
+    const linkText = `[[${target}]]`;
+    setContent(prev => prev + '\n' + linkText);
+    setDirty(true);
+  };
+
+  if (!vaultPath || !notePath) {
+    return <div className="content-area"><div className="empty-state"><h2>Selecione uma nota</h2></div></div>;
+  }
+
+  if (!note) {
+    return <div className="content-area"><div className="empty-state"><h2>Nota não encontrada</h2></div></div>;
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div className="toolbar">
+        <button onClick={() => navigate('/notes')}>← Voltar</button>
+        <span style={{ fontWeight: 500 }}>{note.filename}.md</span>
+        <span style={{ flex: 1 }} />
+        <button onClick={handleCreateLink}>🔗 Link</button>
+        <button onClick={handleDelete} style={{ color: 'var(--danger)' }}>🗑️</button>
+        {dirty && <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Salvando...</span>}
+        {!dirty && note && <span style={{ fontSize: 12, color: 'var(--success)' }}>Salvo</span>}
+      </div>
+
+      <div className="editor-layout">
+        <div className="editor-pane">
+          <textarea
+            value={content}
+            onChange={e => handleChange(e.target.value)}
+            spellCheck={false}
+          />
+        </div>
+        <div className="preview-pane" dangerouslySetInnerHTML={{ __html: html }} />
+      </div>
+    </div>
+  );
+}

package/web/src/components/NoteList.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api, Note } from '../api/client';
+import SearchBar from './SearchBar';
+
+interface NoteListProps {
+  vaultPath: string;
+}
+
+export default function NoteList({ vaultPath }: NoteListProps) {
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const [newFilename, setNewFilename] = useState('');
+  const navigate = useNavigate();
+
+  const load = async () => {
+    if (!vaultPath) return;
+    try {
+      const res = await api.notes.list(vaultPath);
+      setNotes(res.notes);
+    } catch {
+      setNotes([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { setLoading(true); load(); }, [vaultPath]);
+
+  const handleCreate = async () => {
+    if (!newFilename) return;
+    try {
+      await api.notes.create(vaultPath, newFilename, `# ${newFilename}\n\n`);
+      setShowCreate(false);
+      setNewFilename('');
+      await load();
+    } catch (err) {
+      console.error('Failed to create note:', err);
+    }
+  };
+
+  if (!vaultPath) {
+    return <div className="content-area"><div className="empty-state"><h2>Selecione um vault</h2><p>Escolha um vault na página inicial</p></div></div>;
+  }
+
+  if (loading) return <div className="content-area"><p>Carregando...</p></div>;
+
+  return (
+    <div className="content-area">
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, position: 'relative' }}>
+        <h2>Notas</h2>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <SearchBar vaultPath={vaultPath} onSelect={(path) => navigate(`/notes/${encodeURIComponent(path)}`)} />
+          <button className="primary" onClick={() => setShowCreate(true)}>+ Nova</button>
+        </div>
+      </div>
+
+      {notes.length === 0 ? (
+        <div className="empty-state">
+          <h2>Nenhuma nota</h2>
+          <p>Crie sua primeira nota</p>
+        </div>
+      ) : (
+        <div className="note-list">
+          {notes.map(note => (
+            <div key={note.path} className="note-item" onClick={() => navigate(`/notes/${encodeURIComponent(note.path)}`)}>
+              <span className="note-title">{note.filename}</span>
+              <span className="note-date">{new Date(note.modified).toLocaleDateString()}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <div className="modal-overlay" onClick={() => setShowCreate(false)}>
+          <div className="modal" onClick={e => e.stopPropagation()}>
+            <h2>Nova Nota</h2>
+            <input
+              placeholder="Nome da nota"
+              value={newFilename}
+              onChange={e => setNewFilename(e.target.value)}
+              style={{ width: '100%' }}
+              autoFocus
+            />
+            <div className="modal-actions">
+              <button onClick={() => setShowCreate(false)}>Cancelar</button>
+              <button className="primary" onClick={handleCreate}>Criar</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/web/src/components/RegisterPage.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../hooks/AuthContext';
+
+export default function RegisterPage() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+  const { register } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    if (password.length < 6) {
+      setError('Senha deve ter no mínimo 6 caracteres');
+      return;
+    }
+    setBusy(true);
+    try {
+      await register(email, password, name);
+      navigate('/');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Erro ao cadastrar');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <div className="auth-logo">
+          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+            <rect width="32" height="32" rx="6" fill="#6C31E0"/>
+            <path d="M8 10h16M8 16h16M8 22h10" stroke="white" strokeWidth="2.5" strokeLinecap="round"/>
+          </svg>
+          <h1>OpenSidian</h1>
+        </div>
+        <h2>Criar conta</h2>
+        <form onSubmit={handleSubmit}>
+          <input placeholder="Nome" value={name} onChange={e => setName(e.target.value)} required />
+          <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} required />
+          <input type="password" placeholder="Senha (mín. 6 caracteres)" value={password} onChange={e => setPassword(e.target.value)} required />
+          {error && <p className="auth-error">{error}</p>}
+          <button className="primary" type="submit" disabled={busy} style={{ width: '100%' }}>
+            {busy ? 'Cadastrando...' : 'Cadastrar'}
+          </button>
+        </form>
+        <p className="auth-link">
+          Já tem conta? <Link to="/login">Entre</Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/web/src/components/SearchBar.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api, SearchResultItem } from '../api/client';
+
+interface SearchBarProps {
+  vaultPath: string;
+  onSelect: (path: string) => void;
+}
+
+export default function SearchBar({ vaultPath, onSelect }: SearchBarProps) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResultItem[]>([]);
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!vaultPath || query.length < 2) {
+      setResults([]);
+      return;
+    }
+    const timer = setTimeout(async () => {
+      try {
+        const res = await api.search.fullText(vaultPath, query);
+        setResults(res.results.slice(0, 8));
+        setOpen(true);
+      } catch {
+        setResults([]);
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [query, vaultPath]);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const select = (path: string) => {
+    setOpen(false);
+    setQuery('');
+    onSelect(path);
+    navigate(`/notes/${encodeURIComponent(path)}`);
+  };
+
+  return (
+    <div ref={ref} style={{ position: 'relative' }}>
+      <input
+        placeholder="Buscar notas..."
+        value={query}
+        onChange={e => setQuery(e.target.value)}
+        style={{ width: 220 }}
+      />
+      {open && results.length > 0 && (
+        <div className="search-results">
+          {results.map(item => (
+            <div key={item.path} className="search-result-item" onClick={() => select(item.path)}>
+              <div className="result-title">{item.filename}</div>
+              <div className="result-excerpt" dangerouslySetInnerHTML={{ __html: item.snippet }} />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/web/src/components/SearchPanel.tsx

@@ -0,0 +1,152 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api, SearchResultItem } from '../api/client';
+
+interface Filters {
+  tag: string;
+  after: string;
+  before: string;
+  hasBacklinks: '' | 'true' | 'false';
+}
+
+const emptyFilters: Filters = { tag: '', after: '', before: '', hasBacklinks: '' };
+
+export default function SearchPanel() {
+  const [query, setQuery] = useState('');
+  const [filters, setFilters] = useState<Filters>(emptyFilters);
+  const [results, setResults] = useState<SearchResultItem[]>([]);
+  const [searched, setSearched] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const vaultPath = new URLSearchParams(window.location.search).get('vault') || '';
+
+  const doSearch = useCallback(async () => {
+    if (!query || !vaultPath) return;
+    setLoading(true);
+    setSearched(true);
+    try {
+      const res = await api.search.fullText(vaultPath, query, {
+        tag: filters.tag || undefined,
+        after: filters.after || undefined,
+        before: filters.before || undefined,
+        hasBacklinks: filters.hasBacklinks ? filters.hasBacklinks === 'true' : undefined,
+      });
+      setResults(res.results);
+    } catch {
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [query, filters, vaultPath]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (query.length >= 2) doSearch();
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [query, filters]);
+
+  const selectNote = (path: string) => {
+    navigate(`/notes/${encodeURIComponent(path)}`);
+  };
+
+  const updateFilter = (key: keyof Filters, value: string) => {
+    setFilters(prev => ({ ...prev, [key]: value }));
+  };
+
+  const clearFilters = () => {
+    setFilters(emptyFilters);
+    setQuery('');
+    setResults([]);
+    setSearched(false);
+  };
+
+  return (
+    <div className="content-area">
+      <div style={{ maxWidth: 800 }}>
+        <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 20 }}>
+          <div style={{ flex: 1 }}>
+            <input
+              placeholder="Pesquisar no conteúdo das notas..."
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              style={{ width: '100%', fontSize: 16, padding: '10px 14px' }}
+              autoFocus
+            />
+          </div>
+          <button onClick={clearFilters}>Limpar</button>
+        </div>
+
+        <details open style={{ marginBottom: 20 }}>
+          <summary style={{ cursor: 'pointer', fontSize: 14, color: 'var(--text-secondary)', marginBottom: 12 }}>
+            Filtros
+          </summary>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+            <FilterField label="Tag" value={filters.tag} onChange={v => updateFilter('tag', v)} placeholder="ex: javascript" />
+            <div />
+            <FilterField label="Após data" value={filters.after} onChange={v => updateFilter('after', v)} type="date" />
+            <FilterField label="Antes de" value={filters.before} onChange={v => updateFilter('before', v)} type="date" />
+          </div>
+          <div style={{ marginTop: 12 }}>
+            <label style={{ fontSize: 13, color: 'var(--text-secondary)', display: 'block', marginBottom: 4 }}>Backlinks</label>
+            <select
+              value={filters.hasBacklinks}
+              onChange={e => updateFilter('hasBacklinks', e.target.value)}
+              style={{ padding: '6px 10px', borderRadius: 'var(--radius)', border: '1px solid var(--border)', background: 'var(--bg)', color: 'var(--text)' }}
+            >
+              <option value="">Qualquer</option>
+              <option value="true">Com backlinks</option>
+              <option value="false">Sem backlinks</option>
+            </select>
+          </div>
+        </details>
+
+        {loading && <p>Buscando...</p>}
+
+        {searched && !loading && results.length === 0 && (
+          <div className="empty-state">
+            <h2>Nenhum resultado</h2>
+            <p>Tente termos diferentes ou ajuste os filtros</p>
+          </div>
+        )}
+
+        <div className="search-results-list">
+          {results.map(item => (
+            <div key={item.path} className="search-result-full" onClick={() => selectNote(item.path)}>
+              <div className="result-title">{item.filename}</div>
+              <div className="result-excerpt" dangerouslySetInnerHTML={{ __html: item.snippet }} />
+              <div style={{ display: 'flex', gap: 12, fontSize: 12, color: 'var(--text-secondary)', marginTop: 4 }}>
+                <span>Relevância: {item.score.toFixed(2)}</span>
+                {item.tags.length > 0 && <span>Tags: {item.tags.join(', ')}</span>}
+                <span>{item.backlinks} backlinks</span>
+                <span>{new Date(item.modified).toLocaleDateString()}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FilterField({ label, value, onChange, placeholder, type }: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  type?: string;
+}) {
+  return (
+    <div>
+      <label style={{ fontSize: 13, color: 'var(--text-secondary)', display: 'block', marginBottom: 4 }}>{label}</label>
+      <input
+        type={type || 'text'}
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        placeholder={placeholder}
+        style={{ width: '100%' }}
+      />
+    </div>
+  );
+}

package/web/src/components/ThemeEditor.tsx

@@ -0,0 +1,129 @@
+import { useState, useEffect } from 'react';
+import { useTheme } from '../hooks/ThemeContext';
+import { BUILT_IN_THEMES, THEME_VARIABLE_LABELS, DEFAULT_VARIABLES, CustomTheme } from '../api/themes';
+
+export default function ThemeEditor() {
+  const { customThemes, saveCustomTheme, deleteCustomTheme, selectTheme, themeName } = useTheme();
+  const allThemes = [...BUILT_IN_THEMES, ...customThemes];
+
+  const [editing, setEditing] = useState<CustomTheme | null>(null);
+  const [newName, setNewName] = useState('');
+  const [variables, setVariables] = useState<Record<string, string>>({});
+
+  const startEditing = (theme: CustomTheme) => {
+    setEditing(theme);
+    setNewName(theme.name);
+    setVariables({ ...theme.variables });
+  };
+
+  const startNew = () => {
+    setEditing({ name: '', variables: { ...DEFAULT_VARIABLES } });
+    setNewName('');
+    setVariables({ ...DEFAULT_VARIABLES });
+  };
+
+  const handleSave = async () => {
+    if (!editing || !newName.trim()) return;
+    await saveCustomTheme({ name: newName.trim(), variables });
+    setEditing(null);
+  };
+
+  const handleDelete = async (name: string) => {
+    if (!confirm(`Deletar tema "${name}"?`)) return;
+    await deleteCustomTheme(name);
+  };
+
+  const updateVariable = (key: string, value: string) => {
+    const root = document.documentElement;
+    root.style.setProperty(key, value);
+    setVariables(prev => ({ ...prev, [key]: value }));
+  };
+
+  useEffect(() => {
+    if (editing) {
+      for (const [key, val] of Object.entries(variables)) {
+        document.documentElement.style.setProperty(key, val as string);
+      }
+    } else {
+      const current = allThemes.find(t => t.name === themeName);
+      if (current) {
+        for (const [key, val] of Object.entries(current.variables)) {
+          document.documentElement.style.setProperty(key, val as string);
+        }
+      }
+    }
+  }, [editing]);
+
+  return (
+    <div className="content-area">
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
+        <h2>Temas</h2>
+        <button className="primary" onClick={startNew}>+ Novo Tema</button>
+      </div>
+
+      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 32 }}>
+        {allThemes.map(theme => (
+          <div
+            key={theme.name}
+            className={`theme-card ${themeName === theme.name ? 'theme-card--active' : ''}`}
+            onClick={() => selectTheme(theme.name)}
+          >
+            <div className="theme-card-preview">
+              <div style={{ background: theme.variables['--accent'], width: 8, height: 8, borderRadius: '50%' }} />
+              <div style={{ background: theme.variables['--bg'], width: 24, height: 24, borderRadius: 4, border: `1px solid ${theme.variables['--border']}` }} />
+              <div style={{ background: theme.variables['--bg-secondary'], width: 24, height: 24, borderRadius: 4, border: `1px solid ${theme.variables['--border']}` }} />
+              <div style={{ background: theme.variables['--bg-tertiary'], width: 24, height: 24, borderRadius: 4 }} />
+            </div>
+            <div className="theme-card-name">{theme.name}</div>
+            <div style={{ display: 'flex', gap: 4 }}>
+              <button onClick={e => { e.stopPropagation(); startEditing(theme); }} style={{ fontSize: 12, padding: '2px 8px' }}>
+                Editar
+              </button>
+              {!BUILT_IN_THEMES.find(t => t.name === theme.name) && (
+                <button onClick={e => { e.stopPropagation(); handleDelete(theme.name); }} style={{ fontSize: 12, padding: '2px 8px', color: 'var(--danger)' }}>
+                  Deletar
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {editing && (
+        <div className="theme-editor">
+          <h3>{editing.name ? 'Editar Tema' : 'Novo Tema'}</h3>
+          <input
+            placeholder="Nome do tema"
+            value={newName}
+            onChange={e => setNewName(e.target.value)}
+            style={{ width: '100%', marginBottom: 16 }}
+          />
+          <div className="theme-editor-grid">
+            {Object.entries(THEME_VARIABLE_LABELS).map(([key, label]) => (
+              <div key={key} className="theme-editor-field">
+                <label>{label}</label>
+                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                  <input
+                    type="color"
+                    value={variables[key] || DEFAULT_VARIABLES[key]}
+                    onChange={e => updateVariable(key, e.target.value)}
+                    style={{ width: 40, height: 36, padding: 0, border: 'none', cursor: 'pointer' }}
+                  />
+                  <input
+                    value={variables[key] || ''}
+                    onChange={e => updateVariable(key, e.target.value)}
+                    style={{ flex: 1, fontFamily: 'monospace', fontSize: 13 }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+            <button className="primary" onClick={handleSave}>Salvar</button>
+            <button onClick={() => setEditing(null)}>Cancelar</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/web/src/components/ThemeSelector.tsx

@@ -0,0 +1,41 @@
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '../hooks/ThemeContext';
+import { BUILT_IN_THEMES } from '../api/themes';
+
+export default function ThemeSelector() {
+  const { themeName, selectTheme, customThemes } = useTheme();
+  const allThemes = [...BUILT_IN_THEMES, ...customThemes];
+  const navigate = useNavigate();
+
+  return (
+    <div style={{ padding: '8px', borderTop: '1px solid var(--border)' }}>
+      <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginBottom: 4, padding: '0 8px' }}>
+        TEMA
+      </div>
+      {allThemes.map(theme => (
+        <div
+          key={theme.name}
+          onClick={() => selectTheme(theme.name)}
+          className={`nav-item ${themeName === theme.name ? 'active' : ''}`}
+          style={{ fontSize: 13, padding: '6px 8px', display: 'flex', alignItems: 'center', gap: 8 }}
+        >
+          <span style={{
+            display: 'inline-block',
+            width: 10,
+            height: 10,
+            borderRadius: '50%',
+            background: theme.variables['--accent'],
+          }} />
+          {theme.name}
+        </div>
+      ))}
+      <div
+        onClick={() => navigate('/themes')}
+        className="nav-item"
+        style={{ fontSize: 13, padding: '6px 8px' }}
+      >
+        ✏️ Gerenciar temas
+      </div>
+    </div>
+  );
+}