Nav bar Auto-peak when viewing notes without a note selected

src/components/Layout.tsx

@@ -51,7 +51,7 @@ export const Layout: Component<LayoutProps> = (props) => {
                 class={cn(
                     "hidden md:flex flex-col border-r border-border bg-card h-screen fixed left-0 top-0 transition-all duration-200 ease-in-out z-[50] overflow-hidden",
                     isSidebarLocked() ? (store.isNotepadMode ? "w-80 translate-x-0" : "w-48 translate-x-0") : (store.isNotepadMode ? "w-80 -translate-x-full" : "w-48 -translate-x-full"),
-                    !isSidebarLocked() && isSidebarPeeking() && "translate-x-0 shadow-2xl ring-1 ring-border"
+                    !isSidebarLocked() && (isSidebarPeeking() || (store.isNotepadMode && !selectedNoteId())) && "translate-x-0 shadow-2xl ring-1 ring-border"
                 )}
                 onMouseEnter={() => !isSidebarLocked() && setIsSidebarPeeking(true)}
                 onMouseLeave={() => !isSidebarLocked() && setIsSidebarPeeking(false)}>
@@ -106,7 +106,7 @@ export const Layout: Component<LayoutProps> = (props) => {
                             </Show>
                         </div>
 
-                        <div class={cn("flex-1 overflow-hidden transition-all duration-200", (!isSidebarLocked() && !isSidebarPeeking()) ? "opacity-0 pointer-events-none scale-95" : "opacity-100 scale-100")}>
+                        <div class={cn("flex-1 overflow-hidden transition-all duration-200", (!isSidebarLocked() && !isSidebarPeeking() && !(store.isNotepadMode && !selectedNoteId())) ? "opacity-0 pointer-events-none scale-95" : "opacity-100 scale-100")}>
                             <NotesSidebar selectedNoteId={selectedNoteId()} setSelectedNoteId={setSelectedNoteId} />
                         </div>
                     </div>

src/views/NotepadView.tsx

@@ -150,11 +150,19 @@ export const NotepadView: Component<{
                 !props.selectedNoteId ? "opacity-0 pointer-events-none md:pointer-events-auto md:opacity-100 translate-x-8 md:translate-x-0 md:flex items-center justify-center bg-muted/5" : "opacity-100 translate-x-0 flex flex-col md:flex-row"
             )}>
                 <Show when={activeNote()} fallback={
-                    <div class="text-center space-y-4 opacity-40 select-none">
+                    <div class="text-center space-y-6 opacity-40 select-none flex flex-col items-center justify-center h-full">
+                        <div class="h-16 w-16 rounded-3xl bg-muted flex items-center justify-center mb-2 animate-pulse">
+                            <Search size={32} class="text-muted-foreground/50" />
+                        </div>
                         <Show when={props.selectedNoteId && store.notes.length === 0} fallback={
-                            <p class="text-sm font-medium tracking-wide">Select a note or create a new one</p>
+                            <div class="space-y-2">
+                                <p class="text-sm font-bold tracking-widest uppercase">No Note Selected</p>
+                                <p class="text-[0.8rem] text-muted-foreground max-w-[200px] leading-relaxed">
+                                    Select an existing note from the sidebar or create a new one to get started.
+                                </p>
+                            </div>
                         }>
-                            <p class="text-sm font-medium tracking-wide">Loading note...</p>
+                            <p class="text-sm font-medium tracking-wide italic">Loading note...</p>
                         </Show>
                     </div>
                 }>