Widen side cards, add icon badges and graphics, add wallpaper button

This commit is contained in:
2026-07-27 12:00:04 -04:00
parent 9b839ffaf1
commit cffe15e1f6
6 changed files with 132 additions and 38 deletions
+15 -15
View File
@@ -1,22 +1,24 @@
import { Gtk } from "ags/gtk3"
import { createPoll } from "ags/time"
import { shell } from "../lib/utils"
import { CardHeader, StatRow } from "./WidgetCard"
type ClaudeUsage = {
available: boolean
tokens: number
messages: number
cacheHitPercent: number
}
const usage = createPoll<ClaudeUsage>(
{ available: false, tokens: 0, messages: 0 },
{ available: false, tokens: 0, messages: 0, cacheHitPercent: 0 },
60000,
shell("bash $HOME/.config/ags/lib/claude-usage.sh"),
(stdout) => {
try {
return JSON.parse(stdout.trim())
} catch {
return { available: false, tokens: 0, messages: 0 }
return { available: false, tokens: 0, messages: 0, cacheHitPercent: 0 }
}
},
)
@@ -29,11 +31,8 @@ function formatTokens(tokens: number) {
export function ClaudeUsageCard() {
return (
<box class="panel widget-card" vertical spacing={6}>
<box spacing={8}>
<label class="widget-card-icon" label={""} />
<label class="widget-card-title" label="Claude Code" xalign={0} halign={Gtk.Align.START} hexpand />
</box>
<box class="panel widget-card" vertical spacing={10}>
<CardHeader icon={""} title="Claude Code" />
<label
class="widget-card-empty"
label="No usage logs found"
@@ -41,14 +40,15 @@ export function ClaudeUsageCard() {
halign={Gtk.Align.START}
visible={usage.as((u) => !u.available)}
/>
<box vertical spacing={4} visible={usage.as((u) => u.available)}>
<box spacing={8}>
<label class="widget-card-label" label="Tokens today" xalign={0} halign={Gtk.Align.START} hexpand />
<label class="widget-card-value" label={usage.as((u) => formatTokens(u.tokens))} />
</box>
<box spacing={8}>
<label class="widget-card-label" label="Messages today" xalign={0} halign={Gtk.Align.START} hexpand />
<label class="widget-card-value" label={usage.as((u) => `${u.messages}`)} />
<box vertical spacing={8} visible={usage.as((u) => u.available)}>
<StatRow icon={""} label="Tokens today" value={usage.as((u) => formatTokens(u.tokens))} />
<StatRow icon={""} label="Messages today" value={usage.as((u) => `${u.messages}`)} />
<box vertical spacing={4}>
<box spacing={8}>
<label class="widget-card-label" label="Cache hit rate" xalign={0} halign={Gtk.Align.START} hexpand />
<label class="widget-card-value" label={usage.as((u) => `${Math.round(u.cacheHitPercent)}%`)} />
</box>
<levelbar class="widget-level-bar" value={usage.as((u) => u.cacheHitPercent / 100)} />
</box>
</box>
</box>