feat: enhance note-taking interface with toggle functionality and layout adjustments

This commit introduces a toggle button for the note list visibility in the NoteEditor component, improving user interaction. Additionally, the layout of the right panel in the Layout component has been updated to conditionally display the NoteList and NoteEditor, enhancing the overall user experience. The NotesView component has been removed as its functionality is now integrated into the Layout component.

Author: milisp

src/components/layout/index.tsx

@@ -20,12 +20,13 @@ import ClaudeCodeApp from "@/pages/cc";
 import { WebPreview } from "../WebPreview";
 import { useLayoutStore } from "@/stores";
 import { DiffViewer } from "../filetree/DiffViewer";
-import { NoteList } from "../notes";
-import { NotesView } from "../notes/NotesView";
+import { NoteList, NoteEditor } from "../notes";
+import { useNoteStore } from "@/stores/useNoteStore";
 
 export function Layout() {
   const { mainView, rightView, setRightView, setMainView } = useNavigationStore();
   const { webPreviewUrl, setWebPreviewUrl, diffFile } = useLayoutStore();
+  const { showNoteList } = useNoteStore();
 
   const handleTabChange = (view: string) => {
     setMainView(view as any);
@@ -93,19 +94,25 @@ export function Layout() {
 
             {/* Right Panel - Editor or Notepad */}
             {rightView && (
-              <Panel defaultSize={mainView ? 30 : 100} minSize={20}>
-                <div className="h-full overflow-auto">
-                  {rightView === "notepad" ? (
-                    <ResizablePanelGroup direction="horizontal" className="h-full">
-                      <ResizablePanel defaultSize={30} minSize={0}>
-                        <NoteList />
-                      </ResizablePanel>
-                      <ResizableHandle withHandle />
-                      <ResizablePanel defaultSize={70} minSize={50}>
-                        <NotesView />
-                      </ResizablePanel>
-                    </ResizablePanelGroup>
-                  ) : rightView === "webPreview" ? (
+              <Panel defaultSize={mainView ? 30 : 100} minSize={20} className="overflow-hidden">
+                {rightView === "notepad" ? (
+                  <ResizablePanelGroup direction="horizontal" className="h-full w-full overflow-hidden">
+                    {showNoteList && (
+                      <>
+                        <ResizablePanel defaultSize={25} minSize={15} maxSize={40} className="min-w-0 overflow-hidden">
+                          <div className="h-full w-full overflow-auto">
+                            <NoteList />
+                          </div>
+                        </ResizablePanel>
+                        <ResizableHandle withHandle />
+                      </>
+                    )}
+                    <ResizablePanel defaultSize={showNoteList ? 75 : 100} minSize={50} className="min-w-0 overflow-hidden">
+                      <NoteEditor />
+                    </ResizablePanel>
+                  </ResizablePanelGroup>
+                ) : rightView === "webPreview" ? (
+                  <div className="h-full overflow-auto">
                     <WebPreview
                       url={webPreviewUrl || ""}
                       onClose={() => {
@@ -114,8 +121,8 @@ export function Layout() {
                       }}
                       onUrlChange={(url) => setWebPreviewUrl(url)}
                     />
-                  ) : null}
-                </div>
+                  </div>
+                ) : null}
               </Panel>
             )}
           </PanelGroup>

src/components/notes/NoteEditor.tsx

@@ -3,7 +3,7 @@ import { useNoteStore } from "@/stores/useNoteStore";
 import { useThemeContext } from "@/contexts/ThemeContext";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Save, Eye, Code, PencilIcon } from "lucide-react";
+import { Save, Eye, Code, PencilIcon, PanelLeft } from "lucide-react";
 import AceEditor from "react-ace";
 import { NoteToChat } from "./NoteToChat";
 
@@ -44,6 +44,7 @@ export function NoteEditor() {
     createNote,
     getCurrentNote, setCurrentNote,
     updateNote,
+    toggleNoteListVisibility,
   } = useNoteStore();
 
   const { theme } = useThemeContext();
@@ -159,6 +160,15 @@ export function NoteEditor() {
     <div className="flex flex-col h-full">
       {/* Note Header */}
       <div className="flex items-center gap-3 px-2 border-b bg-white dark:bg-gray-800 dark:border-gray-700">
+        <Button
+          onClick={toggleNoteListVisibility}
+          size="icon"
+          variant="ghost"
+          className="h-7 w-7 p-0"
+          title="Toggle Note List"
+        >
+          <PanelLeft className="h-4 w-4" />
+        </Button>
         <Button
           onClick={async () => {
             const newNote = await createNote();

src/components/notes/NotesView.tsx

@@ -31,6 +31,7 @@ interface NoteStore {
   currentNoteId: string | null;
   isLoading: boolean;
   migrated: boolean;
+  showNoteList: boolean;
 
   // Actions
   loadNotes: () => Promise<void>;
@@ -44,6 +45,7 @@ interface NoteStore {
   addContentToNote: (id: string, content: string, source?: string) => Promise<void>;
   createNoteFromContent: (content: string, source?: string) => Promise<Note>;
   toggleFavorite: (id: string) => Promise<void>;
+  toggleNoteListVisibility: () => void;
 
   // Getters
   getCurrentNote: () => Note | null;
@@ -125,6 +127,7 @@ export const useNoteStore = create<NoteStore>((set, get) => ({
   currentNoteId: null,
   isLoading: false,
   migrated: false,
+  showNoteList: true,
 
   loadNotes: async () => {
     try {
@@ -277,6 +280,12 @@ export const useNoteStore = create<NoteStore>((set, get) => ({
       throw err;
     }
   },
+
+  toggleNoteListVisibility: () => {
+    set((state) => ({
+      showNoteList: !state.showNoteList,
+    }));
+  },
 }));
 
 // Auto-load notes on store creation