mrpiglr/AeThex-OS
1
0
Fork 0
mirror of https://github.com/AeThex-Corporation/AeThex-OS.git synced 2026-04-18 06:17:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve the visual appearance of open windows on the taskbar

Browse source 
Refactor the styling and structure of taskbar buttons to better represent open windows, including adjustments to size, color, and the active window indicator.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 279f1558-c0e3-40e4-8217-be7e9f4c6eca
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 1fb17c24-e32e-498b-8b07-ccfc17378b68
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/b984cb14-1d19-4944-922b-bc79e821ed35/279f1558-c0e3-40e4-8217-be7e9f4c6eca/paZzfbE
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr 2025-12-21 19:21:58 +00:00
parent 7f3bd04b24
commit 1d701b7dfd
1 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
client/src/pages/os.tsx
View file

@ -1811,20 +1811,23 @@ function Taskbar({ windows, activeWindowId, apps, time, showStartMenu, user, isA
onClick={() => onWindowClick(window.id)}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
className={`h-8 px-3 flex flex-col items-center justify-center gap-0.5 rounded transition-colors min-w-0 relative ${
className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors relative ${
activeWindowId === window.id && !window.minimized
? 'bg-cyan-500/20 text-cyan-400'
: window.minimized ? 'bg-white/5 text-white/40 hover:bg-white/10' : 'bg-white/10 text-white/80 hover:bg-white/15'
? 'bg-cyan-500/20'
: window.minimized ? 'bg-white/5 hover:bg-white/10' : 'bg-white/10 hover:bg-white/15'
}`}
title={window.title}
data-testid={`taskbar-${window.id}`}
>
<div className="flex items-center gap-2">
<div className="w-4 h-4 flex-shrink-0">{window.icon}</div>
<span className="text-xs font-mono truncate max-w-[100px]">{window.title}</span>
<div
className="w-4 h-4 flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4"
style={{ color: activeWindowId === window.id && !window.minimized ? '#06b6d4' : window.minimized ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.7)' }}
>
{window.icon}
</div>
<div className={`absolute -bottom-0.5 left-1/2 -translate-x-1/2 w-4 h-0.5 rounded-full transition-colors ${
!window.minimized ? 'bg-cyan-400' : 'bg-transparent'
}`} />
{!window.minimized && (
<div className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 w-3 h-0.5 rounded-full bg-cyan-400" />
)}
</motion.button>
))}
</div>