From 93db9fe54aa75bea5be468c6595f2c6437b8d664 Mon Sep 17 00:00:00 2001
From: Alois <aloisianer@proton.me>
Date: Fri, 10 Apr 2026 20:48:26 +0200
Subject: [PATCH] Made the settings a little nicer

---
 apps/web/src/features/settings/layout.tsx | 12 +++-
 apps/web/src/routes/settings/security.tsx | 73 ++++++++++++-----------
 2 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/features/settings/layout.tsx b/apps/web/src/features/settings/layout.tsx
index fb84f4d..53b1a74 100644
--- a/apps/web/src/features/settings/layout.tsx
+++ b/apps/web/src/features/settings/layout.tsx
@@ -2,17 +2,25 @@ import { Button } from "@tensamin/ui/cmp/button";
 
 import options from "@tensamin/shared/settings";
 import { cn, useIsMobile } from "@tensamin/ui/utils";
-import { Outlet, useNavigate } from "@tanstack/react-router";
+import { Outlet, useLocation, useNavigate } from "@tanstack/react-router";
 
 export default function Screen() {
   const isMobile = useIsMobile();
+  const location = useLocation();
 
   return (
     <div className="flex h-full w-full">
       {!isMobile && <SettingsSidebar />}
 
       {/* Page */}
-      <div className="bg-background w-full h-full p-3">
+      <div className="bg-background w-full h-full p-3 flex flex-col gap-3">
+        <h1 className="text-xl font-semibold">
+          {location.pathname
+            .split("/")
+            .pop()
+            ?.replace(/-/g, " ")
+            .replace(/\b\w/g, (l) => l.toUpperCase())}
+        </h1>
         <Outlet />
       </div>
     </div>
diff --git a/apps/web/src/routes/settings/security.tsx b/apps/web/src/routes/settings/security.tsx
index f52636f..520177c 100644
--- a/apps/web/src/routes/settings/security.tsx
+++ b/apps/web/src/routes/settings/security.tsx
@@ -71,41 +71,44 @@ function QrCodeLogin() {
   const [qrCodeVisible, setQrCodeVisible] = useState(false);
 
   return (
-    <div className="relative rounded-lg w-50 border-3 aspect-square overflow-hidden">
-      {qrCodeBase64 && (
-        <img className="w-full h-full" src={qrCodeBase64} alt="QR Code" />
-      )}
-      {!qrCodeVisible && (
-        <>
-          <div className="absolute top-0 left-0 w-full h-full backdrop-blur-sm bg-background/50" />
-          <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
-            <AlertDialog>
-              <AlertDialogTrigger render={<Button>Show QR Code</Button>} />
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    This will expose your private key! This is the same as
-                    sharing the .tu file! It's very tedious to change the
-                    private key, so only do this if you are sure no one can
-                    steal it!
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                  <AlertDialogAction
-                    render={
-                      <Button onClick={() => setQrCodeVisible(true)}>
-                        Show QR Code
-                      </Button>
-                    }
-                  />
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-          </div>
-        </>
-      )}
+    <div className="flex flex-col gap-1 pl-2">
+      <p>Login QR Code</p>
+      <div className="relative rounded-lg w-50 border-3 aspect-square overflow-hidden">
+        {qrCodeBase64 && (
+          <img className="w-full h-full" src={qrCodeBase64} alt="QR Code" />
+        )}
+        {!qrCodeVisible && (
+          <>
+            <div className="absolute top-0 left-0 w-full h-full backdrop-blur-sm bg-background/50" />
+            <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+              <AlertDialog>
+                <AlertDialogTrigger render={<Button>Show QR Code</Button>} />
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      Exposing this QR code is the same as sharing your .tu
+                      file. Since changing your private key is quite tedious,
+                      only do this when you're confident the key won't be
+                      compromised.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                      render={
+                        <Button onClick={() => setQrCodeVisible(true)}>
+                          Show QR Code
+                        </Button>
+                      }
+                    />
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          </>
+        )}
+      </div>
     </div>
   );
 }