Refactor Admin and Settings UI to Ethereal Precision aesthetic and improve note import/export functionality

memento-note/app/(main)/settings/layout.tsx

@@ -8,17 +8,17 @@ export default function SettingsLayout({
     children: React.ReactNode
 }) {
     return (
-        <div className="container mx-auto py-10 px-4 max-w-6xl">
-            <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-                {/* Sidebar Navigation */}
-                <aside className="lg:col-span-1">
-                    <SettingsNav />
-                </aside>
+        <div className="flex flex-col h-full">
+            {/* Horizontal Tab Navigation */}
+            <header className="flex items-center gap-1 px-8 bg-background border-b border-border shrink-0">
+                <SettingsNav />
+            </header>
 
-                {/* Main Content */}
-                <main className="lg:col-span-3 space-y-6">
+            {/* Page Content */}
+            <div className="flex-1 overflow-y-auto">
+                <div className="max-w-5xl mx-auto px-8 py-8 space-y-8">
                     {children}
-                </main>
+                </div>
             </div>
         </div>
     )