pages s3

components/main-nav.tsx

@@ -37,6 +37,7 @@ import {
 import { format } from 'date-fns';
 import { fr } from 'date-fns/locale';
 import { NotificationBadge } from './notification-badge';
+import { NotesDialog } from './notes-dialog';
 
 const requestNotificationPermission = async () => {
   try {
@@ -52,6 +53,7 @@ export function MainNav() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const { data: session, status } = useSession();
   const [userStatus, setUserStatus] = useState<'online' | 'busy' | 'away'>('online');
+  const [isNotesDialogOpen, setIsNotesDialogOpen] = useState(false);
 
   console.log("Session:", session);
   console.log("Status:", status);
@@ -247,10 +249,13 @@ export function MainNav() {
               <Clock className='w-5 h-5' />
               <span className="sr-only">TimeTracker</span>
             </Link>
-            <Link href='/notes' className='text-white/80 hover:text-white'>
+            <button
+              onClick={() => setIsNotesDialogOpen(true)}
+              className='text-white/80 hover:text-white'
+            >
               <PenLine className='w-5 h-5' />
               <span className="sr-only">Notes</span>
-            </Link>
+            </button>
             <Link href='/alma' className='text-white/80 hover:text-white'>
               <Robot className='w-5 h-5' />
               <span className="sr-only">ALMA</span>
@@ -388,6 +393,10 @@ export function MainNav() {
         </div>
       </div>
       <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
+      <NotesDialog 
+        open={isNotesDialogOpen}
+        onOpenChange={setIsNotesDialogOpen}
+      />
     </>
   );
 }

components/notes-dialog.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
+import { Loader2 } from "lucide-react";
+import { useSession } from "next-auth/react";
+
+interface NotesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function NotesDialog({ open, onOpenChange }: NotesDialogProps) {
+  const { data: session } = useSession();
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSave = async () => {
+    if (!title.trim()) {
+      setError("Please enter a title for your note");
+      return;
+    }
+
+    if (!content.trim()) {
+      setError("Please enter content for your note");
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      setError("");
+
+      // Construct API payload with lowercase folder name (always "notes" for quick notes)
+      const payload = {
+        id: `user-${session?.user?.id}/notes/${title}${title.endsWith('.md') ? '' : '.md'}`,
+        title: title,
+        content: content,
+        folder: "notes", // Always save to Notes folder
+        mime: "text/markdown"
+      };
+      
+      // Use direct storage API endpoint
+      const response = await fetch('/api/storage/files', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload)
+      });
+      
+      if (!response.ok) {
+        throw new Error('Failed to save note');
+      }
+      
+      // Reset form and close dialog
+      setTitle("");
+      setContent("");
+      onOpenChange(false);
+      
+    } catch (err) {
+      console.error('Error saving note:', err);
+      setError("Failed to save your note. Please try again.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Quick Note</DialogTitle>
+        </DialogHeader>
+        
+        <div className="grid gap-4 py-4">
+          {error && (
+            <div className="bg-red-50 text-red-500 p-2 rounded-md text-sm">
+              {error}
+            </div>
+          )}
+          
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Input
+              id="title"
+              placeholder="Note title"
+              className="col-span-4"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              disabled={isSaving}
+            />
+          </div>
+          
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Textarea
+              id="content"
+              placeholder="What's on your mind?"
+              className="col-span-4"
+              rows={10}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              disabled={isSaving}
+            />
+          </div>
+        </div>
+        
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={isSaving}>
+            {isSaving ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              "Save Note"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}