Select a workspace to use forms.
@@ -93,7 +94,7 @@ export function FormView({ config, className }: FormViewProps) {
{selectedId ? (
-
+
) : (
Pick a form above to fill it out in this view.
diff --git a/apps/web/components/views/list/list-view.tsx b/apps/web/components/views/list/list-view.tsx
index eaa47cf..b3d9080 100644
--- a/apps/web/components/views/list/list-view.tsx
+++ b/apps/web/components/views/list/list-view.tsx
@@ -206,7 +206,7 @@ export interface ListViewProps {
export function ListView({ config }: ListViewProps) {
const params = useParams();
- const workspaceId =
+ const workspaceHandle =
typeof params?.workspaceSlug === "string" ? params.workspaceSlug : undefined;
const parentId =
typeof params?.projectId === "string" ? params.projectId : undefined;
@@ -223,7 +223,7 @@ export function ListView({ config }: ListViewProps) {
const { items, isLoading, total } = useViewData(
effectiveConfig,
- workspaceId,
+ workspaceHandle,
parentId,
);
@@ -398,12 +398,12 @@ export function ListView({ config }: ListViewProps) {
value={newTitle}
onChange={(e) => setNewTitle(e.target.value)}
onKeyDown={(e) => {
- if (e.key === "Enter" && newTitle.trim() && workspaceId) {
+ if (e.key === "Enter" && newTitle.trim() && workspaceHandle) {
e.preventDefault();
createObject.mutate({
type: "task",
title: newTitle.trim(),
- workspaceId,
+ workspace: workspaceHandle,
parentId: parentId ?? undefined,
});
}
@@ -414,11 +414,11 @@ export function ListView({ config }: ListViewProps) {
}}
onBlur={() => {
if (createObject.isPending) return;
- if (newTitle.trim() && workspaceId) {
+ if (newTitle.trim() && workspaceHandle) {
createObject.mutate({
type: "task",
title: newTitle.trim(),
- workspaceId,
+ workspace: workspaceHandle,
parentId: parentId ?? undefined,
});
} else {
diff --git a/apps/web/components/views/overview/overview-view.tsx b/apps/web/components/views/overview/overview-view.tsx
index 8c265a6..b978378 100644
--- a/apps/web/components/views/overview/overview-view.tsx
+++ b/apps/web/components/views/overview/overview-view.tsx
@@ -6,7 +6,7 @@ import { Badge } from "@/components/ui/badge";
import { api } from "@/lib/trpc";
export interface OverviewViewProps {
- workspaceId?: string;
+ workspaceHandle?: string;
spaceId?: string;
}
@@ -16,19 +16,19 @@ function formatUpdatedAt(value: Date | string): string {
return date.toLocaleString();
}
-export function OverviewView({ workspaceId, spaceId }: OverviewViewProps) {
+export function OverviewView({ workspaceHandle, spaceId }: OverviewViewProps) {
const spaceQuery = api.objects.getById.useQuery(
- { id: spaceId! },
- { enabled: Boolean(spaceId) },
+ { workspace: workspaceHandle!, id: spaceId! },
+ { enabled: Boolean(spaceId) && Boolean(workspaceHandle) },
);
const childrenQuery = api.objects.list.useQuery(
{
- workspaceId: workspaceId!,
+ workspace: workspaceHandle!,
parentId: spaceId ?? undefined,
limit: 200,
},
- { enabled: Boolean(workspaceId) },
+ { enabled: Boolean(workspaceHandle) },
);
const statusCounts = useMemo(() => {
diff --git a/apps/web/components/views/table/table-view.tsx b/apps/web/components/views/table/table-view.tsx
index 8a38ff1..801e5b9 100644
--- a/apps/web/components/views/table/table-view.tsx
+++ b/apps/web/components/views/table/table-view.tsx
@@ -347,7 +347,7 @@ export interface TableViewProps {
export function TableView({ config }: TableViewProps) {
const params = useParams();
- const workspaceId =
+ const workspaceHandle =
typeof params?.workspaceSlug === "string" ? params.workspaceSlug : undefined;
const parentId =
typeof params?.projectId === "string" ? params.projectId : undefined;
@@ -365,7 +365,7 @@ export function TableView({ config }: TableViewProps) {
const { items, isLoading, total } = useViewData(
effectiveConfig,
- workspaceId,
+ workspaceHandle,
parentId,
);
@@ -813,12 +813,12 @@ export function TableView({ config }: TableViewProps) {
value={newTitle}
onChange={(e) => setNewTitle(e.target.value)}
onKeyDown={(e) => {
- if (e.key === "Enter" && newTitle.trim() && workspaceId) {
+ if (e.key === "Enter" && newTitle.trim() && workspaceHandle) {
e.preventDefault();
createObject.mutate({
type: "task",
title: newTitle.trim(),
- workspaceId,
+ workspace: workspaceHandle,
parentId: parentId ?? undefined,
});
}
@@ -829,11 +829,11 @@ export function TableView({ config }: TableViewProps) {
}}
onBlur={() => {
if (createObject.isPending) return;
- if (newTitle.trim() && workspaceId) {
+ if (newTitle.trim() && workspaceHandle) {
createObject.mutate({
type: "task",
title: newTitle.trim(),
- workspaceId,
+ workspace: workspaceHandle,
parentId: parentId ?? undefined,
});
} else {
diff --git a/apps/web/components/workspaces/create-workspace-dialog.tsx b/apps/web/components/workspaces/create-workspace-dialog.tsx
new file mode 100644
index 0000000..d597965
--- /dev/null
+++ b/apps/web/components/workspaces/create-workspace-dialog.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { useRouter } from "next/navigation";
+import { Loader2, X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/trpc";
+import { useWorkspaceStore } from "@/lib/stores/workspace-store";
+import { cn } from "@/lib/utils";
+
+const SLUG_RE = /^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
+
+function makeSlug(name: string): string {
+ return (
+ name
+ .trim()
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, "-")
+ .replace(/^-+|-+$/g, "")
+ .slice(0, 60) || ""
+ );
+}
+
+export function CreateWorkspaceDialog({
+ open,
+ onOpenChange,
+}: {
+ open: boolean;
+ onOpenChange: (next: boolean) => void;
+}) {
+ const router = useRouter();
+ const utils = api.useUtils();
+ const setWorkspace = useWorkspaceStore((s) => s.setWorkspace);
+
+ const [name, setName] = React.useState("");
+ const [slug, setSlug] = React.useState("");
+ const [slugTouched, setSlugTouched] = React.useState(false);
+ const [error, setError] = React.useState(null);
+
+ const createMut = api.workspaces.create.useMutation({
+ onSuccess: async (ws) => {
+ await utils.workspaces.listForUser.invalidate();
+ setWorkspace({ id: ws.id, slug: ws.slug, name: ws.name });
+ onOpenChange(false);
+ router.push(`/${ws.slug}`);
+ },
+ onError: (e) => setError(e.message ?? "Failed to create workspace"),
+ });
+
+ React.useEffect(() => {
+ if (open) {
+ setName("");
+ setSlug("");
+ setSlugTouched(false);
+ setError(null);
+ }
+ }, [open]);
+
+ const previewSlug = slugTouched ? slug : makeSlug(name);
+ const slugInvalid = slugTouched && slug.length > 0 && !SLUG_RE.test(slug);
+
+ const submit = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (createMut.isPending) return;
+ setError(null);
+
+ const trimmed = name.trim();
+ if (!trimmed) {
+ setError("Workspace name is required");
+ return;
+ }
+ if (slugTouched && slug && !SLUG_RE.test(slug)) {
+ setError("Slug must be lowercase letters, digits, or hyphens");
+ return;
+ }
+ createMut.mutate({
+ name: trimmed,
+ ...(slugTouched && slug ? { slug } : {}),
+ });
+ };
+
+ return (
+
+
+
+
+
+
+
+ Create workspace
+
+
+ Workspaces isolate projects, tasks, and team members. You can
+ rename or change the slug later.
+
+
+
+