Developer
01527ae4f0
Combine both branches into a single coherent branch: - Full mobile responsive parity (useIsMobile, MobileCardRow, SheetForm, .mobile-touch-target, mobile cards, SheetForm forms, 44px targets, dirty-state confirm, TablePagination, refetchIntervalInBackground). - Full services-as-hub IA (data-driven nav, service-page tab skeleton, new service types, Authentik directory + messaging, named dashboards, legacy routes 404, Observability split, Jellyseerr absorbed). Enhancement: service tabs now use mobile-parity primitives: - MediaTab: MobileCardRow below md (title/size/HDR/library/year) + TablePagination; DataTable at md+ (desktop branch preserved). - FilesTab: MobileCardRow below md (name/type/size/modified) + handleRowClick; DataTable at md+. - ServicePage: SheetForm branch below md (open-on-mount, sticky header + save bar, cancel navigates back to /services, dirty-state guard). - Dashboard: single-column + section anchors below md (from mobile-parity) + empty-state CTA (from services-hub). - App.tsx: useIsMobile() replaces inline matchMedia (from mobile-parity) + data-driven useNavItems (from services-hub). - Backup tables (BackupAlerts/Jobs/Runs) already have MobileCardRow from mobile-parity; JobsTab inherits mobile behavior through its sub-components. Conflict resolutions: - Backend: entirely from services-hub (mobile didn't touch it). - Deleted pages (Media/FileBrowser/Actions/Users/UsersPage/Applications/ ObservabilityPage/BackupsPage + hooks/useUsers + tests): kept deleted (services-hub deleted them; content moved into service tabs). - New service-tabs/*: from services-hub, enhanced with mobile patterns. - App.tsx: services-hub's data-driven nav + mobile-parity's useIsMobile. - Dashboard.tsx: merged (services-hub CTA + mobile-parity sections/anchors). - ServicePage.tsx: services-hub's tab skeleton + mobile-parity's SheetForm. - Primitives (useIsMobile/mobile-card/sheet-form/etc.): from mobile-parity. 117 frontend tests pass (mobile-parity's 122 - 5 deleted page tests + services-hub's new tab/dashboard tests); 271 backend tests pass; lint/ build green both sides.
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import { Boxes, ChevronRight, type LucideIcon } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Pinned service link rendered on named dashboards. A card-shaped shortcut
|
|
* that navigates to a service page (or a specific tab via query param).
|
|
*
|
|
* The `target` is a route path like `/services/jellyfin/svc-1` or
|
|
* `/services/ssh_tasks/svc-2?tab=Files`.
|
|
*/
|
|
export interface PinnedServiceLinkProps {
|
|
label: string;
|
|
target: string;
|
|
icon?: LucideIcon;
|
|
className?: string;
|
|
}
|
|
|
|
export function PinnedServiceLink({
|
|
label,
|
|
target,
|
|
icon: Icon = Boxes,
|
|
className,
|
|
}: PinnedServiceLinkProps) {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate(target)}
|
|
className={cn(
|
|
"mobile-touch-target group flex min-h-16 w-full items-center justify-between rounded-lg border border-border bg-card p-4 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<Icon className="size-5 shrink-0 text-muted-foreground" />
|
|
<span className="text-sm font-medium text-foreground">{label}</span>
|
|
</div>
|
|
<ChevronRight className="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
|
|
</button>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Static helper: build a target path for a pinned service link.
|
|
* Returns `/services/:type/:id` or with a `?tab=` suffix when provided.
|
|
*/
|
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
export function serviceLinkTarget(
|
|
serviceType: string,
|
|
serviceId: string,
|
|
tab?: string,
|
|
): string {
|
|
const base = `/services/${serviceType}/${serviceId}`;
|
|
return tab ? `${base}?tab=${tab}` : base;
|
|
}
|