Add clearer messaging around back to chat

This commit is contained in:
Jack Kingsman
2026-03-06 11:40:29 -08:00
parent cdf5c0b81e
commit 8f2d55277f
3 changed files with 35 additions and 9 deletions

View File

@@ -613,11 +613,11 @@ export function App() {
<button
type="button"
onClick={handleCloseSettingsView}
className="h-6 w-6 rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className="flex items-center gap-1 px-2 py-1 rounded text-xs bg-status-connected/15 border border-status-connected/30 text-status-connected hover:bg-status-connected/25 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
title="Back to conversations"
aria-label="Back to conversations"
>
&larr;
&larr; Back to Chat
</button>
</div>
<div className="flex-1 overflow-y-auto py-1">

View File

@@ -117,7 +117,12 @@ export function StatusBar({
)}
<button
onClick={onSettingsClick}
className="px-3 py-1.5 bg-secondary border border-border text-muted-foreground rounded-md text-xs cursor-pointer hover:bg-accent hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className={cn(
'px-3 py-1.5 rounded-md text-xs cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
settingsMode
? 'bg-status-connected/15 border border-status-connected/30 text-status-connected hover:bg-status-connected/25'
: 'bg-secondary border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
{settingsMode ? 'Back to Chat' : 'Settings'}
</button>

View File

@@ -213,13 +213,27 @@
/* ── Solar Flare ("Plasma Burn") ─────────────────────────── */
@keyframes sf-glow-pulse {
0%, 100% { filter: drop-shadow(0 0 4px hsl(338 100% 50% / 0.3)); }
50% { filter: drop-shadow(0 0 10px hsl(338 100% 50% / 0.5)) drop-shadow(0 0 20px hsl(24 100% 50% / 0.2)); }
0%,
100% {
filter: drop-shadow(0 0 4px hsl(338 100% 50% / 0.3));
}
50% {
filter: drop-shadow(0 0 10px hsl(338 100% 50% / 0.5))
drop-shadow(0 0 20px hsl(24 100% 50% / 0.2));
}
}
@keyframes sf-msg-highlight {
0% { box-shadow: 0 0 0 2px hsl(338 100% 50%), 0 0 20px hsl(338 100% 50% / 0.4); }
100% { box-shadow: 0 0 0 2px transparent, 0 0 0 transparent; }
0% {
box-shadow:
0 0 0 2px hsl(338 100% 50%),
0 0 20px hsl(338 100% 50% / 0.4);
}
100% {
box-shadow:
0 0 0 2px transparent,
0 0 0 transparent;
}
}
:root[data-theme='solar-flare'] {
@@ -314,7 +328,12 @@
/* Solar Flare: Chamfered button corners + hover glow */
[data-theme='solar-flare'] button {
clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
transition: filter 0.2s ease, transform 0.12s ease, background-color 0.15s ease, background-position 0.4s ease, color 0.15s ease;
transition:
filter 0.2s ease,
transform 0.12s ease,
background-color 0.15s ease,
background-position 0.4s ease,
color 0.15s ease;
}
[data-theme='solar-flare'] button:hover {
@@ -330,7 +349,9 @@
/* Solar Flare: Input focus glow */
[data-theme='solar-flare'] input:focus,
[data-theme='solar-flare'] textarea:focus {
box-shadow: 0 0 0 1px hsl(338 100% 50% / 0.5), 0 0 10px hsl(338 100% 50% / 0.2);
box-shadow:
0 0 0 1px hsl(338 100% 50% / 0.5),
0 0 10px hsl(338 100% 50% / 0.2);
outline: none;
}