@burdenoff/microfe-store 2026.624.1 → 2026.624.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,10 +5,11 @@ import { StoreInstallationStatus as r } from "../generated/global-types.js";
5
5
  import { useMemo as i, useState as a } from "react";
6
6
  import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
7
7
  import { AlertCircle as s, Loader2 as c, Package as l, Plus as u, RefreshCw as d, Trash2 as f } from "lucide-react";
8
- import { jsx as p, jsxs as m } from "react/jsx-runtime";
9
- import { useNavigate as h } from "react-router-dom";
8
+ import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
9
+ import { useNavigate as g } from "react-router-dom";
10
+ import { AlertDialog as _, AlertDialogAction as v, AlertDialogCancel as y, AlertDialogContent as b, AlertDialogDescription as x, AlertDialogFooter as S, AlertDialogHeader as C, AlertDialogTitle as w } from "@burdenoff/fe-libs/ui";
10
11
  //#region src/pages/InstalledAppsPage.tsx
11
- var g = [
12
+ var T = [
12
13
  {
13
14
  label: "All",
14
15
  value: "all"
@@ -37,185 +38,185 @@ var g = [
37
38
  label: "Uninstalled",
38
39
  value: r.Uninstalled
39
40
  }
40
- ], _ = (e) => e === r.Active ? "bg-status-success-bg-subtle text-status-success-text" : e === r.Pending || e === r.Installing || e === r.Inactive ? "bg-status-warning-bg-subtle text-status-warning-text" : e === r.Failed ? "bg-status-error-bg-subtle text-status-error-text" : "bg-bg-sunken text-text-muted", v = () => {
41
- let v = h(), { basePath: y, workspaceId: b } = e(), { t: x } = o(), [S, C] = a("all"), [w, T] = a(null), [E, D] = a(null), { installations: O, totalCount: k, hasMore: A, loading: j, error: M, uninstall: N, uninstallingIds: P, refetch: F, loadMore: I } = n({ filter: i(() => S === "all" ? void 0 : { status: S }, [S]) });
41
+ ], E = (e) => e === r.Active ? "bg-status-success-bg-subtle text-status-success-text" : e === r.Pending || e === r.Installing || e === r.Inactive ? "bg-status-warning-bg-subtle text-status-warning-text" : e === r.Failed ? "bg-status-error-bg-subtle text-status-error-text" : "bg-bg-sunken text-text-muted", D = () => {
42
+ let D = g(), { basePath: O, workspaceId: k } = e(), { t: A } = o(), [j, M] = a("all"), [N, P] = a(null), [F, I] = a(null), { installations: L, totalCount: R, hasMore: z, loading: B, error: V, uninstall: H, uninstallingIds: U, refetch: W, loadMore: G } = n({ filter: i(() => j === "all" ? void 0 : { status: j }, [j]) });
42
43
  t({
43
- variables: { workspaceId: b ?? "" },
44
- skip: !b,
44
+ variables: { workspaceId: k ?? "" },
45
+ skip: !k,
45
46
  onData: () => {
46
- F();
47
+ W();
47
48
  },
48
49
  onError: (e) => {
49
50
  console.warn("InstallationStatusUpdated subscription error:", e.message);
50
51
  }
51
52
  });
52
- let L = i(() => [...O].sort((e, t) => t.installedAt.localeCompare(e.installedAt)), [O]), R = () => {
53
- v(`${y}/marketplace`);
54
- }, z = async (e) => {
55
- T(null), await N(e, "User requested uninstall from store UI") || T("Could not uninstall. Try again."), D(null);
53
+ let K = i(() => [...L].sort((e, t) => t.installedAt.localeCompare(e.installedAt)), [L]), q = () => {
54
+ D(`${O}/marketplace`);
55
+ }, J = async (e) => {
56
+ P(null), await H(e, "User requested uninstall from store UI") || P("Could not uninstall. Try again."), I(null);
56
57
  };
57
- return /* @__PURE__ */ m("div", {
58
+ return /* @__PURE__ */ h("div", {
58
59
  className: "flex h-full flex-col",
59
60
  children: [
60
- /* @__PURE__ */ p("header", {
61
+ /* @__PURE__ */ m("header", {
61
62
  className: "border-b border-border-default bg-bg-surface px-6 py-4",
62
- children: /* @__PURE__ */ m("div", {
63
+ children: /* @__PURE__ */ h("div", {
63
64
  className: "flex items-center justify-between",
64
- children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
65
+ children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
65
66
  className: "text-2xl font-bold text-text-primary",
66
- children: x("pages.installed.title", { defaultValue: "Installed Apps" })
67
- }), /* @__PURE__ */ p("p", {
67
+ children: A("pages.installed.title", { defaultValue: "Installed Apps" })
68
+ }), /* @__PURE__ */ m("p", {
68
69
  className: "text-sm text-text-muted",
69
70
  children: "Manage your installed applications"
70
- })] }), /* @__PURE__ */ m("button", {
71
+ })] }), /* @__PURE__ */ h("button", {
71
72
  type: "button",
72
- onClick: R,
73
+ onClick: q,
73
74
  className: "flex cursor-pointer items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90",
74
- children: [/* @__PURE__ */ p(u, { className: "size-5" }), /* @__PURE__ */ p("span", { children: x("pages.installed.installNew", { defaultValue: "Install New App" }) })]
75
+ children: [/* @__PURE__ */ m(u, { className: "size-5" }), /* @__PURE__ */ m("span", { children: A("pages.installed.installNew", { defaultValue: "Install New App" }) })]
75
76
  })]
76
77
  })
77
78
  }),
78
- /* @__PURE__ */ p("main", {
79
+ /* @__PURE__ */ m("main", {
79
80
  className: "flex-1 overflow-y-auto p-6",
80
- children: /* @__PURE__ */ m("div", {
81
+ children: /* @__PURE__ */ h("div", {
81
82
  className: "mx-auto max-w-6xl",
82
83
  children: [
83
- /* @__PURE__ */ m("div", {
84
+ /* @__PURE__ */ h("div", {
84
85
  className: "mb-4 flex flex-wrap items-center gap-2",
85
- children: [g.map((e) => /* @__PURE__ */ p("button", {
86
+ children: [T.map((e) => /* @__PURE__ */ m("button", {
86
87
  type: "button",
87
- onClick: () => C(e.value),
88
- className: `cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${S === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-primary hover:bg-bg-surface"}`,
88
+ onClick: () => M(e.value),
89
+ className: `cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${j === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-primary hover:bg-bg-surface"}`,
89
90
  children: e.label
90
- }, e.label)), /* @__PURE__ */ m("button", {
91
+ }, e.label)), /* @__PURE__ */ h("button", {
91
92
  type: "button",
92
- onClick: () => F(),
93
+ onClick: () => W(),
93
94
  className: "ml-auto cursor-pointer inline-flex items-center gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
94
- children: [/* @__PURE__ */ p(d, { className: "size-4" }), "Refresh"]
95
+ children: [/* @__PURE__ */ m(d, { className: "size-4" }), "Refresh"]
95
96
  })]
96
97
  }),
97
- w && /* @__PURE__ */ p("div", {
98
+ N && /* @__PURE__ */ m("div", {
98
99
  role: "alert",
99
100
  className: "mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text",
100
- children: w
101
+ children: N
101
102
  }),
102
- j ? /* @__PURE__ */ p("output", {
103
+ B ? /* @__PURE__ */ m("output", {
103
104
  "aria-label": "Loading installed apps",
104
105
  className: "flex items-center justify-center py-16",
105
- children: /* @__PURE__ */ p(c, {
106
+ children: /* @__PURE__ */ m(c, {
106
107
  className: "size-8 animate-spin text-text-muted",
107
108
  "aria-hidden": "true"
108
109
  })
109
- }) : M ? /* @__PURE__ */ m("div", {
110
+ }) : V ? /* @__PURE__ */ h("div", {
110
111
  role: "alert",
111
112
  className: "flex flex-col items-center justify-center rounded-xl border border-status-error-border bg-status-error-bg-subtle py-16 text-center",
112
113
  children: [
113
- /* @__PURE__ */ p(s, { className: "mb-3 size-10 text-status-error-text" }),
114
- /* @__PURE__ */ p("h3", {
114
+ /* @__PURE__ */ m(s, { className: "mb-3 size-10 text-status-error-text" }),
115
+ /* @__PURE__ */ m("h3", {
115
116
  className: "text-lg font-semibold text-status-error-text",
116
117
  children: "Failed to load installations"
117
118
  }),
118
- /* @__PURE__ */ p("p", {
119
+ /* @__PURE__ */ m("p", {
119
120
  className: "mt-2 text-sm text-text-muted",
120
- children: M.message
121
+ children: V.message
121
122
  }),
122
- /* @__PURE__ */ p("button", {
123
+ /* @__PURE__ */ m("button", {
123
124
  type: "button",
124
- onClick: () => F(),
125
+ onClick: () => W(),
125
126
  className: "mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
126
127
  children: "Try Again"
127
128
  })
128
129
  ]
129
- }) : L.length === 0 ? /* @__PURE__ */ p("div", {
130
+ }) : K.length === 0 ? /* @__PURE__ */ m("div", {
130
131
  className: "flex items-center justify-center py-16",
131
- children: /* @__PURE__ */ m("div", {
132
+ children: /* @__PURE__ */ h("div", {
132
133
  className: "text-center",
133
134
  children: [
134
- /* @__PURE__ */ p(l, { className: "mx-auto mb-4 size-16 text-text-muted" }),
135
- /* @__PURE__ */ p("h3", {
135
+ /* @__PURE__ */ m(l, { className: "mx-auto mb-4 size-16 text-text-muted" }),
136
+ /* @__PURE__ */ m("h3", {
136
137
  className: "mb-2 text-lg font-semibold text-text-primary",
137
138
  children: "No apps installed"
138
139
  }),
139
- /* @__PURE__ */ p("p", {
140
+ /* @__PURE__ */ m("p", {
140
141
  className: "mb-4 text-sm text-text-muted",
141
142
  children: "Browse the marketplace to install your first app"
142
143
  }),
143
- /* @__PURE__ */ p("button", {
144
+ /* @__PURE__ */ m("button", {
144
145
  type: "button",
145
- onClick: R,
146
+ onClick: q,
146
147
  className: "rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90",
147
148
  children: "Browse Marketplace"
148
149
  })
149
150
  ]
150
151
  })
151
- }) : /* @__PURE__ */ m("div", {
152
+ }) : /* @__PURE__ */ h("div", {
152
153
  className: "flex flex-col gap-y-4",
153
154
  children: [
154
- /* @__PURE__ */ m("p", {
155
+ /* @__PURE__ */ h("p", {
155
156
  "aria-live": "polite",
156
157
  className: "text-sm text-text-muted",
157
158
  children: [
158
- k,
159
+ R,
159
160
  " installation",
160
- k === 1 ? "" : "s",
161
+ R === 1 ? "" : "s",
161
162
  " found"
162
163
  ]
163
164
  }),
164
- /* @__PURE__ */ p("ul", {
165
+ /* @__PURE__ */ m("ul", {
165
166
  className: "flex flex-col gap-y-4",
166
- children: L.map((e) => {
167
- let t = P.has(`${e.workspaceId}:${e.productId}`);
168
- return /* @__PURE__ */ p("li", {
167
+ children: K.map((e) => {
168
+ let t = U.has(`${e.workspaceId}:${e.productId}`);
169
+ return /* @__PURE__ */ m("li", {
169
170
  className: "rounded-xl border border-border-default bg-bg-surface p-4",
170
- children: /* @__PURE__ */ m("div", {
171
+ children: /* @__PURE__ */ h("div", {
171
172
  className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
172
- children: [/* @__PURE__ */ m("div", {
173
+ children: [/* @__PURE__ */ h("div", {
173
174
  className: "flex items-start gap-3",
174
- children: [/* @__PURE__ */ p("div", {
175
+ children: [/* @__PURE__ */ m("div", {
175
176
  className: "flex size-12 items-center justify-center rounded-lg bg-bg-sunken text-lg font-semibold text-text-muted",
176
- children: /* @__PURE__ */ p(l, { className: "size-6" })
177
- }), /* @__PURE__ */ m("div", { children: [
178
- /* @__PURE__ */ p("h3", {
177
+ children: /* @__PURE__ */ m(l, { className: "size-6" })
178
+ }), /* @__PURE__ */ h("div", { children: [
179
+ /* @__PURE__ */ m("h3", {
179
180
  className: "font-semibold text-text-primary",
180
181
  children: e.workspaceName ?? e.workspaceId
181
182
  }),
182
- /* @__PURE__ */ m("p", {
183
+ /* @__PURE__ */ h("p", {
183
184
  className: "text-sm text-text-muted",
184
185
  children: ["Product: ", e.productId]
185
186
  }),
186
- /* @__PURE__ */ m("div", {
187
+ /* @__PURE__ */ h("div", {
187
188
  className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-text-muted",
188
189
  children: [
189
- /* @__PURE__ */ p("span", {
190
- className: `rounded-full px-2 py-1 font-medium ${_(e.status)}`,
190
+ /* @__PURE__ */ m("span", {
191
+ className: `rounded-full px-2 py-1 font-medium ${E(e.status)}`,
191
192
  children: e.status
192
193
  }),
193
- e.version && /* @__PURE__ */ m("span", { children: ["v", e.version] }),
194
- e.workspaceType && /* @__PURE__ */ p("span", { children: e.workspaceType })
194
+ e.version && /* @__PURE__ */ h("span", { children: ["v", e.version] }),
195
+ e.workspaceType && /* @__PURE__ */ m("span", { children: e.workspaceType })
195
196
  ]
196
197
  })
197
198
  ] })]
198
- }), /* @__PURE__ */ m("div", {
199
+ }), /* @__PURE__ */ h("div", {
199
200
  className: "flex items-center gap-2",
200
201
  children: [
201
- /* @__PURE__ */ p("button", {
202
+ /* @__PURE__ */ m("button", {
202
203
  type: "button",
203
- onClick: () => v(`${y}/installed/${e.id}`),
204
+ onClick: () => D(`${O}/installed/${e.id}`),
204
205
  className: "cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
205
206
  children: "Details"
206
207
  }),
207
- /* @__PURE__ */ p("button", {
208
+ /* @__PURE__ */ m("button", {
208
209
  type: "button",
209
- onClick: () => v(`${y}/marketplace/product/${e.productId}`),
210
+ onClick: () => D(`${O}/marketplace/product/${e.productId}`),
210
211
  className: "cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
211
212
  children: "View Product"
212
213
  }),
213
- e.status !== r.Uninstalled && /* @__PURE__ */ m("button", {
214
+ e.status !== r.Uninstalled && /* @__PURE__ */ h("button", {
214
215
  type: "button",
215
- onClick: () => D(e),
216
+ onClick: () => I(e),
216
217
  disabled: t,
217
218
  className: "cursor-pointer inline-flex items-center gap-1.5 rounded-lg border border-status-error-border px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle disabled:opacity-60",
218
- children: [t ? /* @__PURE__ */ p(c, { className: "size-4 animate-spin" }) : /* @__PURE__ */ p(f, { className: "size-4" }), "Uninstall"]
219
+ children: [t ? /* @__PURE__ */ m(c, { className: "size-4 animate-spin" }) : /* @__PURE__ */ m(f, { className: "size-4" }), "Uninstall"]
219
220
  })
220
221
  ]
221
222
  })]
@@ -223,14 +224,14 @@ var g = [
223
224
  }, e.id);
224
225
  })
225
226
  }),
226
- A && /* @__PURE__ */ p("div", {
227
+ z && /* @__PURE__ */ m("div", {
227
228
  className: "flex justify-center pt-6",
228
- children: /* @__PURE__ */ p("button", {
229
+ children: /* @__PURE__ */ m("button", {
229
230
  type: "button",
230
- onClick: I,
231
- disabled: j,
231
+ onClick: G,
232
+ disabled: B,
232
233
  className: "rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50",
233
- children: j ? "Loading…" : "Load more"
234
+ children: B ? "Loading…" : "Load more"
234
235
  })
235
236
  })
236
237
  ]
@@ -238,64 +239,40 @@ var g = [
238
239
  ]
239
240
  })
240
241
  }),
241
- E && /* @__PURE__ */ m("div", {
242
- className: "fixed inset-0 z-50 flex items-center justify-center p-4",
243
- children: [/* @__PURE__ */ p("button", {
244
- type: "button",
245
- "aria-label": "Cancel uninstall",
246
- className: "absolute inset-0 bg-bg-overlay/50",
247
- onClick: () => D(null)
248
- }), /* @__PURE__ */ m("dialog", {
249
- open: !0,
250
- "aria-modal": "true",
251
- "aria-labelledby": "installed-apps-uninstall-title",
252
- className: "relative z-10 w-full max-w-md rounded-2xl border border-border-default bg-bg-surface p-6 shadow-2xl",
253
- children: [
254
- /* @__PURE__ */ p("h2", {
255
- id: "installed-apps-uninstall-title",
256
- className: "text-lg font-semibold text-text-primary",
257
- children: "Uninstall app"
242
+ /* @__PURE__ */ m(_, {
243
+ open: F !== null,
244
+ onOpenChange: (e) => !e && I(null),
245
+ children: /* @__PURE__ */ h(b, {
246
+ className: "max-w-md",
247
+ children: [/* @__PURE__ */ h(C, { children: [/* @__PURE__ */ m(w, { children: "Uninstall app" }), /* @__PURE__ */ m(x, { children: F && /* @__PURE__ */ h(p, { children: [
248
+ "Remove product",
249
+ " ",
250
+ /* @__PURE__ */ m("span", {
251
+ className: "font-medium text-text-primary",
252
+ children: F.productId
258
253
  }),
259
- /* @__PURE__ */ m("p", {
260
- className: "mt-2 text-sm text-text-muted",
261
- children: [
262
- "Remove product",
263
- " ",
264
- /* @__PURE__ */ p("span", {
265
- className: "font-medium text-text-primary",
266
- children: E.productId
267
- }),
268
- " ",
269
- "from workspace",
270
- " ",
271
- /* @__PURE__ */ p("span", {
272
- className: "font-medium text-text-primary",
273
- children: E.workspaceName ?? E.workspaceId
274
- }),
275
- "?"
276
- ]
254
+ " ",
255
+ "from workspace",
256
+ " ",
257
+ /* @__PURE__ */ m("span", {
258
+ className: "font-medium text-text-primary",
259
+ children: F.workspaceName ?? F.workspaceId
277
260
  }),
278
- /* @__PURE__ */ m("div", {
279
- className: "mt-6 flex flex-wrap justify-end gap-3",
280
- children: [/* @__PURE__ */ p("button", {
281
- type: "button",
282
- onClick: () => D(null),
283
- className: "cursor-pointer rounded-lg border border-border-default px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
284
- children: "Cancel"
285
- }), /* @__PURE__ */ p("button", {
286
- type: "button",
287
- onClick: () => z(E),
288
- className: "cursor-pointer rounded-lg bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-emphasis",
289
- children: "Uninstall"
290
- })]
291
- })
292
- ]
293
- })]
261
+ "?"
262
+ ] }) })] }), /* @__PURE__ */ h(S, { children: [/* @__PURE__ */ m(y, {
263
+ onClick: () => I(null),
264
+ children: "Cancel"
265
+ }), /* @__PURE__ */ m(v, {
266
+ className: "bg-status-error-bg text-status-error-text hover:bg-status-error-bg-emphasis",
267
+ onClick: () => F && J(F),
268
+ children: "Uninstall"
269
+ })] })]
270
+ })
294
271
  })
295
272
  ]
296
273
  });
297
274
  };
298
275
  //#endregion
299
- export { v as InstalledAppsPage };
276
+ export { D as InstalledAppsPage };
300
277
 
301
278
  //# sourceMappingURL=InstalledAppsPage.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"InstalledAppsPage.js","names":[],"sources":["../../src/pages/InstalledAppsPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Package, Plus, RefreshCw, Trash2, AlertCircle, Loader2 } from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { type InstalledApp, useInstallations } from '../hooks/useInstallations';\nimport { StoreInstallationStatus } from '../generated/global-types';\nimport type { InstallationFilterInput } from '../generated/global-types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useInstallationStatusUpdatedSubscription } from '../generated/global-operations';\n\nconst STATUS_FILTERS: Array<{ label: string; value: StoreInstallationStatus | 'all' }> = [\n { label: 'All', value: 'all' },\n { label: 'Active', value: StoreInstallationStatus.Active },\n { label: 'Inactive', value: StoreInstallationStatus.Inactive },\n { label: 'Pending', value: StoreInstallationStatus.Pending },\n { label: 'Installing', value: StoreInstallationStatus.Installing },\n { label: 'Failed', value: StoreInstallationStatus.Failed },\n { label: 'Uninstalled', value: StoreInstallationStatus.Uninstalled },\n];\n\nconst statusBadgeClass = (status: StoreInstallationStatus): string => {\n if (status === StoreInstallationStatus.Active) {\n return 'bg-status-success-bg-subtle text-status-success-text';\n }\n if (\n status === StoreInstallationStatus.Pending ||\n status === StoreInstallationStatus.Installing ||\n status === StoreInstallationStatus.Inactive\n ) {\n return 'bg-status-warning-bg-subtle text-status-warning-text';\n }\n if (status === StoreInstallationStatus.Failed) {\n return 'bg-status-error-bg-subtle text-status-error-text';\n }\n return 'bg-bg-sunken text-text-muted';\n};\n\n/**\n * InstalledAppsPage component\n *\n * Displays installed applications for the current actor\n */\nexport const InstalledAppsPage: FC = () => {\n const navigate = useNavigate();\n const { basePath, workspaceId } = useStore();\n const { t } = useI18n();\n const [selectedStatus, setSelectedStatus] = useState<StoreInstallationStatus | 'all'>('all');\n const [errorMessage, setErrorMessage] = useState<string | null>(null);\n const [pendingUninstall, setPendingUninstall] = useState<InstalledApp | null>(null);\n\n const filter: InstallationFilterInput | undefined = useMemo(\n () => (selectedStatus === 'all' ? undefined : { status: selectedStatus }),\n [selectedStatus]\n );\n\n const {\n installations,\n totalCount,\n hasMore,\n loading,\n error,\n uninstall,\n uninstallingIds,\n refetch,\n loadMore,\n } = useInstallations({ filter });\n\n useInstallationStatusUpdatedSubscription({\n variables: { workspaceId: workspaceId ?? '' },\n skip: !workspaceId,\n onData: () => {\n void refetch();\n },\n onError: (err) => {\n console.warn('InstallationStatusUpdated subscription error:', err.message);\n },\n });\n\n const sortedInstallations = useMemo(\n () => [...installations].sort((a, b) => b.installedAt.localeCompare(a.installedAt)),\n [installations]\n );\n\n const handleInstallNew = () => {\n navigate(`${basePath}/marketplace`);\n };\n\n const handleUninstall = async (installation: InstalledApp) => {\n setErrorMessage(null);\n const ok = await uninstall(installation, 'User requested uninstall from store UI');\n if (!ok) {\n setErrorMessage(`Could not uninstall. Try again.`);\n }\n setPendingUninstall(null);\n };\n\n return (\n <div className=\"flex h-full flex-col\">\n {/* Header */}\n <header className=\"border-b border-border-default bg-bg-surface px-6 py-4\">\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-bold text-text-primary\">\n {t('pages.installed.title', { defaultValue: 'Installed Apps' })}\n </h1>\n <p className=\"text-sm text-text-muted\">Manage your installed applications</p>\n </div>\n\n <button\n type=\"button\"\n onClick={handleInstallNew}\n className=\"flex cursor-pointer items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90\"\n >\n <Plus className=\"size-5\" />\n <span>{t('pages.installed.installNew', { defaultValue: 'Install New App' })}</span>\n </button>\n </div>\n </header>\n\n {/* Content */}\n <main className=\"flex-1 overflow-y-auto p-6\">\n <div className=\"mx-auto max-w-6xl\">\n <div className=\"mb-4 flex flex-wrap items-center gap-2\">\n {STATUS_FILTERS.map((filter) => (\n <button\n type=\"button\"\n key={filter.label}\n onClick={() => setSelectedStatus(filter.value)}\n className={`cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${\n selectedStatus === filter.value\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-sunken text-text-primary hover:bg-bg-surface'\n }`}\n >\n {filter.label}\n </button>\n ))}\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"ml-auto cursor-pointer inline-flex items-center gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n >\n <RefreshCw className=\"size-4\" />\n Refresh\n </button>\n </div>\n\n {errorMessage && (\n <div\n role=\"alert\"\n className=\"mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text\"\n >\n {errorMessage}\n </div>\n )}\n\n {loading ? (\n <output\n aria-label=\"Loading installed apps\"\n className=\"flex items-center justify-center py-16\"\n >\n <Loader2 className=\"size-8 animate-spin text-text-muted\" aria-hidden=\"true\" />\n </output>\n ) : error ? (\n <div\n role=\"alert\"\n className=\"flex flex-col items-center justify-center rounded-xl border border-status-error-border bg-status-error-bg-subtle py-16 text-center\"\n >\n <AlertCircle className=\"mb-3 size-10 text-status-error-text\" />\n <h3 className=\"text-lg font-semibold text-status-error-text\">\n Failed to load installations\n </h3>\n <p className=\"mt-2 text-sm text-text-muted\">{error.message}</p>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n >\n Try Again\n </button>\n </div>\n ) : sortedInstallations.length === 0 ? (\n <div className=\"flex items-center justify-center py-16\">\n <div className=\"text-center\">\n <Package className=\"mx-auto mb-4 size-16 text-text-muted\" />\n <h3 className=\"mb-2 text-lg font-semibold text-text-primary\">No apps installed</h3>\n <p className=\"mb-4 text-sm text-text-muted\">\n Browse the marketplace to install your first app\n </p>\n <button\n type=\"button\"\n onClick={handleInstallNew}\n className=\"rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90\"\n >\n Browse Marketplace\n </button>\n </div>\n </div>\n ) : (\n <div className=\"flex flex-col gap-y-4\">\n <p aria-live=\"polite\" className=\"text-sm text-text-muted\">\n {totalCount} installation{totalCount === 1 ? '' : 's'} found\n </p>\n <ul className=\"flex flex-col gap-y-4\">\n {sortedInstallations.map((installation) => {\n const uninstalling = uninstallingIds.has(\n `${installation.workspaceId}:${installation.productId}`\n );\n return (\n <li\n key={installation.id}\n className=\"rounded-xl border border-border-default bg-bg-surface p-4\"\n >\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n <div className=\"flex items-start gap-3\">\n <div className=\"flex size-12 items-center justify-center rounded-lg bg-bg-sunken text-lg font-semibold text-text-muted\">\n <Package className=\"size-6\" />\n </div>\n <div>\n <h3 className=\"font-semibold text-text-primary\">\n {installation.workspaceName ?? installation.workspaceId}\n </h3>\n <p className=\"text-sm text-text-muted\">\n Product: {installation.productId}\n </p>\n <div className=\"mt-2 flex flex-wrap items-center gap-2 text-xs text-text-muted\">\n <span\n className={`rounded-full px-2 py-1 font-medium ${statusBadgeClass(installation.status)}`}\n >\n {installation.status}\n </span>\n {installation.version && <span>v{installation.version}</span>}\n {installation.workspaceType && (\n <span>{installation.workspaceType}</span>\n )}\n </div>\n </div>\n </div>\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => navigate(`${basePath}/installed/${installation.id}`)}\n className=\"cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n >\n Details\n </button>\n <button\n type=\"button\"\n onClick={() =>\n navigate(`${basePath}/marketplace/product/${installation.productId}`)\n }\n className=\"cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n >\n View Product\n </button>\n {installation.status !== StoreInstallationStatus.Uninstalled && (\n <button\n type=\"button\"\n onClick={() => setPendingUninstall(installation)}\n disabled={uninstalling}\n className=\"cursor-pointer inline-flex items-center gap-1.5 rounded-lg border border-status-error-border px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle disabled:opacity-60\"\n >\n {uninstalling ? (\n <Loader2 className=\"size-4 animate-spin\" />\n ) : (\n <Trash2 className=\"size-4\" />\n )}\n Uninstall\n </button>\n )}\n </div>\n </div>\n </li>\n );\n })}\n </ul>\n {hasMore && (\n <div className=\"flex justify-center pt-6\">\n <button\n type=\"button\"\n onClick={loadMore}\n disabled={loading}\n className=\"rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50\"\n >\n {loading ? 'Loading…' : 'Load more'}\n </button>\n </div>\n )}\n </div>\n )}\n </div>\n </main>\n\n {pendingUninstall && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n <button\n type=\"button\"\n aria-label=\"Cancel uninstall\"\n className=\"absolute inset-0 bg-bg-overlay/50\"\n onClick={() => setPendingUninstall(null)}\n />\n <dialog\n open\n aria-modal=\"true\"\n aria-labelledby=\"installed-apps-uninstall-title\"\n className=\"relative z-10 w-full max-w-md rounded-2xl border border-border-default bg-bg-surface p-6 shadow-2xl\"\n >\n <h2\n id=\"installed-apps-uninstall-title\"\n className=\"text-lg font-semibold text-text-primary\"\n >\n Uninstall app\n </h2>\n <p className=\"mt-2 text-sm text-text-muted\">\n Remove product{' '}\n <span className=\"font-medium text-text-primary\">{pendingUninstall.productId}</span>{' '}\n from workspace{' '}\n <span className=\"font-medium text-text-primary\">\n {pendingUninstall.workspaceName ?? pendingUninstall.workspaceId}\n </span>\n ?\n </p>\n\n <div className=\"mt-6 flex flex-wrap justify-end gap-3\">\n <button\n type=\"button\"\n onClick={() => setPendingUninstall(null)}\n className=\"cursor-pointer rounded-lg border border-border-default px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n >\n Cancel\n </button>\n <button\n type=\"button\"\n onClick={() => handleUninstall(pendingUninstall)}\n className=\"cursor-pointer rounded-lg bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-emphasis\"\n >\n Uninstall\n </button>\n </div>\n </dialog>\n </div>\n )}\n </div>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"InstalledAppsPage.js","names":[],"sources":["../../src/pages/InstalledAppsPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Package, Plus, RefreshCw, Trash2, AlertCircle, Loader2 } from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { type InstalledApp, useInstallations } from '../hooks/useInstallations';\nimport { StoreInstallationStatus } from '../generated/global-types';\nimport type { InstallationFilterInput } from '../generated/global-types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n AlertDialog,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogCancel,\n AlertDialogAction,\n} from '@burdenoff/fe-libs/ui';\nimport { useInstallationStatusUpdatedSubscription } from '../generated/global-operations';\n\nconst STATUS_FILTERS: Array<{ label: string; value: StoreInstallationStatus | 'all' }> = [\n { label: 'All', value: 'all' },\n { label: 'Active', value: StoreInstallationStatus.Active },\n { label: 'Inactive', value: StoreInstallationStatus.Inactive },\n { label: 'Pending', value: StoreInstallationStatus.Pending },\n { label: 'Installing', value: StoreInstallationStatus.Installing },\n { label: 'Failed', value: StoreInstallationStatus.Failed },\n { label: 'Uninstalled', value: StoreInstallationStatus.Uninstalled },\n];\n\nconst statusBadgeClass = (status: StoreInstallationStatus): string => {\n if (status === StoreInstallationStatus.Active) {\n return 'bg-status-success-bg-subtle text-status-success-text';\n }\n if (\n status === StoreInstallationStatus.Pending ||\n status === StoreInstallationStatus.Installing ||\n status === StoreInstallationStatus.Inactive\n ) {\n return 'bg-status-warning-bg-subtle text-status-warning-text';\n }\n if (status === StoreInstallationStatus.Failed) {\n return 'bg-status-error-bg-subtle text-status-error-text';\n }\n return 'bg-bg-sunken text-text-muted';\n};\n\n/**\n * InstalledAppsPage component\n *\n * Displays installed applications for the current actor\n */\nexport const InstalledAppsPage: FC = () => {\n const navigate = useNavigate();\n const { basePath, workspaceId } = useStore();\n const { t } = useI18n();\n const [selectedStatus, setSelectedStatus] = useState<StoreInstallationStatus | 'all'>('all');\n const [errorMessage, setErrorMessage] = useState<string | null>(null);\n const [pendingUninstall, setPendingUninstall] = useState<InstalledApp | null>(null);\n\n const filter: InstallationFilterInput | undefined = useMemo(\n () => (selectedStatus === 'all' ? undefined : { status: selectedStatus }),\n [selectedStatus]\n );\n\n const {\n installations,\n totalCount,\n hasMore,\n loading,\n error,\n uninstall,\n uninstallingIds,\n refetch,\n loadMore,\n } = useInstallations({ filter });\n\n useInstallationStatusUpdatedSubscription({\n variables: { workspaceId: workspaceId ?? '' },\n skip: !workspaceId,\n onData: () => {\n void refetch();\n },\n onError: (err) => {\n console.warn('InstallationStatusUpdated subscription error:', err.message);\n },\n });\n\n const sortedInstallations = useMemo(\n () => [...installations].sort((a, b) => b.installedAt.localeCompare(a.installedAt)),\n [installations]\n );\n\n const handleInstallNew = () => {\n navigate(`${basePath}/marketplace`);\n };\n\n const handleUninstall = async (installation: InstalledApp) => {\n setErrorMessage(null);\n const ok = await uninstall(installation, 'User requested uninstall from store UI');\n if (!ok) {\n setErrorMessage(`Could not uninstall. Try again.`);\n }\n setPendingUninstall(null);\n };\n\n return (\n <div className=\"flex h-full flex-col\">\n {/* Header */}\n <header className=\"border-b border-border-default bg-bg-surface px-6 py-4\">\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-bold text-text-primary\">\n {t('pages.installed.title', { defaultValue: 'Installed Apps' })}\n </h1>\n <p className=\"text-sm text-text-muted\">Manage your installed applications</p>\n </div>\n\n <button\n type=\"button\"\n onClick={handleInstallNew}\n className=\"flex cursor-pointer items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90\"\n >\n <Plus className=\"size-5\" />\n <span>{t('pages.installed.installNew', { defaultValue: 'Install New App' })}</span>\n </button>\n </div>\n </header>\n\n {/* Content */}\n <main className=\"flex-1 overflow-y-auto p-6\">\n <div className=\"mx-auto max-w-6xl\">\n <div className=\"mb-4 flex flex-wrap items-center gap-2\">\n {STATUS_FILTERS.map((filter) => (\n <button\n type=\"button\"\n key={filter.label}\n onClick={() => setSelectedStatus(filter.value)}\n className={`cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${\n selectedStatus === filter.value\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-sunken text-text-primary hover:bg-bg-surface'\n }`}\n >\n {filter.label}\n </button>\n ))}\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"ml-auto cursor-pointer inline-flex items-center gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n >\n <RefreshCw className=\"size-4\" />\n Refresh\n </button>\n </div>\n\n {errorMessage && (\n <div\n role=\"alert\"\n className=\"mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text\"\n >\n {errorMessage}\n </div>\n )}\n\n {loading ? (\n <output\n aria-label=\"Loading installed apps\"\n className=\"flex items-center justify-center py-16\"\n >\n <Loader2 className=\"size-8 animate-spin text-text-muted\" aria-hidden=\"true\" />\n </output>\n ) : error ? (\n <div\n role=\"alert\"\n className=\"flex flex-col items-center justify-center rounded-xl border border-status-error-border bg-status-error-bg-subtle py-16 text-center\"\n >\n <AlertCircle className=\"mb-3 size-10 text-status-error-text\" />\n <h3 className=\"text-lg font-semibold text-status-error-text\">\n Failed to load installations\n </h3>\n <p className=\"mt-2 text-sm text-text-muted\">{error.message}</p>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n >\n Try Again\n </button>\n </div>\n ) : sortedInstallations.length === 0 ? (\n <div className=\"flex items-center justify-center py-16\">\n <div className=\"text-center\">\n <Package className=\"mx-auto mb-4 size-16 text-text-muted\" />\n <h3 className=\"mb-2 text-lg font-semibold text-text-primary\">No apps installed</h3>\n <p className=\"mb-4 text-sm text-text-muted\">\n Browse the marketplace to install your first app\n </p>\n <button\n type=\"button\"\n onClick={handleInstallNew}\n className=\"rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90\"\n >\n Browse Marketplace\n </button>\n </div>\n </div>\n ) : (\n <div className=\"flex flex-col gap-y-4\">\n <p aria-live=\"polite\" className=\"text-sm text-text-muted\">\n {totalCount} installation{totalCount === 1 ? '' : 's'} found\n </p>\n <ul className=\"flex flex-col gap-y-4\">\n {sortedInstallations.map((installation) => {\n const uninstalling = uninstallingIds.has(\n `${installation.workspaceId}:${installation.productId}`\n );\n return (\n <li\n key={installation.id}\n className=\"rounded-xl border border-border-default bg-bg-surface p-4\"\n >\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n <div className=\"flex items-start gap-3\">\n <div className=\"flex size-12 items-center justify-center rounded-lg bg-bg-sunken text-lg font-semibold text-text-muted\">\n <Package className=\"size-6\" />\n </div>\n <div>\n <h3 className=\"font-semibold text-text-primary\">\n {installation.workspaceName ?? installation.workspaceId}\n </h3>\n <p className=\"text-sm text-text-muted\">\n Product: {installation.productId}\n </p>\n <div className=\"mt-2 flex flex-wrap items-center gap-2 text-xs text-text-muted\">\n <span\n className={`rounded-full px-2 py-1 font-medium ${statusBadgeClass(installation.status)}`}\n >\n {installation.status}\n </span>\n {installation.version && <span>v{installation.version}</span>}\n {installation.workspaceType && (\n <span>{installation.workspaceType}</span>\n )}\n </div>\n </div>\n </div>\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => navigate(`${basePath}/installed/${installation.id}`)}\n className=\"cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n >\n Details\n </button>\n <button\n type=\"button\"\n onClick={() =>\n navigate(`${basePath}/marketplace/product/${installation.productId}`)\n }\n className=\"cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n >\n View Product\n </button>\n {installation.status !== StoreInstallationStatus.Uninstalled && (\n <button\n type=\"button\"\n onClick={() => setPendingUninstall(installation)}\n disabled={uninstalling}\n className=\"cursor-pointer inline-flex items-center gap-1.5 rounded-lg border border-status-error-border px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle disabled:opacity-60\"\n >\n {uninstalling ? (\n <Loader2 className=\"size-4 animate-spin\" />\n ) : (\n <Trash2 className=\"size-4\" />\n )}\n Uninstall\n </button>\n )}\n </div>\n </div>\n </li>\n );\n })}\n </ul>\n {hasMore && (\n <div className=\"flex justify-center pt-6\">\n <button\n type=\"button\"\n onClick={loadMore}\n disabled={loading}\n className=\"rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50\"\n >\n {loading ? 'Loading…' : 'Load more'}\n </button>\n </div>\n )}\n </div>\n )}\n </div>\n </main>\n\n <AlertDialog\n open={pendingUninstall !== null}\n onOpenChange={(open) => !open && setPendingUninstall(null)}\n >\n <AlertDialogContent className=\"max-w-md\">\n <AlertDialogHeader>\n <AlertDialogTitle>Uninstall app</AlertDialogTitle>\n <AlertDialogDescription>\n {pendingUninstall && (\n <>\n Remove product{' '}\n <span className=\"font-medium text-text-primary\">\n {pendingUninstall.productId}\n </span>{' '}\n from workspace{' '}\n <span className=\"font-medium text-text-primary\">\n {pendingUninstall.workspaceName ?? pendingUninstall.workspaceId}\n </span>\n ?\n </>\n )}\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel onClick={() => setPendingUninstall(null)}>Cancel</AlertDialogCancel>\n <AlertDialogAction\n className=\"bg-status-error-bg text-status-error-text hover:bg-status-error-bg-emphasis\"\n onClick={() => pendingUninstall && handleUninstall(pendingUninstall)}\n >\n Uninstall\n </AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n </div>\n );\n};\n"],"mappings":"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"}
@@ -489,7 +489,7 @@ var Se = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : e >= 1e3 ? `${(e / 1e3).
489
489
  "aria-label": e,
490
490
  value: t,
491
491
  onChange: (e) => r(e.target.value),
492
- className: "min-w-[8rem] appearance-none bg-transparent pr-6 text-sm font-medium text-text-primary focus:outline-none",
492
+ className: "min-w-[8rem] appearance-none bg-transparent pr-6 text-sm font-medium text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
493
493
  children: n.map((e) => /* @__PURE__ */ b("option", {
494
494
  value: e.value,
495
495
  children: e.label