Button moved, toast errors / success/ modal closes on submission.

backend/src/api/main.py

@@ -2,12 +2,17 @@
 
 from __future__ import annotations
 
+import logging
+
 from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse
 
+from ..services.database import DatabaseService
 from .routes import index, notes, search
 
+logger = logging.getLogger(__name__)
+
 app = FastAPI(
     title="Document Viewer API",
     description="Multi-tenant Obsidian-like documentation system",
@@ -24,6 +29,19 @@ app.add_middleware(
 )
 
 
+# Startup event to initialize database
+@app.on_event("startup")
+async def startup_event():
+    """Initialize database schema on startup if it doesn't exist."""
+    try:
+        db_service = DatabaseService()
+        db_service.initialize()
+        logger.info("Database initialized successfully")
+    except Exception as e:
+        logger.error(f"Failed to initialize database: {e}")
+        raise
+
+
 # Error handlers
 @app.exception_handler(404)
 async def not_found_handler(request: Request, exc: Exception):

backend/src/api/routes/notes.py

@@ -67,13 +67,21 @@ async def create_note(create: NoteCreate):
     
     try:
         note_path = create.note_path
-        
+
         # Check if note already exists
         try:
             vault_service.read_note(user_id, note_path)
-            raise HTTPException(status_code=409, detail=f"Note already exists: {note_path}")
+            raise HTTPException(
+                status_code=409,
+                detail={
+                    "error": "note_already_exists",
+                    "message": f"A note with the name '{note_path}' already exists. Please choose a different name.",
+                }
+            )
         except FileNotFoundError:
             pass  # Good, note doesn't exist
+        except HTTPException:
+            raise  # Re-raise HTTP exceptions
         
         # Prepare metadata
         metadata = create.metadata.model_dump() if create.metadata else {}
@@ -103,15 +111,27 @@ async def create_note(create: NoteCreate):
         # Return created note
         created = written_note["metadata"].get("created")
         updated_ts = written_note["metadata"].get("updated")
-        
-        if isinstance(created, str):
-            created = datetime.fromisoformat(created.replace("Z", "+00:00"))
-        elif not isinstance(created, datetime):
+
+        # Parse created timestamp
+        try:
+            if isinstance(created, str):
+                created = datetime.fromisoformat(created.replace("Z", "+00:00"))
+            elif isinstance(created, datetime):
+                pass  # Already a datetime
+            else:
+                created = datetime.now()
+        except (ValueError, TypeError):
             created = datetime.now()
-            
-        if isinstance(updated_ts, str):
-            updated_ts = datetime.fromisoformat(updated_ts.replace("Z", "+00:00"))
-        elif not isinstance(updated_ts, datetime):
+
+        # Parse updated timestamp
+        try:
+            if isinstance(updated_ts, str):
+                updated_ts = datetime.fromisoformat(updated_ts.replace("Z", "+00:00"))
+            elif isinstance(updated_ts, datetime):
+                pass  # Already a datetime
+            else:
+                updated_ts = created
+        except (ValueError, TypeError):
             updated_ts = created
         
         return Note(
@@ -163,15 +183,27 @@ async def get_note(path: str):
         metadata = note_data.get("metadata", {})
         created = metadata.get("created")
         updated = metadata.get("updated")
-        
-        if isinstance(created, str):
-            created = datetime.fromisoformat(created.replace("Z", "+00:00"))
-        elif not isinstance(created, datetime):
+
+        # Parse created timestamp
+        try:
+            if isinstance(created, str):
+                created = datetime.fromisoformat(created.replace("Z", "+00:00"))
+            elif isinstance(created, datetime):
+                pass  # Already a datetime
+            else:
+                created = datetime.now()
+        except (ValueError, TypeError):
             created = datetime.now()
-            
-        if isinstance(updated, str):
-            updated = datetime.fromisoformat(updated.replace("Z", "+00:00"))
-        elif not isinstance(updated, datetime):
+
+        # Parse updated timestamp
+        try:
+            if isinstance(updated, str):
+                updated = datetime.fromisoformat(updated.replace("Z", "+00:00"))
+            elif isinstance(updated, datetime):
+                pass  # Already a datetime
+            else:
+                updated = created
+        except (ValueError, TypeError):
             updated = created
         
         return Note(
@@ -249,15 +281,27 @@ async def update_note(path: str, update: NoteUpdate):
         # Return updated note
         created = written_note["metadata"].get("created")
         updated_ts = written_note["metadata"].get("updated")
-        
-        if isinstance(created, str):
-            created = datetime.fromisoformat(created.replace("Z", "+00:00"))
-        elif not isinstance(created, datetime):
+
+        # Parse created timestamp
+        try:
+            if isinstance(created, str):
+                created = datetime.fromisoformat(created.replace("Z", "+00:00"))
+            elif isinstance(created, datetime):
+                pass  # Already a datetime
+            else:
+                created = datetime.now()
+        except (ValueError, TypeError):
             created = datetime.now()
-            
-        if isinstance(updated_ts, str):
-            updated_ts = datetime.fromisoformat(updated_ts.replace("Z", "+00:00"))
-        elif not isinstance(updated_ts, datetime):
+
+        # Parse updated timestamp
+        try:
+            if isinstance(updated_ts, str):
+                updated_ts = datetime.fromisoformat(updated_ts.replace("Z", "+00:00"))
+            elif isinstance(updated_ts, datetime):
+                pass  # Already a datetime
+            else:
+                updated_ts = created
+        except (ValueError, TypeError):
             updated_ts = created
         
         return Note(

frontend/package-lock.json

@@ -28,6 +28,7 @@
         "react-router-dom": "^7.9.6",
         "remark-gfm": "^4.0.1",
         "shadcn-ui": "^0.9.0",
+        "sonner": "^2.0.7",
         "typescript": "~5.9.3",
         "vite": "^7.2.2"
       },
@@ -118,7 +119,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -710,7 +710,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1736,7 +1735,6 @@
       "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^14.21.3 || >=16"
       },
@@ -3324,7 +3322,6 @@
       "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -3334,7 +3331,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.5.tgz",
       "integrity": "sha512-keKxkZMqnDicuvFoJbzrhbtdLSPhj/rZThDlKWCDbgXmUg0rEUFtRssDXKYmtXluZlIqiC5VqkCgRwzuyLHKHw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -3345,7 +3341,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3409,7 +3404,6 @@
       "integrity": "sha512-tK3GPFWbirvNgsNKto+UmB/cRtn6TZfyw0D6IKrW55n6Vbs7KJoZtI//kpTKzE/DUmmnAFD8/Ca46s7Obs92/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.4",
         "@typescript-eslint/types": "8.46.4",
@@ -3682,7 +3676,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4003,7 +3996,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4878,7 +4870,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5147,7 +5138,6 @@
       "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.0",
@@ -6202,7 +6192,6 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -8043,7 +8032,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -8355,7 +8343,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8365,7 +8352,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -9094,6 +9080,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -9408,7 +9404,6 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -9540,7 +9535,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9720,7 +9714,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -10123,7 +10116,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -10314,7 +10306,6 @@
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
       "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
       "license": "ISC",
-      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -10441,7 +10432,6 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

frontend/package.json

@@ -30,6 +30,7 @@
     "react-router-dom": "^7.9.6",
     "remark-gfm": "^4.0.1",
     "shadcn-ui": "^0.9.0",
+    "sonner": "^2.0.7",
     "typescript": "~5.9.3",
     "vite": "^7.2.2"
   },

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import { MainApp } from './pages/MainApp';
 import { Login } from './pages/Login';
 import { Settings } from './pages/Settings';
 import { isAuthenticated, getCurrentUser } from './services/auth';
+import { Toaster } from './components/ui/toaster';
 import './App.css';
 
 // Protected route wrapper with auth check
@@ -59,27 +60,30 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/login" element={<Login />} />
-        <Route
-          path="/"
-          element={
-            <ProtectedRoute>
-              <MainApp />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/settings"
-          element={
-            <ProtectedRoute>
-              <Settings />
-            </ProtectedRoute>
-          }
-        />
-      </Routes>
-    </BrowserRouter>
+    <>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route
+            path="/"
+            element={
+              <ProtectedRoute>
+                <MainApp />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/settings"
+            element={
+              <ProtectedRoute>
+                <Settings />
+              </ProtectedRoute>
+            }
+          />
+        </Routes>
+      </BrowserRouter>
+      <Toaster />
+    </>
   );
 }
 

frontend/src/components/ui/toaster.tsx

@@ -0,0 +1,20 @@
+import { Toaster as Sonner } from 'sonner';
+
+export function Toaster() {
+  return (
+    <Sonner
+      position="top-center"
+      toastOptions={{
+        duration: 8000,
+        unstyled: true,
+        classNames: {
+          toast: 'relative flex items-center gap-3 rounded-lg border border-border bg-background p-4 shadow-lg',
+          error: 'border-red-500/50 bg-red-50 dark:bg-red-950',
+          success: 'border-green-500/50 bg-green-50 dark:bg-green-950',
+          warning: 'border-yellow-500/50 bg-yellow-50 dark:bg-yellow-950',
+          info: 'border-blue-500/50 bg-blue-50 dark:bg-blue-950',
+        },
+      }}
+    />
+  );
+}

frontend/src/hooks/useToast.ts

@@ -0,0 +1,10 @@
+import { toast } from 'sonner';
+
+export function useToast() {
+  return {
+    error: (message: string) => toast.error(message),
+    success: (message: string) => toast.success(message),
+    info: (message: string) => toast.info(message),
+    warning: (message: string) => toast.warning(message),
+  };
+}

frontend/src/lib/markdown.ts

@@ -34,24 +34,26 @@ export function createWikilinkComponent(
         // Add the wikilink as a clickable element
         const linkText = match[1];
         parts.push(
-          <span
-            key={key++}
-            className="wikilink cursor-pointer text-primary hover:underline"
-            onClick={(e) => {
-              e.preventDefault();
-              onWikilinkClick?.(linkText);
-            }}
-            role="link"
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
+          React.createElement(
+            'span',
+            {
+              key: key++,
+              className: 'wikilink cursor-pointer text-primary hover:underline',
+              onClick: (e: React.MouseEvent) => {
                 e.preventDefault();
                 onWikilinkClick?.(linkText);
-              }
-            }}
-          >
-            [[{linkText}]]
-          </span>
+              },
+              role: 'link',
+              tabIndex: 0,
+              onKeyDown: (e: React.KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onWikilinkClick?.(linkText);
+                }
+              },
+            },
+            `[[${linkText}]]`
+          )
         );
 
         lastIndex = pattern.lastIndex;
@@ -62,102 +64,80 @@ export function createWikilinkComponent(
         parts.push(value.slice(lastIndex));
       }
 
-      return parts.length > 0 ? <>{parts}</> : value;
+      return parts.length > 0 ? React.createElement(React.Fragment, {}, ...parts) : value;
     },
-    
+
     // Style code blocks
-    code: ({ className, children, ...props }) => {
+    code: ({ className, children, ...props }: any) => {
       const match = /language-(\w+)/.exec(className || '');
       const isInline = !match;
 
       if (isInline) {
-        return (
-          <code className="bg-muted px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
-            {children}
-          </code>
+        return React.createElement(
+          'code',
+          {
+            className: 'bg-muted px-1.5 py-0.5 rounded text-sm font-mono',
+            ...props,
+          },
+          children
         );
       }
 
-      return (
-        <code
-          className={`${className} block bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono`}
-          {...props}
-        >
-          {children}
-        </code>
+      return React.createElement(
+        'code',
+        {
+          className: `${className} block bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono`,
+          ...props,
+        },
+        children
       );
     },
 
     // Style links
-    a: ({ href, children, ...props }) => {
+    a: ({ href, children, ...props }: any) => {
       const isExternal = href?.startsWith('http');
-      return (
-        <a
-          href={href}
-          className="text-primary hover:underline"
-          target={isExternal ? '_blank' : undefined}
-          rel={isExternal ? 'noopener noreferrer' : undefined}
-          {...props}
-        >
-          {children}
-        </a>
+      return React.createElement(
+        'a',
+        {
+          href,
+          className: 'text-primary hover:underline',
+          target: isExternal ? '_blank' : undefined,
+          rel: isExternal ? 'noopener noreferrer' : undefined,
+          ...props,
+        },
+        children
       );
     },
 
     // Style headings
-    h1: ({ children, ...props }) => (
-      <h1 className="text-3xl font-bold mt-6 mb-4" {...props}>
-        {children}
-      </h1>
-    ),
-    h2: ({ children, ...props }) => (
-      <h2 className="text-2xl font-semibold mt-5 mb-3" {...props}>
-        {children}
-      </h2>
-    ),
-    h3: ({ children, ...props }) => (
-      <h3 className="text-xl font-semibold mt-4 mb-2" {...props}>
-        {children}
-      </h3>
-    ),
+    h1: ({ children, ...props }: any) =>
+      React.createElement('h1', { className: 'text-3xl font-bold mt-6 mb-4', ...props }, children),
+    h2: ({ children, ...props }: any) =>
+      React.createElement('h2', { className: 'text-2xl font-semibold mt-5 mb-3', ...props }, children),
+    h3: ({ children, ...props }: any) =>
+      React.createElement('h3', { className: 'text-xl font-semibold mt-4 mb-2', ...props }, children),
 
     // Style lists
-    ul: ({ children, ...props }) => (
-      <ul className="list-disc list-inside my-2 space-y-1" {...props}>
-        {children}
-      </ul>
-    ),
-    ol: ({ children, ...props }) => (
-      <ol className="list-decimal list-inside my-2 space-y-1" {...props}>
-        {children}
-      </ol>
-    ),
+    ul: ({ children, ...props }: any) =>
+      React.createElement('ul', { className: 'list-disc list-inside my-2 space-y-1', ...props }, children),
+    ol: ({ children, ...props }: any) =>
+      React.createElement('ol', { className: 'list-decimal list-inside my-2 space-y-1', ...props }, children),
 
     // Style blockquotes
-    blockquote: ({ children, ...props }) => (
-      <blockquote className="border-l-4 border-muted-foreground pl-4 italic my-4" {...props}>
-        {children}
-      </blockquote>
-    ),
+    blockquote: ({ children, ...props }: any) =>
+      React.createElement('blockquote', { className: 'border-l-4 border-muted-foreground pl-4 italic my-4', ...props }, children),
 
     // Style tables
-    table: ({ children, ...props }) => (
-      <div className="overflow-x-auto my-4">
-        <table className="min-w-full border-collapse border border-border" {...props}>
-          {children}
-        </table>
-      </div>
-    ),
-    th: ({ children, ...props }) => (
-      <th className="border border-border px-4 py-2 bg-muted font-semibold text-left" {...props}>
-        {children}
-      </th>
-    ),
-    td: ({ children, ...props }) => (
-      <td className="border border-border px-4 py-2" {...props}>
-        {children}
-      </td>
-    ),
+    table: ({ children, ...props }: any) =>
+      React.createElement(
+        'div',
+        { className: 'overflow-x-auto my-4' },
+        React.createElement('table', { className: 'min-w-full border-collapse border border-border', ...props }, children)
+      ),
+    th: ({ children, ...props }: any) =>
+      React.createElement('th', { className: 'border border-border px-4 py-2 bg-muted font-semibold text-left', ...props }, children),
+    td: ({ children, ...props }: any) =>
+      React.createElement('td', { className: 'border border-border px-4 py-2', ...props }, children),
   };
 }
 
@@ -168,16 +148,15 @@ export function renderBrokenWikilink(
   linkText: string,
   onCreate?: () => void
 ): React.ReactElement {
-  return (
-    <span
-      className="wikilink-broken text-destructive border-b border-dashed border-destructive cursor-pointer hover:bg-destructive/10"
-      onClick={onCreate}
-      role="link"
-      tabIndex={0}
-      title={`Note "${linkText}" not found. Click to create.`}
-    >
-      [[{linkText}]]
-    </span>
+  return React.createElement(
+    'span',
+    {
+      className: 'wikilink-broken text-destructive border-b border-dashed border-destructive cursor-pointer hover:bg-destructive/10',
+      onClick: onCreate,
+      role: 'link',
+      tabIndex: 0,
+      title: `Note "${linkText}" not found. Click to create.`,
+    },
+    `[[${linkText}]]`
   );
 }
-

frontend/src/pages/MainApp.tsx

@@ -13,6 +13,7 @@ import { DirectoryTree } from '@/components/DirectoryTree';
 import { SearchBar } from '@/components/SearchBar';
 import { NoteViewer } from '@/components/NoteViewer';
 import { NoteEditor } from '@/components/NoteEditor';
+import { useToast } from '@/hooks/useToast';
 import {
   listNotes,
   getNote,
@@ -24,6 +25,7 @@ import {
 } from '@/services/api';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -38,6 +40,7 @@ import { normalizeSlug } from '@/lib/wikilink';
 
 export function MainApp() {
   const navigate = useNavigate();
+  const toast = useToast();
   const [notes, setNotes] = useState<NoteSummary[]>([]);
   const [selectedPath, setSelectedPath] = useState<string | null>(null);
   const [currentNote, setCurrentNote] = useState<Note | null>(null);
@@ -49,6 +52,7 @@ export function MainApp() {
   const [indexHealth, setIndexHealth] = useState<IndexHealth | null>(null);
   const [isNewNoteDialogOpen, setIsNewNoteDialogOpen] = useState(false);
   const [newNoteName, setNewNoteName] = useState('');
+  const [isCreatingNote, setIsCreatingNote] = useState(false);
 
   // T083: Load directory tree on mount
   // T119: Load index health
@@ -171,36 +175,76 @@ export function MainApp() {
     setIsEditMode(false);
   };
 
+  // Handle dialog open change
+  const handleDialogOpenChange = (open: boolean) => {
+    setIsNewNoteDialogOpen(open);
+    if (!open) {
+      // Clear input when dialog closes
+      setNewNoteName('');
+    }
+  };
+
   // Handle create new note
   const handleCreateNote = async () => {
-    if (!newNoteName.trim()) return;
-    
+    if (!newNoteName.trim() || isCreatingNote) return;
+
+    setIsCreatingNote(true);
+    setError(null);
+
     try {
-      const notePath = newNoteName.endsWith('.md') ? newNoteName : `${newNoteName}.md`;
-      const note = await createNote({
-        note_path: notePath,
-        title: newNoteName.replace(/\.md$/, ''),
-        body: `# ${newNoteName.replace(/\.md$/, '')}\n\nStart writing your note here...`,
-      });
-      
-      // Refresh notes list
-      const notesList = await listNotes();
-      setNotes(notesList);
-      
-      // Select the new note
-      setSelectedPath(note.note_path);
-      setIsNewNoteDialogOpen(false);
-      setNewNoteName('');
-      
-      // Switch to edit mode for the new note
-      setIsEditMode(true);
+      const baseName = newNoteName.replace(/\.md$/, '');
+      let notePath = newNoteName.endsWith('.md') ? newNoteName : `${newNoteName}.md`;
+      let attempt = 1;
+      const maxAttempts = 100;
+
+      // Retry with number suffix if note already exists
+      while (attempt <= maxAttempts) {
+        try {
+          const note = await createNote({
+            note_path: notePath,
+            title: baseName,
+            body: `# ${baseName}\n\nStart writing your note here...`,
+          });
+
+          // Refresh notes list
+          const notesList = await listNotes();
+          setNotes(notesList);
+
+          // Select the new note
+          setSelectedPath(note.note_path);
+          setIsEditMode(true);
+          const displayName = notePath.replace(/\.md$/, '');
+          toast.success(`Note "${displayName}" created successfully`);
+          break;
+        } catch (err) {
+          if (err instanceof APIException && err.status === 409) {
+            // Note already exists, try with number suffix
+            attempt++;
+            if (attempt <= maxAttempts) {
+              notePath = `${baseName} ${attempt}.md`;
+              continue;
+            } else {
+              throw err;
+            }
+          } else {
+            throw err;
+          }
+        }
+      }
     } catch (err) {
+      let errorMessage = 'Failed to create note';
       if (err instanceof APIException) {
-        setError(err.error);
-      } else {
-        setError('Failed to create note');
+        // Use the message field which contains the actual error description
+        errorMessage = err.message || err.error;
+      } else if (err instanceof Error) {
+        errorMessage = err.message;
       }
+      toast.error(errorMessage);
       console.error('Error creating note:', err);
+    } finally {
+      setIsCreatingNote(false);
+      // Always close dialog, regardless of success or failure
+      handleDialogOpenChange(false);
     }
   };
 
@@ -210,50 +254,9 @@ export function MainApp() {
       <div className="border-b border-border p-4">
         <div className="flex items-center justify-between">
           <h1 className="text-xl font-semibold">📚 Document Viewer</h1>
-          <div className="flex gap-2">
-            <Dialog open={isNewNoteDialogOpen} onOpenChange={setIsNewNoteDialogOpen}>
-              <DialogTrigger asChild>
-                <Button variant="outline" size="sm">
-                  <Plus className="h-4 w-4 mr-2" />
-                  New Note
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>Create New Note</DialogTitle>
-                  <DialogDescription>
-                    Enter a name for your new note. The .md extension will be added automatically if not provided.
-                  </DialogDescription>
-                </DialogHeader>
-                <div className="grid gap-4 py-4">
-                  <div className="grid gap-2">
-                    <label htmlFor="note-name" className="text-sm font-medium">Note Name</label>
-                    <Input
-                      id="note-name"
-                      placeholder="my-note"
-                      value={newNoteName}
-                      onChange={(e) => setNewNoteName(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                          handleCreateNote();
-                        }
-                      }}
-                    />
-                  </div>
-                </div>                <DialogFooter>
-                  <Button variant="outline" onClick={() => setIsNewNoteDialogOpen(false)}>
-                    Cancel
-                  </Button>
-                  <Button onClick={handleCreateNote} disabled={!newNoteName.trim()}>
-                    Create Note
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-            <Button variant="ghost" size="sm" onClick={() => navigate('/settings')}>
-              <SettingsIcon className="h-4 w-4" />
-            </Button>
-          </div>
+          <Button variant="ghost" size="sm" onClick={() => navigate('/settings')}>
+            <SettingsIcon className="h-4 w-4" />
+          </Button>
         </div>
       </div>
 
@@ -264,6 +267,56 @@ export function MainApp() {
           <ResizablePanel defaultSize={25} minSize={15} maxSize={40}>
             <div className="h-full flex flex-col">
               <div className="p-4 space-y-4">
+                <Dialog
+                  open={isNewNoteDialogOpen}
+                  onOpenChange={handleDialogOpenChange}
+                >
+                  <DialogTrigger asChild>
+                    <Button variant="outline" size="sm" className="w-full">
+                      <Plus className="h-4 w-4 mr-1" />
+                      New Note
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>
+                      <DialogTitle>Create New Note</DialogTitle>
+                      <DialogDescription>
+                        Enter a name for your new note. The .md extension will be added automatically if not provided.
+                      </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4 py-4">
+                      <div className="grid gap-2">
+                        <label htmlFor="note-name" className="text-sm font-medium">Note Name</label>
+                        <Input
+                          id="note-name"
+                          placeholder="my-note"
+                          value={newNoteName}
+                          onChange={(e) => setNewNoteName(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              handleCreateNote();
+                            }
+                          }}
+                        />
+                      </div>
+                    </div>
+                    <DialogFooter>
+                      <Button
+                        variant="outline"
+                        onClick={() => setIsNewNoteDialogOpen(false)}
+                        disabled={isCreatingNote}
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        onClick={handleCreateNote}
+                        disabled={!newNoteName.trim() || isCreatingNote}
+                      >
+                        {isCreatingNote ? 'Creating...' : 'Create Note'}
+                      </Button>
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
                 <SearchBar onSelectNote={handleSelectNote} />
                 <Separator />
               </div>