Initial release v1.0.0
This commit is contained in:
Kevin O'Neill
180
frontend/components/activity/ActiveDownloadsTab.tsx
Normal file
180
frontend/components/activity/ActiveDownloadsTab.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Download, Loader2, Music, Disc, X, Trash2 } from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import { cn } from "@/utils/cn";
|
||||
import { GradientSpinner } from "../ui/GradientSpinner";
|
||||
|
||||
interface ActiveDownload {
|
||||
id: string;
|
||||
subject: string;
|
||||
type: string;
|
||||
status: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export function ActiveDownloadsTab() {
|
||||
const [downloads, setDownloads] = useState<ActiveDownload[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [cancelling, setCancelling] = useState<Set<string>>(new Set());
|
||||
|
||||
const fetchDownloads = async () => {
|
||||
try {
|
||||
const data = await api.getActiveDownloads();
|
||||
setDownloads(data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch active downloads:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = async (id: string) => {
|
||||
setCancelling(prev => new Set(prev).add(id));
|
||||
try {
|
||||
await api.deleteDownload(id);
|
||||
// Optimistically remove from list
|
||||
setDownloads(prev => prev.filter(d => d.id !== id));
|
||||
} catch (error) {
|
||||
console.error("Failed to cancel download:", error);
|
||||
} finally {
|
||||
setCancelling(prev => {
|
||||
const next = new Set(prev);
|
||||
next.delete(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelAll = async () => {
|
||||
const ids = downloads.map(d => d.id);
|
||||
setCancelling(new Set(ids));
|
||||
try {
|
||||
// Cancel all downloads in parallel
|
||||
await Promise.all(ids.map(id => api.deleteDownload(id)));
|
||||
setDownloads([]);
|
||||
} catch (error) {
|
||||
console.error("Failed to cancel all downloads:", error);
|
||||
// Refresh to get actual state
|
||||
fetchDownloads();
|
||||
} finally {
|
||||
setCancelling(new Set());
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDownloads();
|
||||
|
||||
// Poll for updates every 5 seconds
|
||||
const interval = setInterval(fetchDownloads, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const formatTime = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
if (diff < 60000) return "Just started";
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}m`;
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h`;
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="w-5 h-5 border-2 border-white/20 border-t-white/60 rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (downloads.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Download className="w-8 h-8 text-white/20 mb-3" />
|
||||
<p className="text-sm text-white/40">No active downloads</p>
|
||||
<p className="text-xs text-white/30 mt-1">Downloads will appear here</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-white/5">
|
||||
<span className="text-xs text-white/40">
|
||||
{downloads.length} downloading
|
||||
</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={handleCancelAll}
|
||||
className="text-xs text-white/40 hover:text-red-400 transition-colors"
|
||||
title="Cancel all downloads"
|
||||
>
|
||||
Cancel all
|
||||
</button>
|
||||
<span className="flex items-center gap-1.5 text-xs text-green-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Download list */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{downloads.map((download) => (
|
||||
<div
|
||||
key={download.id}
|
||||
className="px-3 py-3 border-b border-white/5 hover:bg-white/5 transition-colors group"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5 shrink-0">
|
||||
{cancelling.has(download.id) ? (
|
||||
<Loader2 className="w-4 h-4 text-white/40 animate-spin" />
|
||||
) : (
|
||||
<GradientSpinner size="sm" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white truncate">
|
||||
{download.subject}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className={cn(
|
||||
"text-xs font-medium capitalize",
|
||||
download.status === "processing" ? "text-blue-400" : "text-yellow-400"
|
||||
)}>
|
||||
{download.status}
|
||||
</span>
|
||||
<span className="text-xs text-white/30">•</span>
|
||||
<span className="text-xs text-white/30 capitalize flex items-center gap-1">
|
||||
{download.type === "album" ? (
|
||||
<Disc className="w-3 h-3" />
|
||||
) : (
|
||||
<Music className="w-3 h-3" />
|
||||
)}
|
||||
{download.type}
|
||||
</span>
|
||||
<span className="text-xs text-white/30">•</span>
|
||||
<span className="text-xs text-white/30">
|
||||
{formatTime(download.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCancel(download.id)}
|
||||
disabled={cancelling.has(download.id)}
|
||||
className="p-1 opacity-0 group-hover:opacity-100 hover:bg-white/10 rounded transition-all shrink-0"
|
||||
title="Cancel download"
|
||||
>
|
||||
<X className="w-4 h-4 text-white/40 hover:text-red-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
269
frontend/components/activity/HistoryTab.tsx
Normal file
269
frontend/components/activity/HistoryTab.tsx
Normal file
@@ -0,0 +1,269 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { CheckCircle, XCircle, Trash2, RotateCcw, History, Disc, Music } from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import { cn } from "@/utils/cn";
|
||||
|
||||
interface DownloadHistory {
|
||||
id: string;
|
||||
subject: string;
|
||||
type: string;
|
||||
status: string;
|
||||
error?: string;
|
||||
createdAt: string;
|
||||
completedAt?: string;
|
||||
}
|
||||
|
||||
export function HistoryTab() {
|
||||
const [history, setHistory] = useState<DownloadHistory[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [retrying, setRetrying] = useState<Set<string>>(new Set());
|
||||
|
||||
const fetchHistory = async () => {
|
||||
try {
|
||||
const data = await api.getDownloadHistory();
|
||||
setHistory(data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch download history:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchHistory();
|
||||
|
||||
// Refresh on window focus
|
||||
const handleFocus = () => fetchHistory();
|
||||
window.addEventListener("focus", handleFocus);
|
||||
return () => window.removeEventListener("focus", handleFocus);
|
||||
}, []);
|
||||
|
||||
const handleClear = async (id: string) => {
|
||||
try {
|
||||
await api.clearDownloadFromHistory(id);
|
||||
setHistory((prev) => prev.filter((h) => h.id !== id));
|
||||
// Notify other components that download status has changed
|
||||
window.dispatchEvent(new CustomEvent("download-status-changed"));
|
||||
} catch (error) {
|
||||
console.error("Failed to clear download:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearAll = async () => {
|
||||
try {
|
||||
await api.clearAllDownloadHistory();
|
||||
setHistory([]);
|
||||
// Notify other components that download status has changed
|
||||
window.dispatchEvent(new CustomEvent("download-status-changed"));
|
||||
} catch (error) {
|
||||
console.error("Failed to clear all history:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRetry = async (id: string) => {
|
||||
try {
|
||||
setRetrying((prev) => new Set(prev).add(id));
|
||||
const result = await api.retryFailedDownload(id);
|
||||
if (result.success) {
|
||||
// Remove from history (it's now in active)
|
||||
setHistory((prev) => prev.filter((h) => h.id !== id));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to retry download:", error);
|
||||
} finally {
|
||||
setRetrying((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
if (diff < 60000) return "Just now";
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
const completed = history.filter((h) => h.status === "completed");
|
||||
const failed = history.filter((h) => h.status === "failed" || h.status === "exhausted");
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="w-5 h-5 border-2 border-white/20 border-t-white/60 rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (history.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<History className="w-8 h-8 text-white/20 mb-3" />
|
||||
<p className="text-sm text-white/40">No download history</p>
|
||||
<p className="text-xs text-white/30 mt-1">Completed downloads will appear here</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header with clear all */}
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-white/5">
|
||||
<div className="flex items-center gap-3 text-xs text-white/40">
|
||||
{completed.length > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<CheckCircle className="w-3 h-3 text-green-400" />
|
||||
{completed.length}
|
||||
</span>
|
||||
)}
|
||||
{failed.length > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<XCircle className="w-3 h-3 text-red-400" />
|
||||
{failed.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleClearAll}
|
||||
className="text-xs text-white/40 hover:text-white transition-colors"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* History list */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{/* Failed section first */}
|
||||
{failed.length > 0 && (
|
||||
<div>
|
||||
<div className="px-3 py-1.5 bg-red-500/10 border-b border-red-500/20">
|
||||
<span className="text-xs font-medium text-red-400">Failed ({failed.length})</span>
|
||||
</div>
|
||||
{failed.map((item) => (
|
||||
<HistoryItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
onClear={handleClear}
|
||||
onRetry={handleRetry}
|
||||
isRetrying={retrying.has(item.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Completed section */}
|
||||
{completed.length > 0 && (
|
||||
<div>
|
||||
<div className="px-3 py-1.5 bg-green-500/10 border-b border-green-500/20">
|
||||
<span className="text-xs font-medium text-green-400">Completed ({completed.length})</span>
|
||||
</div>
|
||||
{completed.map((item) => (
|
||||
<HistoryItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
onClear={handleClear}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HistoryItem({
|
||||
item,
|
||||
onClear,
|
||||
onRetry,
|
||||
isRetrying,
|
||||
}: {
|
||||
item: DownloadHistory;
|
||||
onClear: (id: string) => void;
|
||||
onRetry?: (id: string) => void;
|
||||
isRetrying?: boolean;
|
||||
}) {
|
||||
const isCompleted = item.status === "completed";
|
||||
const isFailed = item.status === "failed" || item.status === "exhausted";
|
||||
|
||||
const formatTime = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
if (diff < 60000) return "Just now";
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="px-3 py-3 border-b border-white/5 hover:bg-white/5 transition-colors group">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5 flex-shrink-0">
|
||||
{isCompleted ? (
|
||||
<CheckCircle className="w-4 h-4 text-green-400" />
|
||||
) : (
|
||||
<XCircle className="w-4 h-4 text-red-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white truncate">
|
||||
{item.subject}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-white/30 capitalize flex items-center gap-1">
|
||||
{item.type === "album" ? (
|
||||
<Disc className="w-3 h-3" />
|
||||
) : (
|
||||
<Music className="w-3 h-3" />
|
||||
)}
|
||||
{item.type}
|
||||
</span>
|
||||
<span className="text-xs text-white/30">•</span>
|
||||
<span className="text-xs text-white/30">
|
||||
{formatTime(item.completedAt || item.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
{item.error && (
|
||||
<p className="text-xs text-red-400/70 mt-1 line-clamp-2">
|
||||
{item.error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{isFailed && onRetry && (
|
||||
<button
|
||||
onClick={() => onRetry(item.id)}
|
||||
disabled={isRetrying}
|
||||
className={cn(
|
||||
"p-1 hover:bg-white/10 rounded transition-colors",
|
||||
isRetrying && "opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
title="Retry download"
|
||||
>
|
||||
<RotateCcw className={cn(
|
||||
"w-3.5 h-3.5 text-white/40 hover:text-[#ecb200]",
|
||||
isRetrying && "animate-spin"
|
||||
)} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => onClear(item.id)}
|
||||
className="p-1 hover:bg-white/10 rounded transition-colors"
|
||||
title="Remove from history"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5 text-white/40 hover:text-red-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
329
frontend/components/activity/NotificationsTab.tsx
Normal file
329
frontend/components/activity/NotificationsTab.tsx
Normal file
@@ -0,0 +1,329 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import {
|
||||
Bell,
|
||||
Check,
|
||||
Trash2,
|
||||
ListMusic,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
ExternalLink,
|
||||
} from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import { cn } from "@/utils/cn";
|
||||
import Link from "next/link";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
interface Notification {
|
||||
id: string;
|
||||
type: string;
|
||||
title: string;
|
||||
message: string | null;
|
||||
metadata: any;
|
||||
read: boolean;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export function NotificationsTab() {
|
||||
const queryClient = useQueryClient();
|
||||
const previousNotificationIds = useRef<Set<string>>(new Set());
|
||||
|
||||
const {
|
||||
data: notifications = [],
|
||||
isLoading: loading,
|
||||
error,
|
||||
} = useQuery<Notification[]>({
|
||||
queryKey: ["notifications"],
|
||||
queryFn: async () => {
|
||||
console.log("[NotificationsTab] Fetching notifications...");
|
||||
const result = await api.getNotifications();
|
||||
console.log("[NotificationsTab] Got notifications:", result);
|
||||
return result;
|
||||
},
|
||||
refetchInterval: 30000, // Poll every 30 seconds
|
||||
});
|
||||
|
||||
// Dispatch events when new playlist-related notifications arrive
|
||||
useEffect(() => {
|
||||
if (!notifications || notifications.length === 0) return;
|
||||
|
||||
const currentIds = new Set(notifications.map((n) => n.id));
|
||||
|
||||
// Check for new playlist-related notifications
|
||||
for (const notification of notifications) {
|
||||
if (!previousNotificationIds.current.has(notification.id)) {
|
||||
// This is a new notification
|
||||
if (
|
||||
notification.type === "playlist_ready" ||
|
||||
notification.type === "import_complete"
|
||||
) {
|
||||
console.log(
|
||||
"[NotificationsTab] New playlist notification, dispatching event"
|
||||
);
|
||||
window.dispatchEvent(new CustomEvent("playlist-created"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
previousNotificationIds.current = currentIds;
|
||||
}, [notifications]);
|
||||
|
||||
// Log error if any
|
||||
if (error) {
|
||||
console.error(
|
||||
"[NotificationsTab] Error fetching notifications:",
|
||||
error
|
||||
);
|
||||
}
|
||||
|
||||
// Mark as read - optimistic update
|
||||
const markAsReadMutation = useMutation({
|
||||
mutationFn: (id: string) => api.markNotificationAsRead(id),
|
||||
onMutate: async (id: string) => {
|
||||
await queryClient.cancelQueries({ queryKey: ["notifications"] });
|
||||
|
||||
const previousNotifications = queryClient.getQueryData<
|
||||
Notification[]
|
||||
>(["notifications"]);
|
||||
|
||||
// Optimistically update
|
||||
queryClient.setQueryData<Notification[]>(
|
||||
["notifications"],
|
||||
(old) =>
|
||||
old?.map((n) => (n.id === id ? { ...n, read: true } : n)) ||
|
||||
[]
|
||||
);
|
||||
|
||||
return { previousNotifications };
|
||||
},
|
||||
onError: (_err, _id, context) => {
|
||||
// Rollback on error
|
||||
if (context?.previousNotifications) {
|
||||
queryClient.setQueryData(
|
||||
["notifications"],
|
||||
context.previousNotifications
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Clear single notification - optimistic update
|
||||
const clearMutation = useMutation({
|
||||
mutationFn: (id: string) => api.clearNotification(id),
|
||||
onMutate: async (id: string) => {
|
||||
await queryClient.cancelQueries({ queryKey: ["notifications"] });
|
||||
|
||||
const previousNotifications = queryClient.getQueryData<
|
||||
Notification[]
|
||||
>(["notifications"]);
|
||||
|
||||
// Optimistically remove
|
||||
queryClient.setQueryData<Notification[]>(
|
||||
["notifications"],
|
||||
(old) => old?.filter((n) => n.id !== id) || []
|
||||
);
|
||||
|
||||
return { previousNotifications };
|
||||
},
|
||||
onError: (_err, _id, context) => {
|
||||
if (context?.previousNotifications) {
|
||||
queryClient.setQueryData(
|
||||
["notifications"],
|
||||
context.previousNotifications
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Clear all notifications - optimistic update
|
||||
const clearAllMutation = useMutation({
|
||||
mutationFn: () => api.clearAllNotifications(),
|
||||
onMutate: async () => {
|
||||
await queryClient.cancelQueries({ queryKey: ["notifications"] });
|
||||
|
||||
const previousNotifications = queryClient.getQueryData<
|
||||
Notification[]
|
||||
>(["notifications"]);
|
||||
|
||||
// Optimistically clear all
|
||||
queryClient.setQueryData<Notification[]>(["notifications"], []);
|
||||
|
||||
return { previousNotifications };
|
||||
},
|
||||
onError: (_err, _vars, context) => {
|
||||
if (context?.previousNotifications) {
|
||||
queryClient.setQueryData(
|
||||
["notifications"],
|
||||
context.previousNotifications
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const handleMarkAsRead = (id: string) => markAsReadMutation.mutate(id);
|
||||
const handleClear = (id: string) => clearMutation.mutate(id);
|
||||
const handleClearAll = () => clearAllMutation.mutate();
|
||||
|
||||
const getIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "download_complete":
|
||||
return <CheckCircle className="w-4 h-4 text-green-400" />;
|
||||
case "download_failed":
|
||||
return <AlertCircle className="w-4 h-4 text-red-400" />;
|
||||
case "playlist_ready":
|
||||
case "import_complete":
|
||||
return <ListMusic className="w-4 h-4 text-[#ecb200]" />;
|
||||
case "system":
|
||||
default:
|
||||
return <Bell className="w-4 h-4 text-white/60" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getLink = (notification: Notification): string | null => {
|
||||
if (notification.metadata?.playlistId) {
|
||||
return `/playlist/${notification.metadata.playlistId}`;
|
||||
}
|
||||
if (notification.metadata?.albumId) {
|
||||
return `/album/${notification.metadata.albumId}`;
|
||||
}
|
||||
if (notification.metadata?.artistId) {
|
||||
return `/artist/${notification.metadata.artistId}`;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const formatTime = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
if (diff < 60000) return "Just now";
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="w-5 h-5 border-2 border-white/20 border-t-white/60 rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (notifications.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Bell className="w-8 h-8 text-white/20 mb-3" />
|
||||
<p className="text-sm text-white/40">No notifications</p>
|
||||
<p className="text-xs text-white/30 mt-1">
|
||||
You're all caught up!
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header with clear all */}
|
||||
{notifications.length > 0 && (
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-white/5">
|
||||
<span className="text-xs text-white/40">
|
||||
{notifications.length} notification
|
||||
{notifications.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleClearAll}
|
||||
className="text-xs text-white/40 hover:text-white transition-colors"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notification list */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{notifications.map((notification) => {
|
||||
const link = getLink(notification);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={notification.id}
|
||||
className={cn(
|
||||
"px-3 py-3 border-b border-white/5 hover:bg-white/5 transition-colors group",
|
||||
!notification.read && "bg-white/[0.02]"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5 flex-shrink-0">
|
||||
{getIcon(notification.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p
|
||||
className={cn(
|
||||
"text-sm font-medium truncate",
|
||||
notification.read
|
||||
? "text-white/70"
|
||||
: "text-white"
|
||||
)}
|
||||
>
|
||||
{notification.title}
|
||||
</p>
|
||||
{!notification.read && (
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#ecb200] flex-shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
{notification.message && (
|
||||
<p className="text-xs text-white/50 mt-0.5 line-clamp-2">
|
||||
{notification.message}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
<span className="text-[10px] text-white/30">
|
||||
{formatTime(notification.createdAt)}
|
||||
</span>
|
||||
{link && (
|
||||
<Link
|
||||
href={link}
|
||||
className="text-[10px] text-[#ecb200] hover:underline flex items-center gap-0.5"
|
||||
>
|
||||
View{" "}
|
||||
<ExternalLink className="w-2.5 h-2.5" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{!notification.read && (
|
||||
<button
|
||||
onClick={() =>
|
||||
handleMarkAsRead(
|
||||
notification.id
|
||||
)
|
||||
}
|
||||
className="p-1 hover:bg-white/10 rounded transition-colors"
|
||||
title="Mark as read"
|
||||
>
|
||||
<Check className="w-3.5 h-3.5 text-white/40 hover:text-white" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() =>
|
||||
handleClear(notification.id)
|
||||
}
|
||||
className="p-1 hover:bg-white/10 rounded transition-colors"
|
||||
title="Dismiss"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5 text-white/40 hover:text-red-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user