0x5t4l1n/AURHub
1
0
Fork 0
mirror of https://github.com/0x5t4l1n/AURHub.git synced 2026-05-26 11:25:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Design: Complete redesign to compact, high-density Arch Linux package manager UI

Browse Source
This commit is contained in:
Stalin S
2026-05-21 03:07:10 +05:30
parent 245cf3fbb0
commit 971c1155be
14 changed files with 743 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/LoadingSpinner.jsx
+3 -3
View File
@@ -1,9 +1,9 @@
export default function LoadingSpinner({ size = 'md', text = '' }) { export default function LoadingSpinner({ size = 'md', text = '' }) {
const px = { sm: 20, md: 28, lg: 40 }[size] || 28; const px = { sm: 16, md: 20, lg: 28 }[size] || 20;
return ( return (
<div className="flex flex-col items-center justify-center gap-4 py-16"> <div className="flex flex-col items-center justify-center gap-3 py-10">
<div className="spinner" style={{ width: px, height: px }}></div> <div className="spinner" style={{ width: px, height: px }}></div>
{text && <p className="text-sm" style={{ color: 'var(--text-tertiary)' }}>{text}</p>} {text && <p className="text-xs" style={{ color: 'var(--text-tertiary)' }}>{text}</p>}
</div> </div>
); );
} }
frontend/src/components/PackageCard.jsx
+27 -27
View File
@@ -1,69 +1,69 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { CheckCircle, AlertTriangle, Star, ArrowRight } from 'lucide-react'; import { CheckCircle, AlertTriangle, Star, Download } from 'lucide-react';
export default function PackageCard({ pkg }) { export default function PackageCard({ pkg }) {
const navigate = useNavigate(); const navigate = useNavigate();
const sourceBadge = pkg.source === 'aur' ? 'badge-aur' : 'badge-pacman'; const sourceBadge = pkg.source === 'aur' ? 'badge-aur' : 'badge-pacman';
const sourceLabel = pkg.source === 'aur' ? 'AUR' : (pkg.repository || 'pacman'); const sourceLabel = pkg.source === 'aur' ? 'AUR' : (pkg.repository || 'pacman');
return ( return (
<div <div
className="card card-interactive p-5 flex flex-col gap-3 justify-between" className="card card-interactive p-3 flex flex-col gap-2 cursor-pointer group"
onClick={() => navigate(`/package/${pkg.name}`)} onClick={() => navigate(`/package/${pkg.name}`)}
role="button" role="button"
tabIndex={0} tabIndex={0}
onKeyDown={(e) => e.key === 'Enter' && navigate(`/package/${pkg.name}`)} onKeyDown={(e) => e.key === 'Enter' && navigate(`/package/${pkg.name}`)}
> >
<div className="flex flex-col gap-2"> {/* Header */}
{/* Top: Name and badges */} <div className="flex items-start justify-between gap-2">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5 flex-wrap"> <div className="flex items-center gap-1.5">
<h3 className="font-bold text-sm tracking-tight truncate" style={{ color: 'var(--text-primary)' }}> <span className="font-semibold text-[13px] truncate" style={{ color: 'var(--text-primary)' }}>
{pkg.name} {pkg.name}
</h3> </span>
{pkg.installed && <CheckCircle size={13} className="text-emerald-500 shrink-0" />} {pkg.installed && <CheckCircle size={11} style={{ color: 'var(--green)' }} />}
{pkg.out_of_date && <AlertTriangle size={13} className="text-amber-500 shrink-0" />} {pkg.out_of_date && <AlertTriangle size={11} style={{ color: 'var(--amber)' }} />}
</div> </div>
<span className="text-[11px] font-mono font-medium" style={{ color: 'var(--text-tertiary)' }}> <span className="text-[10px] font-mono" style={{ color: 'var(--text-tertiary)' }}>
{pkg.version || '—'} {pkg.version || '—'}
</span> </span>
</div> </div>
<span className={`badge ${sourceBadge} shrink-0`}>{sourceLabel}</span> <span className={`badge ${sourceBadge} shrink-0`}>{sourceLabel}</span>
</div> </div>
{/* Mid: Description */} {/* Description */}
<p className={`text-xs leading-relaxed ${!pkg.description ? 'italic' : ''}`} <p className="text-[11px] leading-snug"
style={{ style={{
color: pkg.description ? 'var(--text-secondary)' : 'var(--text-tertiary)', color: pkg.description ? 'var(--text-secondary)' : 'var(--text-tertiary)',
fontStyle: pkg.description ? 'normal' : 'italic',
display: '-webkit-box', display: '-webkit-box',
WebkitLineClamp: 2, WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical', WebkitBoxOrient: 'vertical',
overflow: 'hidden', overflow: 'hidden',
minHeight: '2.5rem' minHeight: '2em'
}}> }}>
{pkg.description || 'No description available'} {pkg.description || 'No description available'}
</p> </p>
</div>
{/* Bottom: Stats & Action */} {/* Footer */}
<div className="flex items-center justify-between pt-3 mt-1" <div className="flex items-center justify-between pt-2 mt-auto"
style={{ borderTop: '1px solid var(--border-primary)' }}> style={{ borderTop: '1px solid var(--border-primary)' }}>
<div className="flex items-center gap-3 text-[11px] font-medium" style={{ color: 'var(--text-tertiary)' }}> <div className="flex items-center gap-3 text-[10px]" style={{ color: 'var(--text-tertiary)' }}>
{pkg.votes !== undefined && pkg.votes > 0 && ( {pkg.votes !== undefined && pkg.votes > 0 && (
<span className="flex items-center gap-1"> <span className="flex items-center gap-0.5">
<Star size={11} className="fill-amber-400 stroke-amber-400" /> {pkg.votes} <Star size={10} style={{ color: 'var(--amber)', fill: 'var(--amber)' }} /> {pkg.votes}
</span> </span>
)} )}
{pkg.popularity > 0 && ( {pkg.popularity > 0 && <span>{pkg.popularity.toFixed(1)}</span>}
<span>Pop: {pkg.popularity.toFixed(1)}</span>
)}
</div> </div>
{pkg.installed ? (
<span className="flex items-center gap-1 text-[11px] font-bold" style={{ color: 'var(--accent)' }}> <span className="badge badge-installed text-[9px]">Installed</span>
Details <ArrowRight size={12} className="transition-transform group-hover:translate-x-1" /> ) : (
<span className="flex items-center gap-1 text-[10px] font-semibold"
style={{ color: 'var(--accent)' }}>
<Download size={10} /> Install
</span> </span>
)}
</div> </div>
</div> </div>
); );
frontend/src/components/PackageGrid.jsx
+10 -14
View File
@@ -6,18 +6,14 @@ export default function PackageGrid({ packages, loading }) {
return ( return (
<div className="pkg-grid"> <div className="pkg-grid">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="card p-5 flex flex-col gap-3"> <div key={i} className="card p-3 flex flex-col gap-2">
<div className="flex justify-between"> <div className="flex justify-between">
<div className="shimmer h-5 w-32"></div> <div className="shimmer h-4 w-28"></div>
<div className="shimmer h-5 w-16 rounded-full"></div> <div className="shimmer h-4 w-12 rounded-full"></div>
</div> </div>
<div className="shimmer h-3 w-20"></div>
<div className="shimmer h-4 w-full"></div>
<div className="shimmer h-4 w-3/4"></div>
<div className="flex justify-between pt-2" style={{ borderTop: '1px solid var(--border-primary)' }}>
<div className="shimmer h-3 w-12"></div>
<div className="shimmer h-3 w-16"></div> <div className="shimmer h-3 w-16"></div>
</div> <div className="shimmer h-3 w-full"></div>
<div className="shimmer h-3 w-3/4"></div>
</div> </div>
))} ))}
</div> </div>
@@ -26,13 +22,13 @@ export default function PackageGrid({ packages, loading }) {
if (!packages || packages.length === 0) { if (!packages || packages.length === 0) {
return ( return (
<div className="flex flex-col items-center justify-center py-24" style={{ color: 'var(--text-tertiary)' }}> <div className="flex flex-col items-center justify-center py-12" style={{ color: 'var(--text-tertiary)' }}>
<div className="w-16 h-16 rounded-2xl flex items-center justify-center mb-5" <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}> style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}>
<PackageOpen size={28} /> <PackageOpen size={20} />
</div> </div>
<p className="text-base font-semibold mb-1" style={{ color: 'var(--text-secondary)' }}>No packages found</p> <p className="text-sm font-medium mb-0.5" style={{ color: 'var(--text-secondary)' }}>No packages found</p>
<p className="text-sm">Try adjusting your search or filters</p> <p className="text-xs">Try adjusting your search or filters</p>
</div> </div>
); );
} }
frontend/src/components/SearchBar.jsx
+4 -4
View File
@@ -12,15 +12,15 @@ export default function SearchBar({ onSearch, initialQuery = '' }) {
return ( return (
<form onSubmit={handleSubmit} className="searchbar"> <form onSubmit={handleSubmit} className="searchbar">
<Search <Search
size={17} size={14}
className="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none" className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
style={{ color: 'var(--text-tertiary)' }} style={{ color: 'var(--text-tertiary)' }}
/> />
<input <input
id="search-input" id="search-input"
type="text" type="text"
className="input input-search pl-11 pr-5 rounded-xl" className="input input-search pl-8 pr-4 rounded-lg"
style={{ background: 'var(--bg-secondary)', fontSize: '0.9rem' }} style={{ fontSize: '12px' }}
placeholder="Search packages..." placeholder="Search packages..."
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
frontend/src/components/Sidebar.jsx
+27 -34
View File
@@ -1,7 +1,5 @@
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { import { Home, Search, Package, RefreshCw, Grid3X3, Settings, X } from 'lucide-react';
Home, Search, Package, RefreshCw, Grid3X3, Settings, X
} from 'lucide-react';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import api from '../api/client'; import api from '../api/client';
@@ -25,38 +23,35 @@ export default function Sidebar({ isOpen, onClose }) {
return ( return (
<aside className={`sidebar ${isOpen ? 'open' : ''}`}> <aside className={`sidebar ${isOpen ? 'open' : ''}`}>
{/* ── Brand ── */} {/* Brand */}
<div className="flex items-center justify-between mb-10"> <div className="flex items-center justify-between mb-6 px-1">
<NavLink to="/" className="flex items-center gap-3 no-underline" onClick={onClose}> <NavLink to="/" className="flex items-center gap-2.5 no-underline" onClick={onClose}>
<div className="w-10 h-10 rounded-xl flex items-center justify-center" <div className="w-7 h-7 rounded-lg flex items-center justify-center shrink-0"
style={{ style={{
background: 'linear-gradient(135deg, var(--accent), var(--violet))', background: 'linear-gradient(135deg, var(--accent), var(--violet))',
boxShadow: '0 4px 14px var(--accent-glow)'
}}> }}>
<span className="text-white font-black text-lg">A</span> <span className="text-white font-black text-xs">A</span>
</div> </div>
<div> <div>
<h1 className="text-base font-bold" style={{ color: 'var(--text-primary)', letterSpacing: '-0.02em' }}> <span className="text-sm font-bold block leading-tight" style={{ color: 'var(--text-primary)' }}>
ArchStore ArchStore
</h1> </span>
<p className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>Package Manager</p> <span className="text-[10px] leading-tight" style={{ color: 'var(--text-tertiary)' }}>
Package Manager
</span>
</div> </div>
</NavLink> </NavLink>
<button <button className="lg:hidden btn-ghost !p-1" onClick={onClose} aria-label="Close">
className="lg:hidden btn-ghost !p-1.5" <X size={14} />
onClick={onClose}
aria-label="Close sidebar"
>
<X size={18} />
</button> </button>
</div> </div>
{/* ── Navigation ── */} {/* Nav */}
<nav className="flex flex-col gap-2 flex-1"> <nav className="flex flex-col gap-0.5 flex-1">
<p className="text-[10px] font-bold uppercase tracking-widest mb-1 px-4" <span className="text-[9px] font-bold uppercase tracking-widest px-3 mb-1"
style={{ color: 'var(--text-tertiary)' }}> style={{ color: 'var(--text-tertiary)' }}>
Menu Navigation
</p> </span>
{navItems.map(({ path, icon: Icon, label }) => ( {navItems.map(({ path, icon: Icon, label }) => (
<NavLink <NavLink
key={path} key={path}
@@ -65,11 +60,11 @@ export default function Sidebar({ isOpen, onClose }) {
className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
onClick={onClose} onClick={onClose}
> >
<Icon size={18} strokeWidth={isOpen ? 2 : 1.8} /> <Icon size={15} strokeWidth={1.8} />
<span>{label}</span> <span>{label}</span>
{label === 'Updates' && updateCount > 0 && ( {label === 'Updates' && updateCount > 0 && (
<span className="ml-auto text-[11px] font-bold px-2 py-0.5 rounded-full" <span className="ml-auto text-[10px] font-bold px-1.5 py-px rounded-full"
style={{ background: 'var(--accent)', color: 'white', minWidth: '22px', textAlign: 'center' }}> style={{ background: 'var(--accent)', color: '#fff', minWidth: '18px', textAlign: 'center' }}>
{updateCount} {updateCount}
</span> </span>
)} )}
@@ -77,15 +72,13 @@ export default function Sidebar({ isOpen, onClose }) {
))} ))}
</nav> </nav>
{/* ── Footer ── */} {/* Footer */}
<div className="pt-5 mt-4" style={{ borderTop: '1px solid var(--border-primary)' }}> <div className="pt-3 mt-2 px-3" style={{ borderTop: '1px solid var(--border-primary)' }}>
<div className="flex items-center gap-2 px-4 mb-2"> <div className="flex items-center gap-1.5 mb-0.5">
<span className="w-2 h-2 rounded-full" style={{ background: 'var(--green)' }}></span> <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--green)' }}></span>
<span className="text-[11px]" style={{ color: 'var(--text-tertiary)' }}>System Ready</span> <span className="text-[10px]" style={{ color: 'var(--text-tertiary)' }}>System Ready</span>
</div> </div>
<p className="text-[11px] px-4" style={{ color: 'var(--text-tertiary)' }}> <span className="text-[10px]" style={{ color: 'var(--text-tertiary)' }}>v1.0.0 · Arch Linux</span>
v1.0.0 · Arch Linux
</p>
</div> </div>
</aside> </aside>
); );
frontend/src/index.css
+236 -251
View File
@@ -1,105 +1,97 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap");
@import "tailwindcss"; @import "tailwindcss";
/* ═══════════════════════════════════════════════ /* ═══════════════════════════════════════════════
ArchStore — Premium Design System ArchStore — Compact Dev-Tool Design System
Dark & Light theme with CSS custom properties
═══════════════════════════════════════════════ */ ═══════════════════════════════════════════════ */
:root { :root {
/* Default: Dark Theme */ --bg-base: #07090e;
--bg-base: #080c14; --bg-primary: #0b0f18;
--bg-primary: #0e1420; --bg-secondary: #101624;
--bg-secondary: #151d30; --bg-tertiary: #161e30;
--bg-tertiary: #1b263f; --bg-card: #0d1220;
--bg-card: #0e1420; --bg-card-hover: #111828;
--bg-card-hover: #151d30; --bg-elevated: #161e30;
--bg-elevated: #1b263f; --bg-input: #0a0e18;
--bg-input: #080c14; --bg-sidebar: rgba(11, 15, 24, 0.95);
--bg-sidebar: rgba(14, 20, 32, 0.9);
--bg-overlay: rgba(0, 0, 0, 0.7); --bg-overlay: rgba(0, 0, 0, 0.7);
--topbar-bg: rgba(14, 20, 32, 0.85); --topbar-bg: rgba(11, 15, 24, 0.85);
--border-primary: #1b263f; --border-primary: rgba(255, 255, 255, 0.06);
--border-secondary: #2c3b5e; --border-secondary: rgba(255, 255, 255, 0.1);
--border-glow: rgba(56, 189, 248, 0.15);
--text-primary: #f8fafc; --text-primary: #e2e8f0;
--text-secondary: #cbd5e1; --text-secondary: #94a3b8;
--text-tertiary: #94a3b8; --text-tertiary: #64748b;
--text-inverse: #0f172a; --text-inverse: #0f172a;
--accent-h: 199; --accent: #38bdf8;
--accent-s: 89%; --accent-hover: #7dd3fc;
--accent-l: 48%; --accent-muted: rgba(56, 189, 248, 0.1);
--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --accent-glow: rgba(56, 189, 248, 0.2);
--accent-hover: hsl(var(--accent-h), var(--accent-s), 56%);
--accent-muted: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.12);
--accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.25);
--green: #10b981; --green: #34d399;
--green-muted: rgba(16, 185, 129, 0.15); --green-muted: rgba(52, 211, 153, 0.1);
--amber: #f59e0b; --amber: #fbbf24;
--amber-muted: rgba(245, 158, 11, 0.15); --amber-muted: rgba(251, 191, 36, 0.1);
--red: #ef4444; --red: #f87171;
--red-muted: rgba(239, 68, 68, 0.15); --red-muted: rgba(248, 113, 113, 0.08);
--blue: #3b82f6; --blue: #60a5fa;
--blue-muted: rgba(59, 130, 246, 0.15); --blue-muted: rgba(96, 165, 250, 0.1);
--violet: #8b5cf6; --violet: #a78bfa;
--violet-muted: rgba(167, 139, 250, 0.1);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 4px 20px -4px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
--shadow-lg: 0 12px 40px -8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
--shadow-glow: 0 0 30px -5px var(--accent-glow); --shadow-glow: 0 0 20px rgba(56,189,248,0.08);
--radius-sm: 8px; --radius-sm: 6px;
--radius-md: 12px; --radius-md: 8px;
--radius-lg: 16px; --radius-lg: 10px;
--radius-xl: 24px; --radius-xl: 14px;
--radius-full: 9999px; --radius-full: 9999px;
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-mono: 'JetBrains Mono', ui-monospace, monospace;
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 120ms ease;
--transition-spring: 350ms cubic-bezier(0.16, 1, 0.3, 1); --transition-normal: 200ms ease;
} }
.light { .light {
/* Light Theme */ --bg-base: #f1f5f9;
--bg-base: #f8fafc; --bg-primary: #e2e8f0;
--bg-primary: #f1f5f9;
--bg-secondary: #ffffff; --bg-secondary: #ffffff;
--bg-tertiary: #f8fafc; --bg-tertiary: #f8fafc;
--bg-card: #ffffff; --bg-card: #ffffff;
--bg-card-hover: #f8fafc; --bg-card-hover: #f8fafc;
--bg-elevated: #ffffff; --bg-elevated: #ffffff;
--bg-input: #f1f5f9; --bg-input: #e2e8f0;
--bg-sidebar: rgba(255, 255, 255, 0.9); --bg-sidebar: rgba(255, 255, 255, 0.95);
--bg-overlay: rgba(15, 23, 42, 0.3); --bg-overlay: rgba(15, 23, 42, 0.2);
--topbar-bg: rgba(255, 255, 255, 0.85); --topbar-bg: rgba(255, 255, 255, 0.9);
--border-primary: #e2e8f0; --border-primary: rgba(0, 0, 0, 0.06);
--border-secondary: #cbd5e1; --border-secondary: rgba(0, 0, 0, 0.1);
--border-glow: rgba(2, 132, 199, 0.15);
--text-primary: #0f172a; --text-primary: #1e293b;
--text-secondary: #334155; --text-secondary: #475569;
--text-tertiary: #64748b; --text-tertiary: #94a3b8;
--text-inverse: #f8fafc; --text-inverse: #f1f5f9;
--accent: hsl(var(--accent-h), var(--accent-s), 42%); --accent: #0284c7;
--accent-hover: hsl(var(--accent-h), var(--accent-s), 35%); --accent-hover: #0369a1;
--accent-muted: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.08); --accent-muted: rgba(2, 132, 199, 0.08);
--accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15); --accent-glow: rgba(2, 132, 199, 0.12);
--green-muted: rgba(16, 185, 129, 0.08); --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--amber-muted: rgba(245, 158, 11, 0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
--red-muted: rgba(239, 68, 68, 0.06); --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
--blue-muted: rgba(59, 130, 246, 0.08); --shadow-glow: 0 0 20px rgba(2,132,199,0.06);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 20px -4px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 12px 40px -8px rgba(15, 23, 42, 0.1);
--shadow-glow: 0 0 30px -5px var(--accent-glow);
} }
@theme { @theme {
@@ -113,20 +105,16 @@
--color-bg-input: var(--bg-input); --color-bg-input: var(--bg-input);
--color-bg-sidebar: var(--bg-sidebar); --color-bg-sidebar: var(--bg-sidebar);
--color-bg-overlay: var(--bg-overlay); --color-bg-overlay: var(--bg-overlay);
--color-border-primary: var(--border-primary); --color-border-primary: var(--border-primary);
--color-border-secondary: var(--border-secondary); --color-border-secondary: var(--border-secondary);
--color-text-primary: var(--text-primary); --color-text-primary: var(--text-primary);
--color-text-secondary: var(--text-secondary); --color-text-secondary: var(--text-secondary);
--color-text-tertiary: var(--text-tertiary); --color-text-tertiary: var(--text-tertiary);
--color-text-inverse: var(--text-inverse); --color-text-inverse: var(--text-inverse);
--color-accent: var(--accent); --color-accent: var(--accent);
--color-accent-hover: var(--accent-hover); --color-accent-hover: var(--accent-hover);
--color-accent-muted: var(--accent-muted); --color-accent-muted: var(--accent-muted);
--color-accent-glow: var(--accent-glow); --color-accent-glow: var(--accent-glow);
--color-green: var(--green); --color-green: var(--green);
--color-green-muted: var(--green-muted); --color-green-muted: var(--green-muted);
--color-amber: var(--amber); --color-amber: var(--amber);
@@ -136,49 +124,32 @@
--color-blue: var(--blue); --color-blue: var(--blue);
--color-blue-muted: var(--blue-muted); --color-blue-muted: var(--blue-muted);
--color-violet: var(--violet); --color-violet: var(--violet);
--color-violet-muted: var(--violet-muted);
--font-sans: var(--font-sans); --font-sans: var(--font-sans);
--font-mono: var(--font-mono); --font-mono: var(--font-mono);
} }
/* ═══════════════════════════════════════════════ /* ── Reset ── */
Base Resets *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
═══════════════════════════════════════════════ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body { body {
font-family: var(--font-sans); font-family: var(--font-sans);
background-color: var(--bg-base); background: var(--bg-base);
color: var(--text-primary); color: var(--text-primary);
line-height: 1.6; font-size: 13px;
line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
transition: background-color var(--transition-normal), color var(--transition-normal);
} }
/* Custom Scrollbar */ /* ── Scrollbar ── */
::-webkit-scrollbar { ::-webkit-scrollbar { width: 4px; height: 4px; }
width: 8px; ::-webkit-scrollbar-track { background: transparent; }
height: 8px; ::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 4px; }
} ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-primary);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--border-secondary);
}
/* ═══════════════════════════════════════════════ /* ═══════════════════════════════════════════════
App Structure Layout
═══════════════════════════════════════════════ */ ═══════════════════════════════════════════════ */
.app-layout { .app-layout {
@@ -188,229 +159,222 @@ body {
.sidebar { .sidebar {
position: fixed; position: fixed;
left: 0; left: 0; top: 0; bottom: 0;
top: 0; width: 220px;
bottom: 0;
width: 280px;
z-index: 50; z-index: 50;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 32px 24px; padding: 16px 12px;
background: var(--bg-sidebar); background: var(--bg-sidebar);
border-right: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary);
backdrop-filter: blur(20px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(16px);
transition: transform var(--transition-spring), background var(--transition-normal); overflow-y: auto;
transition: transform 0.2s ease;
} }
.main-content { .main-content {
margin-left: 280px; margin-left: 220px;
flex: 1; flex: 1;
min-height: 100vh; min-height: 100vh;
padding: 40px 48px; display: flex;
background-color: var(--bg-base); flex-direction: column;
transition: margin-left var(--transition-spring);
} }
@media (max-width: 1024px) { .content-shell {
.sidebar { width: 100%;
transform: translateX(-100%); max-width: 1200px;
} margin: 0 auto;
.sidebar.open { padding: 0 24px;
transform: translateX(0); display: flex;
} flex-direction: column;
.main-content { flex: 1;
margin-left: 0;
padding: 24px 20px;
}
} }
/* ═══════════════════════════════════════════════ .topbar {
Sidebar Items position: sticky;
═══════════════════════════════════════════════ */ top: 0;
z-index: 40;
.nav-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 10px 16px; padding: 10px 24px;
background: var(--topbar-bg);
border-bottom: 1px solid var(--border-primary);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.topbar-search { flex: 1; max-width: 420px; }
.page-shell {
padding: 20px 0 32px;
flex: 1;
}
@media (max-width: 1024px) {
.sidebar { transform: translateX(-100%); }
.sidebar.open { transform: translateX(0); }
.main-content { margin-left: 0; }
.content-shell { padding: 0 16px; }
.topbar { padding: 10px 16px; }
}
/* ── Nav Links ── */
.nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 12px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--text-secondary); color: var(--text-tertiary);
text-decoration: none; text-decoration: none;
font-size: 0.92rem; font-size: 13px;
font-weight: 500; font-weight: 500;
transition: all var(--transition-fast); transition: all var(--transition-fast);
position: relative;
} }
.nav-link:hover { .nav-link:hover {
color: var(--text-secondary);
background: var(--accent-muted); background: var(--accent-muted);
color: var(--text-primary);
} }
.nav-link.active { .nav-link.active {
background: var(--accent-muted);
color: var(--accent); color: var(--accent);
background: var(--accent-muted);
font-weight: 600; font-weight: 600;
} }
.nav-link.active::before {
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 3px; height: 16px;
background: var(--accent);
border-radius: 0 3px 3px 0;
}
/* ═══════════════════════════════════════════════ /* ═══════════════════════════════════════════════
Cards & Elements Cards
═══════════════════════════════════════════════ */ ═══════════════════════════════════════════════ */
.card { .card {
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); transition: all var(--transition-fast);
transition: transform var(--transition-spring),
box-shadow var(--transition-spring),
background var(--transition-normal),
border-color var(--transition-fast);
}
.card-interactive {
cursor: pointer;
} }
.card-interactive { cursor: pointer; }
.card-interactive:hover { .card-interactive:hover {
transform: translateY(-2px);
background: var(--bg-card-hover); background: var(--bg-card-hover);
border-color: var(--border-secondary); border-color: var(--border-secondary);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-glow);
transform: translateY(-1px);
} }
/* ── Badges ── */
.badge { .badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 3px 10px; padding: 2px 7px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
font-size: 0.7rem; font-size: 10px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.03em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
} }
.badge-pacman { .badge-pacman { background: var(--accent-muted); color: var(--accent); }
background: var(--accent-muted); .badge-aur { background: var(--amber-muted); color: var(--amber); }
color: var(--accent); .badge-installed { background: var(--green-muted); color: var(--green); }
border: 1px solid rgba(2, 132, 199, 0.25);
}
.badge-aur {
background: var(--amber-muted);
color: var(--amber);
border: 1px solid rgba(245, 158, 11, 0.25);
}
.badge-installed {
background: var(--green-muted);
color: var(--green);
border: 1px solid rgba(16, 185, 129, 0.25);
}
/* Buttons */ /* ── Buttons ── */
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 6px;
padding: 10px 20px; padding: 6px 14px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 0.88rem; font-size: 12px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
border: none; border: none;
font-family: var(--font-sans);
transition: all var(--transition-fast); transition: all var(--transition-fast);
white-space: nowrap;
} }
.btn:disabled { .btn:disabled { opacity: 0.5; cursor: not-allowed; }
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary { .btn-primary { background: var(--accent); color: #fff; }
background: var(--accent); .btn-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 0 12px var(--accent-glow); }
color: #ffffff;
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-hover);
}
.btn-secondary { .btn-secondary { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-primary); }
background: var(--bg-secondary); .btn-secondary:hover:not(:disabled) { border-color: var(--border-secondary); color: var(--text-primary); }
color: var(--text-primary);
border: 1px solid var(--border-primary);
}
.btn-secondary:hover:not(:disabled) {
background: var(--bg-tertiary);
border-color: var(--border-secondary);
}
.btn-danger { .btn-danger { background: var(--red-muted); color: var(--red); }
background: var(--red-muted); .btn-danger:hover:not(:disabled) { background: rgba(248,113,113,0.15); }
color: var(--red);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.btn-danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.25);
}
.btn-ghost { .btn-ghost { background: transparent; color: var(--text-tertiary); padding: 6px 10px; }
background: transparent; .btn-ghost:hover:not(:disabled) { color: var(--text-secondary); background: var(--bg-secondary); }
color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
background: var(--bg-secondary);
color: var(--text-primary);
}
/* Inputs */ /* ── Inputs ── */
.input { .input {
width: 100%; width: 100%;
padding: 10px 16px; padding: 7px 12px;
background: var(--bg-input); background: var(--bg-input);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--text-primary); color: var(--text-primary);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.9rem; font-size: 13px;
outline: none; outline: none;
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }
.input::placeholder { .input::placeholder { color: var(--text-tertiary); }
color: var(--text-tertiary); .input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
}
.input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Typography Helpers */ .searchbar { width: 100%; position: relative; }
.input-search { height: 34px; padding-top: 0; padding-bottom: 0; }
/* ── Typography ── */
.page-title { .page-title {
font-size: 1.8rem; font-size: 18px;
font-weight: 800; font-weight: 700;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: var(--text-primary); color: var(--text-primary);
line-height: 1.3;
} }
.page-subtitle { .page-subtitle {
font-size: 0.95rem; font-size: 12px;
color: var(--text-tertiary); color: var(--text-tertiary);
margin-top: 2px;
} }
/* Layout Grids */ /* ── Grids ── */
.pkg-grid { .pkg-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px; gap: 10px;
}
@media (max-width: 640px) {
.pkg-grid {
grid-template-columns: 1fr;
}
} }
@media (max-width: 640px) { .pkg-grid { grid-template-columns: 1fr; } }
.cat-grid { .cat-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px; gap: 10px;
} }
/* Shimmer Loader */ .update-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
transition: background var(--transition-fast);
}
.update-row:hover { background: var(--bg-card-hover); }
/* ── Utilities ── */
.shimmer { .shimmer {
background: linear-gradient(90deg, background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
background-size: 200% 100%; background-size: 200% 100%;
animation: shimmer-anim 1.5s infinite; animation: shimmer-anim 1.5s infinite;
border-radius: var(--radius-md); border-radius: var(--radius-md);
@@ -421,21 +385,16 @@ body {
} }
.spinner { .spinner {
width: 28px; width: 20px; height: 20px;
height: 28px; border: 2px solid var(--border-primary);
border: 3px solid var(--border-primary);
border-top-color: var(--accent); border-top-color: var(--accent);
border-radius: 50%; border-radius: 50%;
animation: spin-anim 0.8s linear infinite; animation: spin-anim 0.6s linear infinite;
}
@keyframes spin-anim {
to { transform: rotate(360deg); }
} }
@keyframes spin-anim { to { transform: rotate(360deg); } }
/* Theme Toggle Button */
.theme-toggle { .theme-toggle {
width: 40px; width: 32px; height: 32px;
height: 40px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
@@ -443,11 +402,37 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-secondary); color: var(--text-tertiary);
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }
.theme-toggle:hover { .theme-toggle:hover { border-color: var(--border-secondary); color: var(--text-primary); }
border-color: var(--border-secondary);
color: var(--text-primary); .gradient-text {
background: var(--bg-tertiary); background: linear-gradient(135deg, var(--accent), var(--violet));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
/* ── Animations ── */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.2s ease-out both; }
.animate-slide-up { animation: slideUp 0.25s ease-out both; }
.stagger > * { animation: fadeIn 0.2s ease-out both; }
.stagger > *:nth-child(1) { animation-delay: 20ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 60ms; }
.stagger > *:nth-child(4) { animation-delay: 80ms; }
.stagger > *:nth-child(5) { animation-delay: 100ms; }
.stagger > *:nth-child(6) { animation-delay: 120ms; }
.stagger > *:nth-child(7) { animation-delay: 140ms; }
.stagger > *:nth-child(8) { animation-delay: 160ms; }
.stagger > *:nth-child(n+9) { animation-delay: 180ms; }
frontend/src/layouts/MainLayout.jsx
+11 -24
View File
@@ -11,11 +11,8 @@ export default function MainLayout() {
useEffect(() => { useEffect(() => {
const root = document.documentElement; const root = document.documentElement;
if (theme === 'light') { if (theme === 'light') root.classList.add('light');
root.classList.add('light'); else root.classList.remove('light');
} else {
root.classList.remove('light');
}
localStorage.setItem('archstore-theme', theme); localStorage.setItem('archstore-theme', theme);
}, [theme]); }, [theme]);
@@ -30,7 +27,6 @@ export default function MainLayout() {
return ( return (
<div className="app-layout"> <div className="app-layout">
{/* Mobile overlay */}
{sidebarOpen && ( {sidebarOpen && (
<div <div
className="fixed inset-0 z-40 lg:hidden" className="fixed inset-0 z-40 lg:hidden"
@@ -42,36 +38,27 @@ export default function MainLayout() {
<Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} /> <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
<main className="main-content"> <main className="main-content">
<div className="content-shell"> {/* Sticky Topbar */}
{/* ── Top Bar ── */} <div className="topbar">
<header className="topbar">
{/* Mobile menu */}
<button <button
id="menu-toggle" className="btn-ghost lg:hidden !p-1.5"
className="btn-ghost lg:hidden !p-2.5 rounded-xl"
onClick={() => setSidebarOpen(!sidebarOpen)} onClick={() => setSidebarOpen(!sidebarOpen)}
aria-label="Toggle menu" aria-label="Toggle menu"
> >
{sidebarOpen ? <X size={20} /> : <Menu size={20} />} {sidebarOpen ? <X size={16} /> : <Menu size={16} />}
</button> </button>
{/* Search */}
<div className="topbar-search"> <div className="topbar-search">
<SearchBar onSearch={handleSearch} /> <SearchBar onSearch={handleSearch} />
</div> </div>
{/* Theme toggle */} <button onClick={toggleTheme} className="theme-toggle" aria-label="Toggle theme">
<button {theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
onClick={toggleTheme}
className="theme-toggle"
aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
>
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
</button> </button>
</header> </div>
{/* ── Page ── */} {/* Page Content */}
<div className="content-shell">
<div className="page-shell animate-fade-in"> <div className="page-shell animate-fade-in">
<Outlet /> <Outlet />
</div> </div>
frontend/src/pages/Categories.jsx
+41 -33
View File
@@ -8,14 +8,14 @@ import {
} from 'lucide-react'; } from 'lucide-react';
const catMeta = { const catMeta = {
Development: { icon: Code, color: '#3b82f6', bg: 'rgba(59,130,246,0.1)' }, Development: { icon: Code, color: '#60a5fa', bg: 'rgba(96,165,250,0.08)', desc: 'Programming tools, compilers, and IDEs' },
System: { icon: Monitor, color: '#64748b', bg: 'rgba(100,116,139,0.1)' }, System: { icon: Monitor, color: '#94a3b8', bg: 'rgba(148,163,184,0.08)', desc: 'Core system utilities and tools' },
Network: { icon: Wifi, color: '#10b981', bg: 'rgba(16,185,129,0.1)' }, Network: { icon: Wifi, color: '#34d399', bg: 'rgba(52,211,153,0.08)', desc: 'Networking tools, browsers, and servers' },
Multimedia: { icon: Music, color: '#a855f7', bg: 'rgba(168,85,247,0.1)' }, Multimedia: { icon: Music, color: '#c084fc', bg: 'rgba(192,132,252,0.08)', desc: 'Audio, video, and image tools' },
Games: { icon: Gamepad2, color: '#ef4444', bg: 'rgba(239,68,68,0.1)' }, Games: { icon: Gamepad2, color: '#f87171', bg: 'rgba(248,113,113,0.08)', desc: 'Games and gaming tools' },
Desktop: { icon: LayoutDashboard, color: '#6366f1', bg: 'rgba(99,102,241,0.1)' }, Desktop: { icon: LayoutDashboard, color: '#818cf8', bg: 'rgba(129,140,248,0.08)', desc: 'Desktop environments and window managers' },
Fonts: { icon: Type, color: '#f59e0b', bg: 'rgba(245,158,11,0.1)' }, Fonts: { icon: Type, color: '#fbbf24', bg: 'rgba(251,191,36,0.08)', desc: 'Fonts and typography' },
Security: { icon: ShieldCheck, color: '#06b6d4', bg: 'rgba(6,182,212,0.1)' }, Security: { icon: ShieldCheck, color: '#22d3ee', bg: 'rgba(34,211,238,0.08)', desc: 'Security and privacy tools' },
}; };
export default function Categories() { export default function Categories() {
@@ -45,69 +45,77 @@ export default function Categories() {
finally { setLoading(false); } finally { setLoading(false); }
} }
/* ── Category detail view ── */
if (categoryName) { if (categoryName) {
const meta = catMeta[categoryName] || { icon: Package, color: 'var(--accent)', bg: 'var(--accent-muted)' }; const meta = catMeta[categoryName] || { icon: Package, color: 'var(--accent)', bg: 'var(--accent-muted)' };
const Icon = meta.icon; const Icon = meta.icon;
return ( return (
<div className="animate-slide-up"> <div className="animate-slide-up flex flex-col gap-4">
<button onClick={() => navigate('/categories')} className="btn btn-secondary mb-6"> <button onClick={() => navigate('/categories')} className="btn btn-secondary w-fit text-xs">
<ArrowLeft size={15} /> Back <ArrowLeft size={12} /> Back
</button> </button>
<div className="flex items-center gap-4 mb-8"> <div className="flex items-center gap-3">
<div className="w-14 h-14 rounded-2xl flex items-center justify-center" <div className="w-9 h-9 rounded-lg flex items-center justify-center"
style={{ background: meta.bg, border: '1px solid var(--border-primary)' }}> style={{ background: meta.bg, border: '1px solid var(--border-primary)' }}>
<Icon size={26} style={{ color: meta.color }} /> <Icon size={18} style={{ color: meta.color }} />
</div> </div>
<div> <div>
<h1 className="page-title">{categoryName}</h1> <h1 className="page-title">{categoryName}</h1>
<p className="page-subtitle">Browse popular {categoryName.toLowerCase()} packages</p> <p className="page-subtitle">Browse popular {categoryName.toLowerCase()} packages</p>
</div> </div>
</div> </div>
{error && <div className="rounded-xl p-4 mb-6 text-sm" style={{ background: 'var(--red-muted)', color: 'var(--red)' }}>{error}</div>} {error && <div className="rounded-lg p-3 text-xs" style={{ background: 'var(--red-muted)', color: 'var(--red)' }}>{error}</div>}
<PackageGrid packages={packages} loading={loading} /> <PackageGrid packages={packages} loading={loading} />
</div> </div>
); );
} }
/* ── Category list view ── */
return ( return (
<div className="animate-slide-up"> <div className="animate-slide-up flex flex-col gap-4">
<div className="mb-8"> <div>
<h1 className="page-title">Categories</h1> <h1 className="page-title">Categories</h1>
<p className="page-subtitle">Explore software by type</p> <p className="page-subtitle">Explore software by type</p>
</div> </div>
{error && <div className="rounded-xl p-4 mb-6 text-sm" style={{ background: 'var(--red-muted)', color: 'var(--red)' }}>{error}</div>} {error && <div className="rounded-lg p-3 text-xs" style={{ background: 'var(--red-muted)', color: 'var(--red)' }}>{error}</div>}
{loading ? ( {loading ? (
<div className="cat-grid"> <div className="cat-grid">
{Array.from({ length: 8 }).map((_, i) => ( {Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="card p-5"> <div key={i} className="card p-3">
<div className="shimmer h-11 w-11 rounded-xl mb-4"></div> <div className="flex items-center gap-2.5">
<div className="shimmer h-4 w-24 mb-2"></div> <div className="shimmer w-8 h-8 rounded-md"></div>
<div className="shimmer h-3 w-full"></div> <div className="flex-1">
<div className="shimmer h-3 w-20 mb-1.5"></div>
<div className="shimmer h-2.5 w-full"></div>
</div>
</div>
</div> </div>
))} ))}
</div> </div>
) : ( ) : (
<div className="cat-grid stagger"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 stagger">
{categories.map((cat) => { {(categories.length > 0 ? categories : Object.keys(catMeta).map(n => ({ name: n }))).map((cat) => {
const meta = catMeta[cat.name] || { icon: Package, color: 'var(--accent)', bg: 'var(--accent-muted)' }; const meta = catMeta[cat.name] || { icon: Package, color: 'var(--accent)', bg: 'var(--accent-muted)', desc: 'Explore packages' };
const Icon = meta.icon; const Icon = meta.icon;
return ( return (
<div key={cat.name} <div key={cat.name}
className="card card-interactive p-6 group" className="card card-interactive p-4 group"
onClick={() => navigate(`/categories/${cat.name}`)}> onClick={() => navigate(`/categories/${cat.name}`)}>
<div className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-transform group-hover:scale-110" <div className="flex items-start gap-3">
<div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 transition-transform group-hover:scale-110"
style={{ background: meta.bg }}> style={{ background: meta.bg }}>
<Icon size={22} style={{ color: meta.color }} /> <Icon size={16} style={{ color: meta.color }} />
</div> </div>
<h3 className="font-semibold text-sm mb-1 transition-colors" style={{ color: 'var(--text-primary)' }}> <div className="min-w-0">
{cat.name} <p className="text-xs font-bold mb-0.5" style={{ color: 'var(--text-primary)' }}>{cat.name}</p>
</h3> <p className="text-[10px] leading-snug" style={{ color: 'var(--text-tertiary)' }}>
<p className="text-xs leading-relaxed" style={{ color: 'var(--text-tertiary)' }}> {cat.description || meta.desc}
{cat.description || 'Explore packages'}
</p> </p>
</div> </div>
</div>
</div>
); );
})} })}
</div> </div>
frontend/src/pages/Home.jsx
+77 -78
View File
@@ -1,21 +1,22 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { import {
Search, TrendingUp, Package, ArrowRight, Sparkles, Shield, Search, TrendingUp, Package, ArrowRight, Shield,
Code, Monitor, Wifi, Music, Gamepad2, LayoutDashboard, Type, ShieldCheck Code, Monitor, Wifi, Music, Gamepad2, LayoutDashboard, Type, ShieldCheck,
Download, RefreshCw, Zap
} from 'lucide-react'; } from 'lucide-react';
import api from '../api/client'; import api from '../api/client';
import PackageGrid from '../components/PackageGrid'; import PackageGrid from '../components/PackageGrid';
const catMeta = { const catMeta = {
Development: { icon: Code, color: '#3b82f6', bg: 'rgba(59,130,246,0.1)' }, Development: { icon: Code, color: '#60a5fa', bg: 'rgba(96,165,250,0.08)' },
System: { icon: Monitor, color: '#64748b', bg: 'rgba(100,116,139,0.1)' }, System: { icon: Monitor, color: '#94a3b8', bg: 'rgba(148,163,184,0.08)' },
Network: { icon: Wifi, color: '#10b981', bg: 'rgba(16,185,129,0.1)' }, Network: { icon: Wifi, color: '#34d399', bg: 'rgba(52,211,153,0.08)' },
Multimedia: { icon: Music, color: '#a855f7', bg: 'rgba(168,85,247,0.1)' }, Multimedia: { icon: Music, color: '#c084fc', bg: 'rgba(192,132,252,0.08)' },
Games: { icon: Gamepad2, color: '#ef4444', bg: 'rgba(239,68,68,0.1)' }, Games: { icon: Gamepad2, color: '#f87171', bg: 'rgba(248,113,113,0.08)' },
Desktop: { icon: LayoutDashboard, color: '#6366f1', bg: 'rgba(99,102,241,0.1)' }, Desktop: { icon: LayoutDashboard, color: '#818cf8', bg: 'rgba(129,140,248,0.08)' },
Fonts: { icon: Type, color: '#f59e0b', bg: 'rgba(245,158,11,0.1)' }, Fonts: { icon: Type, color: '#fbbf24', bg: 'rgba(251,191,36,0.08)' },
Security: { icon: ShieldCheck, color: '#06b6d4', bg: 'rgba(6,182,212,0.1)' }, Security: { icon: ShieldCheck, color: '#22d3ee', bg: 'rgba(34,211,238,0.08)' },
}; };
export default function Home() { export default function Home() {
@@ -24,18 +25,21 @@ export default function Home() {
const [featured, setFeatured] = useState([]); const [featured, setFeatured] = useState([]);
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [updateCount, setUpdateCount] = useState(0);
useEffect(() => { loadData(); }, []); useEffect(() => { loadData(); }, []);
async function loadData() { async function loadData() {
setLoading(true); setLoading(true);
try { try {
const [catRes, featRes] = await Promise.allSettled([ const [catRes, featRes, updRes] = await Promise.allSettled([
api.listCategories(), api.listCategories(),
api.searchPackages('firefox chromium vlc', 'all'), api.searchPackages('firefox chromium vlc', 'all'),
api.checkUpdates(),
]); ]);
if (catRes.status === 'fulfilled') setCategories(catRes.value.results || []); if (catRes.status === 'fulfilled') setCategories(catRes.value.results || []);
if (featRes.status === 'fulfilled') setFeatured((featRes.value.results || []).slice(0, 6)); if (featRes.status === 'fulfilled') setFeatured((featRes.value.results || []).slice(0, 6));
if (updRes.status === 'fulfilled') setUpdateCount(updRes.value.count || 0);
} catch { /* silent */ } } catch { /* silent */ }
finally { setLoading(false); } finally { setLoading(false); }
} }
@@ -45,115 +49,110 @@ export default function Home() {
if (query.trim()) navigate(`/search?q=${encodeURIComponent(query.trim())}`); if (query.trim()) navigate(`/search?q=${encodeURIComponent(query.trim())}`);
}; };
return ( const stats = [
<div className="animate-slide-up"> { icon: Package, label: 'Official', value: 'Pacman', color: 'var(--accent)' },
{/* ════════════════ Hero ════════════════ */} { icon: TrendingUp, label: 'AUR', value: '80,000+', color: 'var(--amber)' },
<section className="relative rounded-2xl overflow-hidden mb-12 p-10 md:p-14" { icon: Shield, label: 'Security', value: 'Scanner', color: 'var(--green)' },
style={{ { icon: RefreshCw, label: 'Updates', value: updateCount > 0 ? `${updateCount} available` : 'Up to date', color: 'var(--violet)' },
background: 'linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%)', ];
border: '1px solid var(--border-primary)'
}}>
{/* Decorative blobs */}
<div className="glow-ring" style={{ width: 300, height: 300, top: -100, right: -60 }}></div>
<div className="glow-ring" style={{ width: 200, height: 200, bottom: -80, left: -40, background: 'var(--violet)' }}></div>
<div className="relative z-10 max-w-xl"> return (
<div className="flex items-center gap-2 mb-5"> <div className="animate-slide-up flex flex-col gap-5">
<Sparkles size={16} style={{ color: 'var(--accent)' }} /> {/* ── Welcome Bar ── */}
<span className="text-xs font-bold uppercase tracking-widest" style={{ color: 'var(--accent)' }}> <div className="card p-4 flex flex-col sm:flex-row sm:items-center gap-4"
Welcome to ArchStore style={{ borderColor: 'var(--border-glow)' }}>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<Zap size={14} style={{ color: 'var(--accent)' }} />
<span className="text-[10px] font-bold uppercase tracking-widest" style={{ color: 'var(--accent)' }}>
ArchStore
</span> </span>
</div> </div>
<h1 className="text-lg font-bold leading-tight" style={{ letterSpacing: '-0.02em' }}>
<h1 className="text-3xl md:text-[2.5rem] font-extrabold leading-tight mb-4" Discover packages for <span className="gradient-text">Arch Linux</span>
style={{ letterSpacing: '-0.03em' }}>
Discover packages for{' '}
<span className="gradient-text">Arch Linux</span>
</h1> </h1>
<p className="text-xs mt-1" style={{ color: 'var(--text-tertiary)' }}>
<p className="text-base leading-relaxed mb-8" style={{ color: 'var(--text-secondary)' }}> Search official repos and the AUR in one place.
Browse, install, and manage software from official pacman repositories
and the AUR — all in one beautiful interface.
</p> </p>
</div>
<form onSubmit={handleSearch} className="flex gap-3 max-w-md"> <form onSubmit={handleSearch} className="flex gap-2 shrink-0 w-full sm:w-auto sm:max-w-xs">
<div className="relative flex-1"> <div className="relative flex-1">
<Search size={16} className="absolute left-4 top-1/2 -translate-y-1/2" style={{ color: 'var(--text-tertiary)' }} /> <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--text-tertiary)' }} />
<input <input
id="hero-search"
type="text" type="text"
className="input pl-11 py-3 rounded-xl" className="input pl-8 pr-3 py-1.5 text-xs rounded-lg"
placeholder="Search packages..." placeholder="Search packages..."
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
/> />
</div> </div>
<button type="submit" className="btn btn-primary px-6 rounded-xl"> <button type="submit" className="btn btn-primary px-4 rounded-lg text-xs">
<Search size={16} /> <Search size={12} /> Go
<span className="hidden sm:inline">Search</span>
</button> </button>
</form> </form>
</div> </div>
</section>
{/* ════════════════ Stats ════════════════ */} {/* ── Stats Row ── */}
<section className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12"> <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
{[ {stats.map(({ icon: Icon, label, value, color }) => (
{ icon: Package, label: 'Pacman Repos', value: 'Official', color: 'var(--accent)' }, <div key={label} className="card p-3 flex items-center gap-3">
{ icon: TrendingUp, label: 'AUR Packages', value: '80,000+', color: 'var(--amber)' }, <div className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
{ icon: Shield, label: 'Security Scan', value: 'Built-in', color: 'var(--green)' }, style={{ background: `${color}12` }}>
{ icon: Sparkles, label: 'Updates', value: 'Real-time', color: 'var(--violet)' }, <Icon size={15} style={{ color }} />
].map(({ icon: Icon, label, value, color }) => ( </div>
<div key={label} className="card p-5 text-center"> <div className="min-w-0">
<Icon size={20} style={{ color, margin: '0 auto 8px' }} /> <p className="text-xs font-bold truncate" style={{ color: 'var(--text-primary)' }}>{value}</p>
<p className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>{value}</p> <p className="text-[10px]" style={{ color: 'var(--text-tertiary)' }}>{label}</p>
<p className="text-xs" style={{ color: 'var(--text-tertiary)' }}>{label}</p> </div>
</div> </div>
))} ))}
</section>
{/* ════════════════ Categories ════════════════ */}
<section className="mb-12">
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>Browse Categories</h2>
<button className="btn-ghost text-xs font-semibold flex items-center gap-1"
style={{ color: 'var(--accent)' }}
onClick={() => navigate('/categories')}>
View all <ArrowRight size={14} />
</button>
</div> </div>
{/* ── Categories ── */}
<section>
<div className="flex items-center justify-between mb-3">
<h2 className="text-sm font-bold" style={{ color: 'var(--text-primary)' }}>Categories</h2>
<button className="btn-ghost text-[11px] font-semibold flex items-center gap-1"
style={{ color: 'var(--accent)' }}
onClick={() => navigate('/categories')}>
View all <ArrowRight size={12} />
</button>
</div>
<div className="cat-grid stagger"> <div className="cat-grid stagger">
{(categories.length > 0 ? categories : Object.keys(catMeta).map(n => ({ name: n }))).map((cat) => { {(categories.length > 0 ? categories : Object.keys(catMeta).map(n => ({ name: n }))).map((cat) => {
const meta = catMeta[cat.name] || { icon: Package, color: 'var(--accent)', bg: 'var(--accent-muted)' }; const meta = catMeta[cat.name] || { icon: Package, color: 'var(--accent)', bg: 'var(--accent-muted)' };
const Icon = meta.icon; const Icon = meta.icon;
return ( return (
<div key={cat.name} <div key={cat.name}
className="card card-interactive p-5 group" className="card card-interactive p-3 group"
onClick={() => navigate(`/categories/${cat.name}`)}> onClick={() => navigate(`/categories/${cat.name}`)}>
<div className="w-11 h-11 rounded-xl flex items-center justify-center mb-3 transition-transform group-hover:scale-110" <div className="flex items-center gap-2.5">
<div className="w-7 h-7 rounded-md flex items-center justify-center shrink-0 transition-transform group-hover:scale-110"
style={{ background: meta.bg }}> style={{ background: meta.bg }}>
<Icon size={20} style={{ color: meta.color }} /> <Icon size={14} style={{ color: meta.color }} />
</div> </div>
<h3 className="font-semibold text-sm mb-0.5" style={{ color: 'var(--text-primary)' }}>{cat.name}</h3> <div className="min-w-0">
<p className="text-xs leading-relaxed" style={{ color: 'var(--text-tertiary)' }}> <p className="text-xs font-semibold truncate" style={{ color: 'var(--text-primary)' }}>{cat.name}</p>
<p className="text-[10px] truncate" style={{ color: 'var(--text-tertiary)' }}>
{cat.description || 'Explore packages'} {cat.description || 'Explore packages'}
</p> </p>
</div> </div>
</div>
</div>
); );
})} })}
</div> </div>
</section> </section>
{/* ════════════════ Featured ════════════════ */} {/* ── Featured Packages ── */}
{featured.length > 0 && ( {featured.length > 0 && (
<section> <section>
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-3">
<h2 className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>Popular Packages</h2> <h2 className="text-sm font-bold" style={{ color: 'var(--text-primary)' }}>Popular Packages</h2>
<button className="btn-ghost text-xs font-semibold flex items-center gap-1" <button className="btn-ghost text-[11px] font-semibold flex items-center gap-1"
style={{ color: 'var(--accent)' }} style={{ color: 'var(--accent)' }}
onClick={() => navigate('/search?q=popular')}> onClick={() => navigate('/search?q=popular')}>
See more <ArrowRight size={14} /> See more <ArrowRight size={12} />
</button> </button>
</div> </div>
<PackageGrid packages={featured} loading={loading} /> <PackageGrid packages={featured} loading={loading} />
frontend/src/pages/Installed.jsx
+69 -18
View File
@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import api from '../api/client'; import api from '../api/client';
import PackageGrid from '../components/PackageGrid'; import PackageGrid from '../components/PackageGrid';
import { RefreshCw, Search } from 'lucide-react'; import { RefreshCw, Search, LayoutGrid, List } from 'lucide-react';
export default function Installed() { export default function Installed() {
const [packages, setPackages] = useState([]); const [packages, setPackages] = useState([]);
@@ -9,6 +9,7 @@ export default function Installed() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [filter, setFilter] = useState(''); const [filter, setFilter] = useState('');
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [viewMode, setViewMode] = useState('grid');
useEffect(() => { load(); }, []); useEffect(() => { load(); }, []);
@@ -22,50 +23,100 @@ export default function Installed() {
async function load() { async function load() {
setLoading(true); setError(null); setLoading(true); setError(null);
try { try { const data = await api.listInstalled(); setPackages(data.results || []); }
const data = await api.listInstalled(); catch (err) { setError(err.message); }
setPackages(data.results || []);
} catch (err) { setError(err.message); }
finally { setLoading(false); } finally { setLoading(false); }
} }
return ( return (
<div className="animate-slide-up"> <div className="animate-slide-up flex flex-col gap-4">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8"> {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div> <div>
<h1 className="page-title">Installed Packages</h1> <h1 className="page-title">Installed Packages</h1>
<p className="page-subtitle"> <p className="page-subtitle">
{packages.length > 0 ? `${packages.length} packages installed on your system` : 'Loading installed packages...'} {packages.length > 0 ? `${packages.length} packages on your system` : 'Loading...'}
</p> </p>
</div> </div>
<button onClick={load} disabled={loading} className="btn btn-secondary"> <div className="flex items-center gap-2">
<RefreshCw size={15} className={loading ? 'animate-spin' : ''} /> {/* View toggle */}
Refresh <div className="flex p-0.5 rounded-md" style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}>
<button onClick={() => setViewMode('grid')}
className="p-1 rounded transition-all"
style={{ background: viewMode === 'grid' ? 'var(--accent-muted)' : 'transparent', color: viewMode === 'grid' ? 'var(--accent)' : 'var(--text-tertiary)' }}>
<LayoutGrid size={13} />
</button> </button>
<button onClick={() => setViewMode('list')}
className="p-1 rounded transition-all"
style={{ background: viewMode === 'list' ? 'var(--accent-muted)' : 'transparent', color: viewMode === 'list' ? 'var(--accent)' : 'var(--text-tertiary)' }}>
<List size={13} />
</button>
</div>
<button onClick={load} disabled={loading} className="btn btn-secondary text-xs">
<RefreshCw size={12} className={loading ? 'animate-spin' : ''} /> Refresh
</button>
</div>
</div> </div>
{error && ( {error && (
<div className="rounded-xl p-4 mb-6 text-sm font-medium" <div className="rounded-lg p-3 text-xs font-medium"
style={{ background: 'var(--red-muted)', color: 'var(--red)', border: '1px solid rgba(239,68,68,0.2)' }}> style={{ background: 'var(--red-muted)', color: 'var(--red)', border: '1px solid rgba(248,113,113,0.15)' }}>
{error} {error}
</div> </div>
)} )}
{/* Filter */}
{!loading && packages.length > 0 && ( {!loading && packages.length > 0 && (
<div className="relative max-w-sm mb-8"> <div className="relative max-w-xs">
<Search size={15} className="absolute left-3.5 top-1/2 -translate-y-1/2" style={{ color: 'var(--text-tertiary)' }} /> <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--text-tertiary)' }} />
<input <input
id="installed-filter"
type="text" type="text"
className="input pl-10 py-2.5 text-sm rounded-xl" className="input pl-8 py-1.5 text-xs rounded-lg"
placeholder="Filter installed packages..." placeholder="Filter packages..."
value={filter} value={filter}
onChange={(e) => setFilter(e.target.value)} onChange={(e) => setFilter(e.target.value)}
/> />
</div> </div>
)} )}
{/* Package List */}
{viewMode === 'grid' ? (
<PackageGrid packages={filtered} loading={loading} /> <PackageGrid packages={filtered} loading={loading} />
) : (
/* List view */
loading ? (
<div className="flex flex-col gap-1">
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="card p-2.5 flex items-center gap-3">
<div className="shimmer h-4 w-32"></div>
<div className="shimmer h-3 w-16"></div>
<div className="flex-1"></div>
<div className="shimmer h-3 w-48"></div>
</div>
))}
</div>
) : filtered.length === 0 ? (
<p className="text-xs text-center py-8" style={{ color: 'var(--text-tertiary)' }}>No packages found</p>
) : (
<div className="card overflow-hidden">
{filtered.map((pkg, i) => (
<div key={`${pkg.source}-${pkg.name}`}
className="flex items-center gap-3 px-3 py-2 text-xs cursor-pointer hover:bg-[var(--bg-card-hover)] transition-colors"
style={{ borderBottom: i < filtered.length - 1 ? '1px solid var(--border-primary)' : 'none' }}
onClick={() => window.location.href = `/package/${pkg.name}`}>
<span className="font-semibold w-48 truncate" style={{ color: 'var(--text-primary)' }}>{pkg.name}</span>
<span className="font-mono text-[10px] w-32 truncate" style={{ color: 'var(--text-tertiary)' }}>{pkg.version}</span>
<span className="flex-1 truncate text-[11px]" style={{ color: 'var(--text-secondary)' }}>
{pkg.description || '—'}
</span>
<span className={`badge ${pkg.source === 'aur' ? 'badge-aur' : 'badge-pacman'}`}>
{pkg.source === 'aur' ? 'AUR' : 'pacman'}
</span>
</div>
))}
</div>
)
)}
</div> </div>
); );
} }
frontend/src/pages/PackageView.jsx
+78 -87
View File
@@ -62,10 +62,10 @@ export default function PackageView() {
if (error && !pkg) { if (error && !pkg) {
return ( return (
<div className="animate-slide-up"> <div className="animate-slide-up max-w-2xl">
<button onClick={() => navigate(-1)} className="btn btn-secondary mb-6"><ArrowLeft size={15} /> Back</button> <button onClick={() => navigate(-1)} className="btn btn-secondary mb-4"><ArrowLeft size={13} /> Back</button>
<div className="rounded-xl p-6 text-sm" style={{ background: 'var(--red-muted)', color: 'var(--red)', border: '1px solid rgba(239,68,68,0.2)' }}> <div className="rounded-lg p-4 text-xs" style={{ background: 'var(--red-muted)', color: 'var(--red)', border: '1px solid rgba(248,113,113,0.15)' }}>
<p className="font-semibold mb-1">Package not found</p> <p className="font-semibold mb-0.5">Package not found</p>
<p>{error}</p> <p>{error}</p>
</div> </div>
</div> </div>
@@ -78,35 +78,36 @@ export default function PackageView() {
: 'var(--green)'; : 'var(--green)';
return ( return (
<div className="animate-slide-up max-w-4xl"> <div className="animate-slide-up max-w-3xl flex flex-col gap-4">
<button onClick={() => navigate(-1)} className="btn btn-secondary mb-6"><ArrowLeft size={15} /> Back</button> <div>
<button onClick={() => navigate(-1)} className="btn btn-secondary mb-3"><ArrowLeft size={13} /> Back</button>
</div>
{error && ( {error && (
<div className="rounded-xl p-4 mb-6 text-sm" style={{ background: 'var(--red-muted)', color: 'var(--red)', border: '1px solid rgba(239,68,68,0.2)' }}> <div className="rounded-lg p-3 text-xs" style={{ background: 'var(--red-muted)', color: 'var(--red)', border: '1px solid rgba(248,113,113,0.15)' }}>
{error} {error}
</div> </div>
)} )}
{acting && ( {acting && (
<div className="card p-5 mb-6" style={{ borderColor: 'rgba(2,132,199,0.3)' }}> <div className="card p-4" style={{ borderColor: 'var(--border-glow)' }}>
<div className="flex items-center gap-2 mb-3 text-sm font-semibold" style={{ color: 'var(--accent)' }}> <div className="flex items-center gap-2 mb-2 text-xs font-semibold" style={{ color: 'var(--accent)' }}>
<div className="spinner" style={{ width: 16, height: 16, borderWidth: 2 }}></div> <div className="spinner" style={{ width: 12, height: 12, borderWidth: 1.5 }}></div>
Working... Working...
</div> </div>
<pre className="p-3 rounded-lg font-mono text-xs max-h-48 overflow-auto whitespace-pre-wrap" <pre className="p-3 rounded font-mono text-[10px] max-h-36 overflow-auto whitespace-pre-wrap"
style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)', color: 'var(--text-secondary)' }}> style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)', color: 'var(--text-secondary)' }}>
{log} {log}
</pre> </pre>
</div> </div>
)} )}
{/* ═══ Main Info Card ═══ */} {/* Main Info Card */}
<div className="card p-6 md:p-8 mb-6"> <div className="card p-5">
<div className="flex flex-col md:flex-row gap-6"> <div className="flex flex-col md:flex-row gap-5">
{/* Left */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex flex-wrap items-center gap-3 mb-3"> <div className="flex flex-wrap items-center gap-2 mb-2">
<h1 className="text-2xl md:text-3xl font-extrabold" style={{ letterSpacing: '-0.03em', color: 'var(--text-primary)' }}> <h1 className="text-xl font-bold leading-tight" style={{ letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>
{pkg.name} {pkg.name}
</h1> </h1>
<span className={`badge ${pkg.source === 'aur' ? 'badge-aur' : 'badge-pacman'}`}> <span className={`badge ${pkg.source === 'aur' ? 'badge-aur' : 'badge-pacman'}`}>
@@ -115,17 +116,16 @@ export default function PackageView() {
{pkg.installed && <span className="badge badge-installed">Installed</span>} {pkg.installed && <span className="badge badge-installed">Installed</span>}
{pkg.out_of_date && ( {pkg.out_of_date && (
<span className="badge" style={{ background: 'var(--amber-muted)', color: 'var(--amber)' }}> <span className="badge" style={{ background: 'var(--amber-muted)', color: 'var(--amber)' }}>
<AlertTriangle size={11} className="mr-1" /> Out of Date <AlertTriangle size={10} className="mr-1" /> Out of Date
</span> </span>
)} )}
</div> </div>
<p className="text-sm leading-relaxed mb-6" style={{ color: 'var(--text-secondary)' }}> <p className="text-xs leading-relaxed mb-4" style={{ color: 'var(--text-secondary)' }}>
{pkg.description || 'No description available.'} {pkg.description || 'No description available.'}
</p> </p>
{/* Meta grid */} <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
<MetaBox label="Version" value={pkg.version} mono /> <MetaBox label="Version" value={pkg.version} mono />
{pkg.source === 'aur' ? ( {pkg.source === 'aur' ? (
<> <>
@@ -143,78 +143,70 @@ export default function PackageView() {
</div> </div>
</div> </div>
{/* Right — Actions */} {/* Action column */}
<div className="flex flex-col gap-3 md:w-52 shrink-0"> <div className="flex flex-col gap-2 md:w-44 shrink-0 justify-center">
{pkg.installed ? ( {pkg.installed ? (
<button onClick={remove} disabled={acting} className="btn btn-danger w-full py-3"> <button onClick={remove} disabled={acting} className="btn btn-danger w-full py-2">
<Trash2 size={15} /> Uninstall <Trash2 size={13} /> Uninstall
</button> </button>
) : ( ) : (
<button onClick={install} disabled={acting} className="btn btn-primary w-full py-3"> <button onClick={install} disabled={acting} className="btn btn-primary w-full py-2">
<Download size={15} /> Install <Download size={13} /> Install
</button> </button>
)} )}
{pkg.url && ( {pkg.url && (
<a href={pkg.url} target="_blank" rel="noopener noreferrer" <a href={pkg.url} target="_blank" rel="noopener noreferrer"
className="btn btn-secondary w-full py-3 no-underline text-center"> className="btn btn-secondary w-full py-2 no-underline text-center justify-center flex items-center gap-1.5">
<Globe size={15} /> Website <ExternalLink size={11} /> <Globe size={13} /> Website <ExternalLink size={10} />
</a> </a>
)} )}
</div> </div>
</div> </div>
</div> </div>
{/* ═══ Security Scan (AUR only) ═══ */} {/* Security Analysis */}
{pkg.source === 'aur' && ( {pkg.source === 'aur' && (
<div className="card p-6 mb-6"> <div className="card p-4">
<h2 className="font-bold text-sm flex items-center gap-2 mb-5 pb-3" <h3 className="font-bold text-xs flex items-center gap-1.5 mb-3 pb-2"
style={{ borderBottom: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}> style={{ borderBottom: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}>
<Shield size={17} style={{ color: 'var(--accent)' }} /> <Shield size={14} style={{ color: 'var(--accent)' }} />
Security Scan Security Scan (AUR PKGBUILD)
</h2> </h3>
{scanning ? ( {scanning ? (
<LoadingSpinner size="sm" text="Scanning PKGBUILD..." /> <LoadingSpinner size="sm" text="Scanning PKGBUILD..." />
) : scan?.scanned ? ( ) : scan?.scanned ? (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-3">
{/* Score bar */} <div className="flex items-center justify-between p-3 rounded-lg"
<div className="flex items-center justify-between p-4 rounded-xl"
style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}> style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}>
<div className="flex items-center gap-3"> <div className="flex items-center gap-2">
{scan.risk_score >= 70 ? <ShieldAlert size={22} style={{ color: riskColor }} /> <span className="font-semibold text-xs capitalize" style={{ color: riskColor }}>
: scan.risk_score >= 40 ? <ShieldAlert size={22} style={{ color: riskColor }} /> {scan.risk_level} Risk
: <ShieldCheck size={22} style={{ color: riskColor }} />} </span>
<div>
<p className="font-semibold text-sm capitalize" style={{ color: 'var(--text-primary)' }}>
{scan.risk_level}
</p>
<p className="text-xs" style={{ color: 'var(--text-tertiary)' }}>PKGBUILD analysis</p>
</div>
</div> </div>
<div className="text-right"> <div className="text-right">
<span className="text-2xl font-extrabold" style={{ color: riskColor }}>{scan.risk_score}</span> <span className="text-lg font-bold" style={{ color: riskColor }}>{scan.risk_score}</span>
<span className="text-xs" style={{ color: 'var(--text-tertiary)' }}>/100</span> <span className="text-[10px]" style={{ color: 'var(--text-tertiary)' }}>/100</span>
</div> </div>
</div> </div>
{/* Findings */}
{scan.findings.filter(f => f.severity !== 'info').length > 0 ? ( {scan.findings.filter(f => f.severity !== 'info').length > 0 ? (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-1.5">
{scan.findings.filter(f => f.severity !== 'info').map((f, i) => ( {scan.findings.filter(f => f.severity !== 'info').map((f, i) => (
<div key={i} className="p-3 rounded-xl text-xs flex flex-col gap-1" <div key={i} className="p-2.5 rounded-lg text-[11px] flex flex-col gap-1"
style={{ style={{
background: f.severity === 'critical' ? 'var(--red-muted)' : 'var(--amber-muted)', background: f.severity === 'critical' ? 'var(--red-muted)' : 'var(--amber-muted)',
border: `1px solid ${f.severity === 'critical' ? 'rgba(239,68,68,0.15)' : 'rgba(245,158,11,0.15)'}`, border: `1px solid ${f.severity === 'critical' ? 'rgba(248,113,113,0.15)' : 'rgba(251,191,36,0.15)'}`,
color: f.severity === 'critical' ? 'var(--red)' : 'var(--amber)', color: f.severity === 'critical' ? 'var(--red)' : 'var(--amber)',
}}> }}>
<div className="flex justify-between"> <div className="flex justify-between font-bold uppercase text-[9px] tracking-wide">
<span className="font-bold uppercase">{f.severity}</span> <span>{f.severity}</span>
{f.line_number > 0 && <span className="font-mono opacity-70">L{f.line_number}</span>} {f.line_number > 0 && <span className="opacity-70">Line {f.line_number}</span>}
</div> </div>
<p style={{ color: 'var(--text-primary)' }}>{f.description}</p> <p style={{ color: 'var(--text-primary)' }}>{f.description}</p>
{f.line_content && ( {f.line_content && (
<pre className="p-2 rounded-lg font-mono mt-1 overflow-x-auto" <pre className="p-1.5 rounded font-mono text-[9px] mt-1 overflow-x-auto"
style={{ background: 'var(--bg-primary)', color: 'var(--text-tertiary)', fontSize: '0.65rem' }}> style={{ background: 'var(--bg-primary)', color: 'var(--text-tertiary)' }}>
{f.line_content} {f.line_content}
</pre> </pre>
)} )}
@@ -222,45 +214,45 @@ export default function PackageView() {
))} ))}
</div> </div>
) : ( ) : (
<div className="p-4 rounded-xl text-sm text-center" <div className="p-3 rounded-lg text-xs text-center font-medium"
style={{ background: 'var(--green-muted)', color: 'var(--green)', border: '1px solid rgba(34,197,94,0.15)' }}> style={{ background: 'var(--green-muted)', color: 'var(--green)', border: '1px solid rgba(52,211,153,0.15)' }}>
No security issues detected. Safe to install. No security issues found in static PKGBUILD check.
</div> </div>
)} )}
</div> </div>
) : ( ) : (
<p className="text-xs text-center py-4" style={{ color: 'var(--text-tertiary)' }}> <p className="text-[11px] text-center py-2" style={{ color: 'var(--text-tertiary)' }}>
Scan not available for this package. Scan not available.
</p> </p>
)} )}
</div> </div>
)} )}
{/* ═══ Metadata ═══ */} {/* Metadata Detail Row Panels */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-5"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="card p-6"> <div className="card p-4">
<h3 className="font-bold text-sm mb-4 flex items-center gap-2 pb-3" <h3 className="font-bold text-xs mb-3 flex items-center gap-1.5 pb-2"
style={{ borderBottom: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}> style={{ borderBottom: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}>
<User size={15} /> Metadata <User size={13} /> Package Metadata
</h3> </h3>
<div className="flex flex-col gap-3 text-xs"> <div className="flex flex-col gap-2 text-[11px]">
{pkg.maintainer && <MetaRow label="Maintainer" value={pkg.maintainer} />} {pkg.maintainer && <MetaRow label="Maintainer" value={pkg.maintainer} />}
{pkg.last_modified > 0 && <MetaRow label="Modified" value={new Date(pkg.last_modified * 1000).toLocaleDateString()} />} {pkg.last_modified > 0 && <MetaRow label="Last Modified" value={new Date(pkg.last_modified * 1000).toLocaleDateString()} />}
{pkg.first_submitted > 0 && <MetaRow label="Submitted" value={new Date(pkg.first_submitted * 1000).toLocaleDateString()} />} {pkg.first_submitted > 0 && <MetaRow label="First Submitted" value={new Date(pkg.first_submitted * 1000).toLocaleDateString()} />}
{pkg.package_base && <MetaRow label="Base" value={pkg.package_base} />} {pkg.package_base && <MetaRow label="Package Base" value={pkg.package_base} />}
</div> </div>
</div> </div>
<div className="card p-6"> <div className="card p-4">
<h3 className="font-bold text-sm mb-4 flex items-center gap-2 pb-3" <h3 className="font-bold text-xs mb-3 flex items-center gap-1.5 pb-2"
style={{ borderBottom: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}> style={{ borderBottom: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}>
<Package size={15} /> Dependencies <Package size={13} /> Dependency Handling
</h3> </h3>
<div className="p-4 rounded-xl text-xs flex items-start gap-3" <div className="p-3 rounded-lg text-[11px] flex items-start gap-2"
style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}> style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}>
<Clock size={14} style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 1 }} /> <Clock size={13} style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 1 }} />
<span style={{ color: 'var(--text-secondary)' }}> <span style={{ color: 'var(--text-secondary)', lineHeight: 1.4 }}>
Dependencies are automatically resolved by pacman/yay during installation. Dependencies are automatically analyzed, resolved, and processed by standard package management operations during final deployment.
</span> </span>
</div> </div>
</div> </div>
@@ -269,23 +261,22 @@ export default function PackageView() {
); );
} }
/* ── Helper components ── */
function MetaBox({ label, value, mono, color, span }) { function MetaBox({ label, value, mono, color, span }) {
return ( return (
<div className={`p-3 rounded-xl ${span === 2 ? 'col-span-2' : ''}`} <div className={`p-2 rounded-lg ${span === 2 ? 'col-span-2' : ''}`}
style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}> style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}>
<p className="text-[10px] uppercase font-bold tracking-wide mb-0.5" style={{ color: 'var(--text-tertiary)' }}>{label}</p> <p className="text-[9px] uppercase font-bold tracking-wide mb-0.5" style={{ color: 'var(--text-tertiary)' }}>{label}</p>
<p className={`text-sm font-semibold truncate ${mono ? 'font-mono' : ''}`} <p className={`text-xs font-semibold truncate ${mono ? 'font-mono' : ''}`}
style={{ color: color || 'var(--text-primary)' }}>{value}</p> style={{ color: color || 'var(--text-primary)' }}>{value || '—'}</p>
</div> </div>
); );
} }
function MetaRow({ label, value }) { function MetaRow({ label, value }) {
return ( return (
<div className="flex justify-between items-center"> <div className="flex justify-between items-center py-0.5">
<span style={{ color: 'var(--text-tertiary)' }}>{label}</span> <span style={{ color: 'var(--text-tertiary)' }}>{label}</span>
<span className="font-medium" style={{ color: 'var(--text-primary)' }}>{value}</span> <span className="font-semibold text-right" style={{ color: 'var(--text-primary)' }}>{value}</span>
</div> </div>
); );
} }
frontend/src/pages/Search.jsx
+22 -29
View File
@@ -18,17 +18,12 @@ export default function SearchPage() {
}, [query, source]); }, [query, source]);
async function performSearch(q, s) { async function performSearch(q, s) {
setLoading(true); setLoading(true); setError(null);
setError(null);
try { try {
const data = await api.searchPackages(q, s); const data = await api.searchPackages(q, s);
setResults(data.results || []); setResults(data.results || []);
} catch (err) { } catch (err) { setError(err.message); setResults([]); }
setError(err.message); finally { setLoading(false); }
setResults([]);
} finally {
setLoading(false);
}
} }
const tabs = [ const tabs = [
@@ -38,44 +33,42 @@ export default function SearchPage() {
]; ];
return ( return (
<div className="animate-slide-up"> <div className="animate-slide-up flex flex-col gap-4">
{/* Header */} {/* Header */}
<div className="mb-8"> <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-3">
<div>
<h1 className="page-title">Search Results</h1> <h1 className="page-title">Search Results</h1>
<p className="page-subtitle"> <p className="page-subtitle">
{query ? <>Showing results for <strong style={{ color: 'var(--text-primary)' }}>"{query}"</strong></> : 'Enter a query to search packages'} {query ? <>Results for <strong style={{ color: 'var(--text-primary)' }}>"{query}"</strong></> : 'Enter a query to search'}
</p> </p>
</div> </div>
{query && ( {query && (
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8"> <div className="flex items-center gap-3">
{/* Source tabs */} <div className="flex p-0.5 rounded-lg" style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}>
<div className="flex p-1 rounded-xl" style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}>
{tabs.map((tab) => ( {tabs.map((tab) => (
<button <button
key={tab.id} key={tab.id}
onClick={() => setSource(tab.id)} onClick={() => setSource(tab.id)}
className="px-5 py-2 text-xs font-semibold rounded-lg transition-all" className="px-3 py-1 text-[11px] font-semibold rounded-md transition-all"
style={{ style={{
background: source === tab.id ? 'var(--accent)' : 'transparent', background: source === tab.id ? 'var(--accent)' : 'transparent',
color: source === tab.id ? 'white' : 'var(--text-secondary)', color: source === tab.id ? '#fff' : 'var(--text-tertiary)',
}} }}
> >
{tab.label} {tab.label}
</button> </button>
))} ))}
</div> </div>
<span className="flex items-center gap-1.5 text-[11px]" style={{ color: 'var(--text-tertiary)' }}>
<div className="flex items-center gap-2 text-xs" style={{ color: 'var(--text-tertiary)' }}> <Filter size={11} /> {results.length} pkg{results.length !== 1 ? 's' : ''}
<Filter size={13} /> </span>
{results.length} package{results.length !== 1 ? 's' : ''}
</div>
</div> </div>
)} )}
</div>
{error && ( {error && (
<div className="rounded-xl p-4 mb-6 text-sm font-medium" <div className="rounded-lg p-3 text-xs font-medium"
style={{ background: 'var(--red-muted)', color: 'var(--red)', border: '1px solid rgba(239,68,68,0.2)' }}> style={{ background: 'var(--red-muted)', color: 'var(--red)', border: '1px solid rgba(248,113,113,0.15)' }}>
{error} {error}
</div> </div>
)} )}
@@ -83,13 +76,13 @@ export default function SearchPage() {
{query ? ( {query ? (
<PackageGrid packages={results} loading={loading} /> <PackageGrid packages={results} loading={loading} />
) : ( ) : (
<div className="flex flex-col items-center justify-center py-24" style={{ color: 'var(--text-tertiary)' }}> <div className="flex flex-col items-center justify-center py-14" style={{ color: 'var(--text-tertiary)' }}>
<div className="w-16 h-16 rounded-2xl flex items-center justify-center mb-5" <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}> style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}>
<Search size={28} /> <Search size={18} />
</div> </div>
<p className="text-base font-semibold mb-1" style={{ color: 'var(--text-secondary)' }}>Start searching</p> <p className="text-sm font-medium mb-0.5" style={{ color: 'var(--text-secondary)' }}>Start searching</p>
<p className="text-sm">Type a package name or keyword above</p> <p className="text-xs">Type a package name above</p>
</div> </div>
)} )}
</div> </div>
frontend/src/pages/Settings.jsx
+31 -31
View File
@@ -27,44 +27,44 @@ export default function Settings() {
} }
return ( return (
<div className="animate-slide-up max-w-2xl"> <div className="animate-slide-up max-w-xl">
<div className="mb-8"> <div className="mb-5">
<h1 className="page-title">Settings</h1> <h1 className="page-title">Settings</h1>
<p className="page-subtitle">Configure ArchStore preferences</p> <p className="page-subtitle">Configure ArchStore preferences</p>
</div> </div>
{msg && ( {msg && (
<div className="rounded-xl p-4 mb-6 flex items-center gap-3 text-sm font-medium" <div className="rounded-lg p-3 mb-4 flex items-center gap-2 text-xs font-medium"
style={{ style={{
background: msg.ok ? 'var(--green-muted)' : 'var(--red-muted)', background: msg.ok ? 'var(--green-muted)' : 'var(--red-muted)',
color: msg.ok ? 'var(--green)' : 'var(--red)', color: msg.ok ? 'var(--green)' : 'var(--red)',
border: `1px solid ${msg.ok ? 'rgba(34,197,94,0.2)' : 'rgba(239,68,68,0.2)'}`, border: `1px solid ${msg.ok ? 'rgba(52,211,153,0.2)' : 'rgba(248,113,113,0.2)'}`,
}}> }}>
<CheckCircle2 size={16} /> <CheckCircle2 size={14} />
{msg.text} {msg.text}
</div> </div>
)} )}
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-4">
{/* AUR Helper */} {/* AUR Helper */}
<div className="card p-6"> <div className="card p-4">
<h3 className="font-semibold text-sm mb-1 flex items-center gap-2" style={{ color: 'var(--text-primary)' }}> <h3 className="font-semibold text-xs mb-1 flex items-center gap-1.5" style={{ color: 'var(--text-primary)' }}>
<Cpu size={16} style={{ color: 'var(--accent)' }} /> <Cpu size={14} style={{ color: 'var(--accent)' }} />
AUR Helper AUR Helper
</h3> </h3>
<p className="text-xs mb-4" style={{ color: 'var(--text-tertiary)' }}> <p className="text-[11px] mb-3" style={{ color: 'var(--text-tertiary)' }}>
The helper used to build and install AUR packages. The helper tool utilized to build and install AUR packages.
</p> </p>
<div className="flex gap-3"> <div className="flex gap-2">
{['yay', 'paru'].map((t) => ( {['yay', 'paru'].map((t) => (
<div key={t} className="flex-1 p-3 rounded-xl text-center text-sm font-semibold transition-all cursor-default" <div key={t} className="flex-1 p-2.5 rounded-lg text-center text-xs font-semibold transition-all cursor-default flex items-center justify-center gap-2"
style={{ style={{
background: t === 'yay' ? 'var(--accent-muted)' : 'var(--bg-tertiary)', background: t === 'yay' ? 'var(--accent-muted)' : 'var(--bg-tertiary)',
color: t === 'yay' ? 'var(--accent)' : 'var(--text-tertiary)', color: t === 'yay' ? 'var(--accent)' : 'var(--text-tertiary)',
border: `1px solid ${t === 'yay' ? 'rgba(2,132,199,0.2)' : 'var(--border-primary)'}`, border: `1px solid ${t === 'yay' ? 'rgba(56,189,248,0.2)' : 'var(--border-primary)'}`,
}}> }}>
{t} {t}
{t === 'yay' && <span className="ml-2 text-[10px] font-bold px-1.5 py-0.5 rounded-full" {t === 'yay' && <span className="text-[9px] font-bold px-1.5 py-0.5 rounded-full"
style={{ background: 'var(--green-muted)', color: 'var(--green)' }}>Active</span>} style={{ background: 'var(--green-muted)', color: 'var(--green)' }}>Active</span>}
</div> </div>
))} ))}
@@ -72,36 +72,36 @@ export default function Settings() {
</div> </div>
{/* Cache */} {/* Cache */}
<div className="card p-6"> <div className="card p-4">
<h3 className="font-semibold text-sm mb-1 flex items-center gap-2" style={{ color: 'var(--text-primary)' }}> <h3 className="font-semibold text-xs mb-1 flex items-center gap-1.5" style={{ color: 'var(--text-primary)' }}>
<Database size={16} style={{ color: 'var(--accent)' }} /> <Database size={14} style={{ color: 'var(--accent)' }} />
Cache Cache
</h3> </h3>
<p className="text-xs mb-4" style={{ color: 'var(--text-tertiary)' }}> <p className="text-[11px] mb-3" style={{ color: 'var(--text-tertiary)' }}>
Search results and metadata are cached locally for 15 minutes. Search results and package metadata are cached locally to reduce API overhead.
</p> </p>
<button onClick={clearCache} disabled={clearing} className="btn btn-danger text-xs"> <button onClick={clearCache} disabled={clearing} className="btn btn-danger text-xs px-3 py-1.5">
{clearing ? 'Clearing...' : 'Clear Cache'} {clearing ? 'Clearing...' : 'Clear Cache'}
</button> </button>
</div> </div>
{/* Health */} {/* Health */}
<div className="card p-6"> <div className="card p-4">
<h3 className="font-semibold text-sm mb-4 flex items-center gap-2" style={{ color: 'var(--text-primary)' }}> <h3 className="font-semibold text-xs mb-3 flex items-center gap-1.5" style={{ color: 'var(--text-primary)' }}>
<AlertCircle size={16} style={{ color: 'var(--accent)' }} /> <AlertCircle size={14} style={{ color: 'var(--accent)' }} />
Backend Status Backend Status
</h3> </h3>
<div className="flex items-center justify-between p-4 rounded-xl font-mono text-xs" <div className="flex items-center justify-between p-3 rounded-lg font-mono text-[11px]"
style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}> style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}>
<span style={{ color: 'var(--text-tertiary)' }}>FastAPI Server</span> <span style={{ color: 'var(--text-tertiary)' }}>FastAPI Server</span>
{health ? ( {health ? (
health.status === 'healthy' ? ( health.status === 'healthy' ? (
<span className="flex items-center gap-2 font-semibold" style={{ color: 'var(--green)' }}> <span className="flex items-center gap-1.5 font-semibold" style={{ color: 'var(--green)' }}>
<span className="w-2 h-2 rounded-full" style={{ background: 'var(--green)' }}></span> Online <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--green)' }}></span> Online
</span> </span>
) : ( ) : (
<span className="flex items-center gap-2 font-semibold" style={{ color: 'var(--red)' }}> <span className="flex items-center gap-1.5 font-semibold" style={{ color: 'var(--red)' }}>
<span className="w-2 h-2 rounded-full" style={{ background: 'var(--red)' }}></span> Offline <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--red)' }}></span> Offline
</span> </span>
) )
) : ( ) : (
@@ -111,9 +111,9 @@ export default function Settings() {
</div> </div>
{/* Footer */} {/* Footer */}
<div className="text-center py-6 text-xs" style={{ color: 'var(--text-tertiary)' }}> <div className="text-center py-4 text-[11px] flex flex-col items-center gap-0.5" style={{ color: 'var(--text-tertiary)' }}>
<span className="flex items-center justify-center gap-1"> <span className="flex items-center justify-center gap-1">
Made with <Heart size={11} style={{ color: 'var(--red)' }} /> for Arch Linux Made with <Heart size={10} style={{ color: 'var(--red)', fill: 'var(--red)' }} /> for Arch Linux
</span> </span>
<span>ArchStore v1.0.0</span> <span>ArchStore v1.0.0</span>
</div> </div>
frontend/src/pages/Updates.jsx
+41 -38
View File
@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import api from '../api/client'; import api from '../api/client';
import LoadingSpinner from '../components/LoadingSpinner'; import LoadingSpinner from '../components/LoadingSpinner';
import { RefreshCw, ArrowUpCircle, Info, CheckCircle2 } from 'lucide-react'; import { RefreshCw, ArrowUpCircle, Info, CheckCircle2, ArrowRight } from 'lucide-react';
export default function Updates() { export default function Updates() {
const [updates, setUpdates] = useState([]); const [updates, setUpdates] = useState([]);
@@ -32,88 +32,91 @@ export default function Updates() {
} }
return ( return (
<div className="animate-slide-up"> <div className="animate-slide-up flex flex-col gap-4">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8"> {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div> <div>
<h1 className="page-title">System Updates</h1> <h1 className="page-title">System Updates</h1>
<p className="page-subtitle">Keep your system and AUR packages current</p> <p className="page-subtitle">Keep your system and AUR packages current</p>
</div> </div>
<div className="flex gap-3"> <div className="flex gap-2">
<button onClick={check} disabled={loading || updating} className="btn btn-secondary"> <button onClick={check} disabled={loading || updating} className="btn btn-secondary text-xs">
<RefreshCw size={15} className={loading ? 'animate-spin' : ''} /> Check <RefreshCw size={12} className={loading ? 'animate-spin' : ''} /> Check
</button> </button>
{updates.length > 0 && ( {updates.length > 0 && (
<button onClick={handleUpdate} disabled={updating} className="btn btn-primary"> <button onClick={handleUpdate} disabled={updating} className="btn btn-primary text-xs">
<ArrowUpCircle size={15} /> Update All <ArrowUpCircle size={12} /> Update All
</button> </button>
)} )}
</div> </div>
</div> </div>
{error && ( {error && (
<div className="rounded-xl p-4 mb-6 text-sm font-medium" <div className="rounded-lg p-3 text-xs font-medium"
style={{ background: 'var(--red-muted)', color: 'var(--red)', border: '1px solid rgba(239,68,68,0.2)' }}> style={{ background: 'var(--red-muted)', color: 'var(--red)', border: '1px solid rgba(248,113,113,0.15)' }}>
{error} {error}
</div> </div>
)} )}
{/* Upgrade Log */}
{updating && ( {updating && (
<div className="card p-6 mb-8" style={{ borderColor: 'rgba(2,132,199,0.3)' }}> <div className="card p-4" style={{ borderColor: 'var(--border-glow)' }}>
<h3 className="font-semibold mb-3 flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 mb-2 text-xs font-semibold" style={{ color: 'var(--accent)' }}>
<RefreshCw size={16} className="animate-spin" style={{ color: 'var(--accent)' }} /> <RefreshCw size={12} className="animate-spin" /> Upgrading...
Upgrading... </div>
</h3> <pre className="p-3 rounded-md font-mono text-[11px] overflow-x-auto max-h-48 whitespace-pre-wrap"
<pre className="p-4 rounded-lg font-mono text-xs overflow-x-auto max-h-64 whitespace-pre-wrap"
style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)', color: 'var(--text-secondary)' }}> style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-primary)', color: 'var(--text-secondary)' }}>
{log} {log}
</pre> </pre>
</div> </div>
)} )}
{/* Content */}
{loading ? ( {loading ? (
<LoadingSpinner text="Checking for updates..." /> <LoadingSpinner text="Checking for updates..." />
) : updates.length === 0 ? ( ) : updates.length === 0 ? (
<div className="flex flex-col items-center justify-center py-24" style={{ color: 'var(--text-tertiary)' }}> <div className="flex flex-col items-center justify-center py-14" style={{ color: 'var(--text-tertiary)' }}>
<div className="w-16 h-16 rounded-2xl flex items-center justify-center mb-5" <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
style={{ background: 'var(--green-muted)', border: '1px solid rgba(34,197,94,0.2)' }}> style={{ background: 'var(--green-muted)', border: '1px solid rgba(52,211,153,0.15)' }}>
<CheckCircle2 size={28} style={{ color: 'var(--green)' }} /> <CheckCircle2 size={18} style={{ color: 'var(--green)' }} />
</div> </div>
<p className="text-base font-semibold mb-1" style={{ color: 'var(--text-secondary)' }}>All up to date</p> <p className="text-sm font-medium mb-0.5" style={{ color: 'var(--text-secondary)' }}>All up to date</p>
<p className="text-sm">No updates available right now</p> <p className="text-xs">No updates available right now</p>
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-3">
{/* Info banner */}
<div className="rounded-lg p-3 flex items-center gap-3 text-xs"
style={{ background: 'var(--accent-muted)', border: '1px solid var(--border-glow)' }}>
<Info size={14} style={{ color: 'var(--accent)', flexShrink: 0 }} />
<div> <div>
<div className="rounded-xl p-4 mb-6 flex items-start gap-3 text-sm" <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>
style={{ background: 'var(--accent-muted)', border: '1px solid rgba(2,132,199,0.2)' }}> {updates.length} update{updates.length !== 1 ? 's' : ''} available
<Info size={18} style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }} /> </span>
<div> <span className="ml-2" style={{ color: 'var(--text-tertiary)' }}>
<p className="font-semibold" style={{ color: 'var(--text-primary)' }}>{updates.length} update{updates.length !== 1 ? 's' : ''} available</p> Root privileges required.
<p className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)' }}>System administrator privileges required to install.</p> </span>
</div> </div>
</div> </div>
{/* Update list */}
<div className="card overflow-hidden"> <div className="card overflow-hidden">
{updates.map((u, i) => ( {updates.map((u, i) => (
<div key={`${u.source}-${u.name}`} <div key={`${u.source}-${u.name}`}
className="update-row" className="update-row"
style={{ style={{ borderBottom: i < updates.length - 1 ? '1px solid var(--border-primary)' : 'none' }}>
borderBottom: i < updates.length - 1 ? '1px solid var(--border-primary)' : 'none', <div className="flex items-center gap-3 min-w-0">
}} <span className="font-semibold text-xs truncate" style={{ color: 'var(--text-primary)' }}>{u.name}</span>
>
<div>
<div className="flex items-center gap-2 mb-1">
<span className="font-semibold text-sm" style={{ color: 'var(--text-primary)' }}>{u.name}</span>
<span className={`badge ${u.source === 'aur' ? 'badge-aur' : 'badge-pacman'}`}> <span className={`badge ${u.source === 'aur' ? 'badge-aur' : 'badge-pacman'}`}>
{u.source === 'aur' ? 'AUR' : 'pacman'} {u.source === 'aur' ? 'AUR' : 'pacman'}
</span> </span>
</div> </div>
<div className="flex items-center gap-2 text-xs font-mono" style={{ color: 'var(--text-tertiary)' }}> <div className="flex items-center gap-2 text-[11px] font-mono shrink-0" style={{ color: 'var(--text-tertiary)' }}>
<span>{u.current_version}</span> <span>{u.current_version}</span>
<span>→</span> <ArrowRight size={10} style={{ color: 'var(--text-tertiary)' }} />
<span style={{ color: 'var(--green)', fontWeight: 600 }}>{u.new_version}</span> <span style={{ color: 'var(--green)', fontWeight: 600 }}>{u.new_version}</span>
</div> </div>
</div> </div>
</div>
))} ))}
</div> </div>
</div> </div>