Add customizable home dashboard with per-user pinned apps
- Users can pin/unpin any available service on their home page via a Customize mode; preferences persisted via PATCH /api/users/me/preferences - Time-aware greeting renders the user's display name through React JSX (HTML-escaped by design — no dangerouslySetInnerHTML used) - Added dashboard_app_ids JSON column to users table (migration c7e8f9a0b1d2) - /settings now routes to a placeholder page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
curo1305
@@ -1,13 +1,239 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getMe } from "../api/client";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Pencil, Check, X, Plus, Minus, ExternalLink } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
getMe,
|
||||
getServices,
|
||||
getDashboardPrefs,
|
||||
updateDashboardPrefs,
|
||||
type ServiceStatus,
|
||||
} from "../api/client";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [editing, setEditing] = useState(false);
|
||||
// Tracks pending changes while in edit mode — only committed on Save.
|
||||
const [pendingIds, setPendingIds] = useState<string[]>([]);
|
||||
|
||||
const { data: user } = useQuery({ queryKey: ["me"], queryFn: getMe });
|
||||
const { data: services = [] } = useQuery({
|
||||
queryKey: ["services"],
|
||||
queryFn: getServices,
|
||||
refetchInterval: 30_000,
|
||||
refetchIntervalInBackground: true,
|
||||
});
|
||||
const { data: prefs } = useQuery({
|
||||
queryKey: ["dashboard-prefs"],
|
||||
queryFn: getDashboardPrefs,
|
||||
enabled: !!user,
|
||||
});
|
||||
|
||||
const savePrefs = useMutation({
|
||||
mutationFn: updateDashboardPrefs,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["dashboard-prefs"] });
|
||||
setEditing(false);
|
||||
},
|
||||
});
|
||||
|
||||
const pinnedIds: string[] = editing ? pendingIds : (prefs?.app_ids ?? []);
|
||||
const pinnedServices = services.filter((s) => pinnedIds.includes(s.id));
|
||||
const unpinnedServices = services.filter((s) => !pinnedIds.includes(s.id));
|
||||
|
||||
function startEditing() {
|
||||
setPendingIds(prefs?.app_ids ?? []);
|
||||
setEditing(true);
|
||||
}
|
||||
|
||||
function cancelEditing() {
|
||||
setEditing(false);
|
||||
setPendingIds([]);
|
||||
}
|
||||
|
||||
function toggleApp(id: string) {
|
||||
setPendingIds((prev) =>
|
||||
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
|
||||
);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
savePrefs.mutate(pendingIds);
|
||||
}
|
||||
|
||||
// Determine greeting: safe because React JSX text nodes are HTML-escaped by
|
||||
// the renderer — no dangerouslySetInnerHTML is used anywhere here.
|
||||
const displayName = user?.full_name?.trim() || user?.email || "there";
|
||||
const hour = new Date().getHours();
|
||||
const greeting =
|
||||
hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-foreground mb-2">Dashboard</h1>
|
||||
{user && <p className="text-muted">Welcome, {user.full_name ?? user.email}</p>}
|
||||
<div className="p-8 max-w-4xl mx-auto">
|
||||
{/* Welcome header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-semibold text-foreground">
|
||||
{greeting}, {displayName}!
|
||||
</h1>
|
||||
<p className="text-muted mt-1 text-sm">
|
||||
Here are your pinned apps. Customize your dashboard below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-base font-medium text-foreground">My Apps</h2>
|
||||
{editing ? (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={cancelEditing}
|
||||
disabled={savePrefs.isPending}
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSave}
|
||||
disabled={savePrefs.isPending}
|
||||
>
|
||||
<Check className="h-4 w-4 mr-1" />
|
||||
{savePrefs.isPending ? "Saving…" : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button size="sm" variant="outline" onClick={startEditing}>
|
||||
<Pencil className="h-4 w-4 mr-1" />
|
||||
Customize
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pinned apps grid */}
|
||||
{!editing && pinnedServices.length === 0 && (
|
||||
<div className="text-center py-16 text-muted border border-dashed border-border rounded-xl">
|
||||
<p className="text-sm">No apps pinned yet.</p>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="mt-3"
|
||||
onClick={startEditing}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Add apps
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pinnedServices.length > 0 && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
|
||||
{pinnedServices.map((svc) => (
|
||||
<AppCard
|
||||
key={svc.id}
|
||||
svc={svc}
|
||||
editing={editing}
|
||||
pinned
|
||||
onToggle={toggleApp}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit mode — available apps to add */}
|
||||
{editing && unpinnedServices.length > 0 && (
|
||||
<>
|
||||
<h2 className="text-base font-medium text-foreground mb-3 mt-6">
|
||||
Available Apps
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{unpinnedServices.map((svc) => (
|
||||
<AppCard
|
||||
key={svc.id}
|
||||
svc={svc}
|
||||
editing
|
||||
pinned={false}
|
||||
onToggle={toggleApp}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{savePrefs.isError && (
|
||||
<p className="text-sm text-red-500 mt-4">
|
||||
Failed to save preferences. Please try again.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface AppCardProps {
|
||||
svc: ServiceStatus;
|
||||
editing: boolean;
|
||||
pinned: boolean;
|
||||
onToggle: (id: string) => void;
|
||||
}
|
||||
|
||||
function AppCard({ svc, editing, pinned, onToggle }: AppCardProps) {
|
||||
const canOpen = svc.healthy && !!svc.app_path;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative rounded-xl border border-border bg-surface p-5 flex flex-col gap-2 transition-opacity",
|
||||
!svc.healthy && "opacity-60"
|
||||
)}
|
||||
>
|
||||
{/* Edit overlay button */}
|
||||
{editing && (
|
||||
<button
|
||||
onClick={() => onToggle(svc.id)}
|
||||
className={cn(
|
||||
"absolute top-3 right-3 rounded-full p-1 transition-colors",
|
||||
pinned
|
||||
? "bg-red-100 text-red-600 hover:bg-red-200"
|
||||
: "bg-green-100 text-green-700 hover:bg-green-200"
|
||||
)}
|
||||
title={pinned ? "Remove from dashboard" : "Add to dashboard"}
|
||||
>
|
||||
{pinned ? (
|
||||
<Minus className="h-4 w-4" />
|
||||
) : (
|
||||
<Plus className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between pr-6">
|
||||
<h3 className="text-sm font-semibold text-foreground">{svc.name}</h3>
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs font-medium",
|
||||
svc.healthy ? "text-emerald-600" : "text-red-500"
|
||||
)}
|
||||
>
|
||||
{svc.healthy ? "Available" : "Unavailable"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted leading-relaxed">{svc.description}</p>
|
||||
|
||||
{!editing && canOpen && (
|
||||
<div className="mt-auto pt-2">
|
||||
<Link
|
||||
to={svc.app_path}
|
||||
className="inline-flex items-center gap-1 text-xs text-primary hover:underline font-medium"
|
||||
>
|
||||
Open
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Settings } from "lucide-react";
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-2xl mx-auto">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Settings className="h-6 w-6 text-muted" />
|
||||
<h1 className="text-2xl font-semibold text-foreground">Settings</h1>
|
||||
</div>
|
||||
<p className="text-muted text-sm">
|
||||
User and application settings will be available here in a future update.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user