agent/cc-switch
1
0
Fork 0
mirror of https://github.com/farion1231/cc-switch.git synced 2026-06-16 13:34:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(usage): compact toolbar controls and unify visual style

Browse Source 
- Reduce all four filter controls to w-[100px] h-9
- Add ChevronDown icon to date picker trigger for consistency
- Suppress focus border highlight on select triggers after close
This commit is contained in:
Jason
2026-06-12 23:48:41 +08:00
Unverified
parent a95b22dd79
commit 6e519a7496
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/usage/UsageDashboard.tsx
+3 -3
View File
@@ -206,7 +206,7 @@ export function UsageDashboard() {
onValueChange={(v) => changeProviderName(decodeOptionValue(v))}
>
<SelectTrigger
className="h-9 w-[120px] bg-background text-xs [&>span]:min-w-0 [&>span]:truncate"
className="h-9 w-[100px] bg-background text-xs focus:border-border-default [&>span]:min-w-0 [&>span]:truncate"
title={providerName ?? t("usage.filterBySource")}
>
<SelectValue />
@@ -231,7 +231,7 @@ export function UsageDashboard() {
onValueChange={(v) => setModel(decodeOptionValue(v))}
>
<SelectTrigger
className="h-9 w-[120px] bg-background text-xs [&>span]:min-w-0 [&>span]:truncate"
className="h-9 w-[100px] bg-background text-xs focus:border-border-default [&>span]:min-w-0 [&>span]:truncate"
title={model ?? t("usage.filterByModel")}
>
<SelectValue />
@@ -257,7 +257,7 @@ export function UsageDashboard() {
onValueChange={(v) => changeRefreshInterval(Number(v))}
>
<SelectTrigger
className="h-9 w-[150px] bg-background text-xs"
className="h-9 w-[100px] bg-background text-xs focus:border-border-default"
title={t("usage.refreshInterval")}
aria-label={t("usage.refreshInterval")}
>
src/components/usage/UsageDateRangePicker.tsx
+4 -3
View File
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
import { CalendarDays, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
@@ -273,11 +273,12 @@ export function UsageDateRangePicker({
<Button
type="button"
variant={selection.preset === "custom" ? "default" : "outline"}
className="w-[150px] justify-start gap-2"
className="h-9 w-[100px] justify-start gap-1.5 text-xs"
title={triggerLabel}
>
<CalendarDays className="h-4 w-4 shrink-0" />
<span className="truncate">{triggerLabel}</span>
<span className="truncate flex-1">{triggerLabel}</span>
<ChevronDown className="h-3.5 w-3.5 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent