added Skeleton Animations , regular animations, more toasts, folder support, moving files within UI, start script for windows for back end and front end

backend/main.py

@@ -1,5 +1,14 @@
+"""Main entry point for FastAPI application."""
+
+from src.api.main import app
+
+__all__ = ["app"]
+
+
 def main():
-    print("Hello from backend!")
+    """Run the development server (for manual testing)."""
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)
 
 
 if __name__ == "__main__":

backend/src/api/routes/notes.py

@@ -325,5 +325,99 @@ async def update_note(path: str, update: NoteUpdate):
         raise HTTPException(status_code=500, detail=f"Failed to update note: {str(e)}")
 
 
+from pydantic import BaseModel
+
+
+class NoteMoveRequest(BaseModel):
+    """Request payload for moving/renaming a note."""
+    new_path: str
+
+
+@router.patch("/api/notes/{path:path}", response_model=Note)
+async def move_note(path: str, move_request: NoteMoveRequest):
+    """Move or rename a note to a new path."""
+    user_id = get_user_id()
+    vault_service = VaultService()
+    indexer_service = IndexerService()
+    db_service = DatabaseService()
+
+    try:
+        # URL decode the old path
+        old_path = unquote(path)
+        new_path = move_request.new_path
+
+        # Move the note in the vault
+        moved_note = vault_service.move_note(user_id, old_path, new_path)
+
+        # Delete old note index entries
+        conn = db_service.connect()
+        try:
+            with conn:
+                # Delete from all index tables
+                conn.execute("DELETE FROM note_metadata WHERE user_id = ? AND note_path = ?", (user_id, old_path))
+                conn.execute("DELETE FROM note_links WHERE user_id = ? AND source_path = ?", (user_id, old_path))
+                conn.execute("DELETE FROM note_tags WHERE user_id = ? AND note_path = ?", (user_id, old_path))
+        finally:
+            conn.close()
+
+        # Index the note at new location
+        new_version = indexer_service.index_note(user_id, moved_note)
+
+        # Update index health
+        conn = db_service.connect()
+        try:
+            with conn:
+                indexer_service.update_index_health(conn, user_id)
+        finally:
+            conn.close()
+
+        # Parse metadata
+        metadata = moved_note.get("metadata", {})
+        created = metadata.get("created")
+        updated = metadata.get("updated")
+
+        # 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()
+
+        # 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(
+            user_id=user_id,
+            note_path=new_path,
+            version=new_version,
+            title=moved_note["title"],
+            metadata=metadata,
+            body=moved_note["body"],
+            created=created,
+            updated=updated,
+            size_bytes=moved_note.get("size_bytes", len(moved_note["body"].encode("utf-8"))),
+        )
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail=f"Note not found: {path}")
+    except FileExistsError as e:
+        raise HTTPException(status_code=409, detail=str(e))
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to move note: {str(e)}")
+
+
 __all__ = ["router", "ConflictError"]
 

backend/src/services/vault.py

@@ -208,11 +208,11 @@ class VaultService:
     def delete_note(self, user_id: str, note_path: str) -> None:
         """Delete a note from the vault."""
         start_time = time.time()
-        
+
         absolute_path = self.resolve_note_path(user_id, note_path)
         try:
             absolute_path.unlink()
-            
+
             duration_ms = (time.time() - start_time) * 1000
             logger.info(
                 "Note deleted successfully",
@@ -230,6 +230,54 @@ class VaultService:
             )
             raise FileNotFoundError(f"Note not found: {note_path}") from exc
 
+    def move_note(self, user_id: str, old_path: str, new_path: str) -> VaultNote:
+        """Move or rename a note to a new path."""
+        start_time = time.time()
+
+        # Validate both paths
+        is_valid_old, msg_old = validate_note_path(old_path)
+        if not is_valid_old:
+            raise ValueError(f"Invalid source path: {msg_old}")
+
+        is_valid_new, msg_new = validate_note_path(new_path)
+        if not is_valid_new:
+            raise ValueError(f"Invalid destination path: {msg_new}")
+
+        # Resolve absolute paths
+        old_absolute = self.resolve_note_path(user_id, old_path)
+        new_absolute = self.resolve_note_path(user_id, new_path)
+
+        # Check if source exists
+        if not old_absolute.exists():
+            raise FileNotFoundError(f"Source note not found: {old_path}")
+
+        # Check if destination already exists
+        if new_absolute.exists():
+            raise FileExistsError(f"Destination note already exists: {new_path}")
+
+        # Create destination directory if needed
+        new_absolute.parent.mkdir(parents=True, exist_ok=True)
+
+        # Move the file
+        old_absolute.rename(new_absolute)
+
+        # Read and return the note from new location
+        note = self.read_note(user_id, new_path)
+
+        duration_ms = (time.time() - start_time) * 1000
+        logger.info(
+            "Note moved successfully",
+            extra={
+                "user_id": user_id,
+                "old_path": old_path,
+                "new_path": new_path,
+                "operation": "move",
+                "duration_ms": f"{duration_ms:.2f}"
+            }
+        )
+
+        return note
+
     def list_notes(self, user_id: str, folder: str | None = None) -> List[Dict[str, Any]]:
         """List notes (optionally scoped to a folder) with titles and timestamps."""
         base = self.initialize_vault(user_id).resolve()

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 { AuthLoadingSkeleton } from './components/AuthLoadingSkeleton';
 import { Toaster } from './components/ui/toaster';
 import './App.css';
 
@@ -48,11 +49,7 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
   }
 
   if (isChecking) {
-    return (
-      <div className="h-screen flex items-center justify-center bg-background">
-        <div className="text-muted-foreground">Loading...</div>
-      </div>
-    );
+    return <AuthLoadingSkeleton />;
   }
 
   return <>{children}</>;

frontend/src/components/AuthLoadingSkeleton.tsx

@@ -0,0 +1,27 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function AuthLoadingSkeleton() {
+  return (
+    <div className="h-screen flex flex-col items-center justify-center bg-background">
+      <div className="space-y-6 max-w-md w-full px-6">
+        {/* Logo/header area */}
+        <div className="flex flex-col items-center gap-4">
+          <Skeleton className="h-12 w-12 rounded-full" />
+          <Skeleton className="h-6 w-48" />
+        </div>
+
+        {/* Loading animation indicator */}
+        <div className="flex items-center justify-center gap-2">
+          <div className="h-2 w-2 bg-muted rounded-full animate-skeleton-pulse" />
+          <div className="h-2 w-2 bg-muted rounded-full animate-skeleton-pulse" style={{ animationDelay: '0.4s' }} />
+          <div className="h-2 w-2 bg-muted rounded-full animate-skeleton-pulse" style={{ animationDelay: '0.8s' }} />
+        </div>
+
+        {/* Subtle loading text */}
+        <div className="text-center">
+          <Skeleton className="h-4 w-32 mx-auto" />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/DirectoryTree.tsx

@@ -20,6 +20,7 @@ interface DirectoryTreeProps {
   notes: NoteSummary[];
   selectedPath?: string;
   onSelectNote: (path: string) => void;
+  onMoveNote?: (oldPath: string, newFolderPath: string) => void;
 }
 
 /**
@@ -89,10 +90,46 @@ interface TreeNodeItemProps {
   depth: number;
   selectedPath?: string;
   onSelectNote: (path: string) => void;
+  onMoveNote?: (oldPath: string, newFolderPath: string) => void;
 }
 
-function TreeNodeItem({ node, depth, selectedPath, onSelectNote }: TreeNodeItemProps) {
+function TreeNodeItem({ node, depth, selectedPath, onSelectNote, onMoveNote }: TreeNodeItemProps) {
   const [isOpen, setIsOpen] = useState(depth < 2); // Auto-expand first 2 levels
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (node.type === 'folder') {
+      setIsDragOver(true);
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+
+    if (node.type === 'folder') {
+      const draggedPath = e.dataTransfer.getData('application/note-path');
+      if (draggedPath && onMoveNote) {
+        onMoveNote(draggedPath, node.path);
+      }
+    }
+  };
+
+  const handleDragStart = (e: React.DragEvent) => {
+    if (node.type === 'file') {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('application/note-path', node.path);
+    }
+  };
 
   if (node.type === 'folder') {
     return (
@@ -101,10 +138,14 @@ function TreeNodeItem({ node, depth, selectedPath, onSelectNote }: TreeNodeItemP
           variant="ghost"
           className={cn(
             "w-full justify-start font-normal px-2 h-8",
-            "hover:bg-accent"
+            "hover:bg-accent transition-colors duration-200",
+            isDragOver && "bg-accent ring-2 ring-primary"
           )}
           style={{ paddingLeft: `${depth * 12 + 8}px` }}
           onClick={() => setIsOpen(!isOpen)}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
         >
           {isOpen ? (
             <ChevronDown className="h-4 w-4 mr-1 shrink-0" />
@@ -123,6 +164,7 @@ function TreeNodeItem({ node, depth, selectedPath, onSelectNote }: TreeNodeItemP
                 depth={depth + 1}
                 selectedPath={selectedPath}
                 onSelectNote={onSelectNote}
+                onMoveNote={onMoveNote}
               />
             ))}
           </div>
@@ -141,11 +183,14 @@ function TreeNodeItem({ node, depth, selectedPath, onSelectNote }: TreeNodeItemP
       variant="ghost"
       className={cn(
         "w-full justify-start font-normal px-2 h-8",
-        "hover:bg-accent",
-        isSelected && "bg-accent"
+        "hover:bg-accent transition-colors duration-200",
+        isSelected && "bg-accent animate-highlight-pulse",
+        "cursor-move"
       )}
       style={{ paddingLeft: `${depth * 12 + 8}px` }}
       onClick={() => onSelectNote(node.path)}
+      draggable
+      onDragStart={handleDragStart}
     >
       <File className="h-4 w-4 mr-2 shrink-0 text-muted-foreground" />
       <span className="truncate">{displayName}</span>
@@ -153,7 +198,7 @@ function TreeNodeItem({ node, depth, selectedPath, onSelectNote }: TreeNodeItemP
   );
 }
 
-export function DirectoryTree({ notes, selectedPath, onSelectNote }: DirectoryTreeProps) {
+export function DirectoryTree({ notes, selectedPath, onSelectNote, onMoveNote }: DirectoryTreeProps) {
   const tree = useMemo(() => buildTree(notes), [notes]);
 
   if (notes.length === 0) {
@@ -174,6 +219,7 @@ export function DirectoryTree({ notes, selectedPath, onSelectNote }: DirectoryTr
             depth={0}
             selectedPath={selectedPath}
             onSelectNote={onSelectNote}
+            onMoveNote={onMoveNote}
           />
         ))}
       </div>

frontend/src/components/DirectoryTreeSkeleton.tsx

@@ -0,0 +1,26 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function DirectoryTreeSkeleton() {
+  return (
+    <div className="space-y-3 p-4">
+      {/* Main folders */}
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="space-y-2">
+          {/* Folder item */}
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-4 w-4" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+
+          {/* Sub-items */}
+          {[1, 2].map((j) => (
+            <div key={j} className="ml-4 flex items-center gap-2">
+              <Skeleton className="h-4 w-4" />
+              <Skeleton className="h-4 w-28" />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/NoteViewer.tsx

@@ -50,13 +50,13 @@ export function NoteViewer({
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="border-b border-border p-4">
+      <div className="border-b border-border p-4 animate-fade-in">
         <div className="flex items-start justify-between gap-4">
           <div className="flex-1 min-w-0">
-            <h1 className="text-3xl font-bold truncate">{note.title}</h1>
-            <p className="text-sm text-muted-foreground mt-1">{note.note_path}</p>
+            <h1 className="text-3xl font-bold truncate animate-slide-in-up" style={{ animationDelay: '0.1s' }}>{note.title}</h1>
+            <p className="text-sm text-muted-foreground mt-1 animate-fade-in" style={{ animationDelay: '0.2s' }}>{note.note_path}</p>
           </div>
-          <div className="flex gap-2">
+          <div className="flex gap-2 animate-fade-in" style={{ animationDelay: '0.15s' }}>
             {onEdit && (
               <Button variant="outline" size="sm" onClick={onEdit}>
                 <Edit className="h-4 w-4 mr-2" />
@@ -74,7 +74,7 @@ export function NoteViewer({
 
       {/* Content */}
       <ScrollArea className="flex-1 p-6">
-        <div className="prose prose-slate dark:prose-invert max-w-none">
+        <div className="prose prose-slate dark:prose-invert max-w-none animate-fade-in" style={{ animationDelay: '0.3s' }}>
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
             components={markdownComponents}
@@ -86,7 +86,7 @@ export function NoteViewer({
         <Separator className="my-8" />
 
         {/* Metadata Footer */}
-        <div className="space-y-4 text-sm">
+        <div className="space-y-4 text-sm animate-fade-in" style={{ animationDelay: '0.4s' }}>
           {/* Tags */}
           {note.metadata.tags && note.metadata.tags.length > 0 && (
             <div className="flex items-start gap-2">

frontend/src/components/NoteViewerSkeleton.tsx

@@ -0,0 +1,45 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function NoteViewerSkeleton() {
+  return (
+    <div className="space-y-6 p-6">
+      {/* Title skeleton */}
+      <Skeleton className="h-8 w-3/4" />
+
+      {/* Metadata skeleton */}
+      <div className="flex gap-4 text-sm text-muted-foreground">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-4 w-24" />
+        </div>
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-4 w-24" />
+        </div>
+      </div>
+
+      {/* Divider */}
+      <Skeleton className="h-px w-full" />
+
+      {/* Content skeleton - multiple lines */}
+      <div className="space-y-3">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <div key={i} className="space-y-2">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-5/6" />
+          </div>
+        ))}
+      </div>
+
+      {/* Backlinks section skeleton */}
+      <div className="border-t pt-6">
+        <Skeleton className="h-5 w-32 mb-4" />
+        <div className="space-y-2">
+          {[1, 2].map((i) => (
+            <Skeleton key={i} className="h-4 w-full" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/SearchBar.tsx

@@ -4,6 +4,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Search, X } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
 import {
   Command,
   CommandEmpty,
@@ -13,6 +14,7 @@ import {
 } from '@/components/ui/command';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
+import { SearchResultSkeleton } from '@/components/SearchResultSkeleton';
 import { searchNotes } from '@/services/api';
 import type { SearchResult } from '@/types/search';
 
@@ -107,16 +109,19 @@ export function SearchBar({ onSelectNote }: SearchBarProps) {
       </div>
 
       {isOpen && results.length > 0 && (
-        <div className="absolute top-full left-0 right-0 mt-1 z-50">
+        <div className="absolute top-full left-0 right-0 mt-1 z-50 animate-slide-in-down">
           <div className="bg-popover border border-border rounded-md shadow-md max-h-[400px] overflow-auto">
             <Command>
               <CommandList>
                 <CommandGroup heading={`${results.length} result${results.length !== 1 ? 's' : ''}`}>
-                  {results.map((result) => (
+                  {results.map((result, index) => (
                     <CommandItem
                       key={result.note_path}
                       onSelect={() => handleSelectResult(result.note_path)}
-                      className="cursor-pointer"
+                      className={cn(
+                        "cursor-pointer",
+                        index < 5 && `animate-stagger-${index + 1}`
+                      )}
                     >
                       <div className="flex flex-col gap-1 w-full">
                         <div className="font-medium">{result.title}</div>
@@ -138,8 +143,8 @@ export function SearchBar({ onSelectNote }: SearchBarProps) {
 
       {isLoading && (
         <div className="absolute top-full left-0 right-0 mt-1 z-50">
-          <div className="bg-popover border border-border rounded-md shadow-md p-4 text-center text-sm text-muted-foreground">
-            Searching...
+          <div className="bg-popover border border-border rounded-md shadow-md p-3">
+            <SearchResultSkeleton />
           </div>
         </div>
       )}

frontend/src/components/SearchResultSkeleton.tsx

@@ -0,0 +1,19 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SearchResultSkeleton() {
+  return (
+    <div className="space-y-2">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="p-3 border border-border rounded-md space-y-2">
+          {/* Result title */}
+          <Skeleton className="h-4 w-2/3" />
+          {/* Result path */}
+          <Skeleton className="h-3 w-1/2" />
+          {/* Result snippet */}
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-4/5" />
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/SettingsSectionSkeleton.tsx

@@ -0,0 +1,30 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface SettingsSectionSkeletonProps {
+  title: string;
+  description?: string;
+}
+
+export function SettingsSectionSkeleton({ title, description }: SettingsSectionSkeletonProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Profile skeleton */}
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-16 w-16 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-5 w-48" />
+            <Skeleton className="h-4 w-40" />
+            <Skeleton className="h-3 w-36" />
+          </div>
+          <Skeleton className="h-9 w-20" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-skeleton-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

frontend/src/index.css

@@ -58,3 +58,22 @@
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
+
+@layer utilities {
+  /* Stagger animations for list items */
+  .animate-stagger-1 {
+    animation: fade-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .animate-stagger-2 {
+    animation: fade-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
+  }
+  .animate-stagger-3 {
+    animation: fade-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards;
+  }
+  .animate-stagger-4 {
+    animation: fade-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards;
+  }
+  .animate-stagger-5 {
+    animation: fade-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s backwards;
+  }
+}

frontend/src/pages/MainApp.tsx

@@ -4,14 +4,16 @@
  */
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Plus, Settings as SettingsIcon } from 'lucide-react';
+import { Plus, Settings as SettingsIcon, FolderPlus } from 'lucide-react';
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { DirectoryTree } from '@/components/DirectoryTree';
+import { DirectoryTreeSkeleton } from '@/components/DirectoryTreeSkeleton';
 import { SearchBar } from '@/components/SearchBar';
 import { NoteViewer } from '@/components/NoteViewer';
+import { NoteViewerSkeleton } from '@/components/NoteViewerSkeleton';
 import { NoteEditor } from '@/components/NoteEditor';
 import { useToast } from '@/hooks/useToast';
 import {
@@ -20,6 +22,7 @@ import {
   getBacklinks,
   getIndexHealth,
   createNote,
+  moveNote,
   type BacklinkResult,
   APIException,
 } from '@/services/api';
@@ -53,6 +56,9 @@ export function MainApp() {
   const [isNewNoteDialogOpen, setIsNewNoteDialogOpen] = useState(false);
   const [newNoteName, setNewNoteName] = useState('');
   const [isCreatingNote, setIsCreatingNote] = useState(false);
+  const [isNewFolderDialogOpen, setIsNewFolderDialogOpen] = useState(false);
+  const [newFolderName, setNewFolderName] = useState('');
+  const [isCreatingFolder, setIsCreatingFolder] = useState(false);
 
   // T083: Load directory tree on mount
   // T119: Load index health
@@ -175,7 +181,7 @@ export function MainApp() {
     setIsEditMode(false);
   };
 
-  // Handle dialog open change
+  // Handle note dialog open change
   const handleDialogOpenChange = (open: boolean) => {
     setIsNewNoteDialogOpen(open);
     if (!open) {
@@ -184,6 +190,15 @@ export function MainApp() {
     }
   };
 
+  // Handle folder dialog open change
+  const handleFolderDialogOpenChange = (open: boolean) => {
+    setIsNewFolderDialogOpen(open);
+    if (!open) {
+      // Clear input when dialog closes
+      setNewFolderName('');
+    }
+  };
+
   // Handle create new note
   const handleCreateNote = async () => {
     if (!newNoteName.trim() || isCreatingNote) return;
@@ -248,10 +263,126 @@ export function MainApp() {
     }
   };
 
+  // Handle create new folder
+  const handleCreateFolder = async () => {
+    if (!newFolderName.trim() || isCreatingFolder) return;
+
+    setIsCreatingFolder(true);
+    setError(null);
+
+    try {
+      // Create a placeholder note in the folder
+      const folderPath = newFolderName.replace(/\/$/, ''); // Remove trailing slash if present
+      const placeholderPath = `${folderPath}/.placeholder.md`;
+
+      const note = await createNote({
+        note_path: placeholderPath,
+        title: 'Folder',
+        body: `# ${folderPath}\n\nThis folder was created.`,
+      });
+
+      // Refresh notes list
+      const notesList = await listNotes();
+      setNotes(notesList);
+
+      toast.success(`Folder "${folderPath}" created successfully`);
+    } catch (err) {
+      let errorMessage = 'Failed to create folder';
+      if (err instanceof APIException) {
+        errorMessage = err.message || err.error;
+      } else if (err instanceof Error) {
+        errorMessage = err.message;
+      }
+      toast.error(errorMessage);
+      console.error('Error creating folder:', err);
+    } finally {
+      setIsCreatingFolder(false);
+      // Always close dialog, regardless of success or failure
+      handleFolderDialogOpenChange(false);
+    }
+  };
+
+  // Handle rename note
+  const handleRenameNote = async (oldPath: string, newPath: string) => {
+    if (!newPath.trim()) {
+      toast.error('New path cannot be empty');
+      return;
+    }
+
+    try {
+      // Ensure new path has .md extension
+      const finalNewPath = newPath.endsWith('.md') ? newPath : `${newPath}.md`;
+
+      await moveNote(oldPath, finalNewPath);
+
+      // Refresh notes list
+      const notesList = await listNotes();
+      setNotes(notesList);
+
+      // If renaming currently selected note, update selection
+      if (selectedPath === oldPath) {
+        setSelectedPath(finalNewPath);
+      }
+
+      toast.success(`Note renamed successfully`);
+    } catch (err) {
+      let errorMessage = 'Failed to rename note';
+      if (err instanceof APIException) {
+        errorMessage = err.message || err.error;
+      } else if (err instanceof Error) {
+        errorMessage = err.message;
+      }
+      toast.error(errorMessage);
+      console.error('Error renaming note:', err);
+    }
+  };
+
+  // Handle dragging file to folder
+  const handleMoveNoteToFolder = async (oldPath: string, targetFolderPath: string) => {
+    try {
+      // Get the filename from the old path
+      const fileName = oldPath.split('/').pop();
+      if (!fileName) {
+        toast.error('Invalid file path');
+        return;
+      }
+
+      // Construct new path: targetFolder/fileName
+      const newPath = targetFolderPath ? `${targetFolderPath}/${fileName}` : fileName;
+
+      // Don't move if source and destination are the same
+      if (newPath === oldPath) {
+        return;
+      }
+
+      await moveNote(oldPath, newPath);
+
+      // Refresh notes list
+      const notesList = await listNotes();
+      setNotes(notesList);
+
+      // If moving currently selected note, update selection
+      if (selectedPath === oldPath) {
+        setSelectedPath(newPath);
+      }
+
+      toast.success(`Note moved successfully`);
+    } catch (err) {
+      let errorMessage = 'Failed to move note';
+      if (err instanceof APIException) {
+        errorMessage = err.message || err.error;
+      } else if (err instanceof Error) {
+        errorMessage = err.message;
+      }
+      toast.error(errorMessage);
+      console.error('Error moving note:', err);
+    }
+  };
+
   return (
     <div className="h-screen flex flex-col">
       {/* Top bar */}
-      <div className="border-b border-border p-4">
+      <div className="border-b border-border p-4 animate-fade-in">
         <div className="flex items-center justify-between">
           <h1 className="text-xl font-semibold">📚 Document Viewer</h1>
           <Button variant="ghost" size="sm" onClick={() => navigate('/settings')}>
@@ -261,7 +392,7 @@ export function MainApp() {
       </div>
 
       {/* Main content */}
-      <div className="flex-1 overflow-hidden">
+      <div className="flex-1 overflow-hidden animate-fade-in" style={{ animationDelay: '0.1s' }}>
         <ResizablePanelGroup direction="horizontal">
           {/* Left sidebar */}
           <ResizablePanel defaultSize={25} minSize={15} maxSize={40}>
@@ -317,19 +448,68 @@ export function MainApp() {
                     </DialogFooter>
                   </DialogContent>
                 </Dialog>
+                <Dialog
+                  open={isNewFolderDialogOpen}
+                  onOpenChange={handleFolderDialogOpenChange}
+                >
+                  <DialogTrigger asChild>
+                    <Button variant="outline" size="sm" className="w-full">
+                      <FolderPlus className="h-4 w-4 mr-1" />
+                      New Folder
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>
+                      <DialogTitle>Create New Folder</DialogTitle>
+                      <DialogDescription>
+                        Enter a name for your new folder. You can use forward slashes for nested folders (e.g., "Projects/Work").
+                      </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4 py-4">
+                      <div className="grid gap-2">
+                        <label htmlFor="folder-name" className="text-sm font-medium">Folder Name</label>
+                        <Input
+                          id="folder-name"
+                          placeholder="my-folder"
+                          value={newFolderName}
+                          onChange={(e) => setNewFolderName(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              handleCreateFolder();
+                            }
+                          }}
+                        />
+                      </div>
+                    </div>
+                    <DialogFooter>
+                      <Button
+                        variant="outline"
+                        onClick={() => setIsNewFolderDialogOpen(false)}
+                        disabled={isCreatingFolder}
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        onClick={handleCreateFolder}
+                        disabled={!newFolderName.trim() || isCreatingFolder}
+                      >
+                        {isCreatingFolder ? 'Creating...' : 'Create Folder'}
+                      </Button>
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
                 <SearchBar onSelectNote={handleSelectNote} />
                 <Separator />
               </div>
               <div className="flex-1 overflow-hidden">
                 {isLoadingNotes ? (
-                  <div className="p-4 text-center text-sm text-muted-foreground">
-                    Loading notes...
-                  </div>
+                  <DirectoryTreeSkeleton />
                 ) : (
                   <DirectoryTree
                     notes={notes}
                     selectedPath={selectedPath || undefined}
                     onSelectNote={handleSelectNote}
+                    onMoveNote={handleMoveNoteToFolder}
                   />
                 )}
               </div>
@@ -350,9 +530,7 @@ export function MainApp() {
               )}
 
               {isLoadingNote ? (
-                <div className="flex items-center justify-center h-full">
-                  <div className="text-muted-foreground">Loading note...</div>
-                </div>
+                <NoteViewerSkeleton />
               ) : currentNote ? (
                 isEditMode ? (
                   <NoteEditor
@@ -387,7 +565,7 @@ export function MainApp() {
       </div>
 
       {/* Footer with Index Health */}
-      <div className="border-t border-border px-4 py-2 text-xs text-muted-foreground">
+      <div className="border-t border-border px-4 py-2 text-xs text-muted-foreground animate-fade-in" style={{ animationDelay: '0.2s' }}>
         <div className="flex items-center justify-between">
           <div>
             {indexHealth ? (

frontend/src/pages/Settings.tsx

@@ -10,6 +10,7 @@ import { Input } from '@/components/ui/input';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
+import { SettingsSectionSkeleton } from '@/components/SettingsSectionSkeleton';
 import { getCurrentUser, getToken, logout, getStoredToken } from '@/services/auth';
 import { getIndexHealth, rebuildIndex, type RebuildResponse } from '@/services/api';
 import type { User } from '@/types/user';
@@ -122,13 +123,13 @@ export function Settings() {
         )}
 
         {/* Profile */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Profile</CardTitle>
-            <CardDescription>Your account information</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {user ? (
+        {user ? (
+          <Card>
+            <CardHeader>
+              <CardTitle>Profile</CardTitle>
+              <CardDescription>Your account information</CardDescription>
+            </CardHeader>
+            <CardContent>
               <div className="flex items-center gap-4">
                 <Avatar className="h-16 w-16">
                   <AvatarImage src={user.hf_profile?.avatar_url} />
@@ -149,11 +150,14 @@ export function Settings() {
                   Sign Out
                 </Button>
               </div>
-            ) : (
-              <div className="text-muted-foreground">Loading user data...</div>
-            )}
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
+        ) : (
+          <SettingsSectionSkeleton
+            title="Profile"
+            description="Your account information"
+          />
+        )}
 
         {/* API Token */}
         <Card>
@@ -221,61 +225,62 @@ export function Settings() {
         </Card>
 
         {/* Index Health */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Index Health</CardTitle>
-            <CardDescription>
-              Full-text search index status and maintenance
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {indexHealth ? (
-              <>
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <div className="text-sm text-muted-foreground">Notes Indexed</div>
-                    <div className="text-2xl font-bold">{indexHealth.note_count}</div>
-                  </div>
-                  <div>
-                    <div className="text-sm text-muted-foreground">Last Updated</div>
-                    <div className="text-sm">{formatDate(indexHealth.last_incremental_update)}</div>
-                  </div>
+        {indexHealth ? (
+          <Card>
+            <CardHeader>
+              <CardTitle>Index Health</CardTitle>
+              <CardDescription>
+                Full-text search index status and maintenance
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <div className="text-sm text-muted-foreground">Notes Indexed</div>
+                  <div className="text-2xl font-bold">{indexHealth.note_count}</div>
                 </div>
-
-                <Separator />
-
                 <div>
-                  <div className="text-sm text-muted-foreground mb-1">Last Full Rebuild</div>
-                  <div className="text-sm">{formatDate(indexHealth.last_full_rebuild)}</div>
+                  <div className="text-sm text-muted-foreground">Last Updated</div>
+                  <div className="text-sm">{formatDate(indexHealth.last_incremental_update)}</div>
                 </div>
+              </div>
 
-                {rebuildResult && (
-                  <Alert>
-                    <AlertDescription>
-                      ✅ Index rebuilt successfully! Indexed {rebuildResult.notes_indexed} notes in {rebuildResult.duration_ms}ms
-                    </AlertDescription>
-                  </Alert>
-                )}
+              <Separator />
 
-                <Button 
-                  onClick={handleRebuildIndex}
-                  disabled={isRebuilding}
-                  variant="outline"
-                >
-                  <RefreshCw className={`h-4 w-4 mr-2 ${isRebuilding ? 'animate-spin' : ''}`} />
-                  {isRebuilding ? 'Rebuilding...' : 'Rebuild Index'}
-                </Button>
+              <div>
+                <div className="text-sm text-muted-foreground mb-1">Last Full Rebuild</div>
+                <div className="text-sm">{formatDate(indexHealth.last_full_rebuild)}</div>
+              </div>
 
-                <div className="text-xs text-muted-foreground">
-                  Rebuilding the index will re-scan all notes and update the full-text search database.
-                  This may take a few seconds for large vaults.
-                </div>
-              </>
-            ) : (
-              <div className="text-muted-foreground">Loading index health...</div>
-            )}
-          </CardContent>
-        </Card>
+              {rebuildResult && (
+                <Alert>
+                  <AlertDescription>
+                    ✅ Index rebuilt successfully! Indexed {rebuildResult.notes_indexed} notes in {rebuildResult.duration_ms}ms
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              <Button
+                onClick={handleRebuildIndex}
+                disabled={isRebuilding}
+                variant="outline"
+              >
+                <RefreshCw className={`h-4 w-4 mr-2 ${isRebuilding ? 'animate-spin' : ''}`} />
+                {isRebuilding ? 'Rebuilding...' : 'Rebuild Index'}
+              </Button>
+
+              <div className="text-xs text-muted-foreground">
+                Rebuilding the index will re-scan all notes and update the full-text search database.
+                This may take a few seconds for large vaults.
+              </div>
+            </CardContent>
+          </Card>
+        ) : (
+          <SettingsSectionSkeleton
+            title="Index Health"
+            description="Full-text search index status and maintenance"
+          />
+        )}
       </div>
     </div>
   );

frontend/src/services/api.ts

@@ -184,3 +184,14 @@ export async function rebuildIndex(): Promise<RebuildResponse> {
   });
 }
 
+/**
+ * Move or rename a note to a new path
+ */
+export async function moveNote(oldPath: string, newPath: string): Promise<Note> {
+  const encodedPath = encodeURIComponent(oldPath);
+  return apiFetch<Note>(`/api/notes/${encodedPath}`, {
+    method: 'PATCH',
+    body: JSON.stringify({ new_path: newPath }),
+  });
+}
+

frontend/tailwind.config.js

@@ -63,10 +63,37 @@ export default {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        "fade-in": {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        "slide-in-up": {
+          from: { opacity: "0", transform: "translateY(10px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        "slide-in-down": {
+          from: { opacity: "0", transform: "translateY(-10px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        "highlight-pulse": {
+          "0%": { backgroundColor: "transparent" },
+          "50%": { backgroundColor: "hsl(var(--accent))" },
+          "100%": { backgroundColor: "transparent" },
+        },
+        "skeleton-pulse": {
+          "0%": { opacity: "1" },
+          "50%": { opacity: "0.5" },
+          "100%": { opacity: "1" },
+        },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        "accordion-down": "accordion-down 0.3s ease-out",
+        "accordion-up": "accordion-up 0.3s ease-out",
+        "fade-in": "fade-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)",
+        "slide-in-up": "slide-in-up 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+        "slide-in-down": "slide-in-down 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+        "highlight-pulse": "highlight-pulse 1s ease-in-out",
+        "skeleton-pulse": "skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       },
     },
   },

start-project-windows.bat

@@ -0,0 +1,33 @@
+@echo off
+REM Document-MCP Start Script for Windows
+REM This script opens two terminal windows - one for backend and one for frontend
+
+echo Starting Document-MCP...
+echo.
+
+REM Get the project root directory
+set PROJECT_ROOT=%~dp0
+
+REM Start Backend in a new terminal window
+echo Starting Backend (FastAPI on port 8000)...
+start "Document-MCP Backend" cmd /k "cd /d "%PROJECT_ROOT%backend" && .venv\Scripts\activate && uv run uvicorn main:app --reload --host 0.0.0.0 --port 8000"
+
+REM Wait a moment before starting frontend
+timeout /t 3 /nobreak
+
+REM Start Frontend in a new terminal window
+echo Starting Frontend (Vite on port 5173)...
+start "Document-MCP Frontend" cmd /k "cd /d "%PROJECT_ROOT%frontend" && npm run dev"
+
+echo.
+echo ============================================
+echo Document-MCP is starting!
+echo ============================================
+echo.
+echo Backend: http://localhost:8000
+echo Frontend: http://localhost:5173
+echo.
+echo Both services should open in separate terminal windows.
+echo Press Ctrl+C in each window to stop the services.
+echo.
+pause