From 1d701b7dfd002e5eab49a480a97c4295bccf6958 Mon Sep 17 00:00:00 2001
From: sirpiglr <49359077-sirpiglr@users.noreply.replit.com>
Date: Sun, 21 Dec 2025 19:21:58 +0000
Subject: [PATCH] Improve the visual appearance of open windows on the taskbar

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
---
 client/src/pages/os.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/os.tsx b/client/src/pages/os.tsx
index 5ad73a3..9853414 100644
--- a/client/src/pages/os.tsx
+++ b/client/src/pages/os.tsx
@@ -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>