feat(webapp): more options entry, theme select and a finer contrast slider

Adds a "More options" link to the Appearance submenu pointing at the profile
page, where the theme picker goes back to the standard select popover and now
covers Classic too.

The contrast slider moves from steps of 5 to 1 and gains a label above the
handle showing the percentage while hovering, dragging or focused.

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

Author: samejr

.server-changes/appearance-toggle-in-account-menu.md

@@ -1,9 +1,11 @@
+import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
 import { useFetcher } from "@remix-run/react";
 import { useTypedRouteLoaderData } from "remix-typedjson";
 import { ToggleSwitchIcon } from "~/assets/icons/ToggleSwitchIcon";
 import { PopoverMenuItem } from "~/components/primitives/Popover";
 import { THEME_OPTIONS } from "~/components/themeOptions";
 import { type loader as rootLoader } from "~/root";
+import { accountPath } from "~/utils/pathBuilder";
 import { normalizeThemePreference } from "~/utils/themePreference";
 import { SideMenuPopoverSubMenu } from "./SideMenuPopoverSubMenu";
 import { SIDE_MENU_POPOVER_ITEM_ICON, SIDE_MENU_POPOVER_ITEM_LABEL } from "./sideMenuTypes";
@@ -50,6 +52,15 @@ export function AppearanceMenuItem() {
           />
         ))}
       </div>
+      <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
+        <PopoverMenuItem
+          to={accountPath()}
+          title="More options"
+          icon={EllipsisHorizontalIcon}
+          leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
+          className={SIDE_MENU_POPOVER_ITEM_LABEL}
+        />
+      </div>
     </SideMenuPopoverSubMenu>
   );
 }

apps/webapp/app/components/ThemeSegmentedControl.tsx

@@ -1,5 +1,5 @@
 import * as RadixSlider from "@radix-ui/react-slider";
-import type { ComponentProps } from "react";
+import { type ComponentProps, useState } from "react";
 import { cn } from "~/utils/cn";
 import type { RenderIcon } from "./Icon";
 import { Icon } from "./Icon";
@@ -34,6 +34,12 @@ export type SliderProps = ComponentProps<typeof RadixSlider.Root> & {
   LeadingIcon?: RenderIcon;
   TrailingIcon?: RenderIcon;
   variant: VariantName;
+  /**
+   * Opts into a small label above the thumb showing the formatted value, while
+   * hovering, dragging, or focused via the keyboard. It sits inside the thumb,
+   * so it tracks the handle exactly. Reads the controlled `value`, so pass one.
+   */
+  valueTooltip?: (value: number) => string;
 };
 
 export function Slider({
@@ -42,9 +48,15 @@ export function Slider({
   LeadingIcon,
   TrailingIcon,
   "aria-label": ariaLabel,
+  valueTooltip,
   ...props
 }: SliderProps) {
   const variation = variants[variant];
+  // The pointer leaves the thumb while dragging, so hover alone can't keep the
+  // label up.
+  const [isDragging, setIsDragging] = useState(false);
+  const currentValue = props.value?.[0] ?? props.defaultValue?.[0] ?? 0;
+
   return (
     <div className={cn("group flex items-center", variation.container)}>
       {LeadingIcon && <Icon icon={LeadingIcon} className={variation.icons} />}
@@ -55,6 +67,18 @@ export function Slider({
           className
         )}
         {...props}
+        onPointerDown={(event) => {
+          props.onPointerDown?.(event);
+          setIsDragging(true);
+        }}
+        onPointerUp={(event) => {
+          props.onPointerUp?.(event);
+          setIsDragging(false);
+        }}
+        onPointerCancel={(event) => {
+          props.onPointerCancel?.(event);
+          setIsDragging(false);
+        }}
       >
         <RadixSlider.Track className={cn("relative grow rounded-full", variation.track)}>
           <RadixSlider.Range className={cn("absolute h-full rounded-full", variation.range)} />
@@ -63,10 +87,23 @@ export function Slider({
         <RadixSlider.Thumb
           aria-label={ariaLabel}
           className={cn(
-            "block cursor-pointer rounded-full transition focus:outline-hidden",
+            "group/thumb relative block cursor-pointer rounded-full transition focus:outline-hidden",
             variation.thumb
           )}
-        />
+        >
+          {valueTooltip && (
+            <span
+              className={cn(
+                "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 rounded border border-grid-bright bg-background-bright px-1.5 py-0.5 text-xs tabular-nums text-text-bright shadow-md transition-opacity",
+                isDragging
+                  ? "opacity-100"
+                  : "opacity-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"
+              )}
+            >
+              {valueTooltip(currentValue)}
+            </span>
+          )}
+        </RadixSlider.Thumb>
       </RadixSlider.Root>
       {TrailingIcon && <Icon icon={TrailingIcon} className={variation.icons} />}
     </div>

apps/webapp/app/components/navigation/AppearanceMenuItem.tsx

@@ -24,3 +24,10 @@ export const CLASSIC_OPTION: ThemeOption = {
   label: "Classic",
   icon: SwatchIcon,
 };
+
+/** Every theme, for the account page's full picker. */
+export const ALL_THEME_OPTIONS: ThemeOption[] = [...THEME_OPTIONS, CLASSIC_OPTION];
+
+export const THEME_OPTIONS_BY_VALUE = Object.fromEntries(
+  ALL_THEME_OPTIONS.map((option) => [option.value, option])
+) as Record<ThemePreference, ThemeOption>;

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

@@ -4,14 +4,14 @@ import { conformZodMessage, parseWithZod } from "@conform-to/zod";
 import { Form, useActionData, useFetcher, useLoaderData } from "@remix-run/react";
 import { type ActionFunction, json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { z } from "zod";
-import { ThemeSegmentedControl } from "~/components/ThemeSegmentedControl";
 import { UserProfilePhoto } from "~/components/UserProfilePhoto";
 import {
   MainHorizontallyCenteredContainer,
   PageBody,
   PageContainer,
 } from "~/components/layout/AppLayout";
 import { Button } from "~/components/primitives/Buttons";
+import { Select, SelectItem } from "~/components/primitives/Select";
 import { Slider } from "~/components/primitives/Slider";
 import { FormError } from "~/components/primitives/FormError";
 import { Header2 } from "~/components/primitives/Headers";
@@ -20,6 +20,7 @@ import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { Switch } from "~/components/primitives/Switch";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { ALL_THEME_OPTIONS, THEME_OPTIONS_BY_VALUE } from "~/components/themeOptions";
 import { prisma } from "~/db.server";
 import { useUser } from "~/hooks/useUser";
 import { redirectWithSuccessMessage } from "~/models/message.server";
@@ -41,6 +42,11 @@ import { pageMeta } from "~/utils/pageTitle";
 
 export const meta = pageMeta("Your profile");
 
+function themeIcon(value: ThemePreference) {
+  const Icon = THEME_OPTIONS_BY_VALUE[value].icon;
+  return <Icon className="size-4 text-text-dimmed" />;
+}
+
 function createSchema(
   constraints: {
     isEmailUnique?: (email: string) => Promise<boolean>;
@@ -281,17 +287,34 @@ export default function Page() {
                     <Label>Theme</Label>
                   </InputGroup>
                   <div className="flex flex-none items-center">
-                    <ThemeSegmentedControl
-                      name="appearance-account"
+                    <Select<ThemePreference, ThemePreference>
+                      aria-label="Theme"
                       value={theme}
-                      includeClassic
-                      onChange={(value) =>
+                      setValue={(value) =>
                         themeFetcher.submit(
                           { action: "update-theme", theme: value },
                           { method: "post" }
                         )
                       }
-                    />
+                      variant="secondary/small"
+                      dropdownIcon
+                      items={ALL_THEME_OPTIONS.map((option) => option.value)}
+                      text={(value) => (
+                        <span className="flex items-center gap-1.5">
+                          {themeIcon(value)}
+                          {THEME_OPTIONS_BY_VALUE[value].label}
+                        </span>
+                      )}
+                      className="w-44"
+                    >
+                      {(items) =>
+                        items.map((item) => (
+                          <SelectItem key={item} value={item} icon={themeIcon(item)}>
+                            {THEME_OPTIONS_BY_VALUE[item].label}
+                          </SelectItem>
+                        ))
+                      }
+                    </Select>
                   </div>
                 </div>
               </div>
@@ -308,7 +331,8 @@ export default function Page() {
                         aria-label="Contrast"
                         min={0}
                         max={100}
-                        step={5}
+                        step={1}
+                        valueTooltip={(value) => `${value}%`}
                         value={[contrastPreview]}
                         onValueChange={(values) => {
                           // Live preview before the preference persists