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

style: Message-Header modernisiert — Dots statt Emojis, Timestamp-Spacing [appimage]
All checks were successful
Build AppImage / build (push) Successful in 6m10s
Details

Browse source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eddy 2026-04-20 22:53:41 +02:00
parent 1b1800e32b
commit e0734303af
1 changed files with 51 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/lib/components/ChatPanel.svelte
View file

@ -833,15 +833,15 @@
{#each $messages as message, index} {#each $messages as message, index}
<div class="message" class:user={message.role === 'user'} class:assistant={message.role === 'assistant'} class:system={message.role === 'system'} class:editing={editingMessageId === message.id} class:queued={message.queued}> <div class="message" class:user={message.role === 'user'} class:assistant={message.role === 'assistant'} class:system={message.role === 'system'} class:editing={editingMessageId === message.id} class:queued={message.queued}>
<div class="message-header"> <div class="message-header">
<span class="message-role"> <span class="message-role" class:role-user={message.role === 'user'} class:role-assistant={message.role === 'assistant'} class:role-system={message.role === 'system'}>
{#if message.role === 'user' && message.queued} {#if message.role === 'user' && message.queued}
⏳ Du (wartet) <span class="role-dot queued"></span> Du <span class="role-tag">wartet</span>
{:else if message.role === 'user'} {:else if message.role === 'user'}
👤 Du <span class="role-dot user"></span> Du
{:else if message.role === 'assistant'} {:else if message.role === 'assistant'}
🤖 {#if message.model}{message.model.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())}{:else}Claude{/if} <span class="role-dot assistant"></span> {#if message.model}{message.model.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())}{:else}Claude{/if}
{:else} {:else}
⚙️ System <span class="role-dot system"></span> System
{/if} {/if}
</span> </span>
<div class="message-actions"> <div class="message-actions">
@ -858,7 +858,7 @@
<button class="action-btn" onclick={() => openRememberDialog(message)} title="Das merken">💡</button> <button class="action-btn" onclick={() => openRememberDialog(message)} title="Das merken">💡</button>
{/if} {/if}
<span class="message-time"> <span class="message-time">
{message.timestamp.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} {message.timestamp.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
</span> </span>
</div> </div>
</div> </div>
@ -1229,6 +1229,49 @@
.message-role { .message-role {
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
display: flex;
align-items: center;
gap: 0.35rem;
}
.role-dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.role-dot.user {
background: var(--accent, #6c8aff);
}
.role-dot.assistant {
background: #a78bfa;
box-shadow: 0 0 6px rgba(167, 139, 250, 0.4);
}
.role-dot.system {
background: var(--text-secondary, #888);
}
.role-dot.queued {
background: #f59e0b;
animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.7); }
}
.role-tag {
font-size: 0.55rem;
padding: 0.1rem 0.35rem;
border-radius: 3px;
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
font-weight: 500;
} }
.message-actions { .message-actions {
@ -1260,6 +1303,8 @@
.message-time { .message-time {
font-size: 0.6rem; font-size: 0.6rem;
color: var(--text-secondary); color: var(--text-secondary);
margin-left: 0.5rem;
font-variant-numeric: tabular-nums;
} }
/* Edit-Modus */ /* Edit-Modus */