data/claude-desktop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Footer-Statusleiste mit Token, Kosten, Modell-Badge

Browse source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Eddy 2026-04-13 22:18:10 +02:00
parent e09fb8815c
commit 1777ed8e0c
1 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/routes/+layout.svelte
View file

@ -74,9 +74,20 @@
<slot /> <slot />
</main> </main>
<!-- STOPP-Footer --> <!-- Footer: STOPP + Stats -->
<footer class="stop-footer" class:active={$isProcessing}> <footer class="footer" class:active={$isProcessing}>
<StopButton on:click={handleStop} disabled={!$isProcessing} /> <StopButton on:click={handleStop} disabled={!$isProcessing} />
<div class="footer-stats">
<span>Token: {formatTokens($sessionStats.totalTokensIn)} in / {formatTokens($sessionStats.totalTokensOut)} out</span>
<span class="sep">|</span>
<span>Kosten: {formatCost($sessionStats.totalCost)}</span>
<span class="sep">|</span>
<span>{$sessionStats.messageCount} Antworten</span>
{#if $currentModel}
<span class="sep">|</span>
<span class="model">{$currentModel.replace('claude-', '').replace(/-\d{8}$/, '').replace(/(\D)-(\d)/g, '$1 $2').replace(/(\d)-(\d)/g, '$1.$2').replace(/\b[a-z]/g, c => c.toUpperCase())}</span>
{/if}
</div>
</footer> </footer>
</div> </div>
@ -154,16 +165,34 @@
overflow: hidden; overflow: hidden;
} }
.stop-footer { .footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-md); padding: var(--spacing-xs) var(--spacing-md);
background: var(--bg-secondary); background: var(--bg-secondary);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
.stop-footer.active { .footer.active {
border-top: 2px solid var(--error); border-top: 2px solid var(--error);
} }
.footer-stats {
display: flex;
gap: var(--spacing-sm);
font-size: 0.65rem;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.footer-stats .sep {
opacity: 0.3;
}
.footer-stats .model {
color: var(--accent);
font-weight: 600;
}
</style> </style>