homeio

1"use client";
2
3import type { AppItem } from "@/modules/apps/components/app-grid-presenters";
4import {
5  Copy,
6  ExternalLink,
7  Play,
8  RefreshCw,
9  RotateCcw,
10  ScrollText,
11  Settings2,
12  Square,
13  TerminalSquare,
14  Trash2,
15} from "@/components/icons/platform-icons";
16import {
17  Tooltip,
18  TooltipContent,
19  TooltipTrigger,
20} from "@/components/ui/tooltip";
21import type { ReactNode } from "react";
22
23type AppGridAction =
24  | "open"
25  | "start"
26  | "stop"
27  | "restart"
28  | "logs"
29  | "terminal"
30  | "settings"
31  | "update"
32  | "copy-url"
33  | "remove";
34
35export function AppGridContextMenu({
36  app,
37  hasDashboardUrl,
38  isBusy,
39  x,
40  y,
41  onAction,
42}: {
43  app: AppItem;
44  hasDashboardUrl: boolean;
45  isBusy: boolean;
46  x: number;
47  y: number;
48  onAction: (action: AppGridAction) => void;
49}) {
50  return (
51    <div
52      className="fixed z-[220] min-w-48 rounded-xl border border-glass-border bg-popover py-1.5 shadow-2xl shadow-black/50 backdrop-blur-2xl"
53      style={{ left: x, top: y }}
54      onClick={(event) => event.stopPropagation()}
55    >
56      <AppGridContextMenuItem
57        icon={<ExternalLink className="size-3.5" />}
58        label="Open Dashboard"
59        disabled={!hasDashboardUrl}
60        title={!hasDashboardUrl ? "No web port configured for this app." : undefined}
61        onClick={() => onAction("open")}
62      />
63      {app.status === "running" || app.status === "partial" ? (
64        <AppGridContextMenuItem
65          icon={<Square className="size-3.5" />}
66          label="Stop Container"
67          disabled={isBusy}
68          onClick={() => onAction("stop")}
69        />
70      ) : (
71        <AppGridContextMenuItem
72          icon={<Play className="size-3.5" />}
73          label="Start Container"
74          disabled={isBusy}
75          onClick={() => onAction("start")}
76        />
77      )}
78      <AppGridContextMenuItem
79        icon={<RotateCcw className="size-3.5" />}
80        label="Restart Container"
81        disabled={isBusy}
82        onClick={() => onAction("restart")}
83      />
84      <AppGridContextMenuItem
85        icon={<ScrollText className="size-3.5" />}
86        label="View Logs"
87        onClick={() => onAction("logs")}
88      />
89      <AppGridContextMenuItem
90        icon={<TerminalSquare className="size-3.5" />}
91        label="Open in Terminal"
92        onClick={() => onAction("terminal")}
93      />
94      <div className="mx-2 my-1 h-px bg-border" />
95      <AppGridContextMenuItem
96        icon={<Settings2 className="size-3.5" />}
97        label="App Settings"
98        onClick={() => onAction("settings")}
99      />
100      <AppGridContextMenuItem
101        icon={<RefreshCw className="size-3.5" />}
102        label="Check Updates"
103        disabled={isBusy}
104        onClick={() => onAction("update")}
105      />
106      <AppGridContextMenuItem
107        icon={<Copy className="size-3.5" />}
108        label="Copy URL"
109        disabled={!hasDashboardUrl}
110        title={!hasDashboardUrl ? "No web port configured for this app." : undefined}
111        onClick={() => onAction("copy-url")}
112      />
113      <div className="mx-2 my-1 h-px bg-border" />
114      <AppGridContextMenuItem
115        icon={<Trash2 className="size-3.5 text-status-red" />}
116        label="Remove App"
117        danger
118        disabled={isBusy}
119        onClick={() => onAction("remove")}
120      />
121    </div>
122  );
123}
124
125function AppGridContextMenuItem({
126  danger,
127  disabled,
128  icon,
129  label,
130  onClick,
131  title,
132}: {
133  danger?: boolean;
134  disabled?: boolean;
135  icon: ReactNode;
136  label: string;
137  onClick: () => void;
138  title?: string;
139}) {
140  const button = (
141    <button
142      onClick={onClick}
143      disabled={disabled}
144      className={`flex w-full items-center gap-2.5 px-3 py-1.5 text-xs transition-colors ${
145        danger
146          ? "text-status-red hover:bg-status-red/10 disabled:hover:bg-transparent"
147          : "text-foreground hover:bg-secondary/50"
148      } disabled:cursor-not-allowed disabled:opacity-40`}
149    >
150      {icon}
151      {label}
152    </button>
153  );
154
155  if (title) {
156    return (
157      <Tooltip>
158        <TooltipTrigger asChild>
159          <span className="block">{button}</span>
160        </TooltipTrigger>
161        <TooltipContent side="right" sideOffset={8}>{title}</TooltipContent>
162      </Tooltip>
163    );
164  }
165
166  return button;
167}
168