Made the settings a little nicer

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>

apps/web/src/routes/settings/security.tsx

@@ -71,6 +71,8 @@ function QrCodeLogin() {
   const [qrCodeVisible, setQrCodeVisible] = useState(false);
 
   return (
+    <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" />
@@ -85,10 +87,10 @@ function QrCodeLogin() {
                   <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!
+                      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>
@@ -107,5 +109,6 @@ function QrCodeLogin() {
           </>
         )}
       </div>
+    </div>
   );
 }