Widen side cards, add icon badges and graphics, add wallpaper button
This commit is contained in:
+15
-15
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user