opensidian 1.0.0

package/web/src/components/VaultList.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api, Vault } from '../api/client';
+
+interface VaultListProps {
+  onSelect: (path: string) => void;
+}
+
+export default function VaultList({ onSelect }: VaultListProps) {
+  const [vaults, setVaults] = useState<Vault[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newPath, setNewPath] = useState('');
+  const navigate = useNavigate();
+
+  const load = async () => {
+    try {
+      const res = await api.vaults.list();
+      setVaults(res.vaults);
+    } catch (err) {
+      console.error('Failed to load vaults:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const handleCreate = async () => {
+    if (!newName || !newPath) return;
+    try {
+      await api.vaults.create(newName, newPath);
+      setShowCreate(false);
+      setNewName('');
+      setNewPath('');
+      await load();
+    } catch (err) {
+      console.error('Failed to create vault:', err);
+    }
+  };
+
+  const selectVault = (vault: Vault) => {
+    onSelect(vault.path);
+    navigate('/notes');
+  };
+
+  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 }}>
+        <h2>Vaults</h2>
+        <button className="primary" onClick={() => setShowCreate(true)}>+ Novo Vault</button>
+      </div>
+
+      {vaults.length === 0 ? (
+        <div className="empty-state">
+          <h2>Nenhum vault ainda</h2>
+          <p>Crie um vault para começar a escrever notas</p>
+        </div>
+      ) : (
+        <div className="vault-grid">
+          {vaults.map(vault => (
+            <div key={vault.path} className="vault-card" onClick={() => selectVault(vault)}>
+              <h3>{vault.name}</h3>
+              <p>{vault.notes.length} notas</p>
+              <p>{new Date(vault.created).toLocaleDateString()}</p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <div className="modal-overlay" onClick={() => setShowCreate(false)}>
+          <div className="modal" onClick={e => e.stopPropagation()}>
+            <h2>Novo Vault</h2>
+            <input placeholder="Nome" value={newName} onChange={e => setNewName(e.target.value)} style={{ width: '100%', marginBottom: 8 }} />
+            <input placeholder="Caminho (ex: ./vaults/meu-vault)" value={newPath} onChange={e => setNewPath(e.target.value)} style={{ width: '100%' }} />
+            <div className="modal-actions">
+              <button onClick={() => setShowCreate(false)}>Cancelar</button>
+              <button className="primary" onClick={handleCreate}>Criar</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/web/src/hooks/AuthContext.tsx

@@ -0,0 +1,57 @@
+import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
+import { authApi, AuthUser, getToken, setToken, removeToken } from '../api/auth';
+
+interface AuthContextType {
+  user: AuthUser | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (email: string, password: string, name: string) => Promise<void>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType>(null!);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = getToken();
+    if (!token) {
+      setLoading(false);
+      return;
+    }
+    authApi.me()
+      .then(res => setUser(res.user))
+      .catch(() => removeToken())
+      .finally(() => setLoading(false));
+  }, []);
+
+  const login = useCallback(async (email: string, password: string) => {
+    const res = await authApi.login(email, password);
+    setToken(res.token);
+    setUser(res.user);
+  }, []);
+
+  const register = useCallback(async (email: string, password: string, name: string) => {
+    const res = await authApi.register(email, password, name);
+    setToken(res.token);
+    setUser(res.user);
+  }, []);
+
+  const logout = useCallback(() => {
+    authApi.logout().catch(() => {});
+    removeToken();
+    setUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

package/web/src/hooks/ThemeContext.tsx

@@ -0,0 +1,77 @@
+import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+import { themesApi, BUILT_IN_THEMES, CustomTheme } from '../api/themes';
+
+interface ThemeContextType {
+  themeName: string;
+  currentVariables: Record<string, string>;
+  customThemes: CustomTheme[];
+  selectTheme: (name: string) => void;
+  saveCustomTheme: (theme: CustomTheme) => Promise<void>;
+  deleteCustomTheme: (name: string) => Promise<void>;
+}
+
+const ThemeContext = createContext<ThemeContextType>(null!);
+
+const STORAGE_KEY = 'opensidian_theme';
+
+function getStoredTheme(): string {
+  return localStorage.getItem(STORAGE_KEY) || 'Claro';
+}
+
+function getAllThemes(custom: CustomTheme[]): CustomTheme[] {
+  return [...BUILT_IN_THEMES, ...custom];
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [themeName, setThemeName] = useState(getStoredTheme);
+  const [customThemes, setCustomThemes] = useState<CustomTheme[]>([]);
+
+  useEffect(() => {
+    themesApi.list().then(res => setCustomThemes(res.themes)).catch(() => {});
+  }, []);
+
+  const currentVariables = useCallback(() => {
+    const all = getAllThemes(customThemes);
+    const found = all.find(t => t.name === themeName);
+    return found?.variables || BUILT_IN_THEMES[0].variables;
+  }, [themeName, customThemes])();
+
+  useEffect(() => {
+    const root = document.documentElement;
+    for (const [key, val] of Object.entries(currentVariables)) {
+      root.style.setProperty(key, val as string);
+    }
+    localStorage.setItem(STORAGE_KEY, themeName);
+  }, [themeName, currentVariables]);
+
+  const selectTheme = useCallback((name: string) => {
+    setThemeName(name);
+  }, []);
+
+  const saveCustomTheme = useCallback(async (theme: CustomTheme) => {
+    await themesApi.save(theme);
+    setCustomThemes(prev => {
+      const filtered = prev.filter(t => t.name !== theme.name);
+      return [...filtered, theme];
+    });
+    setThemeName(theme.name);
+  }, []);
+
+  const deleteCustomTheme = useCallback(async (name: string) => {
+    await themesApi.delete(name);
+    setCustomThemes(prev => prev.filter(t => t.name !== name));
+    if (themeName === name) {
+      setThemeName('Claro');
+    }
+  }, [themeName]);
+
+  return (
+    <ThemeContext.Provider value={{ themeName, currentVariables, customThemes, selectTheme, saveCustomTheme, deleteCustomTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

package/web/src/hooks/useWebSocket.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+export function useWebSocket(vaultPath: string) {
+  const ws = useRef<WebSocket | null>(null);
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    if (!vaultPath) return;
+    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const url = `${proto}//${window.location.hostname}:3001`;
+    const socket = new WebSocket(url);
+    ws.current = socket;
+
+    socket.onopen = () => {
+      setConnected(true);
+      socket.send(JSON.stringify({ type: 'sync_request', vaultPath }));
+    };
+
+    socket.onclose = () => setConnected(false);
+    socket.onerror = () => setConnected(false);
+
+    return () => {
+      socket.close();
+    };
+  }, [vaultPath]);
+
+  const send = useCallback((data: unknown) => {
+    if (ws.current?.readyState === WebSocket.OPEN) {
+      ws.current.send(JSON.stringify(data));
+    }
+  }, []);
+
+  return { connected, send };
+}

package/web/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/global.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/web/src/styles/global.css

@@ -0,0 +1,449 @@
+:root,
+[data-theme='light'] {
+  --bg: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --bg-tertiary: #ebebeb;
+  --text: #1a1a1a;
+  --text-secondary: #666;
+  --border: #ddd;
+  --accent: #6c31e0;
+  --accent-hover: #5a28c0;
+  --danger: #e03e3e;
+  --success: #2e7d32;
+  --shadow: 0 1px 3px rgba(0,0,0,0.08);
+  --radius: 6px;
+}
+
+[data-theme='dark'] {
+  --bg: #1a1a2e;
+  --bg-secondary: #16213e;
+  --bg-tertiary: #0f3460;
+  --text: #e0e0e0;
+  --text-secondary: #999;
+  --border: #333;
+  --accent: #7c4dff;
+  --accent-hover: #651fff;
+  --danger: #cf6679;
+  --success: #4caf50;
+  --shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+button {
+  cursor: pointer;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 6px 14px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+}
+button:hover { background: var(--bg-secondary); }
+button.primary {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+button.primary:hover { background: var(--accent-hover); }
+
+input, textarea {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 8px 12px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+  outline: none;
+}
+input:focus, textarea:focus { border-color: var(--accent); }
+
+.layout {
+  display: flex;
+  height: 100vh;
+}
+
+.sidebar {
+  width: 260px;
+  min-width: 260px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-header h1 {
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.nav-item:hover { background: var(--bg-tertiary); text-decoration: none; }
+.nav-item.active { background: var(--accent); color: #fff; }
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.toolbar {
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--bg);
+}
+
+.toolbar input {
+  flex: 1;
+  max-width: 400px;
+}
+
+.content-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* Vault Cards */
+.vault-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  max-width: 900px;
+}
+
+.vault-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.vault-card:hover { border-color: var(--accent); }
+.vault-card h3 { font-size: 16px; margin-bottom: 4px; }
+.vault-card p { font-size: 13px; color: var(--text-secondary); }
+
+/* Note List */
+.note-list { max-width: 700px; }
+.note-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.note-item:hover { background: var(--bg-secondary); text-decoration: none; }
+.note-item .note-title { font-weight: 500; }
+.note-item .note-date { font-size: 12px; color: var(--text-secondary); }
+
+/* Editor */
+.editor-layout {
+  display: flex;
+  flex: 1;
+  height: 100%;
+  gap: 1px;
+  background: var(--border);
+}
+
+.editor-pane, .preview-pane {
+  flex: 1;
+  overflow-y: auto;
+  background: var(--bg);
+}
+
+.editor-pane textarea {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  resize: none;
+  padding: 20px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 14px;
+  line-height: 1.7;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.preview-pane {
+  padding: 20px;
+  line-height: 1.7;
+}
+
+.preview-pane h1 { font-size: 24px; margin: 16px 0 8px; }
+.preview-pane h2 { font-size: 20px; margin: 14px 0 6px; }
+.preview-pane h3 { font-size: 17px; margin: 12px 0 4px; }
+.preview-pane p { margin: 8px 0; }
+.preview-pane code {
+  background: var(--bg-tertiary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+.preview-pane pre code {
+  display: block;
+  padding: 12px;
+  overflow-x: auto;
+}
+
+/* Graph */
+.graph-container {
+  width: 100%;
+  height: calc(100vh - 120px);
+}
+
+/* Empty state */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 60vh;
+  color: var(--text-secondary);
+  gap: 12px;
+}
+
+.empty-state h2 { font-size: 20px; }
+.empty-state p { font-size: 14px; }
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal {
+  background: var(--bg);
+  border-radius: 8px;
+  padding: 24px;
+  min-width: 360px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+}
+
+.modal h2 { margin-bottom: 16px; font-size: 18px; }
+
+.modal-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+/* Search results */
+.search-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 50;
+}
+
+.search-result-item {
+  padding: 10px 14px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--border);
+}
+.search-result-item:hover { background: var(--bg-secondary); }
+.search-result-item .result-title { font-weight: 500; }
+.search-result-item .result-excerpt { font-size: 12px; color: var(--text-secondary); }
+
+/* Auth Pages */
+.auth-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: var(--bg-secondary);
+}
+
+.auth-card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 32px;
+  width: 100%;
+  max-width: 380px;
+  box-shadow: var(--shadow);
+}
+
+.auth-card h2 {
+  font-size: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.auth-card form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.auth-card input {
+  width: 100%;
+}
+
+.auth-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.auth-logo h1 {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.auth-error {
+  color: var(--danger);
+  font-size: 13px;
+  text-align: center;
+}
+
+.auth-link {
+  text-align: center;
+  font-size: 13px;
+  margin-top: 16px;
+  color: var(--text-secondary);
+}
+
+/* Theme cards */
+.theme-card {
+  border: 2px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+  min-width: 160px;
+}
+.theme-card:hover { border-color: var(--accent); }
+.theme-card--active { border-color: var(--accent); background: var(--bg-secondary); }
+
+.theme-card-preview {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.theme-card-name {
+  font-weight: 500;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+/* Theme editor */
+.theme-editor {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 24px;
+  max-width: 600px;
+}
+.theme-editor h3 { margin-bottom: 16px; font-size: 16px; }
+
+.theme-editor-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.theme-editor-field label {
+  display: block;
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+
+/* Search results full page */
+.search-results-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.search-result-full {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.search-result-full:hover { border-color: var(--accent); }
+.search-result-full .result-title {
+  font-weight: 600;
+  font-size: 15px;
+  margin-bottom: 4px;
+}
+.search-result-full .result-excerpt {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+.search-result-full .result-excerpt mark {
+  background: rgba(108, 49, 224, 0.2);
+  color: var(--text);
+  padding: 0 2px;
+  border-radius: 2px;
+}
+
+details summary {
+  font-weight: 500;
+}