feat: workspace description

apps/web/src/pages/api/stripe/webhook.ts

@@ -55,13 +55,10 @@ export default async function handler(req: NextRequest) {
         const metaData = checkoutSession.metadata;
 
         if (metaData?.workspacePublicId && metaData.username) {
-          await workspaceRepo.update(
+          await workspaceRepo.update(db, metaData.workspacePublicId, {
-            db,
+            slug: metaData.username,
-            metaData.workspacePublicId,
+            plan: "pro",
-            undefined,
+          });
-            metaData.username,
-            "pro",
-          );
         }
         break;
       }

apps/web/src/providers/workspace.tsx

@@ -13,6 +13,7 @@ interface WorkspaceContextProps {
 
 interface Workspace {
   name: string;
+  description: string | null;
   publicId: string;
   slug: string;
   plan: "free" | "pro" | "enterprise";
@@ -20,6 +21,7 @@ interface Workspace {
 
 const initialWorkspace: Workspace = {
   name: "",
+  description: null,
   publicId: "",
   slug: "",
   plan: "free",
@@ -65,6 +67,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
             publicId: workspace.publicId,
             name: workspace.name,
             slug: workspace.slug,
+            description: workspace.description,
             plan: workspace.plan,
           };
         })
@@ -86,6 +89,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         name: selectedWorkspace.workspace.name,
         slug: selectedWorkspace.workspace.slug,
         plan: selectedWorkspace.workspace.plan,
+        description: selectedWorkspace.workspace.description,
       });
     } else {
       const primaryWorkspace = data[0]?.workspace;
@@ -96,6 +100,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
         name: primaryWorkspace.name,
         slug: primaryWorkspace.slug,
         plan: primaryWorkspace.plan,
+        description: primaryWorkspace.description,
       });
     }
   }, [data]);

apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx

@@ -0,0 +1,87 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+const schema = z.object({
+  description: z
+    .string()
+    .min(3, {
+      message: "Workspace description must be at least 3 characters long",
+    })
+    .max(280, {
+      message: "Workspace description cannot exceed 280 characters",
+    }),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+const UpdateWorkspaceDescriptionForm = ({
+  workspacePublicId,
+  workspaceDescription,
+}: {
+  workspacePublicId: string;
+  workspaceDescription: string;
+}) => {
+  const utils = api.useUtils();
+  const { showPopup } = usePopup();
+  const {
+    register,
+    handleSubmit,
+    formState: { isDirty, errors },
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    values: {
+      description: workspaceDescription,
+    },
+  });
+
+  const updateWorkspaceDescription = api.workspace.update.useMutation({
+    onSuccess: async () => {
+      try {
+        await utils.workspace.all.refetch();
+      } catch (e) {
+        console.error(e);
+        throw e;
+      }
+    },
+    onError: () => {
+      showPopup({
+        header: "Error updating workspace description",
+        message: "Please try again later, or contact customer support.",
+      });
+    },
+  });
+
+  const onSubmit = (data: FormValues) => {
+    updateWorkspaceDescription.mutate({
+      workspacePublicId,
+      description: data.description,
+    });
+  };
+
+  return (
+    <>
+      <div className="mb-4 flex max-w-[350px] items-center gap-2">
+        <Input
+          {...register("description")}
+          errorMessage={errors.description?.message}
+        />
+      </div>
+      <Button
+        onClick={handleSubmit(onSubmit)}
+        variant="primary"
+        disabled={!isDirty || updateWorkspaceDescription.isPending}
+        isLoading={updateWorkspaceDescription.isPending}
+      >
+        Update
+      </Button>
+    </>
+  );
+};
+
+export default UpdateWorkspaceDescriptionForm;

apps/web/src/views/settings/index.tsx

@@ -8,6 +8,7 @@ import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
 import { PremiumUsernameConfirmation } from "./components/PremiumUsernameConfirmation";
+import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
 import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
 import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
 
@@ -63,6 +64,14 @@ export default function SettingsPage() {
                 workspaceUrl={workspace.slug}
                 workspacePlan={workspace.plan}
               />
+
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                Workspace description
+              </h2>
+              <UpdateWorkspaceDescriptionForm
+                workspacePublicId={workspace.publicId}
+                workspaceDescription={workspace.description ?? ""}
+              />
             </div>
 
             <div className="mb-8 border-t border-light-300 dark:border-dark-300">

apps/web/src/views/workspaceSlug/index.tsx

@@ -74,7 +74,7 @@ export default function WorkspaceSlugPage() {
           {data?.name}
         </h1>
         <p className="mb-6 text-light-1000 dark:text-dark-900">
-          The open source Trello alternative.
+          {data?.description}
         </p>
         <div className="mb-4 h-[400px] w-[600px] rounded-xl border border-light-400 bg-light-200 p-4 dark:border-dark-200 dark:bg-dark-100">
           {data?.boards && workspaceSlug && (

packages/api/src/routers/member.ts

@@ -96,6 +96,7 @@ export const memberRouter = createTRPCRouter({
           const newUser = await userRepo.create(ctx.adminDb, {
             email: invitedUserEmail,
             id: invitedUserAuthId,
+            stripeCustomerId: "",
           });
 
           invitedUserId = newUser?.id;

packages/api/src/routers/workspace.ts

@@ -145,6 +145,7 @@ export const workspaceRouter = createTRPCRouter({
         workspacePublicId: z.string().min(12),
         name: z.string().min(3).max(24).optional(),
         slug: z.string().min(3).max(24).optional(),
+        description: z.string().min(3).max(280).optional(),
       }),
     )
     .output(z.custom<Awaited<ReturnType<typeof workspaceRepo.update>>>())
@@ -177,8 +178,11 @@ export const workspaceRouter = createTRPCRouter({
       const result = await workspaceRepo.update(
         ctx.db,
         input.workspacePublicId,
-        input.name,
+        {
-        input.slug,
+          name: input.name,
+          slug: input.slug,
+          description: input.description,
+        },
       );
 
       return result;

packages/db/migrations/0003_fine_bedlam.sql

@@ -0,0 +1 @@
+ALTER TABLE "workspace" ADD COLUMN "description" text;

packages/db/migrations/meta/_journal.json

@@ -22,6 +22,13 @@
       "when": 1735904544867,
       "tag": "0002_bored_retro_girl",
       "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "7",
+      "when": 1736084845433,
+      "tag": "0003_fine_bedlam",
+      "breakpoints": true
     }
   ]
 }

packages/db/src/repository/workspace.repo.ts

@@ -42,13 +42,21 @@ export const create = async (
 export const update = async (
   db: SupabaseClient<Database>,
   workspacePublicId: string,
-  name: string | undefined,
+  workspaceInput: {
-  slug: string | undefined,
+    name?: string;
-  plan?: "free" | "pro" | "enterprise",
+    slug?: string;
+    plan?: "free" | "pro" | "enterprise";
+    description?: string;
+  },
 ) => {
   const { data } = await db
     .from("workspace")
-    .update({ name, slug, plan })
+    .update({
+      name: workspaceInput.name,
+      slug: workspaceInput.slug,
+      plan: workspaceInput.plan,
+      description: workspaceInput.description,
+    })
     .eq("publicId", workspacePublicId)
     .is("deletedAt", null);
 
@@ -111,6 +119,7 @@ export const getBySlugWithBoards = async (
       `
         publicId,
         name,
+        description,
         slug,
         boards: board (
           publicId,
@@ -139,6 +148,7 @@ export const getAllByUserId = async (
         workspace (
           publicId,
           name,
+          description,
           slug,
           plan
         )

packages/db/src/schema.ts

@@ -293,6 +293,7 @@ export const workspaces = pgTable("workspace", {
   id: bigserial("id", { mode: "number" }).primaryKey(),
   publicId: varchar("publicId", { length: 12 }).notNull().unique(),
   name: varchar("name", { length: 255 }).notNull(),
+  description: text("description"),
   slug: varchar("slug", { length: 255 }).notNull().unique(),
   plan: workspacePlanEnum("plan").notNull().default("free"),
   createdBy: uuid("createdBy")

packages/db/src/types/database.types.ts

@@ -582,6 +582,7 @@ export type Database = {
           createdBy: string
           deletedAt: string | null
           deletedBy: string | null
+          description: string | null
           id: number
           name: string
           plan: Database["public"]["Enums"]["workspace_plan"]
@@ -594,6 +595,7 @@ export type Database = {
           createdBy: string
           deletedAt?: string | null
           deletedBy?: string | null
+          description?: string | null
           id?: number
           name: string
           plan?: Database["public"]["Enums"]["workspace_plan"]
@@ -606,6 +608,7 @@ export type Database = {
           createdBy?: string
           deletedAt?: string | null
           deletedBy?: string | null
+          description?: string | null
           id?: number
           name?: string
           plan?: Database["public"]["Enums"]["workspace_plan"]