mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-05 05:42:39 +02:00
feat: added announcements
This commit is contained in:
DESKTOP-RTLN3BA\$punk
parent
0e96e4492b
commit
e9979dfa7d
11 changed files with 833 additions and 3 deletions
350
surfsense_web/app/(home)/announcements/page.tsx
Normal file
350
surfsense_web/app/(home)/announcements/page.tsx
Normal file
|
|
@ -0,0 +1,350 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
Bell,
|
||||
BellOff,
|
||||
CheckCheck,
|
||||
ExternalLink,
|
||||
Filter,
|
||||
Info,
|
||||
type Megaphone,
|
||||
Rocket,
|
||||
Wrench,
|
||||
X,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import type { AnnouncementCategory } from "@/contracts/types/announcement.types";
|
||||
import { type AnnouncementWithState, useAnnouncements } from "@/hooks/use-announcements";
|
||||
import { formatRelativeDate } from "@/lib/format-date";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Category configuration
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const categoryConfig: Record<
|
||||
AnnouncementCategory,
|
||||
{
|
||||
label: string;
|
||||
icon: typeof Megaphone;
|
||||
color: string;
|
||||
badgeVariant: "default" | "secondary" | "destructive" | "outline";
|
||||
}
|
||||
> = {
|
||||
feature: {
|
||||
label: "Feature",
|
||||
icon: Rocket,
|
||||
color: "text-emerald-500",
|
||||
badgeVariant: "default",
|
||||
},
|
||||
update: {
|
||||
label: "Update",
|
||||
icon: Zap,
|
||||
color: "text-blue-500",
|
||||
badgeVariant: "secondary",
|
||||
},
|
||||
maintenance: {
|
||||
label: "Maintenance",
|
||||
icon: Wrench,
|
||||
color: "text-amber-500",
|
||||
badgeVariant: "outline",
|
||||
},
|
||||
info: {
|
||||
label: "Info",
|
||||
icon: Info,
|
||||
color: "text-muted-foreground",
|
||||
badgeVariant: "secondary",
|
||||
},
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Announcement card
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function AnnouncementCard({
|
||||
announcement,
|
||||
onMarkRead,
|
||||
onDismiss,
|
||||
}: {
|
||||
announcement: AnnouncementWithState;
|
||||
onMarkRead: (id: string) => void;
|
||||
onDismiss: (id: string) => void;
|
||||
}) {
|
||||
const config = categoryConfig[announcement.category];
|
||||
const Icon = config.icon;
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={`group relative transition-all duration-200 hover:shadow-md ${
|
||||
!announcement.isRead ? "border-l-4 border-l-primary bg-primary/2" : ""
|
||||
}`}
|
||||
>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
<div
|
||||
className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted ${config.color}`}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<CardTitle className="text-base leading-tight">{announcement.title}</CardTitle>
|
||||
<Badge variant={config.badgeVariant} className="text-[10px] px-1.5 py-0">
|
||||
{config.label}
|
||||
</Badge>
|
||||
{announcement.isImportant && (
|
||||
<Badge variant="destructive" className="text-[10px] px-1.5 py-0 gap-0.5">
|
||||
<Bell className="h-2.5 w-2.5" />
|
||||
Important
|
||||
</Badge>
|
||||
)}
|
||||
{!announcement.isRead && (
|
||||
<span className="h-2 w-2 rounded-full bg-primary shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
<CardDescription className="mt-1 text-xs">
|
||||
{formatRelativeDate(announcement.date)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{!announcement.isRead && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => onMarkRead(announcement.id)}
|
||||
>
|
||||
<CheckCheck className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Mark as read</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => onDismiss(announcement.id)}
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Dismiss</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="pb-3">
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">{announcement.description}</p>
|
||||
</CardContent>
|
||||
|
||||
{announcement.link && (
|
||||
<CardFooter className="pt-0 pb-4">
|
||||
<Button variant="outline" size="sm" asChild className="gap-1.5">
|
||||
<Link
|
||||
href={announcement.link.url}
|
||||
target={announcement.link.url.startsWith("http") ? "_blank" : undefined}
|
||||
onClick={() => onMarkRead(announcement.id)}
|
||||
>
|
||||
{announcement.link.label}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Empty state
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function EmptyState({ hasFilters }: { hasFilters: boolean }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
|
||||
{hasFilters ? (
|
||||
<Filter className="h-7 w-7 text-muted-foreground" />
|
||||
) : (
|
||||
<BellOff className="h-7 w-7 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold">
|
||||
{hasFilters ? "No matching announcements" : "No announcements"}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-muted-foreground max-w-sm">
|
||||
{hasFilters
|
||||
? "Try adjusting your filters to see more announcements."
|
||||
: "You're all caught up! New announcements will appear here."}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Page
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default function AnnouncementsPage() {
|
||||
const [activeCategories, setActiveCategories] = useState<AnnouncementCategory[]>([]);
|
||||
const [showOnlyUnread, setShowOnlyUnread] = useState(false);
|
||||
|
||||
const { announcements, unreadCount, markRead, markAllRead, dismiss } = useAnnouncements({
|
||||
includeDismissed: false,
|
||||
});
|
||||
|
||||
// Apply local filters
|
||||
const filteredAnnouncements = announcements.filter((a) => {
|
||||
if (activeCategories.length > 0 && !activeCategories.includes(a.category)) return false;
|
||||
if (showOnlyUnread && a.isRead) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
const hasActiveFilters = activeCategories.length > 0 || showOnlyUnread;
|
||||
|
||||
const toggleCategory = (cat: AnnouncementCategory) => {
|
||||
setActiveCategories((prev) =>
|
||||
prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<div className="min-h-screen relative pt-20">
|
||||
{/* Header */}
|
||||
<div className="border-b border-border/50">
|
||||
<div className="max-w-5xl mx-auto relative">
|
||||
<div className="p-6">
|
||||
<h1 className="text-4xl font-bold tracking-tight bg-linear-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400 bg-clip-text text-transparent">
|
||||
Announcements
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="max-w-3xl mx-auto px-6 lg:px-10 pt-8 pb-20">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-between gap-3 mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Category filter dropdown */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="gap-1.5">
|
||||
<Filter className="h-3.5 w-3.5" />
|
||||
Filter
|
||||
{activeCategories.length > 0 && (
|
||||
<Badge variant="secondary" className="ml-1 px-1.5 py-0 text-[10px]">
|
||||
{activeCategories.length}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-48">
|
||||
<DropdownMenuLabel>Categories</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{(Object.keys(categoryConfig) as AnnouncementCategory[]).map((cat) => {
|
||||
const cfg = categoryConfig[cat];
|
||||
const CatIcon = cfg.icon;
|
||||
return (
|
||||
<DropdownMenuCheckboxItem
|
||||
key={cat}
|
||||
checked={activeCategories.includes(cat)}
|
||||
onCheckedChange={() => toggleCategory(cat)}
|
||||
>
|
||||
<CatIcon className={`mr-2 h-3.5 w-3.5 ${cfg.color}`} />
|
||||
{cfg.label}
|
||||
</DropdownMenuCheckboxItem>
|
||||
);
|
||||
})}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuCheckboxItem
|
||||
checked={showOnlyUnread}
|
||||
onCheckedChange={() => setShowOnlyUnread((v) => !v)}
|
||||
>
|
||||
<Bell className="mr-2 h-3.5 w-3.5" />
|
||||
Unread only
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{hasActiveFilters && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-xs text-muted-foreground"
|
||||
onClick={() => {
|
||||
setActiveCategories([]);
|
||||
setShowOnlyUnread(false);
|
||||
}}
|
||||
>
|
||||
Clear filters
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mark all read */}
|
||||
{unreadCount > 0 && (
|
||||
<Button variant="ghost" size="sm" className="gap-1.5 text-xs" onClick={markAllRead}>
|
||||
<CheckCheck className="h-3.5 w-3.5" />
|
||||
Mark all as read
|
||||
<Badge variant="secondary" className="ml-1 px-1.5 py-0 text-[10px]">
|
||||
{unreadCount}
|
||||
</Badge>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator className="mb-6" />
|
||||
|
||||
{/* Announcement list */}
|
||||
{filteredAnnouncements.length === 0 ? (
|
||||
<EmptyState hasFilters={hasActiveFilters} />
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
{filteredAnnouncements.map((announcement) => (
|
||||
<AnnouncementCard
|
||||
key={announcement.id}
|
||||
announcement={announcement}
|
||||
onMarkRead={markRead}
|
||||
onDismiss={dismiss}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import type { Metadata, Viewport } from "next";
|
|||
import "./globals.css";
|
||||
import { RootProvider } from "fumadocs-ui/provider/next";
|
||||
import { Roboto } from "next/font/google";
|
||||
import { AnnouncementToastProvider } from "@/components/announcements/AnnouncementToastProvider";
|
||||
import { ElectricProvider } from "@/components/providers/ElectricProvider";
|
||||
import { GlobalLoadingProvider } from "@/components/providers/GlobalLoadingProvider";
|
||||
import { I18nProvider } from "@/components/providers/I18nProvider";
|
||||
|
|
@ -124,6 +125,7 @@ export default function RootLayout({
|
|||
</ElectricProvider>
|
||||
</ReactQueryClientProvider>
|
||||
<Toaster />
|
||||
<AnnouncementToastProvider />
|
||||
</RootProvider>
|
||||
</ThemeProvider>
|
||||
</I18nProvider>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue