Import source: src/components/features/tool-launcher
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,386 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import dynamic from "next/dynamic";
|
||||
import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { ChevronUp, Grid2X2, List, Search, Star, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { groupRoutes, routeItems } from "@/lib/routes";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useUiStore } from "@/stores/ui-store";
|
||||
|
||||
const FavoriteToolsDnd = dynamic(
|
||||
() => import("@/components/features/favorite-tools-dnd").then((mod) => mod.FavoriteToolsDnd),
|
||||
{ ssr: false },
|
||||
);
|
||||
|
||||
const jupiterGroups = [
|
||||
"Email",
|
||||
"Files",
|
||||
"Domains",
|
||||
"Databases",
|
||||
"Security",
|
||||
"Software",
|
||||
"Metrics",
|
||||
"Advanced",
|
||||
"Developer Tools",
|
||||
"Backups",
|
||||
"Automation",
|
||||
"Users",
|
||||
"Resellers",
|
||||
"Preferences",
|
||||
"Server Administration",
|
||||
"Notifications",
|
||||
"Audit",
|
||||
"Support",
|
||||
];
|
||||
|
||||
export function ToolLauncher() {
|
||||
const [query, setQuery] = useState("");
|
||||
const [category, setCategory] = useState("All");
|
||||
const [mode, setMode] = useState<"grid" | "list">("grid");
|
||||
const [railWidth, setRailWidth] = useState(292);
|
||||
const favorites = useUiStore((state) => state.favorites);
|
||||
const toggleFavorite = useUiStore((state) => state.toggleFavorite);
|
||||
|
||||
const grouped = useMemo(() => groupRoutes(routeItems), []);
|
||||
const categories = ["All", ...Object.keys(grouped)];
|
||||
const filtered = useMemo(() => {
|
||||
const term = query.toLowerCase();
|
||||
return routeItems.filter((item) => {
|
||||
const matchesCategory = category === "All" || item.category === category;
|
||||
const matchesSearch = [
|
||||
item.label,
|
||||
item.description,
|
||||
item.category,
|
||||
...item.keywords,
|
||||
].some((value) => value.toLowerCase().includes(term));
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
}, [category, query]);
|
||||
|
||||
function startRailResize(event: ReactPointerEvent<HTMLDivElement>) {
|
||||
const startX = event.clientX;
|
||||
const startWidth = railWidth;
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
|
||||
function onMove(moveEvent: globalThis.PointerEvent) {
|
||||
const next = Math.min(430, Math.max(250, startWidth - (moveEvent.clientX - startX)));
|
||||
setRailWidth(next);
|
||||
}
|
||||
|
||||
function onUp() {
|
||||
window.removeEventListener("pointermove", onMove);
|
||||
window.removeEventListener("pointerup", onUp);
|
||||
}
|
||||
|
||||
window.addEventListener("pointermove", onMove);
|
||||
window.addEventListener("pointerup", onUp);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_8px_var(--tools-rail-width)]"
|
||||
style={{ "--tools-rail-width": `${railWidth}px` } as CSSProperties}
|
||||
>
|
||||
<section className="space-y-3">
|
||||
<div className="glass-panel flex flex-col gap-2 rounded-lg px-3 py-2 sm:flex-row sm:items-center">
|
||||
<div className="relative flex-1">
|
||||
<Search className="pointer-events-none absolute left-2.5 top-2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
className="h-8 rounded-md pl-8"
|
||||
placeholder="Search all CoaxysPanel tools"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant={mode === "grid" ? "default" : "outline"}
|
||||
size="icon"
|
||||
onClick={() => setMode("grid")}
|
||||
aria-label="Grid mode"
|
||||
className="h-8 w-8 rounded-md"
|
||||
>
|
||||
<Grid2X2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={mode === "list" ? "default" : "outline"}
|
||||
size="icon"
|
||||
onClick={() => setMode("list")}
|
||||
aria-label="List mode"
|
||||
className="h-8 w-8 rounded-md"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{categories.map((item) => (
|
||||
<Button
|
||||
key={item}
|
||||
size="sm"
|
||||
variant={category === item ? "default" : "outline"}
|
||||
onClick={() => setCategory(item)}
|
||||
className="h-7 rounded-md px-2 text-xs"
|
||||
>
|
||||
{item}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!query && category === "All" ? (
|
||||
<Card className="rounded-md">
|
||||
<CardHeader className="px-3 py-2">
|
||||
<CardTitle className="text-xs uppercase tracking-wide">Favorites</CardTitle>
|
||||
<CardDescription>Drag to reorder your preferred tools.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-3">
|
||||
<FavoriteToolsDnd favorites={favorites} onToggleFavorite={toggleFavorite} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{query || category !== "All" ? (
|
||||
<ToolResults
|
||||
tools={filtered}
|
||||
mode={mode}
|
||||
favorites={favorites}
|
||||
onToggleFavorite={toggleFavorite}
|
||||
/>
|
||||
) : (
|
||||
jupiterGroups
|
||||
.map((group) => [group, grouped[group] ?? []] as const)
|
||||
.filter(([, tools]) => tools.length)
|
||||
.map(([group, tools]) => (
|
||||
<ToolCategory
|
||||
key={group}
|
||||
title={group}
|
||||
tools={tools}
|
||||
favorites={favorites}
|
||||
onToggleFavorite={toggleFavorite}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</section>
|
||||
|
||||
<div
|
||||
className="hidden cursor-col-resize rounded-full bg-transparent transition hover:bg-primary/30 xl:block"
|
||||
onPointerDown={startRailResize}
|
||||
role="separator"
|
||||
aria-orientation="vertical"
|
||||
aria-label="Resize tools information pane"
|
||||
title="Drag to resize"
|
||||
/>
|
||||
|
||||
<aside className="space-y-3">
|
||||
<Card className="rounded-md">
|
||||
<CardHeader className="px-3 py-2">
|
||||
<CardTitle className="text-xs uppercase tracking-wide">
|
||||
General Information
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-0 p-0 text-xs">
|
||||
{[
|
||||
["Current User", "coaxys (example.com)"],
|
||||
["Primary Domain", "example.com"],
|
||||
["Shared IP Address", "198.51.100.24"],
|
||||
["Home Directory", "/home/coaxys"],
|
||||
["Last Login IP Address", "192.0.2.44"],
|
||||
["Theme", "CoaxysPanel Jupiter"],
|
||||
].map(([label, value]) => (
|
||||
<div key={label} className="border-b px-3 py-2 last:border-b-0">
|
||||
<div className="mb-1 font-semibold text-muted-foreground">{label}</div>
|
||||
<div className="truncate font-medium">{value}</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="relative overflow-hidden rounded-md border-primary/30">
|
||||
<Image
|
||||
src="/art/promo-shield.jpg"
|
||||
alt=""
|
||||
fill
|
||||
priority
|
||||
sizes="340px"
|
||||
className="hidden object-cover opacity-35 dark:block"
|
||||
/>
|
||||
<CardContent className="relative p-3">
|
||||
<div className="mb-2 flex items-start justify-between gap-2">
|
||||
<div className="text-sm font-semibold">Site Quality Monitoring</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 rounded-md"
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Monitor uptime, SSL expiry, redirects, and common website errors.
|
||||
</p>
|
||||
<Button className="mt-3 h-8 w-full rounded-md text-xs">Start Monitoring</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolResults({
|
||||
tools,
|
||||
mode,
|
||||
favorites,
|
||||
onToggleFavorite,
|
||||
}: {
|
||||
tools: typeof routeItems;
|
||||
mode: "grid" | "list";
|
||||
favorites: string[];
|
||||
onToggleFavorite: (path: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
mode === "grid"
|
||||
? "grid gap-2 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
|
||||
: "space-y-1"
|
||||
}
|
||||
>
|
||||
{tools.map((tool) => (
|
||||
<ToolCard
|
||||
key={tool.path}
|
||||
tool={tool}
|
||||
favorite={favorites.includes(tool.path)}
|
||||
compact={mode === "list"}
|
||||
onToggleFavorite={() => onToggleFavorite(tool.path)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolCategory({
|
||||
title,
|
||||
tools,
|
||||
favorites,
|
||||
onToggleFavorite,
|
||||
}: {
|
||||
title: string;
|
||||
tools: typeof routeItems;
|
||||
favorites: string[];
|
||||
onToggleFavorite: (path: string) => void;
|
||||
}) {
|
||||
const HeaderIcon = tools[0]?.icon ?? Grid2X2;
|
||||
return (
|
||||
<Card className="overflow-hidden rounded-md">
|
||||
<CardHeader className="flex-row items-center justify-between space-y-0 border-b border-border/60 px-3 py-2">
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
<HeaderIcon className="h-4 w-4 text-accent" />
|
||||
{title}
|
||||
</CardTitle>
|
||||
<ChevronUp className="h-4 w-4 text-primary" />
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="grid gap-x-5 gap-y-1 px-3 py-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{tools.map((tool) => {
|
||||
const Icon = tool.icon;
|
||||
const favorite = favorites.includes(tool.path);
|
||||
return (
|
||||
<div key={tool.path} className="group flex min-h-10 items-center gap-2">
|
||||
<Link
|
||||
href={tool.path}
|
||||
className="flex min-w-0 flex-1 items-center gap-2 rounded-md px-1.5 py-1 text-[13px] text-primary hover:bg-primary/5"
|
||||
>
|
||||
<span className="relative flex h-8 w-8 shrink-0 items-center justify-center text-foreground/75 transition-transform duration-150 group-hover:scale-110">
|
||||
<Icon className="h-6 w-6 stroke-[1.4]" />
|
||||
<span className="absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border border-card bg-accent" />
|
||||
</span>
|
||||
<span className="truncate">{tool.label}</span>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggleFavorite(tool.path)}
|
||||
aria-label={`Favorite ${tool.label}`}
|
||||
className="opacity-0 transition group-hover:opacity-100 focus:opacity-100"
|
||||
>
|
||||
<Star className={cn("h-3.5 w-3.5", favorite && "fill-accent text-accent")} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolCard({
|
||||
tool,
|
||||
favorite,
|
||||
compact,
|
||||
onToggleFavorite,
|
||||
}: {
|
||||
tool: (typeof routeItems)[number];
|
||||
favorite: boolean;
|
||||
compact?: boolean;
|
||||
onToggleFavorite: () => void;
|
||||
}) {
|
||||
const Icon = tool.icon;
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"rounded-md transition-colors duration-150 hover:border-primary/50",
|
||||
compact && "shadow-none",
|
||||
)}
|
||||
>
|
||||
<CardContent
|
||||
className={cn("flex gap-3 p-2", compact ? "items-center" : "min-h-24 flex-col")}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<Link href={tool.path} className="flex min-w-0 flex-1 items-center gap-2">
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
|
||||
<Icon className="h-5 w-5" />
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-sm font-semibold">{tool.label}</span>
|
||||
<span className="line-clamp-2 text-xs text-muted-foreground">
|
||||
{tool.description}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={onToggleFavorite}
|
||||
aria-label={`Favorite ${tool.label}`}
|
||||
className="h-7 w-7 rounded-md"
|
||||
>
|
||||
<Star className={cn("h-4 w-4", favorite && "fill-accent text-accent")} />
|
||||
</Button>
|
||||
</div>
|
||||
{!compact ? (
|
||||
<div className="mt-auto flex items-center gap-2">
|
||||
<Badge variant="outline">{tool.category}</Badge>
|
||||
<Badge variant={tool.danger ? "warning" : "success"}>
|
||||
{tool.danger ? "confirmation" : "allowed"}
|
||||
</Badge>
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user