Ceratic/mystuff_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui2

Browse Source
This commit is contained in:
Lars Behrends
2026-05-23 00:54:01 +02:00
parent 83617f75e4
commit d61472f069
15 changed files with 281 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+77 -75
View File
@@ -420,7 +420,7 @@ function AppContent() {
}, [location.pathname, searchParams]);
return (
<div className="min-h-screen bg-[#0a0c10] font-sans selection:bg-[#e8466c]/20 selection:text-[#e8466c] flex">
<div className="min-h-screen bg-background font-sans selection:bg-[#e8466c]/20 selection:text-[#e8466c] flex">
<SidebarProvider defaultOpen={true}>
<AppSidebar
enabledCategories={enabledCategories}
@@ -432,7 +432,7 @@ function AppContent() {
<main className="flex-1 flex flex-col relative">
{/* Header with Search and Add Media */}
<header className="sticky top-0 z-30 bg-[#0a0c10]/80 backdrop-blur-xl border-b border-white/5 px-6 py-4">
<header className="sticky top-0 z-30 bg-background/80 backdrop-blur-xl border-b border-border px-6 py-4">
<div className="flex items-center justify-between gap-4 max-w-[1920px] mx-auto">
{/* Search Bar */}
<div className="flex-1 max-w-xl">
@@ -443,25 +443,25 @@ function AppContent() {
placeholder="Search library..."
value={searchQuery}
onChange={(e) => handleSearch(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-[#1a1d26] border-white/10 rounded-lg text-white placeholder:text-gray-500 focus:border-[#e8466c]/50 focus:ring-[#e8466c]/20"
className="w-full pl-10 pr-4 py-2 bg-muted/30 border-border rounded-lg text-foreground placeholder:text-muted-foreground focus:border-[#e8466c]/50 focus:ring-[#e8466c]/20"
/>
</div>
</div>
{/* View Toggle and Add Button */}
<div className="flex items-center gap-3">
<div className="flex items-center bg-[#1a1d26] rounded-lg p-1 border border-white/10">
<div className="flex items-center bg-muted/30 rounded-lg p-1 border border-border">
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded bg-white/10 text-white"
className="h-8 w-8 rounded bg-accent text-accent-foreground"
>
<LayoutGrid className="w-4 h-4" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded text-gray-400 hover:text-white hover:bg-white/5"
className="h-8 w-8 rounded text-muted-foreground hover:text-foreground hover:bg-accent"
>
<List className="w-4 h-4" />
</Button>
@@ -478,85 +478,87 @@ function AppContent() {
</div>
</header>
<LayoutGroup>
<Routes>
<Route path="/" element={
<DashboardView
mediaList={apiMedia.length > 0 ? apiMedia : [...MOCK_MEDIA, ...customMedia, DETAIL_MEDIA].filter(m => enabledCategories.includes(m.category))}
onMediaClick={handleMediaClick}
loading={mediaLoading}
/>
} />
<Route path="/browse" element={
<BrowseView
mediaList={searchQuery.trim() ? searchResultsMedia : allMedia}
onMediaClick={handleMediaClick}
activeCategory={activeCategory}
itemsPerPage={settings?.itemsPerPage}
gridItemSize={settings?.gridItemSize}
onGridItemSizeChange={handleGridItemSizeChange}
loading={mediaLoading}
searchResultsCast={searchQuery.trim() ? searchResultsCast : []}
onCastClick={handlePersonClick}
searchQuery={searchQuery}
/>
} />
<Route path="/:category" element={
<CategoryBrowseRoute
mediaList={filteredMedia}
onMediaClick={handleMediaClick}
itemsPerPage={settings?.itemsPerPage}
gridItemSize={settings?.gridItemSize}
onGridItemSizeChange={handleGridItemSizeChange}
loading={mediaLoading}
/>
} />
<Route path="/media/:id" element={
<MediaDetailRoute
allMedia={allMedia}
onPersonClick={handlePersonClick}
/>
} />
<Route path="/cast" element={
<CastView
onPersonClick={handlePersonClick}
enabledCategories={enabledCategories}
itemsPerPage={settings?.itemsPerPage}
/>
} />
<Route path="/cast/:id" element={
<CastDetailRoute />
} />
<Route path="/add" element={
<AddMediaView
activeCategory={activeCategory}
enabledCategories={enabledCategories}
onAddComplete={handleAddMedia}
/>
} />
<Route path="/import" element={
<ImporterView />
} />
<Route path="/settings" element={
<SettingsView onSettingsSaved={reloadSettings} />
} />
</Routes>
</LayoutGroup>
<div className="flex-1">
<LayoutGroup>
<Routes>
<Route path="/" element={
<DashboardView
mediaList={apiMedia.length > 0 ? apiMedia : [...MOCK_MEDIA, ...customMedia, DETAIL_MEDIA].filter(m => enabledCategories.includes(m.category))}
onMediaClick={handleMediaClick}
loading={mediaLoading}
/>
} />
<Route path="/browse" element={
<BrowseView
mediaList={searchQuery.trim() ? searchResultsMedia : allMedia}
onMediaClick={handleMediaClick}
activeCategory={activeCategory}
itemsPerPage={settings?.itemsPerPage}
gridItemSize={settings?.gridItemSize}
onGridItemSizeChange={handleGridItemSizeChange}
loading={mediaLoading}
searchResultsCast={searchQuery.trim() ? searchResultsCast : []}
onCastClick={handlePersonClick}
searchQuery={searchQuery}
/>
} />
<Route path="/:category" element={
<CategoryBrowseRoute
mediaList={filteredMedia}
onMediaClick={handleMediaClick}
itemsPerPage={settings?.itemsPerPage}
gridItemSize={settings?.gridItemSize}
onGridItemSizeChange={handleGridItemSizeChange}
loading={mediaLoading}
/>
} />
<Route path="/media/:id" element={
<MediaDetailRoute
allMedia={allMedia}
onPersonClick={handlePersonClick}
/>
} />
<Route path="/cast" element={
<CastView
onPersonClick={handlePersonClick}
enabledCategories={enabledCategories}
itemsPerPage={settings?.itemsPerPage}
/>
} />
<Route path="/cast/:id" element={
<CastDetailRoute />
} />
<Route path="/add" element={
<AddMediaView
activeCategory={activeCategory}
enabledCategories={enabledCategories}
onAddComplete={handleAddMedia}
/>
} />
<Route path="/import" element={
<ImporterView />
} />
<Route path="/settings" element={
<SettingsView onSettingsSaved={reloadSettings} />
} />
</Routes>
</LayoutGroup>
</div>
{/* Footer */}
<footer className="fixed bottom-0 left-64 right-0 py-4 px-6 border-t border-white/5 bg-[#0a0c10] z-40">
<footer className="mt-auto py-3 px-6 border-t border-border bg-background">
<div className="max-w-[1920px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-2 text-sm font-medium text-gray-500">
<div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
<span>{mediaCounts.all} total</span>
<span className="text-gray-700">•</span>
<span className="text-border-foreground">•</span>
<span className="text-blue-400">{mediaCounts.movies} Movies</span>
<span className="text-green-400">{mediaCounts.series} Series</span>
<span className="text-purple-400">{mediaCounts.games} Games</span>
<span className="text-red-400">{mediaCounts.adult} Adult</span>
<span className="text-gray-700">•</span>
<span className="text-border-foreground">•</span>
<span className="text-[#e8466c]">{mediaCounts.favorites} Favorites</span>
</div>
<p className="text-xs text-gray-600">
<p className="text-xs text-muted-foreground">
© 2026 MediaVault v1.0.0
</p>
</div>
src/components/AddMediaView.tsx
+30 -30
View File
@@ -207,7 +207,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
<div className="bg-card/50 backdrop-blur-sm rounded-3xl shadow-xl p-8 border border-border/50 max-w-[1600px] mx-auto">
<div className="flex items-center gap-4 mb-8">
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#6d28d9] to-[#8b5cf6] flex items-center justify-center shadow-lg shadow-[#6d28d9]/30">
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#e8466c] to-[#f47298] flex items-center justify-center shadow-lg shadow-[#e8466c]/30">
{getCategoryIcon(activeCategory)}
</div>
<div>
@@ -234,7 +234,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
{/* Basic Info Card */}
<div className="bg-muted/30 backdrop-blur-sm rounded-2xl p-6 border border-border/50">
<div className="flex items-center gap-3 mb-4">
<div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#6d28d9] shadow-sm">
<div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#e8466c] shadow-sm">
<FileText size={16} />
</div>
<h3 className="text-lg font-black text-foreground">Basic Information</h3>
@@ -247,7 +247,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.title}
onChange={e => setNewMedia(prev => ({ ...prev, title: e.target.value }))}
placeholder="e.g. Mob Psycho 100"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
required
/>
</div>
@@ -259,7 +259,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.year}
onChange={e => setNewMedia(prev => ({ ...prev, year: e.target.value }))}
placeholder="2024"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
<div className="grid gap-2">
@@ -268,7 +268,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
id="category"
value={newMedia.category}
onChange={e => setNewMedia(prev => ({ ...prev, category: e.target.value as MediaCategory }))}
className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9]/50 outline-none"
className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#e8466c]/50 outline-none"
>
{enabledCategories.map(cat => (
<option key={cat} value={cat}>{cat}</option>
@@ -283,7 +283,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
id="type"
value={newMedia.type}
onChange={e => setNewMedia(prev => ({ ...prev, type: e.target.value }))}
className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9]/50 outline-none"
className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#e8466c]/50 outline-none"
>
{newMedia.category === 'Music' ? (
<>
@@ -322,7 +322,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
id="status"
value={newMedia.status}
onChange={e => setNewMedia(prev => ({ ...prev, status: e.target.value }))}
className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9]/50 outline-none"
className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#e8466c]/50 outline-none"
>
<option value="Released">Released</option>
<option value="Ongoing">Ongoing</option>
@@ -343,7 +343,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
{/* Media Info Card */}
<div className="bg-muted/30 backdrop-blur-sm rounded-2xl p-6 border border-border/50">
<div className="flex items-center gap-3 mb-4">
<div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#6d28d9] shadow-sm">
<div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#e8466c] shadow-sm">
<Globe size={16} />
</div>
<h3 className="text-lg font-black text-foreground">Media Information</h3>
@@ -356,7 +356,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.poster}
onChange={e => setNewMedia(prev => ({ ...prev, poster: e.target.value }))}
placeholder="https://example.com/poster.jpg"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
required
/>
</div>
@@ -367,7 +367,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.banner}
onChange={e => setNewMedia(prev => ({ ...prev, banner: e.target.value }))}
placeholder="https://example.com/banner.jpg"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
<div className="grid grid-cols-2 gap-4">
@@ -377,7 +377,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
id="aspectRatio"
value={newMedia.aspectRatio}
onChange={e => setNewMedia(prev => ({ ...prev, aspectRatio: e.target.value as '2/3' | '16/9' | '1/1' }))}
className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9]/50 outline-none"
className="bg-background border-border/50 rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#e8466c]/50 outline-none"
>
<option value="2/3">2:3 (Poster)</option>
<option value="16/9">16:9 (Banner)</option>
@@ -395,7 +395,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.rating}
onChange={e => setNewMedia(prev => ({ ...prev, rating: e.target.value }))}
placeholder="8.5"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
</div>
@@ -407,7 +407,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
onChange={e => setNewMedia(prev => ({ ...prev, description: e.target.value }))}
placeholder="Enter a description..."
rows={4}
className="bg-background border-border/50 rounded-xl p-3 text-sm focus:ring-2 focus:ring-[#6d28d9]/50 outline-none resize-none"
className="bg-background border-border/50 rounded-xl p-3 text-sm focus:ring-2 focus:ring-[#e8466c]/50 outline-none resize-none"
/>
</div>
</div>
@@ -416,7 +416,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
{(newMedia.category === 'Anime' || newMedia.category === 'Movies' || newMedia.category === 'TV Series' || newMedia.category === 'Adult') && (
<div className="bg-muted/30 backdrop-blur-sm rounded-2xl p-6 border border-border/50">
<div className="flex items-center gap-3 mb-4">
<div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#6d28d9] shadow-sm">
<div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#e8466c] shadow-sm">
<Clock size={16} />
</div>
<h3 className="text-lg font-black text-foreground">Production Details</h3>
@@ -430,7 +430,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.runtime}
onChange={e => setNewMedia(prev => ({ ...prev, runtime: e.target.value }))}
placeholder="120"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
<div className="grid gap-2">
@@ -440,7 +440,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
type="date"
value={newMedia.releaseDate}
onChange={e => setNewMedia(prev => ({ ...prev, releaseDate: e.target.value }))}
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
<div className="grid gap-2">
@@ -450,7 +450,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.director}
onChange={e => setNewMedia(prev => ({ ...prev, director: e.target.value }))}
placeholder="Director name"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
<div className="grid gap-2">
@@ -460,7 +460,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.writer}
onChange={e => setNewMedia(prev => ({ ...prev, writer: e.target.value }))}
placeholder="Writer name"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
</div>
@@ -469,7 +469,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
{/* Classification Card */}
<div className="bg-muted/30 backdrop-blur-sm rounded-2xl p-6 border border-border/50">
<div className="flex items-center gap-3 mb-4">
<div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#6d28d9] shadow-sm">
<div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#e8466c] shadow-sm">
<Tag size={16} />
</div>
<h3 className="text-lg font-black text-foreground">Classification</h3>
@@ -482,7 +482,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.genres}
onChange={e => setNewMedia(prev => ({ ...prev, genres: e.target.value }))}
placeholder="Action, Drama, Sci-Fi"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
<div className="grid gap-2">
@@ -492,7 +492,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.tags}
onChange={e => setNewMedia(prev => ({ ...prev, tags: e.target.value }))}
placeholder="Classic, Best-selling"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
<div className="grid gap-2">
@@ -502,7 +502,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.studios}
onChange={e => setNewMedia(prev => ({ ...prev, studios: e.target.value }))}
placeholder="Studio A, Studio B"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
<div className="grid gap-2">
@@ -512,7 +512,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
value={newMedia.source}
onChange={e => setNewMedia(prev => ({ ...prev, source: e.target.value }))}
placeholder="e.g. username, xbvr, stashapp"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-background border-border/50 rounded-xl h-11 focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
</div>
@@ -522,7 +522,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
{(newMedia.category === 'Anime' || newMedia.category === 'Movies' || newMedia.category === 'TV Series' || newMedia.category === 'Adult') && (
<div className="bg-muted/30 backdrop-blur-sm rounded-2xl p-6 border border-border/50 lg:col-span-2">
<div className="flex items-center gap-3 mb-4">
<div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#6d28d9] shadow-sm">
<div className="w-8 h-8 rounded-lg bg-background flex items-center justify-center text-[#e8466c] shadow-sm">
<Users size={16} />
</div>
<h3 className="text-lg font-black text-foreground">Cast & Crew</h3>
@@ -574,7 +574,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
<Input
id="staffName"
placeholder="Actor name"
className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#e8466c]/50"
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
@@ -593,7 +593,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
<Input
id="staffRole"
placeholder="e.g. Actor, Director"
className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#e8466c]/50"
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
@@ -611,7 +611,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
<Input
id="staffCharacter"
placeholder="Character name"
className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
</div>
@@ -620,14 +620,14 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
<Input
id="staffPhoto"
placeholder="https://example.com/photo.jpg"
className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#6d28d9]/50"
className="bg-muted/50 border-border/50 rounded-lg h-9 text-sm focus:ring-2 focus:ring-[#e8466c]/50"
/>
</div>
<Button
type="button"
onClick={addStaffMember}
variant="outline"
className="w-full border-border/50 text-sm font-bold hover:border-[#6d28d9]/50 hover:bg-[#6d28d9]/10 rounded-xl transition-all duration-300"
className="w-full border-border/50 text-sm font-bold hover:border-[#e8466c]/50 hover:bg-[#e8466c]/10 rounded-xl transition-all duration-300"
>
+ Add Cast Member
</Button>
@@ -640,7 +640,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC
<Button
type="submit"
disabled={isSubmitting}
className="w-full bg-gradient-to-br from-[#6d28d9] to-[#8b5cf6] hover:from-[#5b21b6] hover:to-[#7c3aed] text-white font-black h-12 rounded-xl shadow-lg shadow-[#6d28d9]/30 transition-all duration-300 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
className="w-full bg-gradient-to-br from-[#e8466c] to-[#f47298] hover:from-[#d13d60] hover:to-[#c5304e] text-white font-black h-12 rounded-xl shadow-lg shadow-[#e8466c]/30 transition-all duration-300 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
>
{isSubmitting ? 'SAVING...' : 'SAVE TO LIBRARY'}
</Button>
src/components/CastDetailView.tsx
+19 -19
View File
@@ -96,12 +96,12 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
</h1>
<div className="flex flex-wrap justify-center md:justify-start gap-2">
{person.occupations?.map(occ => (
<Badge key={occ} variant="secondary" className="bg-[#6d28d9]/10 text-[#6d28d9] border-[#6d28d9]/20 font-medium px-3 py-1 text-xs">
<Badge key={occ} variant="secondary" className="bg-[#e8466c]/10 text-[#e8466c] border-[#e8466c]/20 font-medium px-3 py-1 text-xs">
{occ}
</Badge>
))}
{person.filmography && person.filmography.length > 0 && (
<Badge variant="outline" className="border-[#6d28d9]/30 text-[#6d28d9] font-medium px-3 py-1 text-xs">
<Badge variant="outline" className="border-[#e8466c]/30 text-[#e8466c] font-medium px-3 py-1 text-xs">
<Star className="w-3 h-3 mr-1" />
{person.filmography.length}
</Badge>
@@ -130,8 +130,8 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
<Card className="border-border/60 overflow-hidden">
<CardHeader className="py-3 px-4 border-b border-border/40">
<CardTitle className="text-xs font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-2">
<div className="w-5 h-5 rounded bg-[#6d28d9]/10 flex items-center justify-center">
<User size={12} className="text-[#6d28d9]" />
<div className="w-5 h-5 rounded bg-[#e8466c]/10 flex items-center justify-center">
<User size={12} className="text-[#e8466c]" />
</div>
Personal Info
</CardTitle>
@@ -140,7 +140,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
{/* Birth Date */}
<div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
<div className="w-7 h-7 rounded-md bg-[#e8466c]/10 flex items-center justify-center text-[#e8466c]">
<Calendar size={14} />
</div>
<span className="text-xs text-muted-foreground">Born</span>
@@ -152,7 +152,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
{/* Birth Place */}
<div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
<div className="w-7 h-7 rounded-md bg-[#e8466c]/10 flex items-center justify-center text-[#e8466c]">
<MapPin size={14} />
</div>
<span className="text-xs text-muted-foreground">Origin</span>
@@ -166,12 +166,12 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
{/* Known For */}
<div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
<div className="w-7 h-7 rounded-md bg-[#e8466c]/10 flex items-center justify-center text-[#e8466c]">
<Briefcase size={14} />
</div>
<span className="text-xs text-muted-foreground">Role</span>
</div>
<Badge variant="secondary" className="text-xs font-normal bg-[#6d28d9]/10 text-[#6d28d9] border-none">
<Badge variant="secondary" className="text-xs font-normal bg-[#e8466c]/10 text-[#e8466c] border-none">
{person.role}
</Badge>
</div>
@@ -182,7 +182,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
<Separator />
<div className="flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors">
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 rounded-md bg-[#6d28d9]/10 flex items-center justify-center text-[#6d28d9]">
<div className="w-7 h-7 rounded-md bg-[#e8466c]/10 flex items-center justify-center text-[#e8466c]">
<User size={14} />
</div>
<span className="text-xs text-muted-foreground">Ethnicity</span>
@@ -202,8 +202,8 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
<Card className="border-border/60 overflow-hidden">
<CardHeader className="py-3 px-4 border-b border-border/40">
<CardTitle className="text-xs font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-2">
<div className="w-5 h-5 rounded bg-[#6d28d9]/10 flex items-center justify-center">
<Ruler size={12} className="text-[#6d28d9]" />
<div className="w-5 h-5 rounded bg-[#e8466c]/10 flex items-center justify-center">
<Ruler size={12} className="text-[#e8466c]" />
</div>
Measurements
</CardTitle>
@@ -262,7 +262,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
{(person.hair_color || person.adult_specifics?.hair_color) && (
<div className="px-4 py-3 hover:bg-muted/30 transition-colors">
<div className="flex items-center gap-2 mb-1">
<Palette size={12} className="text-[#6d28d9]" />
<Palette size={12} className="text-[#e8466c]" />
<span className="text-[10px] text-muted-foreground uppercase tracking-wide">Hair</span>
</div>
<p className="text-sm font-medium truncate">
@@ -273,7 +273,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
{(person.eye_color || person.adult_specifics?.eye_color) && (
<div className="px-4 py-3 hover:bg-muted/30 transition-colors">
<div className="flex items-center gap-2 mb-1">
<Eye size={12} className="text-[#6d28d9]" />
<Eye size={12} className="text-[#e8466c]" />
<span className="text-[10px] text-muted-foreground uppercase tracking-wide">Eyes</span>
</div>
<p className="text-sm font-medium truncate">
@@ -360,7 +360,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
transition={{ delay: index * 0.03 }}
>
<Card
className="hover:border-[#6d28d9]/30 hover:shadow-md transition-all duration-200 cursor-pointer group border-border/60"
className="hover:border-[#e8466c]/30 hover:shadow-md transition-all duration-200 cursor-pointer group border-border/60"
onClick={() => handleMediaClick(item.id.toString())}
>
<CardContent className="p-3 flex items-center gap-3">
@@ -374,10 +374,10 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
</div>
<div className="min-w-0 flex-1">
<p className="text-[10px] text-muted-foreground uppercase tracking-wide">Character</p>
<h4 className="font-semibold text-foreground truncate text-sm group-hover:text-[#6d28d9] transition-colors">
<h4 className="font-semibold text-foreground truncate text-sm group-hover:text-[#e8466c] transition-colors">
{item.characterName || item.role}
</h4>
<p className="text-xs text-[#6d28d9] truncate">{item.title}</p>
<p className="text-xs text-[#e8466c] truncate">{item.title}</p>
</div>
</CardContent>
</Card>
@@ -429,7 +429,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
{option.label}
</span>
{sortBy === option.value && (
sortOrder === 'asc' ? <ArrowUpAZ size={14} className="text-[#6d28d9]" /> : <ArrowDownAZ size={14} className="text-[#6d28d9]" />
sortOrder === 'asc' ? <ArrowUpAZ size={14} className="text-[#e8466c]" /> : <ArrowDownAZ size={14} className="text-[#e8466c]" />
)}
</DropdownMenuItem>
))}
@@ -450,7 +450,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
>
<Card
onClick={() => handleMediaClick(item.id.toString())}
className="group cursor-pointer hover:border-[#6d28d9]/30 hover:shadow-md transition-all duration-200 border-border/60"
className="group cursor-pointer hover:border-[#e8466c]/30 hover:shadow-md transition-all duration-200 border-border/60"
>
<CardContent className="p-3 flex items-center gap-3">
<div className="w-12 h-16 rounded-none overflow-hidden shrink-0 bg-muted border border-border/40">
@@ -462,7 +462,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
/>
</div>
<div className="min-w-0 flex-1">
<h4 className="font-semibold text-foreground truncate text-sm group-hover:text-[#6d28d9] transition-colors">
<h4 className="font-semibold text-foreground truncate text-sm group-hover:text-[#e8466c] transition-colors">
{item.title}
</h4>
<p className="text-xs text-muted-foreground mb-1">
src/components/CastView.tsx
+17 -17
View File
@@ -305,7 +305,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
placeholder="Search cast..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 h-9 bg-muted/50 border-none rounded-lg text-sm focus-visible:ring-[#6d28d9]/30"
className="pl-9 h-9 bg-muted/50 border-none rounded-lg text-sm focus-visible:ring-[#e8466c]/30"
/>
</div>
@@ -346,7 +346,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
className={cn(
"h-8 px-3 rounded-lg border text-xs font-medium transition-colors",
(sortBy !== 'roleCount' || sortOrder !== 'desc')
? "border-[#6d28d9]/30 bg-[#6d28d9]/10 text-[#6d28d9] hover:bg-[#6d28d9]/20"
? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
: "border-border/60 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"
)}
>
@@ -378,7 +378,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
{option.label}
</span>
{sortBy === option.value && (
sortOrder === 'asc' ? <ArrowUpAZ size={14} className="text-[#6d28d9]" /> : <ArrowDownAZ size={14} className="text-[#6d28d9]" />
sortOrder === 'asc' ? <ArrowUpAZ size={14} className="text-[#e8466c]" /> : <ArrowDownAZ size={14} className="text-[#e8466c]" />
)}
</DropdownMenuItem>
))}
@@ -395,7 +395,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
className={cn(
"h-8 px-3 rounded-lg border text-xs font-medium transition-colors",
filterOccupation && filterOccupation !== 'all'
? "border-[#6d28d9]/30 bg-[#6d28d9]/10 text-[#6d28d9] hover:bg-[#6d28d9]/20"
? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
: "border-border/60 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"
)}
>
@@ -430,7 +430,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
className={cn(
"h-8 px-3 rounded-lg border text-xs font-medium transition-colors",
filterMediaType && filterMediaType !== 'all'
? "border-[#6d28d9]/30 bg-[#6d28d9]/10 text-[#6d28d9] hover:bg-[#6d28d9]/20"
? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
: "border-border/60 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"
)}
>
@@ -475,7 +475,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
{searchQuery && (
<Badge
variant="secondary"
className="h-6 px-2 text-xs bg-[#6d28d9]/10 text-[#6d28d9] border-[#6d28d9]/20 hover:bg-[#6d28d9]/20 cursor-pointer"
className="h-6 px-2 text-xs bg-[#e8466c]/10 text-[#e8466c] border-[#e8466c]/20 hover:bg-[#e8466c]/20 cursor-pointer"
onClick={() => setSearchQuery('')}
>
Search: {searchQuery}
@@ -485,7 +485,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
{filterOccupation && filterOccupation !== 'all' && (
<Badge
variant="secondary"
className="h-6 px-2 text-xs bg-[#6d28d9]/10 text-[#6d28d9] border-[#6d28d9]/20 hover:bg-[#6d28d9]/20 cursor-pointer"
className="h-6 px-2 text-xs bg-[#e8466c]/10 text-[#e8466c] border-[#e8466c]/20 hover:bg-[#e8466c]/20 cursor-pointer"
onClick={() => setFilterOccupation('all')}
>
{filterOccupation}
@@ -495,7 +495,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
{filterMediaType && filterMediaType !== 'all' && (
<Badge
variant="secondary"
className="h-6 px-2 text-xs bg-[#6d28d9]/10 text-[#6d28d9] border-[#6d28d9]/20 hover:bg-[#6d28d9]/20 cursor-pointer"
className="h-6 px-2 text-xs bg-[#e8466c]/10 text-[#e8466c] border-[#e8466c]/20 hover:bg-[#e8466c]/20 cursor-pointer"
onClick={() => setFilterMediaType('all')}
>
{filterMediaType}
@@ -545,20 +545,20 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
transition={{ duration: 0.2 }}
>
<Card
className="group cursor-pointer overflow-hidden hover:shadow-xl hover:border-[#6d28d9]/30 transition-all duration-300 border-border/60"
className="group cursor-pointer overflow-hidden hover:shadow-xl hover:border-[#e8466c]/30 transition-all duration-300 border-border/60"
onClick={() => onPersonClick(person)}
>
{/* Card Header with Avatar and Info */}
<div className="p-3">
<div className="flex items-start gap-3">
<Avatar className="h-12 w-12 rounded-lg border-2 border-border/50 group-hover:border-[#6d28d9] transition-colors duration-300 shadow-sm">
<Avatar className="h-12 w-12 rounded-lg border-2 border-border/50 group-hover:border-[#e8466c] transition-colors duration-300 shadow-sm">
<AvatarImage src={person.photo} alt={person.name} referrerPolicy="no-referrer" className="object-cover" />
<AvatarFallback className="rounded-lg bg-muted">
<User className="h-5 w-5 text-muted-foreground" />
</AvatarFallback>
</Avatar>
<div className="min-w-0 flex-1">
<h3 className="font-semibold text-foreground truncate group-hover:text-[#6d28d9] transition-colors duration-300 text-sm leading-tight">
<h3 className="font-semibold text-foreground truncate group-hover:text-[#e8466c] transition-colors duration-300 text-sm leading-tight">
{person.name}
</h3>
<p className="text-[11px] text-muted-foreground mt-0.5 truncate">
@@ -592,7 +592,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
{/* Latest Role Section */}
{person.filmography && person.filmography.length > 0 && (
<div className="px-3 pb-3">
<div className="bg-muted/50 rounded-lg p-2 flex items-center gap-2 border border-border/40 group-hover:border-[#6d28d9]/20 transition-colors">
<div className="bg-muted/50 rounded-lg p-2 flex items-center gap-2 border border-border/40 group-hover:border-[#e8466c]/20 transition-colors">
<div className="w-8 h-11 rounded overflow-hidden shrink-0 bg-background border border-border/40">
<img
src={person.filmography[0].poster || person.photo}
@@ -604,7 +604,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
<div className="min-w-0 flex-1">
<p className="text-[10px] text-muted-foreground uppercase tracking-wide leading-none">Latest</p>
<p className="text-[11px] font-medium text-foreground truncate">{person.filmography[0].title}</p>
<p className="text-[10px] text-[#6d28d9] truncate">{person.filmography[0].role}</p>
<p className="text-[10px] text-[#e8466c] truncate">{person.filmography[0].role}</p>
</div>
</div>
</div>
@@ -621,7 +621,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
<TableRow className="hover:bg-transparent border-border/60 bg-muted/30">
<TableHead className="w-14 rounded-tl-lg"></TableHead>
<TableHead
className="cursor-pointer hover:text-[#6d28d9] transition-colors"
className="cursor-pointer hover:text-[#e8466c] transition-colors"
onClick={() => handleSort('name')}
>
<div className="flex items-center gap-1">
@@ -630,7 +630,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
</div>
</TableHead>
<TableHead
className="cursor-pointer hover:text-[#6d28d9] transition-colors"
className="cursor-pointer hover:text-[#e8466c] transition-colors"
onClick={() => handleSort('role')}
>
<div className="flex items-center gap-1">
@@ -640,7 +640,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
</TableHead>
<TableHead className="hidden md:table-cell">Latest Work</TableHead>
<TableHead
className="hidden sm:table-cell cursor-pointer hover:text-[#6d28d9] transition-colors text-right"
className="hidden sm:table-cell cursor-pointer hover:text-[#e8466c] transition-colors text-right"
onClick={() => handleSort('roleCount')}
>
<div className="flex items-center justify-end gap-1">
@@ -678,7 +678,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
</TableCell>
<TableCell className="font-medium">
<div className="flex flex-col">
<span className="group-hover:text-[#6d28d9] transition-colors">{person.name}</span>
<span className="group-hover:text-[#e8466c] transition-colors">{person.name}</span>
{person.birthDate && (
<span className="text-xs text-muted-foreground">
{new Date(person.birthDate).toLocaleDateString()}
src/components/DashboardView.tsx
+12 -12
View File
@@ -133,11 +133,11 @@ export default function DashboardView({ mediaList, onMediaClick, loading = false
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#e8466c] to-[#f47298] flex items-center justify-center">
<Sparkles className="w-4 h-4 text-white" />
</div>
<h1 className="text-2xl font-bold text-white">
<h1 className="text-2xl font-bold text-foreground">
Welcome to MediaVault
</h1>
</div>
<p className="text-gray-400 text-sm ml-11">Your media library at a glance</p>
<p className="text-muted-foreground text-sm ml-11">Your media library at a glance</p>
</motion.div>
{/* Stats Cards */}
@@ -156,12 +156,12 @@ export default function DashboardView({ mediaList, onMediaClick, loading = false
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 + index * 0.05 }}
onClick={() => navigate(card.path)}
className={`relative overflow-hidden rounded-xl p-5 bg-gradient-to-br ${card.color} border border-white/5 hover:border-white/10 transition-all duration-300 cursor-pointer group`}
className={`relative overflow-hidden rounded-xl p-5 bg-gradient-to-br ${card.color} border border-border/50 hover:border-border/80 transition-all duration-300 cursor-pointer group`}
>
<div className="flex items-start justify-between">
<div>
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">{card.label}</p>
<p className="text-3xl font-bold text-white">{card.count}</p>
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1">{card.label}</p>
<p className="text-3xl font-bold text-foreground">{card.count}</p>
</div>
<div className={`w-10 h-10 rounded-lg ${card.iconBg} flex items-center justify-center`}>
<Icon className="w-5 h-5 text-white" />
@@ -191,10 +191,10 @@ export default function DashboardView({ mediaList, onMediaClick, loading = false
</div>
<div>
<p className="text-xs font-semibold text-[#e8466c] uppercase tracking-wider">FAVORITES</p>
<p className="text-2xl font-bold text-white">{favoritesMedia.length} <span className="text-sm font-normal text-gray-400">items in your favorites</span></p>
<p className="text-2xl font-bold text-foreground">{favoritesMedia.length} <span className="text-sm font-normal text-muted-foreground">items in your favorites</span></p>
</div>
</div>
<div className="flex items-center gap-2 text-gray-400 group-hover:text-white transition-colors">
<div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
<span className="text-sm font-medium">View Favorites</span>
<ChevronRight className="w-5 h-5" />
</div>
@@ -214,11 +214,11 @@ export default function DashboardView({ mediaList, onMediaClick, loading = false
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<Clock className="w-5 h-5 text-[#e8466c]" />
<h2 className="text-sm font-bold text-white uppercase tracking-wider">Recently Added</h2>
<h2 className="text-sm font-bold text-foreground uppercase tracking-wider">Recently Added</h2>
</div>
<button
onClick={() => navigate('/browse?sort=recent')}
className="flex items-center gap-1 text-sm text-gray-400 hover:text-white transition-colors"
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
>
View All <ChevronRight className="w-4 h-4" />
</button>
@@ -240,11 +240,11 @@ export default function DashboardView({ mediaList, onMediaClick, loading = false
{/* Empty State */}
{mediaList.length === 0 && (
<div className="flex flex-col items-center justify-center py-32 text-gray-400">
<div className="w-20 h-20 bg-white/5 rounded-2xl flex items-center justify-center mb-6 border border-white/10">
<div className="flex flex-col items-center justify-center py-32 text-muted-foreground">
<div className="w-20 h-20 bg-muted rounded-2xl flex items-center justify-center mb-6 border border-border">
<Database className="w-10 h-10" />
</div>
<p className="text-xl font-bold text-white">No media found</p>
<p className="text-xl font-bold text-foreground">No media found</p>
<p className="text-sm">Start by adding media to your collection</p>
</div>
)}
src/components/Header.tsx
+7 -7
View File
@@ -72,7 +72,7 @@ export default function Header({
? "bg-transparent"
: transparent && scrolled
? "backdrop-blur-xl bg-background/70 border-b border-border/30"
: "backdrop-blur-xl bg-gradient-to-r from-[#6d28d9]/90 via-[#8b5cf6]/90 to-[#6d28d9]/90 border-b border-white/10"
: "backdrop-blur-xl bg-gradient-to-r from-[#e8466c]/90 via-[#f47298]/90 to-[#e8466c]/90 border-b border-white/10"
)}
>
<div className="flex items-center gap-8">
@@ -87,7 +87,7 @@ export default function Header({
"w-8 h-8 rounded-xl flex items-center justify-center shadow-lg transition-all duration-300",
(transparent && !scrolled) || !transparent
? "bg-white/20 backdrop-blur-sm border border-white/30"
: "bg-gradient-to-br from-[#6d28d9] to-[#8b5cf6] shadow-[#6d28d9]/30"
: "bg-gradient-to-br from-[#e8466c] to-[#f47298] shadow-[#e8466c]/30"
)}>
<div className={cn(
"w-4 h-4 rounded-full",
@@ -121,7 +121,7 @@ export default function Header({
? "text-white bg-white/10"
: "text-white/70 hover:text-white hover:bg-white/5"
: isActive
? "text-foreground bg-[#6d28d9]/10"
? "text-foreground bg-[#e8466c]/10"
: "text-muted-foreground hover:text-foreground hover:bg-muted"
)}
>
@@ -138,7 +138,7 @@ export default function Header({
"text-sm font-bold transition-all duration-300 uppercase tracking-wider px-4 py-2 rounded-lg",
(transparent && !scrolled) || !transparent
? isActive ? "text-white bg-white/10" : "text-white/70 hover:text-white hover:bg-white/5"
: isActive ? "text-foreground bg-[#6d28d9]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
: isActive ? "text-foreground bg-[#e8466c]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
)}
>
CAST
@@ -215,7 +215,7 @@ export default function Header({
"w-9 h-9 rounded-xl overflow-hidden border-2 transition-all duration-300 hover:scale-110 hover:shadow-lg",
(transparent && !scrolled) || !transparent
? "border-white/30 hover:border-white/50"
: "border-border hover:border-[#6d28d9]/50"
: "border-border hover:border-[#e8466c]/50"
)}>
<img
src="https://picsum.photos/seed/user/100/100"
@@ -237,7 +237,7 @@ export default function Header({
onClick={() => setIsMobileMenuOpen(false)}
className={({ isActive }) => cn(
"text-sm font-bold transition-colors uppercase tracking-wider py-2 px-4 rounded-lg",
isActive ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
isActive ? "text-[#e8466c] bg-[#e8466c]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
)}
>
{cat}
@@ -249,7 +249,7 @@ export default function Header({
onClick={() => setIsMobileMenuOpen(false)}
className={({ isActive }) => cn(
"text-sm font-bold transition-colors uppercase tracking-wider py-2 px-4 rounded-lg",
isActive ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
isActive ? "text-[#e8466c] bg-[#e8466c]/10" : "text-muted-foreground hover:text-foreground hover:bg-muted"
)}
>
CAST
src/components/ImporterView.tsx
+2 -2
View File
@@ -418,7 +418,7 @@ export default function ImporterView() {
<Button
onClick={handleXBVRImport}
disabled={progress.stage !== 'idle' || !xbvrConfig.url}
className="w-full bg-[#6d28d9] hover:bg-[#5b21b6] text-white font-bold"
className="w-full bg-[#6d28d9] hover:bg-[#d13d60] text-white font-bold"
>
{progress.stage === 'fetching' || progress.stage === 'importing' ? (
<>
@@ -1010,7 +1010,7 @@ export default function ImporterView() {
<div
className={cn(
"h-full transition-all duration-300 ease-out",
progress.stage === 'error' ? "bg-gradient-to-r from-red-500 to-red-600" : "bg-gradient-to-r from-[#6d28d9] to-[#8b5cf6]"
progress.stage === 'error' ? "bg-gradient-to-r from-red-500 to-red-600" : "bg-gradient-to-r from-[#6d28d9] to-[#f47298]"
)}
style={{ width: `${getProgressPercentage()}%` }}
/>
src/components/LibrarySettings.tsx
+2 -2
View File
@@ -48,9 +48,9 @@ export default function LibrarySettings({ enabledCategories, onToggleCategory }:
</DialogHeader>
<div className="grid gap-6 py-6">
{categories.map((category) => (
<div key={category} className="flex items-center justify-between p-4 rounded-2xl bg-muted/30 border border-border/50 transition-all hover:border-[#6d28d9]/30 hover:bg-muted/50">
<div key={category} className="flex items-center justify-between p-4 rounded-2xl bg-muted/30 border border-border/50 transition-all hover:border-[#e8466c]/30 hover:bg-muted/50">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border/30">
<div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#e8466c] shadow-sm border border-border/30">
{CATEGORY_ICONS[category]}
</div>
<div>
src/components/MediaListItem.tsx
+15 -15
View File
@@ -13,14 +13,14 @@ interface MediaListItemProps {
}
const categoryConfig: Record<MediaCategory, { label: string; color: string; bgColor: string; icon: any }> = {
'Anime': { label: 'ANIME', color: 'text-purple-300', bgColor: 'bg-purple-500/30', icon: null },
'Movies': { label: 'MOVIE', color: 'text-blue-300', bgColor: 'bg-blue-500/30', icon: Film },
'TV Series': { label: 'SERIES', color: 'text-green-300', bgColor: 'bg-green-500/30', icon: Tv },
'Music': { label: 'MUSIC', color: 'text-pink-300', bgColor: 'bg-pink-500/30', icon: null },
'Books': { label: 'BOOK', color: 'text-yellow-300', bgColor: 'bg-yellow-500/30', icon: null },
'Games': { label: 'GAME', color: 'text-indigo-300', bgColor: 'bg-indigo-500/30', icon: Gamepad2 },
'Consoles': { label: 'CONSOLE', color: 'text-orange-300', bgColor: 'bg-orange-500/30', icon: null },
'Adult': { label: 'ADULT', color: 'text-rose-300', bgColor: 'bg-rose-500/30', icon: Eye },
'Anime': { label: 'ANIME', color: 'text-purple-400', bgColor: 'bg-purple-500/20', icon: null },
'Movies': { label: 'MOVIE', color: 'text-blue-400', bgColor: 'bg-blue-500/20', icon: Film },
'TV Series': { label: 'SERIES', color: 'text-green-400', bgColor: 'bg-green-500/20', icon: Tv },
'Music': { label: 'MUSIC', color: 'text-pink-400', bgColor: 'bg-pink-500/20', icon: null },
'Books': { label: 'BOOK', color: 'text-yellow-400', bgColor: 'bg-yellow-500/20', icon: null },
'Games': { label: 'GAME', color: 'text-indigo-400', bgColor: 'bg-indigo-500/20', icon: Gamepad2 },
'Consoles': { label: 'CONSOLE', color: 'text-orange-400', bgColor: 'bg-orange-500/20', icon: null },
'Adult': { label: 'ADULT', color: 'text-rose-400', bgColor: 'bg-rose-500/20', icon: Eye },
};
export default function MediaListItem({ media, onClick, isFavorite = false, onFavoriteToggle }: MediaListItemProps) {
@@ -38,13 +38,13 @@ export default function MediaListItem({ media, onClick, isFavorite = false, onFa
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="group flex items-center px-4 py-2 hover:bg-white/[0.02] transition-colors cursor-pointer border-b border-white/[0.02] last:border-b-0"
className="group flex items-center px-4 py-2 hover:bg-muted/30 transition-colors cursor-pointer border-b border-border/30 last:border-b-0"
onClick={() => onClick(media)}
>
{/* TITLE Column: Poster + Title + Rating (like screenshot 2) */}
<div className="flex-1 min-w-0 flex items-center gap-3 mr-4">
{/* Poster Thumbnail */}
<div className="relative w-10 h-14 rounded overflow-hidden shrink-0 bg-[#1a1d26]">
<div className="relative w-10 h-14 rounded overflow-hidden shrink-0 bg-muted">
<img
src={media.poster}
alt={media.title}
@@ -55,7 +55,7 @@ export default function MediaListItem({ media, onClick, isFavorite = false, onFa
{/* Title + Rating stacked */}
<div className="min-w-0">
<h3 className="text-sm font-medium text-gray-200 truncate group-hover:text-[#e8466c] transition-colors">
<h3 className="text-sm font-medium text-foreground truncate group-hover:text-[#e8466c] transition-colors">
{media.title}
</h3>
<div className="flex items-center gap-1 mt-0.5">
@@ -81,19 +81,19 @@ export default function MediaListItem({ media, onClick, isFavorite = false, onFa
{/* GENRE Column */}
<div className="w-[140px] shrink-0 mr-4">
<span className="text-sm text-gray-500 truncate block">
<span className="text-sm text-muted-foreground truncate block">
{media.genres?.slice(0, 2).join(', ') || '-'}
</span>
</div>
{/* YEAR Column */}
<div className="w-[60px] shrink-0 text-center mr-4">
<span className="text-sm text-gray-400">{media.year}</span>
<span className="text-sm text-muted-foreground/80">{media.year}</span>
</div>
{/* PLAYS Column */}
<div className="w-[50px] shrink-0 text-right mr-4">
<span className="text-sm text-gray-400">{media.playCount || 0}</span>
<span className="text-sm text-muted-foreground/80">{media.playCount || 0}</span>
</div>
{/* FAVORITE Column (Heart) */}
@@ -104,7 +104,7 @@ export default function MediaListItem({ media, onClick, isFavorite = false, onFa
"p-1 rounded transition-colors",
isFavorite
? "text-[#e8466c]"
: "text-gray-600 hover:text-gray-500"
: "text-muted-foreground/40 hover:text-muted-foreground/60"
)}
>
<Heart size={14} className={cn(isFavorite && "fill-current")} />
src/components/MediaTable.tsx
+24 -24
View File
@@ -41,14 +41,14 @@ const categoryConfig: Record<MediaCategory, {
bgColor: string;
icon: React.ElementType | null;
}> = {
'Anime': { label: 'ANIME', color: 'text-purple-300', bgColor: 'bg-purple-500/30', icon: null },
'Movies': { label: 'MOVIE', color: 'text-blue-300', bgColor: 'bg-blue-500/30', icon: Film },
'TV Series': { label: 'SERIES', color: 'text-green-300', bgColor: 'bg-green-500/30', icon: Tv },
'Music': { label: 'MUSIC', color: 'text-pink-300', bgColor: 'bg-pink-500/30', icon: Music },
'Books': { label: 'BOOK', color: 'text-yellow-300', bgColor: 'bg-yellow-500/30', icon: BookOpen },
'Games': { label: 'GAME', color: 'text-indigo-300', bgColor: 'bg-indigo-500/30', icon: Gamepad2 },
'Consoles': { label: 'CONSOLE', color: 'text-orange-300', bgColor: 'bg-orange-500/30', icon: Monitor },
'Adult': { label: 'ADULT', color: 'text-rose-300', bgColor: 'bg-rose-500/30', icon: Eye },
'Anime': { label: 'ANIME', color: 'text-purple-400', bgColor: 'bg-purple-500/20', icon: null },
'Movies': { label: 'MOVIE', color: 'text-blue-400', bgColor: 'bg-blue-500/20', icon: Film },
'TV Series': { label: 'SERIES', color: 'text-green-400', bgColor: 'bg-green-500/20', icon: Tv },
'Music': { label: 'MUSIC', color: 'text-pink-400', bgColor: 'bg-pink-500/20', icon: Music },
'Books': { label: 'BOOK', color: 'text-yellow-400', bgColor: 'bg-yellow-500/20', icon: BookOpen },
'Games': { label: 'GAME', color: 'text-indigo-400', bgColor: 'bg-indigo-500/20', icon: Gamepad2 },
'Consoles': { label: 'CONSOLE', color: 'text-orange-400', bgColor: 'bg-orange-500/20', icon: Monitor },
'Adult': { label: 'ADULT', color: 'text-rose-400', bgColor: 'bg-rose-500/20', icon: Eye },
};
export default function MediaTable({
@@ -104,7 +104,7 @@ export default function MediaTable({
const SortIcon = ({ field }: { field: SortField }) => {
if (sortField !== field) {
return <ArrowUpDown size={14} className="text-gray-600 ml-1 opacity-0 group-hover:opacity-100 transition-opacity" />;
return <ArrowUpDown size={14} className="text-muted-foreground/40 ml-1 opacity-0 group-hover:opacity-100 transition-opacity" />;
}
return sortDirection === 'asc'
? <ArrowUp size={14} className="text-[#e8466c] ml-1" />
@@ -119,9 +119,9 @@ export default function MediaTable({
return (
<Table className="w-full">
<TableHeader>
<TableRow className="border-b border-white/[0.03] hover:bg-transparent">
<TableRow className="border-b border-border/20 hover:bg-transparent">
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[45%]"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[45%]"
onClick={() => handleSort('title')}
>
<div className="flex items-center">
@@ -129,7 +129,7 @@ export default function MediaTable({
</div>
</TableHead>
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[80px]"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[80px]"
onClick={() => handleSort('category')}
>
<div className="flex items-center">
@@ -137,7 +137,7 @@ export default function MediaTable({
</div>
</TableHead>
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[18%]"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[18%]"
onClick={() => handleSort('genre')}
>
<div className="flex items-center">
@@ -145,7 +145,7 @@ export default function MediaTable({
</div>
</TableHead>
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[70px] text-center"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[70px] text-center"
onClick={() => handleSort('rating')}
>
<div className="flex items-center justify-center">
@@ -153,7 +153,7 @@ export default function MediaTable({
</div>
</TableHead>
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[60px] text-center"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[60px] text-center"
onClick={() => handleSort('year')}
>
<div className="flex items-center justify-center">
@@ -161,7 +161,7 @@ export default function MediaTable({
</div>
</TableHead>
<TableHead
className="text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-300 transition-colors group w-[60px] text-right"
className="text-xs font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground/80 transition-colors group w-[60px] text-right"
onClick={() => handleSort('plays')}
>
<div className="flex items-center justify-end">
@@ -180,13 +180,13 @@ export default function MediaTable({
return (
<TableRow
key={media.id}
className="border-b border-white/[0.02] hover:bg-white/[0.02] transition-colors cursor-pointer group"
className="border-b border-border/20 hover:bg-muted/30 transition-colors cursor-pointer group"
onClick={() => onMediaClick(media)}
>
{/* Title Cell with Poster */}
<TableCell className="py-2">
<div className="flex items-center gap-3">
<div className="relative w-10 h-14 rounded overflow-hidden shrink-0 bg-[#1a1d26]">
<div className="relative w-10 h-14 rounded overflow-hidden shrink-0 bg-muted">
<img
src={media.poster}
alt={media.title}
@@ -195,7 +195,7 @@ export default function MediaTable({
/>
</div>
<div className="min-w-0">
<div className="text-sm font-medium text-gray-200 truncate group-hover:text-[#e8466c] transition-colors">
<div className="text-sm font-medium text-foreground truncate group-hover:text-[#e8466c] transition-colors">
{media.title}
</div>
</div>
@@ -216,7 +216,7 @@ export default function MediaTable({
{/* Genre */}
<TableCell>
<span className="text-sm text-gray-500 truncate block">
<span className="text-sm text-muted-foreground truncate block">
{media.genres?.join(', ') || '-'}
</span>
</TableCell>
@@ -225,7 +225,7 @@ export default function MediaTable({
<TableCell className="text-center">
<div className="flex items-center justify-center gap-1">
<Star size={12} className="text-[#e8466c] fill-[#e8466c]" />
<span className="text-sm font-medium text-gray-300">
<span className="text-sm font-medium text-foreground/80">
{media.rating?.toFixed(1) || '-'}
</span>
</div>
@@ -233,12 +233,12 @@ export default function MediaTable({
{/* Year */}
<TableCell className="text-center">
<span className="text-sm text-gray-400">{media.year}</span>
<span className="text-sm text-muted-foreground/80">{media.year}</span>
</TableCell>
{/* Plays */}
<TableCell className="text-right">
<span className="text-sm text-gray-400">{media.playCount || 0}</span>
<span className="text-sm text-muted-foreground/80">{media.playCount || 0}</span>
</TableCell>
{/* Favorite */}
@@ -249,7 +249,7 @@ export default function MediaTable({
"p-1 rounded transition-colors",
isFavorite
? "text-[#e8466c]"
: "text-gray-600 hover:text-gray-500"
: "text-muted-foreground/40 hover:text-muted-foreground/60"
)}
>
<Heart size={14} className={cn(isFavorite && "fill-current")} />
src/components/SettingsView.tsx
+2 -2
View File
@@ -559,14 +559,14 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
<div className="flex gap-2">
<input
type="color"
value={customColors[key as keyof CustomColors] || '#6d28d9'}
value={customColors[key as keyof CustomColors] || '#e8466c'}
onChange={(e) => handleColorChange(key as keyof CustomColors, e.target.value)}
className="w-10 h-10 rounded-lg cursor-pointer border-0 p-0"
/>
<Input
value={customColors[key as keyof CustomColors] || ''}
onChange={(e) => handleColorChange(key as keyof CustomColors, e.target.value)}
placeholder="#6d28d9"
placeholder="#e8466c"
className="flex-1 text-xs"
/>
</div>
src/components/filters/MediaFilters.tsx
+13 -13
View File
@@ -123,14 +123,14 @@ export default function MediaFilters({
"h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
selectedGenre
? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
: "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
: "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
)}
>
<Star size={14} className="mr-2" />
{selectedGenre || 'Genres'}
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
<DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
<DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
Filter by Genre
</DropdownMenuItem>
<DropdownMenuSeparator />
@@ -153,14 +153,14 @@ export default function MediaFilters({
"h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
selectedStudio
? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
: "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
: "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
)}
>
<Building2 size={14} className="mr-2" />
{selectedStudio || 'Studios'}
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
<DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
<DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
Filter by Studio
</DropdownMenuItem>
<DropdownMenuSeparator />
@@ -184,14 +184,14 @@ export default function MediaFilters({
"h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
selectedPlatform
? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
: "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
: "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
)}
>
<Monitor size={14} className="mr-2" />
{selectedPlatform || 'Platforms'}
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
<DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
<DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
Filter by Platform
</DropdownMenuItem>
<DropdownMenuSeparator />
@@ -215,14 +215,14 @@ export default function MediaFilters({
"h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
selectedDeveloper
? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
: "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
: "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
)}
>
<Users size={14} className="mr-2" />
{selectedDeveloper || 'Developers'}
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
<DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
<DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
Filter by Developer
</DropdownMenuItem>
<DropdownMenuSeparator />
@@ -246,14 +246,14 @@ export default function MediaFilters({
"h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
selectedCategory
? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
: "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
: "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
)}
>
<FolderTree size={14} className="mr-2" />
{selectedCategory || 'Series'}
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
<DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
<DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
Filter by Series
</DropdownMenuItem>
<DropdownMenuSeparator />
@@ -277,14 +277,14 @@ export default function MediaFilters({
"h-9 px-3 rounded-xl border text-sm font-medium transition-colors inline-flex items-center justify-center",
selectedSource
? "border-[#e8466c]/30 bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20"
: "border-white/10 bg-transparent text-gray-400 hover:text-white hover:bg-white/5"
: "border-border bg-transparent text-muted-foreground hover:text-foreground hover:bg-accent"
)}
>
<Database size={14} className="mr-2" />
{selectedSource || 'Source'}
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48 max-h-[300px] overflow-y-auto">
<DropdownMenuItem disabled className="text-xs font-semibold text-gray-500 uppercase">
<DropdownMenuItem disabled className="text-xs font-semibold text-muted-foreground uppercase">
Filter by Source
</DropdownMenuItem>
<DropdownMenuSeparator />
@@ -304,7 +304,7 @@ export default function MediaFilters({
{hasActiveFilters && (
<button
onClick={onClearAll}
className="h-9 px-3 inline-flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors"
className="h-9 px-3 inline-flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
>
<X size={14} className="mr-2" />
Clear
src/components/sidebar/AppSidebar.tsx
+18 -22
View File
@@ -143,20 +143,20 @@ export default function AppSidebar({
});
return (
<Sidebar className="border-r border-white/5 bg-[#0d0f14]">
<Sidebar>
<SidebarHeader className="p-4">
<NavLink to="/" className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#e8466c] to-[#f47298] flex items-center justify-center shadow-lg shadow-[#e8466c]/20">
<Database className="w-4 h-4 text-white" />
</div>
<span className="text-lg font-bold text-white tracking-tight">{pageTitle}</span>
<span className="text-lg font-bold text-sidebar-foreground tracking-tight">{pageTitle}</span>
</NavLink>
</SidebarHeader>
<SidebarContent className="px-2">
{/* Main Navigation */}
<SidebarGroup>
<SidebarGroupLabel className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
<SidebarGroupLabel>
Navigation
</SidebarGroupLabel>
<SidebarGroupContent>
@@ -167,10 +167,9 @@ export default function AppSidebar({
asChild
isActive={item.isActive}
className={cn(
'transition-colors w-full',
item.isActive
? 'bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20'
: 'text-gray-400 hover:bg-white/5 hover:text-white'
: ''
)}
>
<NavLink to={item.to} className="flex items-center gap-2 w-full">
@@ -186,7 +185,7 @@ export default function AppSidebar({
{/* Media Type Filters */}
<SidebarGroup>
<SidebarGroupLabel className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
<SidebarGroupLabel>
Media Type
</SidebarGroupLabel>
<SidebarGroupContent>
@@ -199,10 +198,9 @@ export default function AppSidebar({
onClick={() => handleFilterClick(filter.category)}
isActive={isFilterActive}
className={cn(
'transition-colors w-full justify-start gap-2',
isFilterActive
? 'bg-[#e8466c]/10 text-[#e8466c] hover:bg-[#e8466c]/20'
: 'text-gray-400 hover:bg-white/5 hover:text-white'
: ''
)}
>
<filter.icon
@@ -217,7 +215,7 @@ export default function AppSidebar({
'ml-auto text-xs font-medium px-2 py-0.5 rounded-full shrink-0',
isFilterActive
? 'bg-[#e8466c]/20 text-[#e8466c]'
: 'bg-white/10 text-gray-500'
: 'bg-sidebar-accent text-sidebar-foreground/60'
)}
>
{filter.count}
@@ -232,7 +230,7 @@ export default function AppSidebar({
{/* Quick Filters */}
<SidebarGroup>
<SidebarGroupLabel className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
<SidebarGroupLabel>
Quick Filters
</SidebarGroupLabel>
<SidebarGroupContent>
@@ -240,7 +238,6 @@ export default function AppSidebar({
<SidebarMenuItem>
<SidebarMenuButton
onClick={() => handleQuickFilter('most-played')}
className="text-gray-400 hover:bg-white/5 hover:text-white w-full justify-start gap-2"
>
<Flame className="w-4 h-4 text-orange-400 shrink-0" />
<span className="truncate">Most Played</span>
@@ -249,7 +246,6 @@ export default function AppSidebar({
<SidebarMenuItem>
<SidebarMenuButton
onClick={() => handleQuickFilter('recently-added')}
className="text-gray-400 hover:bg-white/5 hover:text-white w-full justify-start gap-2"
>
<Clock className="w-4 h-4 text-cyan-400 shrink-0" />
<span className="truncate">Recently Added</span>
@@ -260,13 +256,13 @@ export default function AppSidebar({
</SidebarGroup>
</SidebarContent>
<SidebarFooter className="p-2">
<SidebarFooter className="p-2 space-y-1">
{/* Theme Toggle */}
<Button
variant="ghost"
size="sm"
onClick={toggleTheme}
className="w-full justify-start gap-2 text-gray-400 hover:text-white hover:bg-white/5"
className="w-full justify-start gap-2 text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent"
>
{theme === 'dark' ? (
<>
@@ -275,7 +271,7 @@ export default function AppSidebar({
</>
) : (
<>
<Moon className="w-4 h-4 text-indigo-400" />
<Moon className="w-4 h-4 text-sidebar-foreground/60" />
<span>Dark Mode</span>
</>
)}
@@ -283,7 +279,7 @@ export default function AppSidebar({
{/* User Profile */}
{user ? (
<div className="flex items-center gap-3 px-2 py-2 rounded-lg bg-white/5 mt-2">
<div className="flex items-center gap-3 px-2 py-2 rounded-lg bg-sidebar-accent">
<Avatar className="w-8 h-8">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="bg-[#e8466c]/20 text-[#e8466c] text-xs">
@@ -295,20 +291,20 @@ export default function AppSidebar({
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-white truncate">{user.name}</p>
<p className="text-xs text-gray-500 truncate">{user.email}</p>
<p className="text-sm font-medium text-sidebar-foreground truncate">{user.name}</p>
<p className="text-xs text-sidebar-foreground/50 truncate">{user.email}</p>
</div>
</div>
) : (
<div className="flex items-center gap-3 px-2 py-2 rounded-lg bg-white/5 mt-2">
<div className="flex items-center gap-3 px-2 py-2 rounded-lg bg-sidebar-accent">
<Avatar className="w-8 h-8">
<AvatarFallback className="bg-[#e8466c]/20 text-[#e8466c]">
<User className="w-4 h-4" />
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-white">Guest</p>
<p className="text-xs text-gray-500">Not logged in</p>
<p className="text-sm font-medium text-sidebar-foreground">Guest</p>
<p className="text-xs text-sidebar-foreground/50">Not logged in</p>
</div>
</div>
)}
@@ -318,7 +314,7 @@ export default function AppSidebar({
variant="ghost"
size="sm"
onClick={handleLogout}
className="w-full justify-start gap-2 text-gray-400 hover:text-red-400 hover:bg-red-500/10 mt-2"
className="w-full justify-start gap-2 text-sidebar-foreground/60 hover:text-red-400 hover:bg-red-500/10"
>
<LogOut className="w-4 h-4" />
<span>Logout</span>
src/components/ui/loading.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ interface LoadingProps {
export default function Loading({ message = 'Loading...' }: LoadingProps) {
return (
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
<Loader2 className="animate-spin h-12 w-12 text-[#6d28d9] mb-4" />
<Loader2 className="animate-spin h-12 w-12 text-[#e8466c] mb-4" />
<p className="text-lg font-bold">{message}</p>
</div>
);
src/index.css
+42 -42
View File
@@ -99,7 +99,7 @@
--mv-accent-light: #f47298;
/* Custom gradient colors */
--gradient-purple: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
--gradient-purple: linear-gradient(135deg, #e8466c 0%, #f47298 50%, #f9a8c9 100%);
--gradient-blue: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);
--gradient-green: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
--gradient-yellow: linear-gradient(135deg, #eab308 0%, #facc15 50%, #fde047 100%);
@@ -107,56 +107,56 @@
}
.dark {
--background: oklch(0.12 0.01 264);
--foreground: oklch(0.985 0 0);
--card: oklch(0.18 0.02 264);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.18 0.02 264);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0.01 264);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.25 0.01 264);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0.01 264);
--accent-foreground: oklch(0.985 0 0);
--background: oklch(0.145 0.005 35);
--foreground: oklch(0.82 0.008 35);
--card: oklch(0.17 0.005 35);
--card-foreground: oklch(0.82 0.008 35);
--popover: oklch(0.17 0.005 35);
--popover-foreground: oklch(0.82 0.008 35);
--primary: oklch(0.82 0.008 35);
--primary-foreground: oklch(0.145 0.005 35);
--secondary: oklch(0.21 0.005 35);
--secondary-foreground: oklch(0.82 0.008 35);
--muted: oklch(0.19 0.005 35);
--muted-foreground: oklch(0.55 0.01 35);
--accent: oklch(0.21 0.005 35);
--accent-foreground: oklch(0.82 0.008 35);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(0.985 0 0 / 15%);
--input: oklch(0.985 0 0 / 20%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--sidebar: oklch(0.18 0.02 264);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.985 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--border: oklch(0.82 0.008 35 / 10%);
--input: oklch(0.82 0.008 35 / 15%);
--ring: oklch(0.55 0 0);
--chart-1: oklch(0.7 0.08 35);
--chart-2: oklch(0.55 0.04 35);
--chart-3: oklch(0.4 0.02 35);
--chart-4: oklch(0.3 0.015 35);
--chart-5: oklch(0.2 0.01 35);
--sidebar: oklch(0.125 0.005 35);
--sidebar-foreground: oklch(0.82 0.008 35);
--sidebar-primary: oklch(0.55 0.22 0);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.19 0.005 35);
--sidebar-accent-foreground: oklch(0.82 0.008 35);
--sidebar-border: oklch(0.82 0.008 35 / 8%);
--sidebar-ring: oklch(0.55 0 0);
/* MediaVault accent color - pink/coral */
--mv-accent: #e8466c;
--mv-accent-hover: #d13d60;
--mv-accent-light: #f47298;
/* Custom gradient colors for dark mode - more vibrant */
--gradient-purple: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
--gradient-blue: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
--gradient-green: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);
--gradient-yellow: linear-gradient(135deg, #ca8a04 0%, #eab308 50%, #facc15 100%);
/* Custom gradient colors for dark mode - softer on eyes */
--gradient-purple: linear-gradient(135deg, #e8466c 0%, #f47298 50%, #f9a8c9 100%);
--gradient-blue: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);
--gradient-green: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
--gradient-yellow: linear-gradient(135deg, #eab308 0%, #facc15 50%, #fde047 100%);
--gradient-pink: linear-gradient(135deg, #e8466c 0%, #f47298 50%, #f9a8c9 100%);
--gradient-orange: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #fb923c 100%);
--gradient-cyan: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%);
--gradient-orange: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
--gradient-cyan: linear-gradient(135deg, #06b6d4 0%, #22d3ee 50%, #67e8f9 100%);
/* Background gradients for dark mode */
--bg-gradient-subtle: radial-gradient(circle at top right, rgba(232, 70, 108, 0.08) 0%, transparent 50%),
radial-gradient(circle at bottom left, rgba(232, 70, 108, 0.05) 0%, transparent 50%);
--bg-gradient-mesh: linear-gradient(135deg, rgba(232, 70, 108, 0.03) 0%, rgba(244, 114, 152, 0.03) 50%, rgba(249, 168, 201, 0.03) 100%);
--bg-gradient-subtle: radial-gradient(circle at top right, rgba(232, 70, 108, 0.06) 0%, transparent 50%),
radial-gradient(circle at bottom left, rgba(232, 70, 108, 0.04) 0%, transparent 50%);
--bg-gradient-mesh: linear-gradient(135deg, rgba(232, 70, 108, 0.02) 0%, rgba(244, 114, 152, 0.02) 50%, rgba(249, 168, 201, 0.02) 100%);
}
@layer base {
@@ -164,7 +164,7 @@
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
@apply bg-background text-foreground transition-[background-color,border-color] duration-200;
}
html {
@apply font-sans;