diff --git a/apps/webapp/app/assets/icons/AppearanceIcon.tsx b/apps/webapp/app/assets/icons/AppearanceIcon.tsx new file mode 100644 index 00000000000..f1fd1451fe7 --- /dev/null +++ b/apps/webapp/app/assets/icons/AppearanceIcon.tsx @@ -0,0 +1,23 @@ +/** Circle with one half filled — the theme/appearance setting. */ +export function AppearanceIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/icons/CircleFilledIcon.tsx b/apps/webapp/app/assets/icons/CircleFilledIcon.tsx new file mode 100644 index 00000000000..a6d10485bee --- /dev/null +++ b/apps/webapp/app/assets/icons/CircleFilledIcon.tsx @@ -0,0 +1,16 @@ +/** Solid circle. Paired with {@link CircleOutlineIcon} by the Black and White + * theme options — the filled disc reads as the opposite of the active theme. */ +export function CircleFilledIcon({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/webapp/app/assets/icons/CircleOutlineIcon.tsx b/apps/webapp/app/assets/icons/CircleOutlineIcon.tsx new file mode 100644 index 00000000000..e60de21907f --- /dev/null +++ b/apps/webapp/app/assets/icons/CircleOutlineIcon.tsx @@ -0,0 +1,16 @@ +/** Hollow circle. Paired with {@link CircleFilledIcon} by the Black and White + * theme options, which show the active theme's background through the ring. */ +export function CircleOutlineIcon({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/webapp/app/assets/icons/MonitorIcon.tsx b/apps/webapp/app/assets/icons/MonitorIcon.tsx new file mode 100644 index 00000000000..09aae279843 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/apps/webapp/app/assets/icons/MoonIcon.tsx b/apps/webapp/app/assets/icons/MoonIcon.tsx new file mode 100644 index 00000000000..f3e20e27f2c --- /dev/null +++ b/apps/webapp/app/assets/icons/MoonIcon.tsx @@ -0,0 +1,21 @@ +/** Crescent moon — the dark theme. */ +export function MoonIcon({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/webapp/app/assets/icons/SunIcon.tsx b/apps/webapp/app/assets/icons/SunIcon.tsx new file mode 100644 index 00000000000..b2ac93fd02a --- /dev/null +++ b/apps/webapp/app/assets/icons/SunIcon.tsx @@ -0,0 +1,34 @@ +/** + * Sun with rays — the light theme. The source artwork wrapped this in a mask and + * a clip path; both were no-ops at this viewBox, and dropping them keeps the + * markup free of ids that would collide when the icon renders more than once. + */ +export function SunIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/icons/ToggleSwitchIcon.tsx b/apps/webapp/app/assets/icons/ToggleSwitchIcon.tsx new file mode 100644 index 00000000000..51b8136e1dc --- /dev/null +++ b/apps/webapp/app/assets/icons/ToggleSwitchIcon.tsx @@ -0,0 +1,23 @@ +/** Toggle switch, knob to the left. */ +export function ToggleSwitchIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/images/producthunt.png b/apps/webapp/app/assets/images/producthunt.png deleted file mode 100644 index e27a96f6976..00000000000 Binary files a/apps/webapp/app/assets/images/producthunt.png and /dev/null differ diff --git a/apps/webapp/app/components/ProductHuntBanner.tsx b/apps/webapp/app/components/ProductHuntBanner.tsx deleted file mode 100644 index abb5a146355..00000000000 --- a/apps/webapp/app/components/ProductHuntBanner.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import productHuntLogo from "../assets/images/producthunt.png"; -import { ArrowRightIcon } from "@heroicons/react/20/solid"; -import { Paragraph } from "./primitives/Paragraph"; -import { LinkButton } from "./primitives/Buttons"; - -export function ProductHuntBanner() { - return ( -
- - We're live on{" "} - - Product Hunt - - - Vote for us today only! - -
- ); -} diff --git a/apps/webapp/app/components/billing/BillingLimitConfigSection.tsx b/apps/webapp/app/components/billing/BillingLimitConfigSection.tsx index e6362d4cb1d..125ae688dfb 100644 --- a/apps/webapp/app/components/billing/BillingLimitConfigSection.tsx +++ b/apps/webapp/app/components/billing/BillingLimitConfigSection.tsx @@ -20,6 +20,7 @@ import { Paragraph } from "~/components/primitives/Paragraph"; import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton"; import type { BillingLimitResult } from "~/services/billingLimit.schemas"; import { formatCurrency } from "~/utils/numberFormatter"; +import { TextLink } from "~/components/primitives/TextLink"; export const billingLimitFormSchema = z.discriminatedUnion("mode", [ z.object({ @@ -338,10 +339,7 @@ function LimitReachedCalloutContent({ When this limit is reached, queued runs will be held for {gracePeriodLabel}, then new triggers will be rejected until you increase or remove the limit. Limits are enforced with a short delay, so spend may briefly exceed the limit before grace begins. See our{" "} - - terms - {" "} - for refund policy details. + terms for refund policy details. {cancelInProgressRuns ? ( <> In-progress runs will be cancelled when the limit is hit. ) : null} diff --git a/apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx b/apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx index 6f2102f8efe..daf36f5cb52 100644 --- a/apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx +++ b/apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx @@ -101,7 +101,7 @@ function RunLink({ runId, className }: { runId: string; className?: string }) { const to = useRunPath(runId); if (!to) return {runId}; return ( - + {runId} ); @@ -119,7 +119,7 @@ function EvidenceReference({ reference }: { reference: string }) { variant="token" target="_blank" rel="noopener noreferrer" - className="font-mono text-xs underline" + className="font-mono text-xs" > {reference} diff --git a/apps/webapp/app/components/navigation/AppearanceMenuItem.tsx b/apps/webapp/app/components/navigation/AppearanceMenuItem.tsx new file mode 100644 index 00000000000..3b9a92c9e4c --- /dev/null +++ b/apps/webapp/app/components/navigation/AppearanceMenuItem.tsx @@ -0,0 +1,83 @@ +import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid"; +import { useFetcher } from "@remix-run/react"; +import { useEffect } from "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 { applyThemePreference } from "~/hooks/useSystemThemeSync"; +import { type loader as rootLoader } from "~/root"; +import { accountPath } from "~/utils/pathBuilder"; +import { normalizeThemePreference, type ThemePreference } from "~/utils/themePreference"; +import { SideMenuPopoverSubMenu } from "./SideMenuPopoverSubMenu"; +import { SIDE_MENU_POPOVER_ITEM_ICON, SIDE_MENU_POPOVER_ITEM_LABEL } from "./sideMenuTypes"; + +const THEME_ACTION_PATH = "/resources/preferences/theme"; + +/** + * Theme switcher for the account popover: an "Appearance" submenu listing each theme, with a check + * against the current one. Picking a theme doesn't navigate, so the menu stays open and the new + * theme applies underneath it. Hidden entirely while the theme switcher feature flag is off, + * matching the account page. + */ +export function AppearanceMenuItem() { + const rootData = useTypedRouteLoaderData("root"); + const fetcher = useFetcher<{ success?: boolean }>(); + const savedTheme = rootData?.themePreference; + const systemThemes = rootData?.systemThemes; + + // A failed write would otherwise leave the optimistic theme on screen, since + // the loader data never changes and so `useSystemThemeSync` never re-runs. + useEffect(() => { + if (fetcher.state !== "idle" || !fetcher.data || fetcher.data.success || !savedTheme) return; + applyThemePreference(savedTheme, systemThemes); + }, [fetcher.state, fetcher.data, savedTheme, systemThemes]); + + if (!rootData?.showThemeSwitcher) { + return null; + } + + // Move the check as soon as a theme is clicked; the write follows. + const pendingTheme = fetcher.formData?.get("theme"); + const theme = + typeof pendingTheme === "string" + ? normalizeThemePreference(pendingTheme) + : rootData.themePreference; + + const pickTheme = (value: ThemePreference) => { + // Applied here rather than waiting for the write to come back through the + // root loader: dismissing the popover unmounts this row, and an unmounted + // fetcher's revalidation is dropped, which left the theme untouched even + // though the preference had saved. + applyThemePreference(value, rootData.systemThemes); + fetcher.submit({ theme: value }, { method: "post", action: THEME_ACTION_PATH }); + }; + + return ( + // Much narrower than the standard submenu: these labels don't need the room. + +
+ {THEME_OPTIONS.map((option) => ( + pickTheme(option.value)} + /> + ))} +
+
+ +
+ + ); +} diff --git a/apps/webapp/app/components/navigation/NotificationCard.tsx b/apps/webapp/app/components/navigation/NotificationCard.tsx index e9ad1e07e65..2274138b3e4 100644 --- a/apps/webapp/app/components/navigation/NotificationCard.tsx +++ b/apps/webapp/app/components/navigation/NotificationCard.tsx @@ -2,6 +2,7 @@ import { XMarkIcon } from "@heroicons/react/20/solid"; import { useLayoutEffect, useRef, useState } from "react"; import ReactMarkdown from "react-markdown"; import { cn } from "~/utils/cn"; +import { textLinkClassName } from "~/components/primitives/TextLink"; export function NotificationCard({ title, @@ -109,7 +110,7 @@ function getMarkdownComponents(onLinkClick?: () => void) { href={href} target="_blank" rel="noopener noreferrer" - className="relative z-20 text-indigo-400 underline transition-colors hover:text-indigo-300" + className={cn(textLinkClassName(), "relative z-20")} onClick={(e) => { e.stopPropagation(); onLinkClick?.(); diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx index ebedc77fc6e..427a3551181 100644 --- a/apps/webapp/app/components/navigation/SideMenu.tsx +++ b/apps/webapp/app/components/navigation/SideMenu.tsx @@ -1,8 +1,4 @@ -import { - ArrowTopRightOnSquareIcon, - ChevronRightIcon, - ExclamationTriangleIcon, -} from "@heroicons/react/24/outline"; +import { ArrowTopRightOnSquareIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline"; import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid"; import { Form, @@ -24,44 +20,27 @@ import { useState, } from "react"; import { AIChatIcon } from "~/assets/icons/AIChatIcon"; -import { AIPenIcon } from "~/assets/icons/AIPenIcon"; import { ArrowLeftRightIcon } from "~/assets/icons/ArrowLeftRightIcon"; import { ArrowRightSquareIcon } from "~/assets/icons/ArrowRightSquareIcon"; import { AvatarCircleIcon } from "~/assets/icons/AvatarCircleIcon"; -import { BatchesIcon } from "~/assets/icons/BatchesIcon"; import { BellIcon } from "~/assets/icons/BellIcon"; -import { Box3DIcon } from "~/assets/icons/Box3DIcon"; -import { BugIcon } from "~/assets/icons/BugIcon"; import { ChainLinkIcon } from "~/assets/icons/ChainLinkIcon"; -import { ChartBarIcon } from "~/assets/icons/ChartBarIcon"; -import { CodeSquareIcon } from "~/assets/icons/CodeSquareIcon"; -import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon"; -import { DeploymentsIcon } from "~/assets/icons/DeploymentsIcon"; -import { DialIcon } from "~/assets/icons/DialIcon"; import { DropdownIcon } from "~/assets/icons/DropdownIcon"; -import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons"; import { EyeClosedIcon } from "~/assets/icons/EyeClosedIcon"; import { EyeOpenIcon } from "~/assets/icons/EyeOpenIcon"; import { FolderClosedIcon } from "~/assets/icons/FolderClosedIcon"; import { FolderOpenIcon } from "~/assets/icons/FolderOpenIcon"; -import { GlobeLinesIcon } from "~/assets/icons/GlobeLinesIcon"; import { HomeIcon } from "~/assets/icons/HomeIcon"; -import { IDIcon } from "~/assets/icons/IDIcon"; import { IntegrationsIcon } from "~/assets/icons/IntegrationsIcon"; -import { KeyIcon } from "~/assets/icons/KeyIcon"; import { LeftSideMenuCollapsedIcon } from "~/assets/icons/LeftSideMenuCollapsedIcon"; import { LeftSideMenuIcon } from "~/assets/icons/LeftSideMenuIcon"; -import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon"; -import { LogsIcon } from "~/assets/icons/LogsIcon"; import { PlusIcon } from "~/assets/icons/PlusIcon"; -import { QueuesIcon } from "~/assets/icons/QueuesIcon"; import { RunsIcon } from "~/assets/icons/RunsIcon"; import { ShieldIcon } from "~/assets/icons/ShieldIcon"; import { SidebarCustomizeIcon } from "~/assets/icons/SidebarCustomizeIcon"; import { SlidersIcon } from "~/assets/icons/SlidersIcon"; import { TasksIcon } from "~/assets/icons/TasksIcon"; import { UsageIcon } from "~/assets/icons/UsageIcon"; -import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon"; import { CreditCardIcon } from "~/assets/icons/CreditCardIcon"; import { UserCrossIcon } from "~/assets/icons/UserCrossIcon"; import { UserGroupIcon } from "~/assets/icons/UserGroupIcon"; @@ -93,9 +72,6 @@ import { accountSecurityPath, personalAccessTokensPath, adminPath, - branchesPath, - concurrencyPath, - limitsPath, logoutPath, newOrganizationPath, newProjectPath, @@ -106,36 +82,20 @@ import { organizationSsoPath, organizationTeamPath, organizationVercelIntegrationPath, - queryPath, - regionsPath, - v3ApiKeysPath, - v3BatchesPath, v3BillingLimitsPath, v3BillingPath, v3PrivateConnectionsPath, - v3BulkActionsPath, - v3DashboardsLandingPath, - v3DeploymentsPath, v3EnvironmentPath, - v3EnvironmentVariablesPath, - v3ErrorsPath, - v3LogsPath, - v3ModelsPath, - v3ProjectAlertsPath, v3ProjectPath, v3ProjectSettingsGeneralPath, - v3ProjectSettingsIntegrationsPath, - v3PromptsPath, - v3QueuesPath, v3RunsPath, v3SessionsPath, v3UsagePath, - v3WaitpointTokensPath, } from "~/utils/pathBuilder"; import { FreePlanUsage } from "../billing/FreePlanUsage"; import { ConnectionIcon, DevPresencePanel, useDevPresence } from "../DevPresence"; -import { AlphaBadge, NewBadge } from "../FeatureBadges"; -import { Button, ButtonContent, LinkButton } from "../primitives/Buttons"; +import { NewBadge } from "../FeatureBadges"; +import { Button, LinkButton } from "../primitives/Buttons"; import { Dialog, DialogTrigger } from "../primitives/Dialog"; import { type RenderIcon } from "../primitives/Icon"; import { Paragraph } from "../primitives/Paragraph"; @@ -158,6 +118,7 @@ import { } from "../primitives/Tooltip"; import { ShortcutsAutoOpen } from "../Shortcuts"; import { type FavoritePage } from "~/services/dashboardPreferences.server"; +import { AppearanceMenuItem } from "./AppearanceMenuItem"; import { CustomizeSidebarDialog, type CustomizeSidebarSection, @@ -178,6 +139,8 @@ import { HelpAndFeedback } from "./HelpAndFeedbackPopover"; import { NotificationPanel } from "./NotificationPanel"; import { SideMenuHeader } from "./SideMenuHeader"; import { SideMenuItem, SideMenuLabel } from "./SideMenuItem"; +import { buildSideMenuSections, type SideMenuSectionConfig } from "./sideMenuSections"; +import { SideMenuPopoverSubMenu } from "./SideMenuPopoverSubMenu"; import { SideMenuSection } from "./SideMenuSection"; import { isItemHidden, @@ -195,31 +158,6 @@ function getSectionCollapsed( return sideMenu?.collapsedSections?.[sectionId] ?? false; } -type SideMenuItemConfig = { - /** Stable id used for hidden/order preferences; never rename once shipped. */ - id: string; - name: string; - icon: RenderIcon; - activeIconColor: string; - inactiveIconColor?: string; - to: string; - dataAction?: string; - badge?: ReactNode; - trailingIconClassName?: string; - /** Hidden for every user who hasn't set their own preference for this item. */ - defaultHidden?: boolean; - /** Right-side action (e.g. the + button on Dashboards); only rendered when visible. */ - action?: ReactNode; - /** Extra content rendered directly after the item (e.g. the dashboards list). */ - after?: ReactNode; -}; - -type SideMenuSectionConfig = { - id: SideMenuSectionId; - title: string; - items: SideMenuItemConfig[]; -}; - // Impersonation accent (menu border + "Stop impersonating"). Full class strings so Tailwind's // static scanner picks them up. const IMPERSONATION_ACCENT = { @@ -793,219 +731,32 @@ export function SideMenu({ // The customizable sections (everything except Tasks/Runs/Sessions), in DEFAULT order. The // user's saved order/hidden preferences are applied at render below. - const staticSections: SideMenuSectionConfig[] = []; - - if (isAdmin || featureFlags.hasAiAccess) { - staticSections.push({ - id: "ai", - title: "AI", - items: [ - { - id: "prompts", - name: "Prompts", - icon: AIPenIcon, - trailingIconClassName: "size-6", - activeIconColor: "text-aiPrompts", - to: v3PromptsPath(organization, project, environment), - dataAction: "prompts", - badge: , - }, - { - id: "models", - name: "Models", - icon: Box3DIcon, - activeIconColor: "text-models", - to: v3ModelsPath(organization, project, environment), - dataAction: "models", - badge: , - }, - ], - }); - } - - if (isAdmin || featureFlags.hasQueryAccess) { - staticSections.push({ - id: "metrics", - title: "Observability", - items: [ - ...(isAdmin || featureFlags.hasLogsPageAccess - ? [ - { - id: "logs", - name: "Logs", - icon: LogsIcon, - activeIconColor: "text-logs", - to: v3LogsPath(organization, project, environment), - dataAction: "logs", - badge: , - } satisfies SideMenuItemConfig, - ] - : []), - { - id: "errors", - name: "Errors", - icon: BugIcon, - activeIconColor: "text-errors", - to: v3ErrorsPath(organization, project, environment), - dataAction: "errors", - }, - { - id: "query", - name: "Query", - icon: CodeSquareIcon, - activeIconColor: "text-query", - to: queryPath(organization, project, environment), - dataAction: "query", - }, - { - id: "queues", - name: "Queues", - icon: QueuesIcon, - activeIconColor: "text-queues", - to: v3QueuesPath(organization, project, environment), - dataAction: "queues", - }, - { - id: "dashboards", - name: "Dashboards", - icon: ChartBarIcon, - activeIconColor: "text-metrics", - to: v3DashboardsLandingPath(organization, project, environment), - dataAction: "dashboards-landing", - action: ( - - ), - after: ( - - ), - }, - ], - }); - } - - staticSections.push({ - id: "deployments", - title: "Deployments", - items: [ - { - id: "deployments", - name: "Deploys", - icon: DeploymentsIcon, - activeIconColor: "text-deployments", - to: v3DeploymentsPath(organization, project, environment), - dataAction: "deployments", - }, - { - id: "environment-variables", - name: "Environment variables", - icon: IDIcon, - activeIconColor: "text-environmentVariables", - to: v3EnvironmentVariablesPath(organization, project, environment), - dataAction: "environment variables", - }, - { - id: "preview-branches", - name: "Preview branches", - icon: BranchEnvironmentIconSmall, - activeIconColor: "text-previewBranches", - to: branchesPath(organization, project, environment), - dataAction: "preview-branches", - }, - { - id: "regions", - name: "Regions", - icon: GlobeLinesIcon, - activeIconColor: "text-regions", - to: regionsPath(organization, project, environment), - dataAction: "regions", - }, - ], - }); - - staticSections.push({ - id: "manage", - title: "Manage", - items: [ - { - id: "waitpoint-tokens", - name: "Waitpoint tokens", - icon: WaitpointTokenIcon, - activeIconColor: "text-sky-500", - to: v3WaitpointTokensPath(organization, project, environment), - dataAction: "waitpoint-tokens", - }, - { - id: "batches", - name: "Batches", - icon: BatchesIcon, - activeIconColor: "text-batches", - to: v3BatchesPath(organization, project, environment), - dataAction: "batches", - }, - { - id: "bulk-actions", - name: "Bulk actions", - icon: ListCheckedIcon, - activeIconColor: "text-text-bright", - to: v3BulkActionsPath(organization, project, environment), - dataAction: "bulk actions", - }, - { - id: "api-keys", - name: "API keys", - icon: KeyIcon, - activeIconColor: "text-text-bright", - to: v3ApiKeysPath(organization, project, environment), - dataAction: "api keys", - }, - { - id: "alerts", - name: "Alerts", - icon: BellIcon, - activeIconColor: "text-text-bright", - to: v3ProjectAlertsPath(organization, project, environment), - dataAction: "alerts", - }, - ...(isManagedCloud - ? [ - { - id: "concurrency", - name: "Concurrency", - icon: ConcurrencyIcon, - activeIconColor: "text-text-bright", - to: concurrencyPath(organization, project, environment), - dataAction: "concurrency", - } satisfies SideMenuItemConfig, - ] - : []), - { - id: "limits", - name: "Limits", - icon: DialIcon, - activeIconColor: "text-text-bright", - to: limitsPath(organization, project, environment), - dataAction: "limits", - }, - { - id: "integrations", - name: "Integrations", - icon: IntegrationsIcon, - activeIconColor: "text-text-bright", - to: v3ProjectSettingsIntegrationsPath(organization, project, environment), - dataAction: "project-settings-integrations", - }, - ], + const staticSections = buildSideMenuSections({ + organization, + project, + environment, + isAdmin, + featureFlags, + isManagedCloud, + dashboards: { + action: ( + + ), + after: ( + + ), + }, }); const sideMenuPrefs = user.dashboardPreferences.sideMenu; @@ -1898,6 +1649,7 @@ function AccountMenuItems({ leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON} className={SIDE_MENU_POPOVER_ITEM_LABEL} /> + (null); - - useEffect(() => { - return () => { - if (timeoutRef.current) clearTimeout(timeoutRef.current); - }; - }, []); - - // Close the submenu on navigation (the parent popover closes too). - useEffect(() => { - setIsOpen(false); - }, [navigation.location?.pathname]); - - const openNow = () => { - if (timeoutRef.current) clearTimeout(timeoutRef.current); - setIsOpen(true); - }; - const closeSoon = () => { - // Small delay before closing so the pointer can move onto the content. - timeoutRef.current = setTimeout(() => setIsOpen(false), 150); - }; - - return ( - setIsOpen(open)} open={isOpen}> -
- - - {title} - - - - {children} - -
- - ); -} - function SwitchOrganizations({ organizations, organization, diff --git a/apps/webapp/app/components/navigation/SideMenuPopoverSubMenu.tsx b/apps/webapp/app/components/navigation/SideMenuPopoverSubMenu.tsx new file mode 100644 index 00000000000..ba8057613ea --- /dev/null +++ b/apps/webapp/app/components/navigation/SideMenuPopoverSubMenu.tsx @@ -0,0 +1,88 @@ +import { ChevronRightIcon } from "@heroicons/react/24/outline"; +import { useNavigation } from "@remix-run/react"; +import { type ReactNode, useEffect, useRef, useState } from "react"; +import { cn } from "~/utils/cn"; +import { ButtonContent } from "../primitives/Buttons"; +import { type RenderIcon } from "../primitives/Icon"; +import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover"; +import { SIDE_MENU_POPOVER_ITEM_ICON, SIDE_MENU_POPOVER_ITEM_LABEL } from "./sideMenuTypes"; + +/** + * Hover-expandable submenu row for side-menu popovers (Account, Switch organization, Integrations, + * Appearance): a menu item with a trailing chevron that reveals `children` in a popover to the + * right, with a short close delay so the pointer can cross the gap. + */ +export function SideMenuPopoverSubMenu({ + title, + icon, + leadingIconClassName, + contentClassName, + children, +}: { + title: string; + icon: RenderIcon; + leadingIconClassName?: string; + /** Override the submenu panel's styling, e.g. a narrower width for short entries. */ + contentClassName?: string; + children: ReactNode; +}) { + const navigation = useNavigation(); + const [isOpen, setIsOpen] = useState(false); + const timeoutRef = useRef(null); + + useEffect(() => { + return () => { + if (timeoutRef.current) clearTimeout(timeoutRef.current); + }; + }, []); + + // Close the submenu on navigation (the parent popover closes too). + useEffect(() => { + setIsOpen(false); + }, [navigation.location?.pathname]); + + const openNow = () => { + if (timeoutRef.current) clearTimeout(timeoutRef.current); + setIsOpen(true); + }; + const closeSoon = () => { + // Small delay before closing so the pointer can move onto the content. + timeoutRef.current = setTimeout(() => setIsOpen(false), 150); + }; + + return ( + setIsOpen(open)} open={isOpen}> +
+ + + {title} + + + + {children} + +
+ + ); +} diff --git a/apps/webapp/app/components/navigation/sideMenuSections.tsx b/apps/webapp/app/components/navigation/sideMenuSections.tsx new file mode 100644 index 00000000000..e625c3b7a74 --- /dev/null +++ b/apps/webapp/app/components/navigation/sideMenuSections.tsx @@ -0,0 +1,297 @@ +import { type ReactNode } from "react"; +import { AIPenIcon } from "~/assets/icons/AIPenIcon"; +import { BatchesIcon } from "~/assets/icons/BatchesIcon"; +import { BellIcon } from "~/assets/icons/BellIcon"; +import { Box3DIcon } from "~/assets/icons/Box3DIcon"; +import { BugIcon } from "~/assets/icons/BugIcon"; +import { ChartBarIcon } from "~/assets/icons/ChartBarIcon"; +import { CodeSquareIcon } from "~/assets/icons/CodeSquareIcon"; +import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon"; +import { DeploymentsIcon } from "~/assets/icons/DeploymentsIcon"; +import { DialIcon } from "~/assets/icons/DialIcon"; +import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons"; +import { GlobeLinesIcon } from "~/assets/icons/GlobeLinesIcon"; +import { IDIcon } from "~/assets/icons/IDIcon"; +import { IntegrationsIcon } from "~/assets/icons/IntegrationsIcon"; +import { KeyIcon } from "~/assets/icons/KeyIcon"; +import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon"; +import { LogsIcon } from "~/assets/icons/LogsIcon"; +import { QueuesIcon } from "~/assets/icons/QueuesIcon"; +import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon"; +import { + type EnvironmentForPath, + type OrgForPath, + type ProjectForPath, + branchesPath, + concurrencyPath, + limitsPath, + queryPath, + regionsPath, + v3ApiKeysPath, + v3BatchesPath, + v3BulkActionsPath, + v3DashboardsLandingPath, + v3DeploymentsPath, + v3EnvironmentVariablesPath, + v3ErrorsPath, + v3LogsPath, + v3ModelsPath, + v3ProjectAlertsPath, + v3ProjectSettingsIntegrationsPath, + v3PromptsPath, + v3QueuesPath, + v3WaitpointTokensPath, +} from "~/utils/pathBuilder"; +import { AlphaBadge, NewBadge } from "../FeatureBadges"; +import { type RenderIcon } from "../primitives/Icon"; +import { type SideMenuSectionId } from "./sideMenuTypes"; + +// The side menu's customizable sections (everything except Tasks/Runs/Sessions), in DEFAULT order. +// Lives outside SideMenu so the profile page can build the same list for the "Customize sidebar" +// modal - it has no side menu of its own to read them from. + +export type SideMenuItemConfig = { + /** Stable id used for hidden/order preferences; never rename once shipped. */ + id: string; + name: string; + icon: RenderIcon; + activeIconColor: string; + inactiveIconColor?: string; + to: string; + dataAction?: string; + badge?: ReactNode; + trailingIconClassName?: string; + /** Hidden for every user who hasn't set their own preference for this item. */ + defaultHidden?: boolean; + /** Right-side action (e.g. the + button on Dashboards); only rendered when visible. */ + action?: ReactNode; + /** Extra content rendered directly after the item (e.g. the dashboards list). */ + after?: ReactNode; +}; + +export type SideMenuSectionConfig = { + id: SideMenuSectionId; + title: string; + items: SideMenuItemConfig[]; +}; + +export function buildSideMenuSections({ + organization, + project, + environment, + isAdmin, + featureFlags, + isManagedCloud, + dashboards, +}: { + organization: OrgForPath; + project: ProjectForPath; + environment: EnvironmentForPath; + isAdmin: boolean; + featureFlags: { hasAiAccess?: boolean; hasQueryAccess?: boolean; hasLogsPageAccess?: boolean }; + isManagedCloud: boolean; + /** Side-menu-only extras on the Dashboards item; the customize modal has no use for them. */ + dashboards?: { action?: ReactNode; after?: ReactNode }; +}): SideMenuSectionConfig[] { + const staticSections: SideMenuSectionConfig[] = []; + + if (isAdmin || featureFlags.hasAiAccess) { + staticSections.push({ + id: "ai", + title: "AI", + items: [ + { + id: "prompts", + name: "Prompts", + icon: AIPenIcon, + trailingIconClassName: "size-6", + activeIconColor: "text-aiPrompts", + to: v3PromptsPath(organization, project, environment), + dataAction: "prompts", + badge: , + }, + { + id: "models", + name: "Models", + icon: Box3DIcon, + activeIconColor: "text-models", + to: v3ModelsPath(organization, project, environment), + dataAction: "models", + badge: , + }, + ], + }); + } + + if (isAdmin || featureFlags.hasQueryAccess) { + staticSections.push({ + id: "metrics", + title: "Observability", + items: [ + ...(isAdmin || featureFlags.hasLogsPageAccess + ? [ + { + id: "logs", + name: "Logs", + icon: LogsIcon, + activeIconColor: "text-logs", + to: v3LogsPath(organization, project, environment), + dataAction: "logs", + badge: , + } satisfies SideMenuItemConfig, + ] + : []), + { + id: "errors", + name: "Errors", + icon: BugIcon, + activeIconColor: "text-errors", + to: v3ErrorsPath(organization, project, environment), + dataAction: "errors", + }, + { + id: "query", + name: "Query", + icon: CodeSquareIcon, + activeIconColor: "text-query", + to: queryPath(organization, project, environment), + dataAction: "query", + }, + { + id: "queues", + name: "Queues", + icon: QueuesIcon, + activeIconColor: "text-queues", + to: v3QueuesPath(organization, project, environment), + dataAction: "queues", + }, + { + id: "dashboards", + name: "Dashboards", + icon: ChartBarIcon, + activeIconColor: "text-metrics", + to: v3DashboardsLandingPath(organization, project, environment), + dataAction: "dashboards-landing", + action: dashboards?.action, + after: dashboards?.after, + }, + ], + }); + } + + staticSections.push({ + id: "deployments", + title: "Deployments", + items: [ + { + id: "deployments", + name: "Deploys", + icon: DeploymentsIcon, + activeIconColor: "text-deployments", + to: v3DeploymentsPath(organization, project, environment), + dataAction: "deployments", + }, + { + id: "environment-variables", + name: "Environment variables", + icon: IDIcon, + activeIconColor: "text-environmentVariables", + to: v3EnvironmentVariablesPath(organization, project, environment), + dataAction: "environment variables", + }, + { + id: "preview-branches", + name: "Preview branches", + icon: BranchEnvironmentIconSmall, + activeIconColor: "text-previewBranches", + to: branchesPath(organization, project, environment), + dataAction: "preview-branches", + }, + { + id: "regions", + name: "Regions", + icon: GlobeLinesIcon, + activeIconColor: "text-regions", + to: regionsPath(organization, project, environment), + dataAction: "regions", + }, + ], + }); + + staticSections.push({ + id: "manage", + title: "Manage", + items: [ + { + id: "waitpoint-tokens", + name: "Waitpoint tokens", + icon: WaitpointTokenIcon, + activeIconColor: "text-sky-500", + to: v3WaitpointTokensPath(organization, project, environment), + dataAction: "waitpoint-tokens", + }, + { + id: "batches", + name: "Batches", + icon: BatchesIcon, + activeIconColor: "text-batches", + to: v3BatchesPath(organization, project, environment), + dataAction: "batches", + }, + { + id: "bulk-actions", + name: "Bulk actions", + icon: ListCheckedIcon, + activeIconColor: "text-text-bright", + to: v3BulkActionsPath(organization, project, environment), + dataAction: "bulk actions", + }, + { + id: "api-keys", + name: "API keys", + icon: KeyIcon, + activeIconColor: "text-text-bright", + to: v3ApiKeysPath(organization, project, environment), + dataAction: "api keys", + }, + { + id: "alerts", + name: "Alerts", + icon: BellIcon, + activeIconColor: "text-text-bright", + to: v3ProjectAlertsPath(organization, project, environment), + dataAction: "alerts", + }, + ...(isManagedCloud + ? [ + { + id: "concurrency", + name: "Concurrency", + icon: ConcurrencyIcon, + activeIconColor: "text-text-bright", + to: concurrencyPath(organization, project, environment), + dataAction: "concurrency", + } satisfies SideMenuItemConfig, + ] + : []), + { + id: "limits", + name: "Limits", + icon: DialIcon, + activeIconColor: "text-text-bright", + to: limitsPath(organization, project, environment), + dataAction: "limits", + }, + { + id: "integrations", + name: "Integrations", + icon: IntegrationsIcon, + activeIconColor: "text-text-bright", + to: v3ProjectSettingsIntegrationsPath(organization, project, environment), + dataAction: "project-settings-integrations", + }, + ], + }); + + return staticSections; +} diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index 5d6b66156fb..aac3303f583 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -69,7 +69,10 @@ const theme = { secondary: { textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80", button: - "bg-secondary border border-border-bright/50 shadow-xs group-hover/button:bg-background-raised group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none", + // On light, hover darkens off white. On the dark themes bg-secondary is + // charcoal-650, so hover steps one stop up the scale to charcoal-600 + // (surface-control) - background-raised is charcoal-700, i.e. darker. + "bg-secondary border border-border-bright/50 shadow-xs group-hover/button:bg-background-raised dark:group-hover/button:bg-surface-control group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none", shortcut: "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed", icon: "text-text-bright", diff --git a/apps/webapp/app/components/primitives/LabelValueStack.tsx b/apps/webapp/app/components/primitives/LabelValueStack.tsx index 977ef6ee84c..15411ab3cbc 100644 --- a/apps/webapp/app/components/primitives/LabelValueStack.tsx +++ b/apps/webapp/app/components/primitives/LabelValueStack.tsx @@ -1,8 +1,8 @@ import { cn } from "~/utils/cn"; import { Paragraph } from "./Paragraph"; +import { TextLink } from "./TextLink"; import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid"; import { SimpleTooltip } from "./Tooltip"; -import { Link } from "@remix-run/react"; const variations = { primary: { @@ -69,9 +69,9 @@ function ValueButton({ value, href, variant = "secondary" }: ValueButtonStackPro if (!isExternalUrl) { return ( - + {value} - + ); } @@ -81,10 +81,14 @@ function ValueButton({ value, href, variant = "secondary" }: ValueButtonStackPro side="bottom" button={ - + {value} - - + } content={href} diff --git a/apps/webapp/app/components/primitives/Select.tsx b/apps/webapp/app/components/primitives/Select.tsx index 31921ef9854..de294a63c19 100644 --- a/apps/webapp/app/components/primitives/Select.tsx +++ b/apps/webapp/app/components/primitives/Select.tsx @@ -29,8 +29,11 @@ const style = { "bg-transparent focus-custom hover:bg-tertiary disabled:bg-transparent disabled:pointer-events-none", }, secondary: { + // Hover matches the secondary button: darkens off white on light, and steps + // one stop up the charcoal scale on the dark themes, where background-raised + // (charcoal-700) sits below bg-secondary (charcoal-650) and read as dimming. button: - "bg-secondary focus-custom border border-border-bright/50 shadow-xs hover:text-text-bright text-text-bright hover:bg-background-raised", + "bg-secondary focus-custom border border-border-bright/50 shadow-xs text-text-bright hover:bg-background-raised dark:hover:bg-surface-control", }, }; @@ -356,8 +359,10 @@ export function SelectTrigger({ {dropdownIcon === true ? ( ) : !dropdownIcon ? null : ( diff --git a/apps/webapp/app/components/primitives/SettingsLayout.tsx b/apps/webapp/app/components/primitives/SettingsLayout.tsx index dae340e9835..d9a7540c3e0 100644 --- a/apps/webapp/app/components/primitives/SettingsLayout.tsx +++ b/apps/webapp/app/components/primitives/SettingsLayout.tsx @@ -114,7 +114,7 @@ export function SettingsRowTitle({ ); } -/** Description/subtitle typography for a row. */ +/** Description/subtitle typography for a row - a step down from the title. */ export function SettingsRowDescription({ children, className, @@ -123,12 +123,16 @@ export function SettingsRowDescription({ className?: string; }) { return ( - + {children} ); } +/** Title-to-description spacing, kept in one place so every settings row and + * anything hand-rolling the pair reads the same. */ +export const SETTINGS_ROW_TITLE_GAP = "space-y-0.5"; + /** * A single settings row: title + description on the left, action on the right. * @@ -170,7 +174,7 @@ export function SettingsRow({ )} > {children ?? ( -
+
{title ? ( {title} @@ -229,7 +233,7 @@ export function SettingsAlertRow({ return ( -
+
{title} diff --git a/apps/webapp/app/components/primitives/Slider.tsx b/apps/webapp/app/components/primitives/Slider.tsx index e3ab6cdcd4e..a215a2939ea 100644 --- a/apps/webapp/app/components/primitives/Slider.tsx +++ b/apps/webapp/app/components/primitives/Slider.tsx @@ -1,8 +1,9 @@ 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"; +import { SimpleTooltip } from "./Tooltip"; const variants = { /* Quiet variant for settings rows: no hover box, no thumb halo */ @@ -12,10 +13,16 @@ const variants = { root: "h-4 grow", track: "h-1 bg-grid-bright", range: "bg-transparent", - // Matches the Switch thumb; the secondary-button hairline+shadow keeps the - // white dot visible on the light track + // The secondary-button hairline+shadow keeps the dot visible on the light + // track. Hover moves the handle off its resting tone in whichever direction + // reads as more prominent: brighter on the dark themes, dimmer on light. thumb: - "h-3 w-3 border border-border-bright bg-white shadow-sm dark:border-transparent dark:bg-charcoal-200 dark:shadow-none", + "h-4.5 w-4.5 border border-border-bright bg-white shadow-sm hover:bg-charcoal-200 dark:border-transparent dark:bg-charcoal-300 dark:shadow-none dark:hover:bg-charcoal-200", + thumbSize: 18, + // Track-coloured line, notched off the track by borders in the colour of + // the page behind it (settings rows sit on background-dimmed). + mark: "bg-grid-bright border-background-dimmed", + markHover: "hover:bg-text-dimmed", }, tertiary: { container: "h-6 gap-1 rounded-sm hover:bg-background-raised px-1", @@ -25,6 +32,9 @@ const variants = { range: "bg-transparent group-hover:bg-secondary", thumb: "h-3 w-3 border-2 border-text-dimmed bg-grid-bright shadow-[0_1px_3px_4px_rgb(0_0_0/0.2),0_1px_2px_-1px_rgb(0_0_0/0.1)] hover:border-text-dimmed focus:shadow-[0_1px_3px_4px_rgb(0_0_0/0.2),0_1px_2px_-1px_rgb(0_0_0/0.1)]", + thumbSize: 12, + mark: "bg-grid-bright border-background-dimmed", + markHover: "hover:bg-text-dimmed", }, }; @@ -34,6 +44,22 @@ export type SliderProps = ComponentProps & { LeadingIcon?: RenderIcon; TrailingIcon?: RenderIcon; variant: VariantName; + /** + * Opts into a small label above the thumb showing the formatted value, shown + * while the thumb is hovered or being dragged. It sits inside the thumb, so it + * tracks the handle exactly. Reads the controlled `value`, so pass one. + */ + valueTooltip?: (value: number) => string; + /** Values to tick on the track, e.g. the setting's default. */ + marks?: SliderMark[]; +}; + +export type SliderMark = { + value: number; + /** Tooltip on hover, and the accessible name once `onSelect` is set. */ + label?: string; + /** Makes the mark a button, e.g. to reset the setting to its default. */ + onSelect?: () => void; }; export function Slider({ @@ -42,9 +68,18 @@ export function Slider({ LeadingIcon, TrailingIcon, "aria-label": ariaLabel, + valueTooltip, + marks, ...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; + const min = props.min ?? 0; + const max = props.max ?? 100; + return (
{LeadingIcon && } @@ -55,18 +90,93 @@ 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); + }} > + {marks?.map((mark) => { + const percent = ((mark.value - min) / (max - min)) * 100; + if (!Number.isFinite(percent) || percent < 0 || percent > 100) return null; + // Radix keeps the thumb inside the track by offsetting it against its + // own width, so a plain percentage would sit off the handle. Same + // formula as its `getThumbInBoundsOffset`, so the tick lands under + // the thumb's centre. + const offset = variation.thumbSize * (0.5 - percent / 100); + const style = { left: `calc(${percent}% + ${offset}px)` }; + // Drawn after the track, so it sits on top of it - and before the + // thumb, so an overlapping handle keeps the hover and the click. + // box-content keeps the line 2px wide and hangs the borders outside + // it, so they read as a gap in the track rather than eating the line. + const markClassName = cn( + "absolute top-1/2 box-content h-4 w-0.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-x-[3px]", + variation.mark + ); + + if (!mark.onSelect) { + return ; + } + + return ( + event.stopPropagation()} + onClick={mark.onSelect} + /> + } + /> + ); + })} {/* The thumb is the role="slider" element, so the label lives here */} + > + {valueTooltip && ( + + {valueTooltip(currentValue)} + {/* Straddles the bottom edge, hiding the border it overlaps, so the + two outer sides read as an arrow pointing at the handle. */} + + + )} + {TrailingIcon && }
diff --git a/apps/webapp/app/components/primitives/Switch.tsx b/apps/webapp/app/components/primitives/Switch.tsx index e07187176a8..34365cade2d 100644 --- a/apps/webapp/app/components/primitives/Switch.tsx +++ b/apps/webapp/app/components/primitives/Switch.tsx @@ -52,6 +52,14 @@ const variations = { thumb: "size-3.5 data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0", text: "text-sm text-text-dimmed", }, + /* Like medium, minus the hover box: the toggle is the whole target, for rows + that already carry their own affordance. */ + "minimal/medium": { + container: "flex items-center gap-x-2 rounded-md focus-custom", + root: "h-4 w-8", + thumb: "size-3.5 data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0", + text: "text-sm text-text-dimmed", + }, }; type SwitchProps = React.ComponentPropsWithoutRef & { @@ -91,7 +99,7 @@ export const Switch = React.forwardRef diff --git a/apps/webapp/app/components/primitives/TextLink.tsx b/apps/webapp/app/components/primitives/TextLink.tsx index 5f32fcdf850..24d93712ca3 100644 --- a/apps/webapp/app/components/primitives/TextLink.tsx +++ b/apps/webapp/app/components/primitives/TextLink.tsx @@ -6,15 +6,32 @@ import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKey import { ShortcutKey } from "./ShortcutKey"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip"; -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", +const colors = { + primary: "text-indigo-500 transition hover:text-indigo-400", + secondary: "text-text-dimmed transition hover:text-text-bright", // The theme-remapped link token, for links inside themed surfaces where the // raw indigo of `primary` is dark-theme only. - token: - "text-text-link transition hover:underline inline-flex gap-0.5 items-center group focus-visible:focus-custom", + token: "text-text-link transition hover:underline", +} as const; + +const layout = "inline-flex gap-0.5 items-center group"; + +/** + * A link's colour plus `inline-text-link`, the marker the "Underline links" + * preference targets (see tailwind.css) - without this component's layout. + * + * For links that can't be a `TextLink`: ones that must stay in the inline flow + * (markdown prose, where the component's inline-flex would stop them wrapping), + * and triggers that aren't anchors at all. + */ +export function textLinkClassName(variant: keyof typeof colors = "primary") { + return cn("inline-text-link focus-visible:focus-custom", colors[variant]); +} + +const variations = { + primary: cn(textLinkClassName("primary"), layout), + secondary: cn(textLinkClassName("secondary"), layout), + token: cn(textLinkClassName("token"), layout), } as const; type TextLinkProps = { @@ -28,6 +45,8 @@ type TextLinkProps = { shortcut?: ShortcutDefinition; hideShortcutKey?: boolean; tooltip?: React.ReactNode; + /** Forwarded to `Link`: forces a full document load rather than a client nav. */ + reloadDocument?: boolean; } & React.AnchorHTMLAttributes; export function TextLink({ @@ -41,6 +60,7 @@ export function TextLink({ shortcut, hideShortcutKey, tooltip, + reloadDocument, ...props }: TextLinkProps) { const innerRef = useRef(null); @@ -70,7 +90,13 @@ export function TextLink({ ); const linkElement = to ? ( - + {linkContent} ) : href ? ( diff --git a/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx b/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx index 81a45edef2d..44009377f65 100644 --- a/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx +++ b/apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx @@ -2,6 +2,7 @@ import type { UIMessage } from "@ai-sdk/react"; import { memo } from "react"; import { AssistantResponse, ChatBubble, ToolUseRow } from "~/components/runs/v3/ai/AIChatMessages"; import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover"; +import { textLinkClassName } from "~/components/primitives/TextLink"; // --------------------------------------------------------------------------- // AgentMessageView — renders an AI SDK UIMessage[] conversation. @@ -219,12 +220,7 @@ export function renderPart(part: UIMessage["parts"][number], i: number) { } return ( @@ -274,12 +270,7 @@ export function renderPart(part: UIMessage["parts"][number], i: number) { } return ( diff --git a/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx b/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx index f7b09b6daf1..92a5c16be60 100644 --- a/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx +++ b/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx @@ -2,6 +2,8 @@ import { useState } from "react"; import { CodeBlock } from "~/components/code/CodeBlock"; import type { AISpanData, ToolDefinition } from "./types"; import { Paragraph } from "~/components/primitives/Paragraph"; +import { textLinkClassName } from "~/components/primitives/TextLink"; +import { cn } from "~/utils/cn"; export function AIToolsInventory({ aiData }: { aiData: AISpanData }) { const defs = aiData.toolDefinitions ?? []; @@ -48,7 +50,7 @@ function ToolDefRow({ def, wasCalled }: { def: ToolDefinition; wasCalled: boolea
diff --git a/apps/webapp/app/components/themeOptions.ts b/apps/webapp/app/components/themeOptions.ts new file mode 100644 index 00000000000..c92ae6632b5 --- /dev/null +++ b/apps/webapp/app/components/themeOptions.ts @@ -0,0 +1,73 @@ +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"; +import { type ThemePreference } from "~/utils/themePreference"; + +export type ThemeOption = { + value: ThemePreference; + label: string; + icon: FunctionComponent<{ className?: string }>; +}; + +/** The themes offered everywhere, in display order - including the account + * 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: MonitorIcon }, + { value: "light", label: "Light", icon: SunIcon }, + { value: "dark", label: "Dark", icon: MoonIcon }, +]; + +/** Dark and Light with their surfaces pinned flat, so grid lines carry the + * layout. Account page only, alongside Classic. The icons here are the + * dark-theme pair; `themeOptionIcon` swaps them per active theme. */ +const FLAT_OPTIONS: ThemeOption[] = [ + { value: "black", label: "Black", icon: CircleOutlineIcon }, + { value: "white", label: "White", icon: CircleFilledIcon }, +]; + +/** Legacy theme, offered on the account page only. */ +export const CLASSIC_OPTION: ThemeOption = { + value: "classic", + label: "Classic", + icon: SwatchIcon, +}; + +/** Every theme, for the account page's full picker. */ +export const ALL_THEME_OPTIONS: ThemeOption[] = [...THEME_OPTIONS, ...FLAT_OPTIONS, CLASSIC_OPTION]; + +export const THEME_OPTIONS_BY_VALUE = Object.fromEntries( + ALL_THEME_OPTIONS.map((option) => [option.value, option]) +) as Record; + +/** + * The icon to draw for an option under the active theme. + * + * Black and White show the active theme's background *through* the circle: the + * option matching the current end of the scale is a ring, so the background + * reads through it, and the opposing one is a solid disc in the foreground + * colour. On a dark theme that makes Black a ring and White a filled disc; on a + * light theme it flips. Every other option has one fixed icon. + */ +export function themeOptionIcon(option: ThemeOption, appearance: ThemeAppearance) { + if (option.value === "black") { + return appearance === "dark" ? CircleOutlineIcon : CircleFilledIcon; + } + if (option.value === "white") { + return appearance === "light" ? CircleOutlineIcon : CircleFilledIcon; + } + return option.icon; +} + +/** The two candidates for each end of the `system` setting. */ +export const SYSTEM_LIGHT_OPTIONS: ThemeOption[] = ALL_THEME_OPTIONS.filter( + (option) => option.value === "light" || option.value === "white" +); +export const SYSTEM_DARK_OPTIONS: ThemeOption[] = ALL_THEME_OPTIONS.filter( + (option) => option.value === "dark" || option.value === "black" +); diff --git a/apps/webapp/app/hooks/useSystemThemeSync.ts b/apps/webapp/app/hooks/useSystemThemeSync.ts index 6b2a678396f..13f18d98b5d 100644 --- a/apps/webapp/app/hooks/useSystemThemeSync.ts +++ b/apps/webapp/app/hooks/useSystemThemeSync.ts @@ -1,5 +1,80 @@ -import { useEffect } from "react"; -import { type ThemePreference } from "~/utils/themePreference"; +import { useEffect, useState } from "react"; +import { + type SystemDarkTheme, + type SystemLightTheme, + type ThemePreference, +} from "~/utils/themePreference"; + +/** Which theme `system` lands on at each end of the OS setting. */ +export type SystemThemes = { light: SystemLightTheme; dark: SystemDarkTheme }; + +export const DEFAULT_SYSTEM_THEMES: SystemThemes = { light: "light", dark: "dark" }; + +/** Which end of the scale a theme sits on. Classic and Black are dark; White is + * light; `system` follows the OS. */ +export type ThemeAppearance = "dark" | "light"; + +export function themeAppearance( + preference: ThemePreference, + prefersDark: boolean +): ThemeAppearance { + if (preference === "system") return prefersDark ? "dark" : "light"; + return preference === "light" || preference === "white" ? "light" : "dark"; +} + +/** + * The resolved appearance, tracking OS changes while the preference is `system`. + * + * Defaults to dark before the effect runs, matching the SSR fallback in root.tsx, + * so the first client render agrees with the server's. + */ +export function useThemeAppearance(preference: ThemePreference): ThemeAppearance { + const [prefersDark, setPrefersDark] = useState(true); + + useEffect(() => { + if (preference !== "system") return; + const media = window.matchMedia("(prefers-color-scheme: dark)"); + const apply = () => setPrefersDark(media.matches); + apply(); + media.addEventListener("change", apply); + return () => media.removeEventListener("change", apply); + }, [preference]); + + return themeAppearance(preference, prefersDark); +} + +/** + * The theme a preference resolves to. Only `system` needs resolving, and it lands + * on whichever variant the user picked for that end of the OS setting - Light or + * White, Dark or Black. + */ +export function resolveThemePreference( + preference: ThemePreference, + prefersDark: boolean, + systemThemes: SystemThemes = DEFAULT_SYSTEM_THEMES +): ThemePreference { + if (preference !== "system") return preference; + return prefersDark ? systemThemes.dark : systemThemes.light; +} + +/** + * Puts a preference on now, resolving `system` against the OS once. Use + * this to apply a theme the moment it's picked: the preference round-trips + * through the server and comes back via the root loader, and anything that waits + * for that is at the mercy of whether the revalidation actually lands. + */ +export function applyThemePreference( + preference: ThemePreference, + systemThemes: SystemThemes = DEFAULT_SYSTEM_THEMES +) { + const prefersDark = + preference === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches; + document.documentElement.setAttribute( + "data-theme", + resolveThemePreference(preference, prefersDark, systemThemes) + ); + document.documentElement.setAttribute("data-theme-preference", preference); +} /** * Keeps `data-theme` on in sync with the preference. For `system` it @@ -10,20 +85,26 @@ import { type ThemePreference } from "~/utils/themePreference"; * inline script in root.tsx; downstream consumers react to the `data-theme` * mutation (see useThemeColor). */ -export function useSystemThemeSync(preference: ThemePreference) { +export function useSystemThemeSync( + preference: ThemePreference, + systemThemes: SystemThemes = DEFAULT_SYSTEM_THEMES +) { + const { light, dark } = systemThemes; + useEffect(() => { if (preference !== "system") { - document.documentElement.setAttribute("data-theme", preference); + applyThemePreference(preference); return; } const media = window.matchMedia("(prefers-color-scheme: dark)"); const apply = () => { - document.documentElement.setAttribute("data-theme", media.matches ? "dark" : "light"); + document.documentElement.setAttribute("data-theme", media.matches ? dark : light); }; apply(); media.addEventListener("change", apply); return () => media.removeEventListener("change", apply); - }, [preference]); + // Destructured so a fresh object identity each render doesn't re-run this + }, [preference, light, dark]); } diff --git a/apps/webapp/app/root.tsx b/apps/webapp/app/root.tsx index 1e550155fde..14033dedd27 100644 --- a/apps/webapp/app/root.tsx +++ b/apps/webapp/app/root.tsx @@ -20,11 +20,15 @@ import { TimezoneSetter } from "./components/TimezoneSetter"; import { env } from "./env.server"; import { featuresForRequest } from "./features.server"; import { usePostHog } from "./hooks/usePostHog"; -import { useSystemThemeSync } from "./hooks/useSystemThemeSync"; +import { resolveThemePreference, useSystemThemeSync } from "./hooks/useSystemThemeSync"; import { getImpersonationState } from "./services/impersonation.server"; import { getUser } from "./services/session.server"; import { + normalizeIconContrast, + normalizeSystemDarkTheme, + normalizeSystemLightTheme, normalizeThemeContrast, + normalizeUnderlineLinks, normalizeThemePreference, type ThemePreference, } from "~/utils/themePreference"; @@ -95,6 +99,19 @@ export const loader = async ({ request }: LoaderFunctionArgs) => { const themeContrast = showThemeSwitcher ? normalizeThemeContrast(user?.dashboardPreferences.contrast) : 0; + // Icon and badge accents. Off by default, and forced off with the switcher + // hidden so logged-out and unflagged pages render the Classic set. + const iconContrast = showThemeSwitcher + ? normalizeIconContrast(user?.dashboardPreferences.iconContrast) + : false; + const underlineLinks = showThemeSwitcher + ? normalizeUnderlineLinks(user?.dashboardPreferences.underlineLinks) + : false; + // Which theme `system` lands on at each end of the OS setting. + const systemThemes = { + light: normalizeSystemLightTheme(user?.dashboardPreferences.systemLightTheme), + dark: normalizeSystemDarkTheme(user?.dashboardPreferences.systemDarkTheme), + }; // 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. @@ -124,7 +141,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => { kapa, timezone, showThemeSwitcher, + iconContrast, + underlineLinks, themePreference, + systemThemes, themeContrast, // Consumed by ResizablePanel: the browser check must match between SSR // and hydration, so it is derived from the request user-agent. @@ -171,13 +191,20 @@ export function ErrorBoundary() { } export default function App() { - const { posthogProjectKey, posthogUiHost, themePreference, themeContrast } = - useTypedLoaderData(); + const { + posthogProjectKey, + posthogUiHost, + themePreference, + themeContrast, + iconContrast, + underlineLinks, + systemThemes, + } = useTypedLoaderData(); usePostHog(posthogProjectKey, posthogUiHost); - useSystemThemeSync(themePreference); - // SSR falls back to dark for `system`; the inline script below corrects it - // before paint, and useSystemThemeSync keeps it live afterwards. - const resolvedTheme = themePreference === "system" ? "dark" : themePreference; + useSystemThemeSync(themePreference, systemThemes); + // SSR falls back to the dark end for `system`; the inline script below corrects + // it before paint, and useSystemThemeSync keeps it live afterwards. + const resolvedTheme = resolveThemePreference(themePreference, true, systemThemes); return ( <> @@ -188,13 +215,21 @@ export default function App() { suppressHydrationWarning data-theme={resolvedTheme} data-theme-preference={themePreference} + // Read by the pre-paint script below, which resolves `system` before the + // loader data is available to JS + data-system-light={systemThemes.light} + data-system-dark={systemThemes.dark} + // 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} >