fix: unique workspace slug, header actions, server unkey middleware (#305)

* fix: unique workspace slug, header actions, server unkey middleware

* chore: add log

apps/server/src/middleware.ts

···
-import { Unkey } from "@unkey/api";
+import { verifyKey } from "@unkey/api";
 import type { Context, Env, Next } from "hono";
 
-const unkey = new Unkey({ token: "test-key" });
-
 export async function middleware(c: Context<Env, "/v1/*", {}>, next: Next) {
-  const auth = c.req.header("x-openstatus-key");
-  if (!auth) return c.text("Unauthorized", 401);
+  const key = c.req.header("x-openstatus-key");
+  if (!key) return c.text("Unauthorized", 401);
 
   if (process.env.NODE_ENV === "production") {
-    const { error, result } = await unkey.keys.verify({ key: auth });
+    const { error, result } = await verifyKey(key);
 
     if (error) return c.text("Bad Request", 400);
 

apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/page.tsx

···
   });
   return (
     <div className="grid gap-6 md:grid-cols-1 md:gap-8">
-      <Header title="Incidents" description="Overview of all your incidents.">
-        <Button asChild>
-          <Link href="./incidents/edit">Create</Link>
-        </Button>
-      </Header>
+      <Header
+        title="Incidents"
+        description="Overview of all your incidents."
+        actions={
+          <Button asChild>
+            <Link href="./incidents/edit">Create</Link>
+          </Button>
+        }
+      />
       {Boolean(incidents?.length) ? (
         <div className="col-span-full grid sm:grid-cols-6">
           <ul role="list" className="grid gap-4 sm:col-span-6">

apps/web/src/app/app/(dashboard)/[workspaceSlug]/integrations/page.tsx

···
 
   return (
     <div className="grid gap-6 md:grid-cols-2 md:gap-8">
-      <Header title="Integrations" description="All our integrations"></Header>
-
+      <Header title="Integrations" description="All our integrations" />
       <Container
         title="Vercel"
         key={"vercel"}

apps/web/src/app/app/(dashboard)/[workspaceSlug]/layout.tsx

···
 import * as React from "react";
+import { notFound } from "next/navigation";
 
 import { Shell } from "@/components/dashboard/shell";
 import { AppHeader } from "@/components/layout/app-header";
 import { AppMenu } from "@/components/layout/app-menu";
 import { AppSidebar } from "@/components/layout/app-sidebar";
+import { api } from "@/trpc/server";
 
 // TODO: make the container min-h-screen and the footer below!
-export default function AppLayout({ children }: { children: React.ReactNode }) {
+export default async function AppLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { workspaceSlug: string };
+}) {
+  const workspace = await api.workspace.getWorkspace.query({
+    slug: params.workspaceSlug,
+  });
+  if (!workspace) return notFound(); // TODO: discuss if we should move to middleware
+
   return (
     <div className="container relative mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-6 p-4 lg:p-8">
       <AppHeader />

apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/page.tsx

···
 
   return (
     <div className="grid gap-6 md:gap-8">
-      <Header title={monitor.name} description={monitor.url}></Header>
+      <Header title={monitor.name} description={monitor.url} />
       {data && <DataTable columns={columns} data={data} />}
     </div>
   );

apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/page.tsx

···
 
   return (
     <div className="grid gap-6 md:grid-cols-2 md:gap-8">
-      <Header title="Monitors" description="Overview of all your monitors.">
-        <ButtonWithDisableTooltip
-          tooltip="You reached the limits"
-          asChild={!isLimit}
-          disabled={isLimit}
-        >
-          <Link href="./monitors/edit">Create</Link>
-        </ButtonWithDisableTooltip>
-      </Header>
+      <Header
+        title="Monitors"
+        description="Overview of all your monitors."
+        actions={
+          <ButtonWithDisableTooltip
+            tooltip="You reached the limits"
+            asChild={!isLimit}
+            disabled={isLimit}
+          >
+            <Link href="./monitors/edit">Create</Link>
+          </ButtonWithDisableTooltip>
+        }
+      />
       {Boolean(monitors?.length) ? (
         monitors?.map((monitor, index) => (
           <Container

apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/page.tsx

···
       <Header
         title="Status Page"
         description="Overview of all your status pages."
-      >
-        <ButtonWithDisableTooltip
-          tooltip="You reached the limits"
-          asChild={!disableButton}
-          disabled={disableButton}
-        >
-          <Link href="./status-pages/edit">Create</Link>
-        </ButtonWithDisableTooltip>
-      </Header>
+        actions={
+          <ButtonWithDisableTooltip
+            tooltip="You reached the limits"
+            asChild={!disableButton}
+            disabled={disableButton}
+          >
+            <Link href="./status-pages/edit">Create</Link>
+          </ButtonWithDisableTooltip>
+        }
+      />
       {Boolean(pages?.length) ? (
         pages?.map((page, index) => (
           <Container

apps/web/src/components/dashboard/header.tsx

···
 interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   description?: string | null;
+  actions?: React.ReactNode | React.ReactNode[];
 }
 
 /**
  * use `children` to include a Button e.g.
  */
-function Header({ title, description, className, children }: HeaderProps) {
+function Header({ title, description, className, actions }: HeaderProps) {
   return (
     <div
       className={cn(
-        "col-span-full mr-12 flex justify-between lg:mr-0",
+        "col-span-full mr-12 flex items-start justify-between lg:mr-0",
         className,
       )}
     >
···
           <p className="text-muted-foreground">{description}</p>
         ) : null}
       </div>
-      {children}
+      {actions ? (
+        <div className="flex items-center gap-2">{actions}</div>
+      ) : null}
     </div>
   );
 }

packages/api/src/router/clerk/webhook.ts

···
         .returning()
         .get();
 
-      const slug = generateSlug(2);
+      // guarantee the slug is unique accross our workspace entries
+      let slug: string | undefined = undefined;
+
+      while (!slug) {
+        slug = generateSlug(2);
+        const slugAlreadyExists = await opts.ctx.db
+          .select()
+          .from(workspace)
+          .where(eq(workspace.slug, slug))
+          .get();
+        if (slugAlreadyExists) {
+          console.log(`slug already exists: '${slug}'`);
+          slug = undefined;
+        }
+      }
+
       const workspaceResult = await opts.ctx.db
         .insert(workspace)
         .values({ slug, name: "" })