feat(webapp): add an Underline links preference

Off by default. It targets a marker class on the TextLink component rather than
anchors generally, so nav items, buttons-as-links and decorative underlines
(dashed tooltip terms, tab underlines) are untouched either way.

TextLink itself never underlined - its two variants are colour-only - so this is
the first underline it gets.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/components/primitives/TextLink.tsx

@@ -6,11 +6,14 @@ import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKey
 import { ShortcutKey } from "./ShortcutKey";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip";
 
+// inline-text-link: marker for the "Underline links" preference, which underlines
+// these and nothing else (nav items, buttons-as-links and decorative underlines
+// all stay put). See tailwind.css.
+const base = "inline-text-link inline-flex gap-0.5 items-center group focus-visible:focus-custom";
+
 const variations = {
-  primary:
-    "text-indigo-500 transition hover:text-indigo-400 inline-flex gap-0.5 items-center group focus-visible:focus-custom",
-  secondary:
-    "text-text-dimmed transition hover:text-text-bright inline-flex gap-0.5 items-center group focus-visible:focus-custom",
+  primary: `${base} text-indigo-500 transition hover:text-indigo-400`,
+  secondary: `${base} text-text-dimmed transition hover:text-text-bright`,
 } as const;
 
 type TextLinkProps = {

apps/webapp/app/root.tsx

@@ -26,6 +26,7 @@ import { getUser } from "./services/session.server";
 import {
   normalizeIconContrast,
   normalizeThemeContrast,
+  normalizeUnderlineLinks,
   normalizeThemePreference,
   type ThemePreference,
 } from "~/utils/themePreference";
@@ -100,6 +101,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   const iconContrast = showThemeSwitcher
     ? normalizeIconContrast(user?.dashboardPreferences.iconContrast)
     : false;
+  const underlineLinks = showThemeSwitcher
+    ? normalizeUnderlineLinks(user?.dashboardPreferences.underlineLinks)
+    : false;
   // Display-only: while impersonating, an admin can ask to see the dashboard
   // the way the impersonated user sees it. Exposed from root so every route can
   // read it.
@@ -130,6 +134,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       timezone,
       showThemeSwitcher,
       iconContrast,
+      underlineLinks,
       themePreference,
       themeContrast,
       // Consumed by ResizablePanel: the browser check must match between SSR
@@ -184,6 +189,7 @@ export default function App() {
     themePreference,
     themeContrast,
     iconContrast,
+    underlineLinks,
   } = useTypedLoaderData<typeof loader>();
   usePostHog(posthogProjectKey, posthogUiHost);
   useSystemThemeSync(themePreference);
@@ -202,6 +208,8 @@ export default function App() {
         data-theme-preference={themePreference}
         // Accent set for icons and badges; the `system:` variant keys off this
         data-icon-contrast={iconContrast ? "true" : "false"}
+        // Underlines links carrying the inline-text-link marker class
+        data-underline-links={underlineLinks ? "true" : "false"}
         // Contrast overlay input for the System themes; Classic never reads it
         style={{ "--theme-contrast": themeContrast / 100 } as CSSProperties}
       >

apps/webapp/app/routes/account._index/route.tsx

@@ -48,10 +48,12 @@ import {
   updateContrastPreference,
   updateIconContrastPreference,
   updateThemePreference,
+  updateUnderlineLinksPreference,
 } from "~/services/dashboardPreferences.server";
 import {
   normalizeIconContrast,
   normalizeThemeContrast,
+  normalizeUnderlineLinks,
   normalizeThemePreference,
   type ThemePreference,
 } from "~/utils/themePreference";
@@ -189,6 +191,20 @@ export const action: ActionFunction = async ({ request }) => {
     return json({ success: true });
   }
 
+  if (formData.get("action") === "update-underline-links") {
+    const user = await requireUser(request);
+    const showThemeSwitcher =
+      user.admin || (await cachedFlag({ key: "hasThemeSwitcher", defaultValue: false }));
+    if (!showThemeSwitcher) {
+      return json({ error: "Not available" }, { status: 404 });
+    }
+    await updateUnderlineLinksPreference({
+      user,
+      underlineLinks: formData.get("underlineLinks") === "true",
+    });
+    return json({ success: true });
+  }
+
   const formSchema = createSchema({
     isEmailUnique: async (email) => {
       const existingUser = await prisma.user.findFirst({
@@ -360,6 +376,12 @@ export default function Page() {
     typeof pendingIconContrast === "string"
       ? pendingIconContrast === "true"
       : normalizeIconContrast(user.dashboardPreferences.iconContrast);
+  const underlineLinksFetcher = useFetcher();
+  const pendingUnderlineLinks = underlineLinksFetcher.formData?.get("underlineLinks");
+  const underlineLinks =
+    typeof pendingUnderlineLinks === "string"
+      ? pendingUnderlineLinks === "true"
+      : normalizeUnderlineLinks(user.dashboardPreferences.underlineLinks);
   const pendingTheme = themeFetcher.formData?.get("theme");
   const pendingContrast = contrastFetcher.formData?.get("contrast");
   const contrast =
@@ -613,6 +635,30 @@ export default function Page() {
                   </div>
                 </div>
               </div>
+              <div className="flex min-h-16 w-full items-center border-b border-grid-dimmed">
+                <div className="flex w-full items-center justify-between gap-4">
+                  <div className={cn("flex-1", SETTINGS_ROW_TITLE_GAP)}>
+                    <Label>Underline links</Label>
+                    <SettingsRowDescription>Underline links in body text</SettingsRowDescription>
+                  </div>
+                  <div className="flex flex-none items-center">
+                    <Switch
+                      variant="minimal/medium"
+                      aria-label="Underline links"
+                      checked={underlineLinks}
+                      onCheckedChange={(checked) =>
+                        underlineLinksFetcher.submit(
+                          {
+                            action: "update-underline-links",
+                            underlineLinks: checked ? "true" : "false",
+                          },
+                          { method: "post" }
+                        )
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
             </>
           )}
         </MainHorizontallyCenteredContainer>

apps/webapp/app/services/dashboardPreferences.server.ts

@@ -208,6 +208,36 @@ export async function updateIconContrastPreference({
   `;
 }
 
+export async function updateUnderlineLinksPreference({
+  user,
+  underlineLinks,
+}: {
+  user: UserFromSession;
+  underlineLinks: boolean;
+}) {
+  if (user.isImpersonating) {
+    return;
+  }
+
+  if ((user.dashboardPreferences.underlineLinks ?? false) === underlineLinks) {
+    return;
+  }
+
+  // Narrow jsonb_set write: see updateThemePreference.
+  return prisma.$executeRaw`
+    UPDATE "User"
+    SET "dashboardPreferences" = jsonb_set(
+      COALESCE(
+        "dashboardPreferences",
+        '{"version":"1","projects":{}}'::jsonb
+      ),
+      '{underlineLinks}',
+      to_jsonb(${underlineLinks}::boolean)
+    )
+    WHERE id = ${user.id}
+  `;
+}
+
 export async function clearCurrentProject({ user }: { user: UserFromSession }) {
   if (user.isImpersonating) {
     return;

apps/webapp/app/tailwind.css

@@ -282,6 +282,15 @@
   --color-run-timed-out: #ed5f74;
 }
 
+/* "Underline links" preference: underlines the inline links that carry the
+   marker class from the TextLink component, and only those - hand-rolled link
+   underlines and decorative ones (dashed tooltip terms, tab underlines) are
+   untouched either way. */
+[data-underline-links="true"] .inline-text-link {
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+}
+
 /* Icon contrast drops decorative icon accents to monochrome; with it off,
    the icons stay colored. side-menu-active-icon is set in SideMenuItem for the
    active nav item; system-mono-icon marks section-header icons (e.g. the

apps/webapp/app/utils/dashboardPreferences.ts

@@ -54,6 +54,8 @@ const DashboardPreferences = z.object({
   contrast: z.number().int().min(0).max(100).optional().catch(undefined),
   /** Swaps the Classic icon and badge accents for the high-contrast set. */
   iconContrast: z.boolean().optional().catch(undefined),
+  /** Underlines inline links. */
+  underlineLinks: z.boolean().optional().catch(undefined),
   currentProjectId: z.string().optional(),
   projects: z.record(
     z.string(),

apps/webapp/app/utils/themePreference.ts

@@ -22,6 +22,11 @@ export function normalizeIconContrast(value: unknown): boolean {
   return value === true;
 }
 
+/** Underlines inline links (the TextLink component). Off is the default. */
+export function normalizeUnderlineLinks(value: unknown): boolean {
+  return value === true;
+}
+
 /** Interface contrast for the System themes, 0 to 100. Missing or invalid
  * values fall back to the default bump. */
 export function normalizeThemeContrast(value: unknown): number {