design: better mobile footer display, clean up welcome card + add link, add grading to security checks, clean up services display

components/cards/dashboard/git/LinkGitea.tsx

@@ -190,12 +190,12 @@ export function LinkGitea({ linked }: { linked: boolean }) {
             >here</Link>.
           </p>
           {unlinkLoading ? (
-            <Button variant="destructive" disabled>
+            <Button variant="destructive" disabled className="w-full">
               <Loader2 className="animate-spin" />
               Unlinking...
             </Button>
           ) : (
-            <Button variant="destructive" onClick={onUnlink}>
+            <Button variant="destructive" onClick={onUnlink} className="w-full">
               <SiGitea />
               Unlink Gitea Account
             </Button>

components/cards/dashboard/overview/WelcomeCard.tsx

@@ -1,25 +1,26 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react"
-import Cookies from "js-cookie";
+import Cookies from "js-cookie"
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
-import { Check } from "lucide-react";
+import { Check } from "lucide-react"
+import Link from "next/link"
 
 export const WelcomeCard = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(true)
 
   useEffect(() => {
-    const isRead = Cookies.get("welcome-read");
+    const isRead = Cookies.get("welcome-read")
     if (isRead === "true") {
-      setVisible(false);
+      setVisible(false)
     }
-  }, []);
+  }, [])
 
   const handleMarkAsRead = () => {
-    Cookies.set("welcome-read", "true");
+    Cookies.set("welcome-read", "true")
-    setVisible(false);
+    setVisible(false)
-  };
+  }
 
-  if (!visible) return null;
+  if (!visible) return null
 
   return (
     <Card className="col-span-full md:col-span-1">
@@ -31,7 +32,7 @@ export const WelcomeCard = () => {
           Thanks for logging in! Here you can manage your account and the services available to you.
         </p>
         <p className="text-sm mt-4">
-          We’re thrilled to have you on board, and if you need <i>anything</i>, don’t hesitate to contact support (see the sidebar).
+          We’re thrilled to have you on board, and if you need <i>anything</i>, don’t hesitate to <Link href="/account/dashboard/support" className="underline hover:text-muted-foreground transition-all" target="_blank">contact our support team</Link>!
         </p>
         <p className="text-sm mt-4">That’s all, have a great day!</p>
       </CardContent>
@@ -41,5 +42,5 @@ export const WelcomeCard = () => {
         </Button>
       </CardFooter>
     </Card>
-  );
+  )
-};
+}

components/pages/dashboard/Footer.tsx

@@ -27,11 +27,11 @@ export function Footer() {
           </p>
         </div>
         {renderTime !== null ? (
-          <p className="text-sm">
+          <p className="hidden md:block text-sm">
             Page rendered in {renderTime.toFixed(2)} ms
           </p>
         ) : (
-          <p className="text-sm">
+          <p className="hidden md:block text-sm">
             Calculating render time...
           </p>
         )}

components/pages/dashboard/SecurityTab.tsx

@@ -1,14 +1,22 @@
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { AlertCircle, CheckCircleIcon, XCircleIcon, Loader2, ShieldCheck, Search, Lightbulb } from "lucide-react"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { SiAuthentik } from "react-icons/si"
 import { type SecurityResults } from "@/app/api/users/security/route"
 
+interface CategoryChecks {
+  passed: number
+  failed: number
+  total: number
+}
+
 export const SecurityTab = () => {
   const [scanning, setScanning] = useState(false)
   const [scanResults, setScanResults] = useState<SecurityResults | null>(null)
   const [error, setError] = useState<string | null>(null)
+  const [authentikChecks, setAuthentikChecks] = useState<CategoryChecks>({ passed: 0, failed: 0, total: 0 })
+  const [overallChecks, setOverallChecks] = useState<CategoryChecks>({ passed: 0, failed: 0, total: 0 })
 
   const scanAcc = async () => {
     setScanning(true)
@@ -30,6 +38,41 @@ export const SecurityTab = () => {
   // If user has no 2FA methods setup, this will be true
   const insufficient2FA = scanResults?.authentik?.authenticators.length === 0
 
+  useEffect(() => {
+    if (scanResults) {
+      const authentik: CategoryChecks = {
+        passed: 0,
+        failed: 0,
+        total: 0
+      }
+
+      // Password age
+      authentik.total++
+      if (!shouldResetPass) {
+        authentik.passed++
+      } else {
+        authentik.failed++
+      }
+
+      // 2FA
+      authentik.total++
+      if (!insufficient2FA) {
+        authentik.passed++
+      } else {
+        authentik.failed++
+      }
+
+      setAuthentikChecks(authentik)
+
+      setOverallChecks(authentik)
+    }
+  }, [scanResults, shouldResetPass, insufficient2FA])
+
+  const calculatePercentage = (passed: number, total: number) => {
+    if (total === 0) return 0
+    return Math.round((passed / total) * 100)
+  }
+
   return (
     <div className="grid gap-6 grid-cols-1 md:grid-cols-2">
       <Card>
@@ -51,9 +94,16 @@ export const SecurityTab = () => {
             </div>
           ) : scanResults ? (
             <>
-              <div className="flex items-center gap-2">
+              <div className="flex items-center justify-between mb-4">
-                <SiAuthentik size={20} />
+                <div className="flex items-center gap-2">
-                <h3 className="text-xl">Authentik</h3>
+                  <SiAuthentik size={20} />
+                  <h3 className="text-xl">Authentik</h3>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">
+                    {authentikChecks.passed}/{authentikChecks.total} checks passed
+                  </span>
+                </div>
               </div>
 
               {shouldResetPass ? (
@@ -79,6 +129,20 @@ export const SecurityTab = () => {
                   <p className="text-sm"><span className="font-bold">{scanResults?.authentik?.authenticators.length}</span> two-factor authentication methods setup</p>
                 </div>
               )}
+
+              <div className="mt-6 pt-4 border-t">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">Results</span>
+                  <div className="flex flex-col items-end">
+                    <span className="text-2xl font-bold">
+                      {calculatePercentage(overallChecks.passed, overallChecks.total)}%
+                    </span>
+                    <span className="text-sm text-muted-foreground">
+                      {overallChecks.passed}/{overallChecks.total} checks passed
+                    </span>
+                  </div>
+                </div>
+              </div>
             </>
           ) : (
             <>

components/pages/dashboard/ServicesTab.tsx

@@ -15,9 +15,9 @@ export const ServicesTab = () => (
         <CardDescription className="pt-4">Send, read, and manage your email account from a web browser! Powered by Roundcube and LibreCloud Mail.</CardDescription>
       </CardHeader>
       <CardFooter>
-        <Button>
+        <Button className="cursor-pointer">
           <ExternalLink className="h-4 w-4" />
-          <Link href="https://mail.librecloud.cc/">
+          <Link href="https://mail.librecloud.cc/" target="_blank">
             Open App
           </Link>
         </Button>
@@ -33,9 +33,9 @@ export const ServicesTab = () => (
         <CardDescription className="pt-4">Host unlimited repositories and run Actions on our Git server, powered by Gitea.</CardDescription>
       </CardHeader>
       <CardFooter>
-        <Button>
+        <Button className="cursor-pointer">
           <ExternalLink className="h-4 w-4" />
-          <Link href="https://git.pontusmail.org/">
+          <Link href="https://git.pontusmail.org/" target="_blank">
             Open App
           </Link>
         </Button>
@@ -51,9 +51,9 @@ export const ServicesTab = () => (
         <CardDescription className="pt-4">Securely store your passwords, notes, and 2FA codes with Vaultwarden. Data is encrypted at rest.</CardDescription>
       </CardHeader>
       <CardFooter>
-        <Button>
+        <Button className="cursor-pointer">
           <ExternalLink className="h-4 w-4" />
-          <Link href="https://pass.librecloud.cc/">
+          <Link href="https://pass.librecloud.cc/" target="_blank">
             Open App
           </Link>
         </Button>
@@ -69,9 +69,9 @@ export const ServicesTab = () => (
         <CardDescription className="pt-4">Manage your single-sign-on account for all LibreCloud services.</CardDescription>
       </CardHeader>
       <CardFooter>
-        <Button>
+        <Button className="cursor-pointer">
           <ExternalLink className="h-4 w-4" />
-          <Link href="https://auth.librecloud.cc/">
+          <Link href="https://auth.librecloud.cc/" target="_blank">
             Open App
           </Link>
         </Button>
@@ -87,9 +87,9 @@ export const ServicesTab = () => (
         <CardDescription className="pt-4">Store, share, edit, and synchronize files with Nextcloud.</CardDescription>
       </CardHeader>
       <CardFooter>
-        <Button>
+        <Button className="cursor-pointer">
           <ExternalLink className="h-4 w-4" />
-          <Link href="https://files.librecloud.cc/">
+          <Link href="https://files.librecloud.cc/" target="_blank">
             Open App
           </Link>
         </Button>