skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

ui(sasquatch): de-clutter the panel header, tidy footer + input

Browse source 
- Header: name + Pro badge on line 1; context title + (owner-only) AI balance
  on line 2. The live/CVM chip and AI balance no longer fight for the same row
  and wrap.
- Footer: the live-status chip now sits with 'Live data from Nostr relays' and
  'clear' instead of the header.
- Input: taller (h-10) with text-sm on mobile; send button matches.
- Message bubbles: text-xs and roomier padding/radius.
This commit is contained in:
SkateSpots 2026-09-28 20:44:50 +07:00
parent 53c451ccfc
commit 7f17bea341
1 changed files with 15 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/SasquatchGuide.tsx
View file

@ -1556,7 +1556,7 @@ Instructions:
<span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-[#ccff00] rounded-full border border-black shadow-[0_0_6px_#ccff00]" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1.5 flex-wrap">
<div className="flex items-center gap-1.5 min-w-0">
<span className="font-black text-xs text-[#ccff00] uppercase tracking-wider" style={{ fontFamily: 'Impact, Arial Black, sans-serif' }}>
Sasquatch
</span>
@ -1576,11 +1576,16 @@ Instructions:
⚡ Go Pro
</button>
) : null}
<CVMStatus connected={cvmConnected} />
</div>
{/* Context + (owner-only) AI balance on one tidy line */}
<div className="mt-0.5 flex items-center gap-1.5 min-w-0">
<span className="truncate text-[10px] leading-none text-[#ccff00]/50">
{activeMessage.title}
</span>
{isOwner && aiStatus.data?.configured && aiStatus.data.balanceSats != null && (
<span
className={cn(
'flex items-center gap-0.5 rounded px-1 py-0.5 text-[8px] font-black uppercase tracking-wider',
'ml-auto flex-shrink-0 rounded px-1 py-0.5 text-[8px] font-black uppercase tracking-wider',
aiStatus.data.low ? 'bg-amber-500/20 text-amber-400' : 'bg-emerald-500/15 text-emerald-400',
)}
title={`Sasquatch AI credit balance (owner-only) — top up at ${aiStatus.data.provider ?? 'the node'}`}
@ -1589,9 +1594,6 @@ Instructions:
</span>
)}
</div>
<div className="text-[10px] text-[#ccff00]/50 leading-none mt-0.5">
{activeMessage.title}
</div>
</div>
<div className="flex gap-1 flex-shrink-0">
{/* Minimize — shrinks to draggable bubble */}
@ -1680,7 +1682,7 @@ Instructions:
<div
key={idx}
className={cn(
'text-[11px] p-2 rounded-lg leading-relaxed',
'text-xs p-2.5 rounded-xl leading-relaxed',
msg.role === 'user'
? 'bg-[#ff0040]/10 text-gray-200 ml-4 border border-[#ff0040]/20'
: 'bg-[#ccff00]/5 text-gray-200 mr-4 border border-[#ccff00]/10'
@ -1736,24 +1738,25 @@ Instructions:
onKeyDown={(e) => e.key === 'Enter' && !inputDisabled && handleSendMessage()}
placeholder="Ask about spots, events, coaches..."
disabled={inputDisabled}
className="text-xs h-8 bg-black/40 border-[#ccff00]/20 text-white placeholder:text-gray-600 focus-visible:ring-[#ccff00]/40 focus-visible:border-[#ccff00]/40"
className="h-10 text-sm bg-black/40 border-[#ccff00]/20 text-white placeholder:text-gray-600 focus-visible:ring-[#ccff00]/40 focus-visible:border-[#ccff00]/40"
/>
<button
onClick={() => handleSendMessage()}
disabled={!userInput.trim() || inputDisabled}
className="h-8 w-8 flex-shrink-0 flex items-center justify-center rounded-md bg-[#ccff00] hover:bg-[#d4ff1a] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
className="h-10 w-10 flex-shrink-0 flex items-center justify-center rounded-md bg-[#ccff00] hover:bg-[#d4ff1a] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
>
{isThinking ? (
<Loader2 className="h-3 w-3 animate-spin text-black" />
<Loader2 className="h-4 w-4 animate-spin text-black" />
) : (
<Send className="h-3 w-3 text-black" />
<Send className="h-4 w-4 text-black" />
)}
</button>
</div>
{/* Footer */}
<div className="flex items-center justify-between">
<p className="text-[9px] text-gray-600 flex items-center gap-1 flex-wrap">
<p className="text-[9px] text-gray-600 flex items-center gap-1.5 flex-wrap min-w-0">
<CVMStatus connected={cvmConnected} />
Live data from{' '}
<a
href="https://goskatespots.nostr1.com"