feat(webapp): use a custom monitor icon for the System theme

Replaces the heroicons desktop glyph in both theme pickers.

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

Author: samejr

apps/webapp/app/assets/icons/MonitorIcon.tsx

@@ -0,0 +1,21 @@
+/** Monitor on a stand — the System theme, which follows the OS appearance. */
+export function MonitorIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 13H3M11 17H13L14 21H10L11 17ZM5 17H19C20.1046 17 21 16.1046 21 15V6C21 4.89543 20.1046 4 19 4H5C3.89543 4 3 4.89543 3 6V15C3 16.1046 3.89543 17 5 17Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/themeOptions.ts

@@ -1,7 +1,8 @@
-import { ComputerDesktopIcon, SwatchIcon } from "@heroicons/react/24/outline";
+import { SwatchIcon } from "@heroicons/react/24/outline";
 import { type FunctionComponent } from "react";
 import { CircleFilledIcon } from "~/assets/icons/CircleFilledIcon";
 import { CircleOutlineIcon } from "~/assets/icons/CircleOutlineIcon";
+import { MonitorIcon } from "~/assets/icons/MonitorIcon";
 import { MoonIcon } from "~/assets/icons/MoonIcon";
 import { SunIcon } from "~/assets/icons/SunIcon";
 import { type ThemeAppearance } from "~/hooks/useSystemThemeSync";
@@ -17,7 +18,7 @@ export type ThemeOption = {
  *  popover's submenu. Shared by every theme picker so the labels and icons
  *  can't drift apart. */
 export const THEME_OPTIONS: ThemeOption[] = [
-  { value: "system", label: "System", icon: ComputerDesktopIcon },
+  { value: "system", label: "System", icon: MonitorIcon },
   { value: "light", label: "Light", icon: SunIcon },
   { value: "dark", label: "Dark", icon: MoonIcon },
 ];