Initial commit: Federated Dashboard
This commit is contained in:
493
src/FederatedDashboard.tsx
Normal file
493
src/FederatedDashboard.tsx
Normal file
@@ -0,0 +1,493 @@
|
||||
// Federated Dashboard — React + Tailwind + Font Awesome 6 Free (Canvas Preview JS)
|
||||
// Adds custom drag preview that follows the cursor with a blue (#0EA5E9 @ 50%) shadow.
|
||||
// Features: theme toggle, favorites, search (headings hidden while typing), drag & drop reordering,
|
||||
// custom floating preview, status pill, 4-col grid, centered Federated logo.
|
||||
|
||||
import React, { useMemo, useState, useCallback, useEffect } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
|
||||
import {
|
||||
faSun,
|
||||
faMoon,
|
||||
faArrowUpRightFromSquare,
|
||||
faMagnifyingGlass,
|
||||
faStar as faStarSolid,
|
||||
faXmark,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
// ------------------------------------
|
||||
// Brand Tokens
|
||||
// ------------------------------------
|
||||
const BRAND_TOKENS = {
|
||||
primary: "#0F172A", // dark theme background
|
||||
accent: "#D67147", // favorites + focus ring + section label color
|
||||
surface: "#1E293B",
|
||||
};
|
||||
const LIGHT_TOKENS = {
|
||||
primary: "#4D6F83", // requested light background
|
||||
surface: "#FFFFFF", // white logo tile in light
|
||||
};
|
||||
|
||||
// ------------------------------------
|
||||
// Data
|
||||
// ------------------------------------
|
||||
// Local asset files for app logos (place in public/assets/)
|
||||
const ASSETS = {
|
||||
panel_black: "/assets/panelblack.png",
|
||||
panel_white: "/assets/panelwhite.png",
|
||||
billing_black: "/assets/Billingblack.png",
|
||||
billing_white: "/assets/Billingwhite.png",
|
||||
jitsi: "/assets/jitsi.svg",
|
||||
element: "/assets/element.png",
|
||||
nextcloud: "/assets/nextcloud.svg",
|
||||
espocrm: "/assets/espocrm.svg",
|
||||
plane: "/assets/plane.svg",
|
||||
freescout: "/assets/freescout.png",
|
||||
roundcube: "/assets/roundcube.svg",
|
||||
bookstack: "/assets/bookstack.svg",
|
||||
baserow: "/assets/baserow.svg",
|
||||
gitea: "/assets/gitea.svg",
|
||||
powerdns: "/assets/powerdns.svg",
|
||||
wordpress: "/assets/Wordpress.png",
|
||||
vaultwarden: "/assets/Vaultwarden.svg",
|
||||
calcom_black: "/assets/calcomblack.svg",
|
||||
calcom_white: "/assets/calcomwhite.svg",
|
||||
federated_logo_light: "/assets/federated.png",
|
||||
federated_logo_dark: "/assets/federated.png",
|
||||
};
|
||||
|
||||
const APP_CATALOG = [
|
||||
{ id: "nextcloud", name: "Nextcloud", category: "Email, Files, Documents", panelManaged: true, logoUrl: ASSETS.nextcloud },
|
||||
{ id: "jitsi", name: "Jitsi (Meet)", category: "Video Chat", panelManaged: true, logoUrl: ASSETS.jitsi },
|
||||
{ id: "element", name: "Element", category: "Team Chat", panelManaged: true, logoUrl: ASSETS.element },
|
||||
{ id: "espocrm", name: "EspoCRM", category: "Customer Relationship Manager", panelManaged: true, logoUrl: ASSETS.espocrm },
|
||||
{ id: "plane", name: "Plane", category: "Project Management", panelManaged: false, logoUrl: ASSETS.plane },
|
||||
{ id: "freescout", name: "FreeScout", category: "Customer Help Desk", panelManaged: false, logoUrl: ASSETS.freescout },
|
||||
{ id: "vaultwarden", name: "Vaultwarden", category: "Passwords", panelManaged: false, logoUrl: ASSETS.vaultwarden },
|
||||
{ id: "roundcube", name: "Roundcube", category: "Web Mail", panelManaged: true, logoUrl: ASSETS.roundcube },
|
||||
{ id: "bookstack", name: "BookStack", category: "Wiki Knowledgebase", panelManaged: true, logoUrl: ASSETS.bookstack },
|
||||
{ id: "baserow", name: "Baserow", category: "Visual Databases", panelManaged: true, logoUrl: ASSETS.baserow },
|
||||
{ id: "gitea", name: "Gitea", category: "GIT Source Control", panelManaged: true, logoUrl: ASSETS.gitea },
|
||||
{ id: "wordpress", name: "WordPress", category: "Your Website", panelManaged: true, logoUrl: ASSETS.wordpress },
|
||||
{ id: "powerdns", name: "PowerDNS", category: "DNS Management", panelManaged: true, logoUrl: ASSETS.powerdns },
|
||||
{ id: "calcom", name: "Cal.com", category: "Scheduling", panelManaged: true, logoUrl: ASSETS.calcom_black },
|
||||
{ id: "panel", name: "Federated Panel", category: "Create & Manage Users", panelManaged: true, logoUrl: ASSETS.panel_black },
|
||||
{ id: "billing", name: "Billing", category: "Manage your subscription", panelManaged: false, logoUrl: ASSETS.billing_black },
|
||||
];
|
||||
|
||||
// ------------------------------------
|
||||
// Hooks
|
||||
// ------------------------------------
|
||||
function useDebouncedValue(value, delay = 150) {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setDebounced(value), delay);
|
||||
return () => clearTimeout(t);
|
||||
}, [value, delay]);
|
||||
return debounced;
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// UI bits
|
||||
// ------------------------------------
|
||||
const Pill = React.memo(function Pill({ managed }) {
|
||||
const pillBg = managed
|
||||
? "bg-emerald-600 text-white ring-1 ring-emerald-300/30"
|
||||
: "bg-red-600 text-white ring-1 ring-red-300/30";
|
||||
const label = managed ? "In Panel" : "In App";
|
||||
return (
|
||||
<span className={`rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide ${pillBg}`}>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
|
||||
const AppLogo = React.memo(function AppLogo({ app, theme }) {
|
||||
const bg = theme === "light" ? "bg-white" : "bg-black/20";
|
||||
const themedSrc = app.id === "panel"
|
||||
? (theme === "light" ? ASSETS.panel_black : ASSETS.panel_white)
|
||||
: app.id === "billing"
|
||||
? (theme === "light" ? ASSETS.billing_black : ASSETS.billing_white)
|
||||
: app.id === "calcom"
|
||||
? (theme === "light" ? ASSETS.calcom_black : ASSETS.calcom_white)
|
||||
: app.logoUrl;
|
||||
return (
|
||||
<div className={`flex h-20 items-center justify-center rounded-xl ${bg}`} data-testid={`logo-${app.id}`}>
|
||||
{themedSrc ? (
|
||||
<img
|
||||
src={themedSrc}
|
||||
className={`max-h-10 max-w-[60%] object-contain ${app.id === "vaultwarden" && theme === "dark" ? "invert brightness-200" : ""}`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
referrerPolicy="no-referrer"
|
||||
fetchPriority="low"
|
||||
width={120}
|
||||
height={40}
|
||||
crossOrigin="anonymous"
|
||||
alt={`${app.name} logo`}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
// Drag-and-drop capable card
|
||||
const AppCard = React.memo(function AppCard({
|
||||
app,
|
||||
favorite = false,
|
||||
theme = "light",
|
||||
onToggleFavorite,
|
||||
dnd,
|
||||
}) {
|
||||
const draggable = !!(dnd && dnd.enabled);
|
||||
const isDragging = draggable && dnd && dnd.draggingId === app.id;
|
||||
return (
|
||||
<div
|
||||
className={`group relative rounded-2xl border border-white/10 bg-white/5 p-4 transform-gpu transition duration-200 ease-out cursor-default ${isDragging ? "opacity-0" : "hover:scale-[1.02] hover:shadow-[0_12px_32px_rgba(214,113,71,0.5)]"}`}
|
||||
data-brand={app.brandUrl || undefined}
|
||||
draggable={draggable}
|
||||
onDragStart={draggable ? dnd.onDragStart(app.id, dnd.list) : undefined}
|
||||
onDragOver={draggable ? dnd.onDragOver(app.id, dnd.list) : undefined}
|
||||
onDrop={draggable ? dnd.onDrop(app.id, dnd.list) : undefined}
|
||||
onDrag={draggable ? dnd.onDrag : undefined}
|
||||
onDragEnd={draggable ? dnd.onDragEnd : undefined}
|
||||
aria-grabbed={draggable ? undefined : false}
|
||||
>
|
||||
{/* Brand link (top-left) */}
|
||||
<div className="absolute left-2 top-2">
|
||||
{app.brandUrl && (
|
||||
<a
|
||||
href={app.brandUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-[10px] text-white/80 ring-1 ring-white/20 transition ${theme === "light" ? "bg-[#0EA5E9] hover:bg-[#0EA5E9]/90" : "bg-white/10 hover:bg-white/20"}`}
|
||||
title="Brand assets / logo policy"
|
||||
>
|
||||
i
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Status pill (bottom-right) */}
|
||||
<div className="absolute right-2 bottom-2">
|
||||
<Pill managed={app.panelManaged} />
|
||||
</div>
|
||||
|
||||
{/* Favorite toggle */}
|
||||
<div className="absolute right-2 top-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggleFavorite && onToggleFavorite(app.id)}
|
||||
aria-pressed={favorite}
|
||||
aria-label={favorite ? "Remove from Favorites" : "Add to Favorites"}
|
||||
className="rounded-full p-1 transition hover:scale-110 focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] cursor-pointer"
|
||||
>
|
||||
<FontAwesomeIcon icon={favorite ? faStarSolid : faStarRegular} className={favorite ? "text-[var(--brand-accent)]" : "text-white/70"} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Title and purpose ABOVE the logo */}
|
||||
<div className="mt-6 mb-3 flex items-start justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white">{app.category}</div>
|
||||
<h3 className="text-xs text-white/60 leading-tight">{app.name}</h3>
|
||||
</div>
|
||||
<FontAwesomeIcon icon={faArrowUpRightFromSquare} className="mt-1 text-xs opacity-0 group-hover:opacity-100" />
|
||||
</div>
|
||||
|
||||
{/* Logo area */}
|
||||
<AppLogo app={app} theme={theme} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
// ------------------------------------
|
||||
// Page
|
||||
// ------------------------------------
|
||||
export default function FederatedDashboard() {
|
||||
const [theme, setTheme] = useState("light");
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
// Default favorite: Panel only
|
||||
const [favorites, setFavorites] = useState(new Set(["panel"]));
|
||||
|
||||
// Orders for within-section reordering
|
||||
const initialFav = new Set(["panel"]);
|
||||
const [favoritesOrder, setFavoritesOrder] = useState(APP_CATALOG.map(a => a.id).filter(id => initialFav.has(id)));
|
||||
const [othersOrder, setOthersOrder] = useState(APP_CATALOG.map(a => a.id).filter(id => !initialFav.has(id)));
|
||||
|
||||
// Drag state
|
||||
const [dragging, setDragging] = useState(null); // { id, from }
|
||||
const [dragPos, setDragPos] = useState(null); // { x, y }
|
||||
const [dragMeta, setDragMeta] = useState(null); // { offsetX, offsetY, width, height, app }
|
||||
|
||||
// CSS vars
|
||||
const rootStyle = useMemo(() => ({
|
||||
"--brand-primary": theme === "light" ? LIGHT_TOKENS.primary : BRAND_TOKENS.primary,
|
||||
"--brand-accent": BRAND_TOKENS.accent,
|
||||
"--brand-surface": theme === "light" ? LIGHT_TOKENS.surface : BRAND_TOKENS.surface,
|
||||
}), [theme]);
|
||||
|
||||
// Index for search
|
||||
const APP_INDEX = useMemo(
|
||||
() => APP_CATALOG.map((a) => ({ ...a, _hay: `${a.name} ${a.category} ${a.id}`.toLowerCase() })),
|
||||
[]
|
||||
);
|
||||
const APP_MAP = useMemo(() => {
|
||||
const m = new Map();
|
||||
APP_INDEX.forEach(a => m.set(a.id, a));
|
||||
return m;
|
||||
}, [APP_INDEX]);
|
||||
|
||||
const debouncedQuery = useDebouncedValue(query, 150);
|
||||
const tokens = useMemo(
|
||||
() => debouncedQuery.toLowerCase().trim().split(/\s+/).filter(Boolean),
|
||||
[debouncedQuery]
|
||||
);
|
||||
const isSearching = tokens.length > 0;
|
||||
|
||||
const matches = useCallback((a) => {
|
||||
if (tokens.length === 0) return true;
|
||||
const h = a._hay;
|
||||
for (const t of tokens) if (!h.includes(t)) return false;
|
||||
return true;
|
||||
}, [tokens]);
|
||||
|
||||
// Lists in display order, then filtered
|
||||
const favAll = useMemo(() => favoritesOrder.map(id => APP_MAP.get(id)).filter(Boolean), [favoritesOrder, APP_MAP]);
|
||||
const otherAll = useMemo(() => othersOrder.map(id => APP_MAP.get(id)).filter(Boolean), [othersOrder, APP_MAP]);
|
||||
const favList = useMemo(() => favAll.filter(matches), [favAll, matches]);
|
||||
const otherList = useMemo(() => otherAll.filter(matches), [otherAll, matches]);
|
||||
|
||||
// Favorite toggle + sync orders
|
||||
const toggleFavorite = useCallback((id) => {
|
||||
setFavorites(prev => {
|
||||
const next = new Set(prev);
|
||||
const wasFav = next.has(id);
|
||||
if (wasFav) next.delete(id); else next.add(id);
|
||||
setFavoritesOrder(o => (wasFav ? o.filter(x => x !== id) : o.includes(id) ? o : [...o, id]));
|
||||
setOthersOrder(o => (wasFav ? (o.includes(id) ? o : [...o, id]) : o.filter(x => x !== id)));
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// DnD handlers (within-section only) + floating preview tracking
|
||||
const onDragStart = useCallback((id, list) => (e) => {
|
||||
setDragging({ id, from: list });
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const offsetX = e.clientX - rect.left;
|
||||
const offsetY = e.clientY - rect.top;
|
||||
setDragMeta({ offsetX, offsetY, width: rect.width, height: rect.height, app: APP_MAP.get(id) });
|
||||
setDragPos({ x: e.clientX, y: e.clientY });
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
// hide the native ghost image so only our custom preview shows
|
||||
const img = new Image();
|
||||
img.src = "data:image/svg+xml;base64," + btoa('<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"></svg>');
|
||||
e.dataTransfer.setDragImage(img, 0, 0);
|
||||
}, [APP_MAP]);
|
||||
|
||||
const onDragOver = useCallback((overId, list) => (e) => {
|
||||
if (!dragging || dragging.from !== list) return;
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = "move";
|
||||
}, [dragging]);
|
||||
|
||||
// keep preview following cursor even when not over a specific card
|
||||
useEffect(() => {
|
||||
if (!dragging) return;
|
||||
const handle = (e) => {
|
||||
setDragPos({ x: e.clientX, y: e.clientY });
|
||||
};
|
||||
window.addEventListener("dragover", handle);
|
||||
return () => window.removeEventListener("dragover", handle);
|
||||
}, [dragging]);
|
||||
|
||||
const onDrag = useCallback((e) => {
|
||||
if (!dragging) return;
|
||||
setDragPos({ x: e.clientX, y: e.clientY });
|
||||
}, [dragging]);
|
||||
|
||||
const onDrop = useCallback((overId, list) => (e) => {
|
||||
e.preventDefault();
|
||||
if (!dragging || dragging.from !== list) return;
|
||||
if (dragging.id === overId) { setDragging(null); setDragMeta(null); setDragPos(null); return; }
|
||||
const arr = list === "fav" ? favoritesOrder.slice() : othersOrder.slice();
|
||||
const fromIdx = arr.indexOf(dragging.id);
|
||||
const toIdx = arr.indexOf(overId);
|
||||
if (fromIdx < 0 || toIdx < 0) { setDragging(null); setDragMeta(null); setDragPos(null); return; }
|
||||
arr.splice(fromIdx, 1);
|
||||
arr.splice(toIdx, 0, dragging.id);
|
||||
if (list === "fav") setFavoritesOrder(arr); else setOthersOrder(arr);
|
||||
setDragging(null); setDragMeta(null); setDragPos(null);
|
||||
}, [dragging, favoritesOrder, othersOrder]);
|
||||
|
||||
const onDropToEnd = useCallback((list) => (e) => {
|
||||
e.preventDefault();
|
||||
if (!dragging || dragging.from !== list) return;
|
||||
const arr = list === "fav" ? favoritesOrder.slice() : othersOrder.slice();
|
||||
const fromIdx = arr.indexOf(dragging.id);
|
||||
if (fromIdx < 0) { setDragging(null); setDragMeta(null); setDragPos(null); return; }
|
||||
arr.splice(fromIdx, 1);
|
||||
arr.push(dragging.id);
|
||||
if (list === "fav") setFavoritesOrder(arr); else setOthersOrder(arr);
|
||||
setDragging(null); setDragMeta(null); setDragPos(null);
|
||||
}, [dragging, favoritesOrder, othersOrder]);
|
||||
|
||||
const onDragEnd = useCallback(() => { setDragging(null); setDragMeta(null); setDragPos(null); }, []);
|
||||
|
||||
const clearSearch = useCallback(() => setQuery(""), []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--brand-primary)] text-white" style={rootStyle}>
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-40 border-b border-white/10 bg-[var(--brand-primary)]/95 backdrop-blur">
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-3 items-center px-4 py-3">
|
||||
<div className="justify-self-start"></div>
|
||||
<div className="flex flex-col items-center gap-1 leading-none text-center justify-self-center">
|
||||
<img
|
||||
src={theme === "light" ? ASSETS.federated_logo_light : ASSETS.federated_logo_dark}
|
||||
alt="Federated Computer"
|
||||
className="h-6 sm:h-7 w-auto object-contain"
|
||||
/>
|
||||
<h1 className="mt-1 text-base sm:text-xl font-semibold leading-none tracking-tight">Dashboard</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 justify-self-end">
|
||||
<button
|
||||
onClick={() => setTheme("light")}
|
||||
aria-pressed={theme === "light"}
|
||||
className={`rounded-lg border border-white/10 bg-white/5 px-3 py-2 ${theme === "light" ? "ring-2 ring-[var(--brand-accent)]" : ""}`}
|
||||
aria-label="Light mode"
|
||||
>
|
||||
<FontAwesomeIcon icon={faSun} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTheme("dark")}
|
||||
aria-pressed={theme === "dark"}
|
||||
className={`rounded-lg border border-white/10 bg-white/5 px-3 py-2 ${theme === "dark" ? "ring-2 ring-[var(--brand-accent)]" : ""}`}
|
||||
aria-label="Dark mode"
|
||||
>
|
||||
<FontAwesomeIcon icon={faMoon} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Search */}
|
||||
<section className="mx-auto max-w-7xl px-4 py-6">
|
||||
<div className="relative">
|
||||
<FontAwesomeIcon icon={faMagnifyingGlass} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-white/50" />
|
||||
<input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Escape") clearSearch(); }}
|
||||
placeholder="Search apps…"
|
||||
className="w-full rounded-xl border border-white/10 bg-white/5 py-3 pl-10 pr-10 outline-none placeholder:text-white/50 focus:ring-2 focus:ring-[var(--brand-accent)]"
|
||||
aria-label="Search apps"
|
||||
/>
|
||||
{query && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearSearch}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-white/70 hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]"
|
||||
aria-label="Clear search"
|
||||
title="Clear"
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{isSearching ? (
|
||||
<section className="mx-auto max-w-7xl px-4 py-6">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{[...favList, ...otherList].map((app) => (
|
||||
<AppCard key={`search-${app.id}`} app={app} favorite={favorites.has(app.id)} theme={theme} onToggleFavorite={toggleFavorite} />
|
||||
))}
|
||||
{[...favList, ...otherList].length === 0 && (
|
||||
<div className="col-span-full rounded-xl border border-white/10 bg-white/5 p-4 text-sm text-white/70">
|
||||
<span>No apps found for “{debouncedQuery}”.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<>
|
||||
{/* Favorites */}
|
||||
<section className="mx-auto max-w-7xl px-4 py-6" onDragOver={(e) => dragging && dragging.from === "fav" && e.preventDefault()} onDrop={onDropToEnd("fav")}>
|
||||
<h2 className={`mb-3 text-sm font-semibold uppercase tracking-wider ${theme === "light" ? "text-white" : "text-[var(--brand-accent)]"}`}>Favorites</h2>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{favList.map((app) => (
|
||||
<AppCard
|
||||
key={`fav-${app.id}`}
|
||||
app={app}
|
||||
favorite={true}
|
||||
theme={theme}
|
||||
onToggleFavorite={toggleFavorite}
|
||||
dnd={{ enabled: true, list: "fav", onDragStart, onDragOver, onDrop, onDrag, draggingId: dragging && dragging.id, onDragEnd }}
|
||||
/>
|
||||
))}
|
||||
{favList.length === 0 && (
|
||||
<div className="col-span-full rounded-xl border border-white/10 bg-white/5 p-4 text-sm text-white/70">
|
||||
<span>Click the star on any app to favorite it.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Your Apps (non-favorites) */}
|
||||
<section className="mx-auto max-w-7xl px-4 py-6" onDragOver={(e) => dragging && dragging.from === "other" && e.preventDefault()} onDrop={onDropToEnd("other") }>
|
||||
<h2 className={`mb-3 text-sm font-semibold uppercase tracking-wider ${theme === "light" ? "text-white" : "text-[var(--brand-accent)]"}`}>Your Apps</h2>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{otherList.map((app) => (
|
||||
<AppCard
|
||||
key={app.id}
|
||||
app={app}
|
||||
favorite={false}
|
||||
theme={theme}
|
||||
onToggleFavorite={toggleFavorite}
|
||||
dnd={{ enabled: true, list: "other", onDragStart, onDragOver, onDrop, onDrag, draggingId: dragging && dragging.id, onDragEnd }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Floating drag preview */}
|
||||
{dragging && dragMeta && dragPos && (
|
||||
<div
|
||||
className="pointer-events-none fixed z-[1000]"
|
||||
style={{ left: dragPos.x - dragMeta.offsetX, top: dragPos.y - dragMeta.offsetY, width: dragMeta.width }}
|
||||
>
|
||||
<div className="rounded-2xl border border-white/10 bg-white/5 p-4 transform-gpu shadow-[0_12px_32px_rgba(14,165,233,0.5)]">
|
||||
<div className="mt-2 mb-3 flex items-start justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white">{dragMeta.app.category}</div>
|
||||
<h3 className="text-xs text-white/60 leading-tight">{dragMeta.app.name}</h3>
|
||||
</div>
|
||||
<FontAwesomeIcon icon={faArrowUpRightFromSquare} className="mt-1 text-xs opacity-60" />
|
||||
</div>
|
||||
<AppLogo app={dragMeta.app} theme={theme} />
|
||||
<div className="absolute right-2 bottom-2">
|
||||
<Pill managed={dragMeta.app.panelManaged} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="mx-auto max-w-7xl px-4 pb-12 pt-4 text-xs text-white/60">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-t border-white/10 pt-4">
|
||||
<div>© {new Date().getFullYear()} Federated Computer · Dashboard</div>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<span className="h-2 w-2 rounded-full bg-[var(--brand-accent)]" aria-hidden></span>
|
||||
<span>Light/Dark · Favorites toggle · Search (debounced) · Drag to reorder</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// NOTE: Dev-only sanity checks were removed to maximize Canvas compatibility.
|
||||
Reference in New Issue
Block a user