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

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>
                 }>