starred/tuxmate
1
0
Fork 0
mirror of https://github.com/abusoww/tuxmate.git synced 2026-04-24 17:45:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance UI with system theme, refined headers, and new layout

Browse Source 
- layout: Auto-detect system theme on first visit
- header: Refined layout (centered, uppercase subtitle, inline help)
- categories: Compact 'Soft Pill' design with improved focus state
- data: Reorganized Zellij to CLI Tools
- lint: Fixed various linting issues
This commit is contained in:
N1C4T
2026-01-06 03:03:48 +04:00
parent 94e9f6b598
commit 07773ed42e
16 changed files with 256 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/app/CategoryHeader.tsx
View File

@@ -1,6 +1,28 @@
'use client';
import { ChevronRight } from 'lucide-react';
import {
ChevronRight, Globe, MessageCircle, Code2, FileCode, Wrench,
Terminal, Command, Play, Palette, Gamepad2, Briefcase,
Network, Lock, Share2, Cpu, type LucideIcon
} from 'lucide-react';
const CATEGORY_ICONS: Record<string, LucideIcon> = {
'Web Browsers': Globe,
'Communication': MessageCircle,
'Dev: Languages': Code2,
'Dev: Editors': FileCode,
'Dev: Tools': Wrench,
'Terminal': Terminal,
'CLI Tools': Command,
'Media': Play,
'Creative': Palette,
'Gaming': Gamepad2,
'Office': Briefcase,
'VPN & Network': Network,
'Security': Lock,
'File Sharing': Share2,
'System': Cpu,
};
// Clickable category header with chevron and selection count
export function CategoryHeader({
@@ -25,17 +47,22 @@ export function CategoryHeader({
tabIndex={-1}
aria-expanded={isExpanded}
aria-label={`${category} category, ${selectedCount} apps selected`}
className={`category-header w-full flex items-center gap-2 text-[11px] font-semibold text-[var(--text-muted)]
hover:text-[var(--text-secondary)] uppercase tracking-widest mb-2 pb-1.5
border-b border-[var(--border-primary)] transition-colors duration-150 px-0.5 outline-none
${isFocused ? 'bg-[var(--bg-focus)] text-[var(--text-secondary)]' : ''}`}
style={{ transition: 'color 0.5s, border-color 0.5s' }}
// Soft Pill design: rounded tags with accent color
className={`category-header group w-full flex items-center gap-2 text-xs font-bold text-[var(--accent)]
bg-[var(--accent)]/10 hover:bg-[var(--accent)]/20
uppercase tracking-wider py-1 px-3 rounded-lg mb-3
transition-all duration-200 outline-none
${isFocused ? 'bg-[var(--accent)]/25 shadow-sm' : ''}`}
>
<ChevronRight className={`w-3 h-3 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`} />
<ChevronRight className={`w-4 h-4 text-[var(--accent)]/70 group-hover:text-[var(--accent)] transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`} />
{(() => {
const Icon = CATEGORY_ICONS[category] || Terminal;
return <Icon className="w-4 h-4 text-[var(--accent)] opacity-80 group-hover:opacity-100 transition-opacity duration-200" />;
})()}
<span className="flex-1 text-left">{category}</span>
{selectedCount > 0 && (
<span
className="text-[10px] bg-[var(--bg-tertiary)] text-[var(--text-secondary)] w-5 h-5 rounded-full flex items-center justify-center font-medium"
className="text-[10px] bg-[var(--accent)]/10 text-[var(--accent)] w-5 h-5 rounded-full flex items-center justify-center font-bold"
style={{ transition: 'background-color 0.5s, color 0.5s' }}
>
{selectedCount}