add Support Resources card to My Dashboard; linkify Bulletin Board text

Mirrors the Support Resources links + feedback button already on
project pages, and applies the new Linkify helper to bulletin text.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-14 13:19:07 -07:00
parent 6a74f5f0fb
commit f616b7e980

View File

@@ -1,11 +1,11 @@
import { useState } from "react";
import { Link } from "react-router-dom";
import { Copy, Check, Megaphone, Box, Info, AlertTriangle, AlertCircle, Bell, BellOff } from "lucide-react";
import { Copy, Check, Megaphone, Box, Info, AlertTriangle, AlertCircle, Bell, BellOff, ExternalLink } from "lucide-react";
import { useDashboardStats, useDashboardExpiring, useDashboardActivity } from "@/hooks/use-certs";
import { useProjects } from "@/hooks/use-projects";
import { useMyTeammates } from "@/hooks/use-dashboard";
import { useLiveAppStatuses } from "@/hooks/use-app-status";
import { useApplications } from "@/hooks/use-settings";
import { useApplications, useSupportResources } from "@/hooks/use-settings";
import { useLiveBulletins, type Announcement } from "@/hooks/use-announcements";
import { useNotificationPreference } from "@/hooks/use-browser-notifications";
import { useAuthContext } from "@/contexts/auth-context";
@@ -14,6 +14,8 @@ import { ExpiringItems } from "@/components/dashboard/expiring-items";
import { RecentActivity } from "@/components/dashboard/recent-activity";
import { RecentDowntime } from "@/components/dashboard/recent-downtime";
import { useDowntimeEntries } from "@/hooks/use-downtime";
import { FeedbackModal } from "@/components/feedback/feedback-modal";
import { Linkify } from "@/components/shared/linkify";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import {
Card,
@@ -293,7 +295,7 @@ function AnnouncementsSection() {
{ann.type}
</span>
<div className="min-w-0 flex-1">
<p className="text-sm whitespace-pre-wrap">{ann.text}</p>
<p className="text-sm whitespace-pre-wrap"><Linkify text={ann.text} /></p>
<p className="text-[10px] text-muted-foreground mt-1">
{ann.created_by ?? "system"}
{ann.created_at &&
@@ -500,6 +502,48 @@ function NotificationCard() {
);
}
function SupportResourcesSection() {
const { data: supportResources } = useSupportResources();
const [feedbackOpen, setFeedbackOpen] = useState(false);
return (
<Card>
<CardHeader>
<CardTitle>Support Resources</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{(supportResources ?? []).map((link) => (
<a
key={link.title}
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 rounded-md border p-3 text-sm font-medium hover:bg-muted transition-colors"
>
<ExternalLink className="size-4 text-muted-foreground" />
{link.title}
</a>
))}
<button
onClick={() => setFeedbackOpen(true)}
className="flex items-center gap-2 rounded-md border p-3 text-sm font-medium hover:bg-muted transition-colors text-left"
>
<ExternalLink className="size-4 text-muted-foreground" />
Management Suite Feedback
</button>
</div>
</CardContent>
<FeedbackModal
open={feedbackOpen}
onOpenChange={setFeedbackOpen}
projectKey="GENERAL"
/>
</Card>
);
}
function PersonalDashboard() {
return (
<div className="space-y-6">
@@ -512,6 +556,8 @@ function PersonalDashboard() {
<AnnouncementsSection />
<SupportResourcesSection />
<NotificationCard />
</div>
);