@parallelworks/tandem-web 0.141.1 → 0.142.0

package/routes/_workspace/docs/space2._space.js

@@ -0,0 +1,256 @@
+import { usePageTitle as e } from "../../../lib/pageTitle.js";
+import { teamsQuery as t, workspaceQuery as n } from "../../../api/queries.js";
+import { BoardIcon as r, ListViewIcon as i } from "../../../components/icons.js";
+import { Route as a } from "./space._space.js";
+import { usePeople as o } from "../../../lib/people.js";
+import { docPropertiesQuery as s, docViewsQuery as c, readConfig as l, useDocPropertyActions as u } from "../../../lib/docProperties.js";
+import { DocTable as d, groupable as f } from "../../../components/DocTable.js";
+import { Breadcrumbs as p, Button as m, ErrorText as h, Input as g, Popover as _, SegmentedControl as v, Select as y, useClosePopover as b } from "@parallelworks/ui";
+import { useNavigate as x } from "@tanstack/react-router";
+import { useEffect as S, useState as C } from "react";
+import { useErrorMessage as w } from "@parallelworks/problem/react";
+import { useTranslations as T } from "use-intl";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { useQuery as O, useSuspenseQuery as k } from "@tanstack/react-query";
+// src/routes/$workspace/docs/space.$space.tsx?tsr-split=component
+function A() {
+	let o = T("docViews"), g = w(), { workspace: _, space: b } = a.useParams(), { view: A } = a.useSearch(), N = x(), P = (e) => N({
+		to: "/$workspace/docs/space/$space",
+		params: {
+			workspace: _,
+			space: b
+		},
+		search: e ? { view: e } : {}
+	}), { data: F } = k(t(_)), { data: I } = k(n(_)), L = b === "workspace" ? I.name : F.find((e) => e.key === b)?.name ?? b;
+	e(o("title"), L);
+	let { data: R = [] } = O(s(_, b)), { data: z = [] } = O(c(_, b)), B = u(_), V = z.find((e) => e.id === A), [H, U] = C("table"), [W, G] = C({});
+	S(() => {
+		V && (U(V.layout), G(l(V.config)));
+	}, [V]);
+	let K = (e) => G(e), q = [
+		{
+			value: "title",
+			label: o("docTitle")
+		},
+		{
+			value: "updated",
+			label: o("updated")
+		},
+		...R.map((e) => ({
+			value: e.id,
+			label: e.name
+		}))
+	], J = B.saveView.error ?? B.updateView.error;
+	return /* @__PURE__ */ D("div", {
+		className: "flex h-full flex-col",
+		children: [
+			/* @__PURE__ */ D("header", {
+				className: "flex min-h-12 shrink-0 flex-wrap items-center gap-2 border-b border-border px-4 py-2 md:px-5",
+				children: [
+					/* @__PURE__ */ E(p, {
+						crumbs: [{
+							label: o("docs"),
+							href: `/${_}/docs`
+						}, { label: L }],
+						className: "min-w-0 flex-1"
+					}),
+					/* @__PURE__ */ E(y, {
+						value: A ?? "",
+						items: [{
+							value: "",
+							label: o("unsaved")
+						}, ...z.map((e) => ({
+							value: e.id,
+							label: e.name
+						}))],
+						onValueChange: (e) => P(e || void 0),
+						"aria-label": o("savedViews"),
+						size: "sm",
+						width: "content"
+					}),
+					V ? /* @__PURE__ */ E(m, {
+						size: "sm",
+						loading: B.updateView.isPending,
+						onClick: () => B.updateView.mutate({
+							id: V.id,
+							layout: H,
+							config: { ...W }
+						}),
+						children: o("update")
+					}) : /* @__PURE__ */ E(M, {
+						onSave: async (e) => {
+							let t = await B.saveView.mutateAsync({
+								space: b,
+								name: e,
+								layout: H,
+								config: { ...W }
+							});
+							P(t.id);
+						},
+						pending: B.saveView.isPending
+					}),
+					/* @__PURE__ */ E(v, {
+						label: o("layout"),
+						size: "sm",
+						value: H,
+						onValueChange: U,
+						options: [{
+							value: "table",
+							label: o("table"),
+							icon: /* @__PURE__ */ E(i, {})
+						}, {
+							value: "board",
+							label: o("board"),
+							icon: /* @__PURE__ */ E(r, {})
+						}]
+					})
+				]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "flex flex-wrap items-center gap-2 border-b border-border px-4 py-2 text-xs md:px-5",
+				children: [
+					H === "board" ? /* @__PURE__ */ E(y, {
+						value: W.groupBy ?? "",
+						items: [{
+							value: "",
+							label: o("groupBy")
+						}, ...R.filter(f).map((e) => ({
+							value: e.id,
+							label: e.name
+						}))],
+						onValueChange: (e) => K({
+							...W,
+							...e ? { groupBy: e } : { groupBy: void 0 }
+						}),
+						"aria-label": o("groupBy"),
+						size: "sm",
+						width: "content"
+					}) : /* @__PURE__ */ E(y, {
+						multiple: !0,
+						value: W.columns ?? R.map((e) => e.id),
+						items: R.map((e) => ({
+							value: e.id,
+							label: e.name
+						})),
+						onValueChange: (e) => K({
+							...W,
+							columns: e
+						}),
+						"aria-label": o("columns"),
+						placeholder: o("columns"),
+						size: "sm",
+						width: "content"
+					}),
+					/* @__PURE__ */ E(y, {
+						value: W.sort ?? "title",
+						items: q,
+						onValueChange: (e) => K({
+							...W,
+							sort: e
+						}),
+						"aria-label": o("sortBy"),
+						size: "sm",
+						width: "content"
+					}),
+					/* @__PURE__ */ E(m, {
+						size: "xs",
+						variant: "ghost",
+						onClick: () => K({
+							...W,
+							desc: !W.desc
+						}),
+						children: W.desc ? o("descending") : o("ascending")
+					}),
+					R.map((e) => /* @__PURE__ */ E(j, {
+						workspace: _,
+						property: e,
+						value: W.filters?.[e.id] ?? "",
+						onChange: (t) => {
+							let n = { ...W.filters };
+							t ? n[e.id] = t : delete n[e.id], K({
+								...W,
+								filters: n
+							});
+						}
+					}, e.id)),
+					J && /* @__PURE__ */ E(h, {
+						inline: !0,
+						children: g(J)
+					})
+				]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "min-h-0 flex-1 overflow-y-auto",
+				children: /* @__PURE__ */ E(d, {
+					workspace: _,
+					space: b,
+					layout: H,
+					config: W
+				})
+			})
+		]
+	});
+}
+function j({ workspace: e, property: t, value: n, onChange: r }) {
+	let i = T("docViews"), { members: a } = o(e), s = t.kind === "select" || t.kind === "multi_select" ? t.options.map((e) => ({
+		value: e.id ?? "",
+		label: e.name
+	})) : t.kind === "person" ? a.map((e) => ({
+		value: e.user.username,
+		label: e.user.name
+	})) : t.kind === "checkbox" ? [{
+		value: "true",
+		label: i("checked")
+	}] : null;
+	return s ? /* @__PURE__ */ E(y, {
+		value: n,
+		items: [{
+			value: "",
+			label: i("anyValue", { property: t.name })
+		}, ...s],
+		onValueChange: r,
+		"aria-label": i("filterBy", { property: t.name }),
+		size: "sm",
+		width: "content"
+	}) : null;
+}
+function M({ onSave: e, pending: t }) {
+	let n = T("docViews");
+	return /* @__PURE__ */ E(_, {
+		trigger: /* @__PURE__ */ E(m, {
+			size: "sm",
+			children: n("save")
+		}),
+		align: "end",
+		className: "w-64",
+		initialFocus: "first-control",
+		"aria-label": n("save"),
+		children: /* @__PURE__ */ E(N, {
+			onSave: e,
+			pending: t
+		})
+	});
+}
+function N({ onSave: e, pending: t }) {
+	let n = T("docViews"), r = b(), [i, a] = C("");
+	return /* @__PURE__ */ D("form", {
+		className: "space-y-2",
+		onSubmit: (t) => {
+			t.preventDefault(), i.trim() && (e(i.trim()), r());
+		},
+		children: [/* @__PURE__ */ E(g, {
+			value: i,
+			onChange: (e) => a(e.target.value),
+			placeholder: n("viewName"),
+			"aria-label": n("viewName")
+		}), /* @__PURE__ */ E(m, {
+			type: "submit",
+			size: "sm",
+			variant: "primary",
+			loading: t,
+			disabled: !i.trim(),
+			children: n("save")
+		})]
+	});
+}
+export { A as component };

package/routes/_workspace/docs2.js

@@ -5,17 +5,17 @@ import { Outlet as r, useParams as i } from "@tanstack/react-router";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 // src/routes/$workspace/docs.tsx?tsr-split=component
 function s() {
-	let { workspace: s } = e.useParams(), { doc: c } = i({ strict: !1 }), l = c ? t(c) : void 0;
+	let { workspace: s } = e.useParams(), { doc: c, space: l } = i({ strict: !1 }), u = c ? t(c) : l;
 	return /* @__PURE__ */ o("div", {
 		className: "flex h-full",
-		children: [!l && /* @__PURE__ */ a("div", {
+		children: [!u && /* @__PURE__ */ a("div", {
 			className: "mx-auto flex w-full max-w-2xl flex-col px-3 py-3 md:py-6",
 			children: /* @__PURE__ */ a(n, {
 				workspace: s,
 				page: !0
 			}, s)
 		}), /* @__PURE__ */ a("div", {
-			className: `min-w-0 flex-1 ${l ? "block" : "hidden"}`,
+			className: `min-w-0 flex-1 ${u ? "block" : "hidden"}`,
 			children: /* @__PURE__ */ a(r, {})
 		})]
 	});

package/routes/_workspace2.js

@@ -45,8 +45,8 @@ import { AppFrame as nt, AppFrameToggle as I, useAppFrame as L } from "@parallel
 import { createPortal as R } from "react-dom";
 // src/routes/$workspace.tsx?tsr-split=component
 function rt(e, t) {
-	let n = e.slice(`/${t}/docs/`.length).split("/")[0];
-	return e.startsWith(`/${t}/docs/`) && n ? h(n) : void 0;
+	let [n, r] = e.slice(`/${t}/docs/`.length).split("/");
+	return e.startsWith(`/${t}/docs/`) && n && r === void 0 ? h(n) : void 0;
 }
 var z = { className: v }, B = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-[color-mix(in_oklab,currentColor_20%,transparent)] bg-[color-mix(in_oklab,currentColor_6%,transparent)] text-sm font-medium hover:bg-[color-mix(in_oklab,currentColor_12%,transparent)]", it = "absolute top-1.5 right-3 size-2 rounded-full bg-primary", V = (...e) => e.filter(Boolean).join(" ");
 function H() {

package/styles.css

@@ -523,6 +523,23 @@ body[data-tandem] > :not(:has(.tandem)) {
     color: inherit;
     cursor: pointer;
   }
+  /* A saved table or board of docs in a doc (DocViewBlock). */
+  .prose-issue .doc-view-block {
+    margin-block: 0.75em;
+    overflow: hidden;
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+  }
+  .prose-issue .doc-view-block a[href*="/docs/"] {
+    border: 0;
+    background: none;
+    padding: 0;
+    white-space: normal;
+  }
+  .prose-issue .doc-view-block a[href*="/docs/"]::before {
+    content: none;
+  }
   /* A doc's sub-pages, listed in its body (SubPages): rows, not chips. */
   .prose-issue .sub-pages {
     margin-block: 0.75em;
@@ -902,6 +919,28 @@ body[data-tandem] > :not(:has(.tandem)) {
 .collaboration-carets__selection {
   opacity: 0.25;
 }
+
+/* A space's docs as a table (DocTable). */
+.doc-table th {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+}
+.doc-table td {
+  max-width: 20rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid color-mix(in oklab, var(--color-border) 60%, transparent);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.doc-table tbody tr:hover {
+  background: color-mix(in oklab, var(--color-muted) 60%, transparent);
+}
 /*
  * For a host that renders Tandem's pages: its own Tailwind v4 build imports
  * this beside @parallelworks/ui's theme and the typography plugin, so Tandem's