fix: line leading and width tweaks

frontend/src/components/icons/local-auth.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+export function LocalAuthIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h5m3.5 3.5L15 22l-1.5-1.5m5.054-2.086a2 2 0 1 1 2.828-2.828a2 2 0 0 1-2.828 2.828M16 19l1 1"
+      ></path>
+    </svg>
+  );
+}

frontend/src/components/quick-actions/quick-actions.tsx

@@ -25,6 +25,8 @@ import {
   Palette,
   Settings,
   Sun,
+  UserRoundKey,
+  X,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router";
@@ -37,20 +39,26 @@ import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
 import { toast } from "sonner";
 import { useEffect } from "react";
+import { GoogleIcon } from "../icons/google";
+import { GithubIcon } from "../icons/github";
+import { TailscaleIcon } from "../icons/tailscale";
+import { MicrosoftIcon } from "../icons/microsoft";
+import { PocketIDIcon } from "../icons/pocket-id";
+import { OAuthIcon } from "../icons/oauth";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
-function Avatar({ initial }: { initial: string }) {
-  return (
-    <span className="group relative grid size-10 place-items-center rounded-full">
-      <span className="absolute inset-0 overflow-hidden rounded-full bg-linear-to-b from-neutral-50 to-neutral-100 dark:from-neutral-700 dark:to-neutral-950 shadow-lg"></span>
-      <span className="relative text-sm font-semibold text-primary">
-        {initial}
-      </span>
-    </span>
-  );
-}
+const iconStyles = "size-4";
+
+const iconMap: Record<string, React.ReactNode> = {
+  google: <GoogleIcon className={iconStyles} />,
+  github: <GithubIcon className={iconStyles} />,
+  tailscale: <TailscaleIcon className={iconStyles} />,
+  microsoft: <MicrosoftIcon className={iconStyles} />,
+  pocketid: <PocketIDIcon className={iconStyles} />,
+};
 
 export const QuickActions = () => {
-  const { auth } = useUserContext();
+  const { auth, oauth, tailscale } = useUserContext();
   const { theme, setTheme } = useTheme();
   const { t } = useTranslation();
   const { search } = useLocation();
@@ -64,6 +72,49 @@ export const QuickActions = () => {
   const screenParams = useScreenParams(searchParams);
   const compiledParams = recompileScreenParams(screenParams);
 
+  const [isOpen, setIsOpen] = useState(false);
+
+  const providerDetails = (():
+    | { name: string; icon: React.ReactNode }
+    | undefined => {
+    if (!auth.authenticated) {
+      return undefined;
+    }
+
+    if (auth.providerId === "local" || auth.providerId === "ldap") {
+      return {
+        name: t(
+          auth.providerId === "ldap"
+            ? "quickActionsProviderLDAP"
+            : "quickActionsProviderLocal",
+        ),
+        icon: (
+          <UserRoundKey
+            strokeWidth={1.5}
+            size={16}
+            className="text-muted-foreground ml-0.5"
+          />
+        ),
+      };
+    }
+
+    if (oauth.active) {
+      return {
+        name: t("quickActionsProviderOAuth", { provider: oauth.displayName }),
+        icon: iconMap[auth.providerId] || <OAuthIcon className={iconStyles} />,
+      };
+    }
+
+    if (auth.providerId === "tailscale") {
+      return {
+        name: `Tailscale (${tailscale.nodeName})`,
+        icon: <TailscaleIcon className={iconStyles} />,
+      };
+    }
+
+    return undefined;
+  })();
+
   const logoutMutation = useMutation({
     mutationFn: () => axios.post("/api/user/logout"),
     mutationKey: ["logout"],
@@ -107,17 +158,29 @@ export const QuickActions = () => {
   ] as const;
 
   return (
-    <DropdownMenu>
+    <DropdownMenu onOpenChange={(open) => setIsOpen(open)} open={isOpen}>
       <DropdownMenuTrigger asChild>
         <button
           aria-label={t("quickActionsTitle")}
           className="rounded-full transition-transform duration-200 will-change-transform hover:scale-105 hover:cursor-pointer focus:ring-0 focus:outline-3 focus:outline-ring/50"
         >
           {auth.authenticated ? (
-            <Avatar initial={initial!} />
+            <div className="size-10 flex justify-center items-center p-2 rounded-full bg-card border border-border">
+              {isOpen ? (
+                <X className="size-4 text-primary rotate-0 transition-transform duration-200 starting:rotate-45" />
+              ) : (
+                <span className="text-sm text-primary rotate-0 transition-transform duration-200 starting:-rotate-45">
+                  {initial}
+                </span>
+              )}
+            </div>
           ) : (
             <span className="bg-card text-primary border-border size-10 flex items-center justify-center rounded-full border shadow-lg">
-              <Settings className="size-4" />
+              <Settings
+                className={`size-4 transition-transform duration-200 ${
+                  isOpen ? "rotate-45" : "rotate-0"
+                }`}
+              />
             </span>
           )}
         </button>
@@ -126,19 +189,22 @@ export const QuickActions = () => {
       <DropdownMenuContent
         align="end"
         sideOffset={8}
-        className="rounded-xl p-1"
+        className="rounded-xl p-1 w-3xs"
       >
         {auth.authenticated && (
           <>
             <DropdownMenuLabel className="flex items-center gap-3 p-2">
-              <div className="bg-foreground text-background flex size-9 shrink-0 items-center justify-center rounded-full text-sm font-medium">
-                {initial}
-              </div>
-              <div className="flex min-w-0 flex-col">
+              <Tooltip>
+                <TooltipTrigger className="size-9 rounded-full p-2 bg-muted border-border border flex items-center justify-center">
+                  {providerDetails!.icon}
+                </TooltipTrigger>
+                <TooltipContent>{providerDetails!.name}</TooltipContent>
+              </Tooltip>
+              <div className="flex min-w-0 flex-col gap-0.5">
                 <span className="truncate text-sm font-medium">
                   {auth.name}
                 </span>
-                <span className="text-muted-foreground truncate text-xs font-normal">
+                <span className="text-muted-foreground truncate text-xs">
                   {auth.email}
                 </span>
               </div>
@@ -197,7 +263,7 @@ export const QuickActions = () => {
               onSelect={() => logoutMutation.mutate()}
               className="text-destructive"
             >
-              <DoorOpenIcon className="size-4" />
+              <DoorOpenIcon className="size-4 text-destructive" />
               {t("quickActionsLogout")}
             </DropdownMenuItem>
           </>

frontend/src/lib/i18n/locales/en-US.json

@@ -99,5 +99,8 @@
   "quickActionsThemeDark": "Dark",
   "quickActionsThemeSystem": "System",
   "quickActionsLogout": "Logout",
-  "quickActionsTitle": "Quick Actions"
+  "quickActionsTitle": "Quick Actions",
+  "quickActionsProviderLocal": "Local",
+  "quickActionsProviderLDAP": "LDAP",
+  "quickActionsProviderOAuth": "{{provider}} OAuth"
 }

frontend/src/lib/i18n/locales/en.json

@@ -99,5 +99,8 @@
   "quickActionsThemeDark": "Dark",
   "quickActionsThemeSystem": "System",
   "quickActionsLogout": "Logout",
-  "quickActionsTitle": "Quick Actions"
+  "quickActionsTitle": "Quick Actions",
+  "quickActionsProviderLocal": "Local",
+  "quickActionsProviderLDAP": "LDAP",
+  "quickActionsProviderOAuth": "{{provider}} OAuth"
 }

frontend/src/pages/logout-page.tsx

@@ -137,7 +137,7 @@ function LogoutLayout({ children, logoutMutation }: LogoutLayoutProps) {
       </CardHeader>
       <CardFooter>
         <Button
-          className="w-full"
+          className="w-full text-destructive"
           variant="outline"
           loading={logoutMutation.isPending}
           onClick={() => logoutMutation.mutate()}

go.mod

@@ -24,10 +24,10 @@ require (
 	go.uber.org/dig v1.19.0
 	golang.org/x/crypto v0.53.0
 	golang.org/x/oauth2 v0.36.0
-	golang.org/x/tools v0.47.0
+	golang.org/x/tools v0.46.0
 	k8s.io/apimachinery v0.36.2
 	k8s.io/client-go v0.36.2
-	modernc.org/sqlite v1.53.0
+	modernc.org/sqlite v1.52.0
 	tailscale.com v1.100.0
 )
 
@@ -175,7 +175,7 @@ require (
 	k8s.io/klog/v2 v2.140.0 // indirect
 	k8s.io/kube-openapi v0.0.0-20260317180543-43fb72c5454a // indirect
 	k8s.io/utils v0.0.0-20260210185600-b8788abfbbc2 // indirect
-	modernc.org/libc v1.73.4 // indirect
+	modernc.org/libc v1.72.3 // indirect
 	modernc.org/mathutil v1.7.1 // indirect
 	modernc.org/memory v1.11.0 // indirect
 	rsc.io/qr v0.2.0 // indirect

go.sum

@@ -526,8 +526,8 @@ golang.org/x/text v0.38.0 h1:sXmwo9DwP3OK9EZ7PqAdaooSGozfl/3a6/xJcbzPRhE=
 golang.org/x/text v0.38.0/go.mod h1:YXZt3QhHUKYT53r2lLKFIVi6Ao1jdzrTR/KQ09qyxF4=
 golang.org/x/time v0.14.0 h1:MRx4UaLrDotUKUdCIqzPC48t1Y9hANFKIRpNx+Te8PI=
 golang.org/x/time v0.14.0/go.mod h1:eL/Oa2bBBK0TkX57Fyni+NgnyQQN4LitPmob2Hjnqw4=
-golang.org/x/tools v0.47.0 h1:7Kn5x/d1svx/PzryTsqeoZN4TZwqeH5pGWjefhLi/1Q=
-golang.org/x/tools v0.47.0/go.mod h1:dFHnyTvFWY212G+h7ZY4Vsp/K3U4/7W9TyVaAul8uCA=
+golang.org/x/tools v0.46.0 h1:7jTurBkPZu4moS/Uy4OQT1M+QBlsj3wejyZwsT8Z7rk=
+golang.org/x/tools v0.46.0/go.mod h1:FrD85F8l+NWL+9XWBSyVSHO6Ne4jutsfIFba7AWQ5Ys=
 golang.zx2c4.com/wintun v0.0.0-20230126152724-0fa3db229ce2 h1:B82qJJgjvYKsXS9jeunTOisW56dUokqW/FOteYJJ/yg=
 golang.zx2c4.com/wintun v0.0.0-20230126152724-0fa3db229ce2/go.mod h1:deeaetjYA+DHMHg+sMSMI58GrEteJUUzzw7en6TJQcI=
 golang.zx2c4.com/wireguard/windows v0.5.3 h1:On6j2Rpn3OEMXqBq00QEDC7bWSZrPIHKIus8eIuExIE=
@@ -571,20 +571,20 @@ k8s.io/kube-openapi v0.0.0-20260317180543-43fb72c5454a h1:xCeOEAOoGYl2jnJoHkC3hk
 k8s.io/kube-openapi v0.0.0-20260317180543-43fb72c5454a/go.mod h1:uGBT7iTA6c6MvqUvSXIaYZo9ukscABYi2btjhvgKGZ0=
 k8s.io/utils v0.0.0-20260210185600-b8788abfbbc2 h1:AZYQSJemyQB5eRxqcPky+/7EdBj0xi3g0ZcxxJ7vbWU=
 k8s.io/utils v0.0.0-20260210185600-b8788abfbbc2/go.mod h1:xDxuJ0whA3d0I4mf/C4ppKHxXynQ+fxnkmQH0vTHnuk=
-modernc.org/cc/v4 v4.28.4 h1:Hd/4Es+MBj+/7hSdZaisNyu6bv3V0Dp2MdllyfqaH+c=
-modernc.org/cc/v4 v4.28.4/go.mod h1:OnovgIhbbMXMu1aISnJ0wvVD1KnW+cAUJkIrAWh+kVI=
-modernc.org/ccgo/v4 v4.34.4 h1:OVnSOWQjVKOYkFxoHYB+qQmSHK5gqMqARM+K9DpR/Ws=
-modernc.org/ccgo/v4 v4.34.4/go.mod h1:qdKqE8FNIYyysougB1RX9MxCzp5oJOcQXSobANJ4TuE=
+modernc.org/cc/v4 v4.28.2 h1:3tQ0lf2ADtoby2EtSP+J7IE2SHwEJdP8ioR59wx7XpY=
+modernc.org/cc/v4 v4.28.2/go.mod h1:OnovgIhbbMXMu1aISnJ0wvVD1KnW+cAUJkIrAWh+kVI=
+modernc.org/ccgo/v4 v4.34.0 h1:yRLPFZieg532OT4rp4JFNIVcquwalMX26G95WQDqwCQ=
+modernc.org/ccgo/v4 v4.34.0/go.mod h1:AS5WYMyBakQ+fhsHhtP8mWB82KTGPkNNJDGfGQCe0/A=
 modernc.org/fileutil v1.4.0 h1:j6ZzNTftVS054gi281TyLjHPp6CPHr2KCxEXjEbD6SM=
 modernc.org/fileutil v1.4.0/go.mod h1:EqdKFDxiByqxLk8ozOxObDSfcVOv/54xDs/DUHdvCUU=
 modernc.org/gc/v2 v2.6.5 h1:nyqdV8q46KvTpZlsw66kWqwXRHdjIlJOhG6kxiV/9xI=
 modernc.org/gc/v2 v2.6.5/go.mod h1:YgIahr1ypgfe7chRuJi2gD7DBQiKSLMPgBQe9oIiito=
-modernc.org/gc/v3 v3.1.3 h1:6QAplYyVO+KdPW3pGnqmJDUxtkec8ooEWvks/hhU3lc=
-modernc.org/gc/v3 v3.1.3/go.mod h1:HFK/6AGESC7Ex+EZJhJ2Gni6cTaYpSMmU/cT9RmlfYY=
+modernc.org/gc/v3 v3.1.2 h1:ZtDCnhonXSZexk/AYsegNRV1lJGgaNZJuKjJSWKyEqo=
+modernc.org/gc/v3 v3.1.2/go.mod h1:HFK/6AGESC7Ex+EZJhJ2Gni6cTaYpSMmU/cT9RmlfYY=
 modernc.org/goabi0 v0.2.0 h1:HvEowk7LxcPd0eq6mVOAEMai46V+i7Jrj13t4AzuNks=
 modernc.org/goabi0 v0.2.0/go.mod h1:CEFRnnJhKvWT1c1JTI3Avm+tgOWbkOu5oPA8eH8LnMI=
-modernc.org/libc v1.73.4 h1:+ra4Ui8ngyt8HDcO1FTDPWlkAh6yOdaO2yAoh8MddQA=
-modernc.org/libc v1.73.4/go.mod h1:DXZ3eO8qMCNn2SnmTNCiC71nJ9Rcq3PsnpU6Vc4rWK8=
+modernc.org/libc v1.72.3 h1:ZnDF4tXn4NBXFutMMQC4vtbTFSXhhKzR73fv0beZEAU=
+modernc.org/libc v1.72.3/go.mod h1:dn0dZNnnn1clLyvRxLxYExxiKRZIRENOfqQ8XEeg4Qs=
 modernc.org/mathutil v1.7.1 h1:GCZVGXdaN8gTqB1Mf/usp1Y/hSqgI2vAGGP4jZMCxOU=
 modernc.org/mathutil v1.7.1/go.mod h1:4p5IwJITfppl0G4sUEDtCr4DthTaT47/N3aT6MhfgJg=
 modernc.org/memory v1.11.0 h1:o4QC8aMQzmcwCK3t3Ux/ZHmwFPzE6hf2Y5LbkRs+hbI=
@@ -593,8 +593,8 @@ modernc.org/opt v0.2.0 h1:tGyef5ApycA7FSEOMraay9SaTk5zmbx7Tu+cJs4QKZg=
 modernc.org/opt v0.2.0/go.mod h1:03fq9lsNfvkYSfxrfUhZCWPk1lm4cq4N+Bh//bEtgns=
 modernc.org/sortutil v1.2.1 h1:+xyoGf15mM3NMlPDnFqrteY07klSFxLElE2PVuWIJ7w=
 modernc.org/sortutil v1.2.1/go.mod h1:7ZI3a3REbai7gzCLcotuw9AC4VZVpYMjDzETGsSMqJE=
-modernc.org/sqlite v1.53.0 h1:20WG8N9q4ji/dEqGk4uiI0c6OPjSeLTNYGFCc3+7c1M=
-modernc.org/sqlite v1.53.0/go.mod h1:xoEpOIpGrgT48H5iiyt/YXPCZPEzlfmfFwtk8Lklw8s=
+modernc.org/sqlite v1.52.0 h1:p4dhYh2tXZCiyaqHwRVJDjIGKWyXayiQpThxgDzJaxo=
+modernc.org/sqlite v1.52.0/go.mod h1:tcNzv5p84E0skkmJn038y+hWJbLQXQqEnQfeh5r2JLM=
 modernc.org/strutil v1.2.1 h1:UneZBkQA+DX2Rp35KcM69cSsNES9ly8mQWD71HKlOA0=
 modernc.org/strutil v1.2.1/go.mod h1:EHkiggD70koQxjVdSBM3JKM7k6L0FbGE5eymy9i3B9A=
 modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=

internal/bootstrap/app_bootstrap.go

@@ -11,6 +11,7 @@ import (
 	"net/url"
 	"os"
 	"os/signal"
+	"slices"
 	"sort"
 	"strings"
 	"syscall"
@@ -131,6 +132,10 @@ func (app *BootstrapApp) Setup() error {
 	app.runtime.OAuthProviders = app.config.OAuth.Providers
 
 	for id, provider := range app.runtime.OAuthProviders {
+		if slices.Contains(model.ReservedProviderNames, id) {
+			return fmt.Errorf("provider id %s is reserved and cannot be used", id)
+		}
+
 		providerWhitelist, err := utils.GetStringList(provider.Whitelist, provider.WhitelistFile)
 		if err != nil {
 			return fmt.Errorf("failed to load oauth whitelist for provider %s: %w", id, err)

internal/model/constants.go

@@ -17,6 +17,8 @@ var OverrideProviders = map[string]string{
 	"github": "GitHub",
 }
 
+var ReservedProviderNames = []string{"local", "ldap", "tailscale"}
+
 const SessionCookieName = "tinyauth-session"
 const CSRFCookieName = "tinyauth-csrf"
 const RedirectCookieName = "tinyauth-redirect"