paseo/packages/app/src/usage/options.tsx

import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { Settings } from "lucide-react-native";
import { withUnistyles } from "react-native-unistyles";
import { DropdownMenu, DropdownMenuContent } from "@/components/ui/dropdown-menu";
import { extraMutedIconColorMapping } from "@/components/ui/icon-button-chrome";
import { ToolbarButton, paneContentToolbarIconSize } from "@/components/ui/pane-content-toolbar";
import { useIsCompactFormFactor } from "@/constants/layout";
import { SettingsRow, SettingsSwitch } from "@/components/settings";
import { SegmentedControl, type SegmentedControlOption } from "@/components/ui/segmented-control";
import { Alert } from "@/components/ui/alert";
import { useHosts } from "@/runtime/host-runtime";
import { settingsStyles } from "@/styles/settings";
import { useUsageSetting } from "./setting";
import { useUsageDisplay } from "./display";
import { useUsageInSidebar } from "./in-sidebar";
import type { UsageDisplayAs } from "./preferences";

const ThemedSettings = withUnistyles(Settings);

/** The shared usage preferences, opened from a cog as a popover or compact sheet. */
export function UsageOptions({ serverId }: { serverId: string | null }) {
  const setting = useUsageSetting(serverId);
  const hostLabel = useHosts().find((host) => host.serverId === serverId)?.label ?? serverId;
  const { t } = useTranslation();
  const displayAsOptions: SegmentedControlOption<UsageDisplayAs>[] = [
    { value: "used", label: t("providerUsage.displayUsed"), testID: "usage-display-used" },
    {
      value: "remaining",
      label: t("providerUsage.displayRemaining"),
      testID: "usage-display-remaining",
    },
  ];
  const compact = useIsCompactFormFactor();
  const { display } = useUsageDisplay([]);
  const { inSidebar, setInSidebar } = useUsageInSidebar();
  return (
    <DropdownMenu compactMode="sheet">
      <ToolbarButton
        kind="menu"
        label={t("providerUsage.options")}
        compact={compact}
        testID="usage-options-menu"
      >
        <ThemedSettings
          size={paneContentToolbarIconSize(compact)}
          uniProps={extraMutedIconColorMapping}
        />
      </ToolbarButton>
      <DropdownMenuContent
        align="end"
        width={340}
        sheetTitle={t("providerUsage.options")}
        testID="usage-options-surface"
      >
        <View testID="usage-options-fields">
          {setting.error ? <Alert variant="error" description={setting.error.message} /> : null}
          {setting.supported ? (
            <SettingsSwitch
              label={t("providerUsage.checkUsage")}
              hint={t("providerUsage.checkUsageHint", { host: hostLabel })}
              disabled={!setting.ready}
              value={setting.enabled}
              onValueChange={setting.setEnabled}
            />
          ) : null}
          <View style={setting.supported ? settingsStyles.rowBorder : undefined}>
            <SettingsSwitch
              label={t("providerUsage.showInSidebar")}
              hint={t("providerUsage.showInSidebarHint")}
              value={inSidebar}
              onValueChange={setInSidebar}
              testID="usage-show-in-sidebar"
            />
          </View>
          <View style={settingsStyles.rowBorder}>
            <SettingsRow label={t("providerUsage.displayAs")}>
              <SegmentedControl
                options={displayAsOptions}
                value={display.displayAs}
                onValueChange={display.setDisplayAs}
                size="sm"
                testID="usage-display-as"
              />
            </SettingsRow>
          </View>
        </View>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}