feat(admin-panel): update url

feat(admin-panel): update some of the ui
feat(oauth-screen): make oauth success screen match the rest of the app

frontend/package.json

@@ -15,7 +15,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@methanium/ui": "https://git.methanium.net/methanium/ui/releases/download/0.0.29/methanium-ui.tgz",
+    "@methanium/ui": "https://git.methanium.net/methanium/ui/releases/download/0.0.32/methanium-ui.tgz",
     "lucide-react": "^0.542.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7"

frontend/src/App.tsx

@@ -170,7 +170,7 @@ function Header({ loggedIn, onLogout }: { loggedIn: boolean; onLogout: () => voi
           size="sm"
           className="mr-1 shrink-0 px-[13px]! text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
           nativeButton={false}
-          render={<a href="/management.html" aria-label="Vibe Proxy management" />}
+          render={<a href="/admin" aria-label="Vibe Proxy management" />}
         >
           {methaniumLogo && <img src={methaniumLogo} alt="" className="w-[20.59px]!" />}
         </Button>
@@ -180,7 +180,7 @@ function Header({ loggedIn, onLogout }: { loggedIn: boolean; onLogout: () => voi
             size="sm"
             className="h-9 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
             nativeButton={false}
-            render={<a href="/management.html" />}
+            render={<a href="/admin" />}
           >
             Vibe Proxy
           </Button>
@@ -307,6 +307,7 @@ function AccountCard({
   };
 
   const [emailHidden, setEmailHidden] = useState(true);
+  const { themePolarity } = useTheme();
 
   return (
     <Card>
@@ -341,7 +342,7 @@ function AccountCard({
             {statusProblem ? (
               account.status_message || <AlertTriangle color="orange" />
             ) : (
-              <Check color="lightGreen" />
+              <Check color={themePolarity === 'dark' ? 'lightGreen' : 'green'} />
             )}
           </Badge>
         </CardAction>
@@ -358,7 +359,7 @@ function AccountCard({
           </div>
         </div>
 
-        <div className="border-t border-border pt-4 flex flex-col gap-4">
+        <div className="pt-4 flex flex-col gap-4">
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div>
               <div className="font-medium">Quota</div>
@@ -396,7 +397,7 @@ function AccountCard({
           )}
 
           {cachedQuota && windows.length > 0 && (
-            <div className="space-y-4">
+            <div className="flex flex-col gap-4">
               {windows.map((window) => (
                 <div key={window.key}>
                   <Progress value={100 - window.usedPercent} max={100}>
@@ -420,7 +421,7 @@ function AccountCard({
           )}
         </div>
 
-        <div className="flex justify-end border-t border-border pt-4">
+        <div className="flex justify-end pt-4">
           <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
             <Trash2 />
             Delete account

frontend/src/OAuthSuccess.tsx

@@ -0,0 +1,40 @@
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@methanium/ui';
+import { Check } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export function OAuthSuccess() {
+  const [secondsRemaining, setSecondsRemaining] = useState(5);
+
+  useEffect(() => {
+    document.title = 'Authentication successful | Vibe Proxy';
+
+    const closeTimer = window.setTimeout(() => window.close(), 5_000);
+    const countdownTimer = window.setInterval(() => {
+      setSecondsRemaining((current) => Math.max(0, current - 1));
+    }, 1_000);
+
+    return () => {
+      window.clearTimeout(closeTimer);
+      window.clearInterval(countdownTimer);
+    };
+  }, []);
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-background p-4 text-foreground">
+      <Card className="text-center p-6! py-8!">
+        <CardHeader className="items-center">
+          <CardTitle>Authentication successful</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center gap-4">
+          <p className="text-sm text-muted-foreground">
+            This window will close automatically in {secondsRemaining}{' '}
+            {secondsRemaining === 1 ? 'second' : 'seconds'}.
+          </p>
+          <Button type="button" variant="outline" onClick={() => window.close()}>
+            Close window
+          </Button>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

frontend/src/main.tsx

@@ -5,6 +5,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { App } from './App';
+import { OAuthSuccess } from './OAuthSuccess';
 
 const methaniumTheme = BUILT_IN_THEMES.filter((theme) => theme.id === 'methanium');
 
@@ -23,7 +24,7 @@ createRoot(document.getElementById('root')!).render(
       parentThemeStorageKey={null}
       designStorageKey={null}
     >
-      <App />
+      {window.location.pathname === '/admin/oauth-success' ? <OAuthSuccess /> : <App />}
     </ThemeProvider>
   </StrictMode>,
 );