From 3d475550b9f9ce1fb2a1ea50bb24a644454a8949 Mon Sep 17 00:00:00 2001
From: polina4096 <polina4096@yandex.ru>
Date: Sat, 18 Jan 2025 11:32:39 +0300
Subject: [PATCH] Reorder menu, improve libraries page placeholder

---
 packages/repl/src/components/nav/NavbarMenu.tsx  |  8 ++++----
 .../src/components/settings/LibrariesTab.tsx     | 16 ++++++++++++++++
 .../repl/src/components/settings/Settings.tsx    |  3 ++-
 3 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 packages/repl/src/components/settings/LibrariesTab.tsx

diff --git a/packages/repl/src/components/nav/NavbarMenu.tsx b/packages/repl/src/components/nav/NavbarMenu.tsx
index 710f583..30b92dc 100644
--- a/packages/repl/src/components/nav/NavbarMenu.tsx
+++ b/packages/repl/src/components/nav/NavbarMenu.tsx
@@ -92,10 +92,6 @@ export function NavbarMenu(props: {
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
           <DropdownMenuGroup>
-            <DropdownMenuItem onClick={props.onShowAccounts}>
-              <LucideUsers class="mr-2 size-4" />
-              Manage accounts
-            </DropdownMenuItem>
             <DropdownMenuSub>
               <DropdownMenuSubTrigger class="flex items-center justify-between">
                 <div class="flex flex-row items-center">
@@ -141,6 +137,10 @@ export function NavbarMenu(props: {
                 </DropdownMenuItem>
               </DropdownMenuSubContent>
             </DropdownMenuSub>
+            <DropdownMenuItem onClick={props.onShowAccounts}>
+              <LucideUsers class="mr-2 size-4" />
+              Manage accounts
+            </DropdownMenuItem>
             <DropdownMenuItem
               as="a"
               class="cursor-pointer"
diff --git a/packages/repl/src/components/settings/LibrariesTab.tsx b/packages/repl/src/components/settings/LibrariesTab.tsx
new file mode 100644
index 0000000..7937f1e
--- /dev/null
+++ b/packages/repl/src/components/settings/LibrariesTab.tsx
@@ -0,0 +1,16 @@
+export function LibrariesTab() {
+  return (
+    <div class="flex size-full flex-col items-center justify-center">
+      <div class="mt-[-6%] flex flex-col items-center justify-center">
+        <div class="mb-1 text-2xl font-medium text-primary">
+          Not ready yet...
+        </div>
+        <div class="text-center text-sm text-muted-foreground">
+          This page is still in development.
+          <br />
+          Come back later.
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/repl/src/components/settings/Settings.tsx b/packages/repl/src/components/settings/Settings.tsx
index 1387913..6563432 100644
--- a/packages/repl/src/components/settings/Settings.tsx
+++ b/packages/repl/src/components/settings/Settings.tsx
@@ -9,6 +9,7 @@ import {
 import { cn } from '../../lib/utils.ts'
 import { AboutTab } from './AboutTab.tsx'
 import { AccountsTab } from './AccountsTab.tsx'
+import { LibrariesTab } from './LibrariesTab.tsx'
 
 export type SettingsTab =
   | 'accounts'
@@ -32,7 +33,7 @@ const tabs: Array<TabDefinition> = [
     id: 'libraries',
     title: 'Libraries',
     icon: LucideLibrary,
-    content: () => <div class="p-3">Not implemented yet...</div>,
+    content: LibrariesTab,
   },
   {
     id: 'about',