From c4220580e5eab5269b9c0b44928e8b8361b9b44f Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Thu, 11 Sep 2025 13:56:58 +0100
Subject: [PATCH] refactor: various tweaks and fixes

---
 apps/web/src/components/NewWorkspaceForm.tsx  | 20 ++++++++++++++-----
 apps/web/src/views/boards/index.tsx           |  4 ++--
 .../components/UpgradeToProConfirmation.tsx   | 11 +++++++---
 packages/shared/src/utils/subscriptions.ts    |  2 +-
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/NewWorkspaceForm.tsx b/apps/web/src/components/NewWorkspaceForm.tsx
index dd2545c7..3d0ccd5c 100644
--- a/apps/web/src/components/NewWorkspaceForm.tsx
+++ b/apps/web/src/components/NewWorkspaceForm.tsx
@@ -42,7 +42,7 @@ type FormValues = z.infer<typeof schema>;
 export function NewWorkspaceForm() {
   const { closeModal } = useModal();
   const { showPopup } = usePopup();
-  const { switchWorkspace } = useWorkspace();
+  const { switchWorkspace, availableWorkspaces } = useWorkspace();
   const {
     register,
     handleSubmit,
@@ -60,6 +60,8 @@ export function NewWorkspaceForm() {
   });
   const utils = api.useUtils();
 
+  const hasAvailableWorkspaces = availableWorkspaces.length > 0;
+
   const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
 
   const slug = watch("slug");
@@ -209,7 +211,10 @@ export function NewWorkspaceForm() {
           </h2>
           <button
             type="button"
-            className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
+            className={twMerge(
+              "rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300",
+              !hasAvailableWorkspaces && "invisible",
+            )}
             onClick={(e) => {
               e.preventDefault();
               closeModal();
@@ -306,9 +311,14 @@ export function NewWorkspaceForm() {
                 </div>
                 <div className="flex items-center space-x-3">
                   <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
-                  <span className="text-xs text-neutral-900 dark:text-dark-1000">
-                    {t`Board analytics (coming soon)`}
-                  </span>
+                  <div className="flex items-center space-x-2">
+                    <span className="text-xs text-neutral-900 dark:text-dark-1000">
+                      {t`Board analytics`}
+                    </span>
+                    <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-0.5 text-[10px] font-medium text-gray-600 ring-1 ring-inset ring-gray-500/20 dark:text-gray-400 sm:text-[10px]">
+                      {t`Coming soon`}
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/apps/web/src/views/boards/index.tsx b/apps/web/src/views/boards/index.tsx
index 4d572792..426c30b9 100644
--- a/apps/web/src/views/boards/index.tsx
+++ b/apps/web/src/views/boards/index.tsx
@@ -14,9 +14,9 @@ import { NewBoardForm } from "./components/NewBoardForm";
 
 export default function BoardsPage() {
   const { openModal, modalContentType, isOpen } = useModal();
-  const { workspace, hasLoaded } = useWorkspace();
+  const { availableWorkspaces, workspace, hasLoaded } = useWorkspace();
 
-  if (hasLoaded && !workspace.publicId) openModal("NEW_WORKSPACE");
+  if (hasLoaded && availableWorkspaces.length === 0) openModal("NEW_WORKSPACE");
 
   return (
     <>
diff --git a/apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx b/apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx
index 77261f3d..c195ee72 100644
--- a/apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx
+++ b/apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx
@@ -76,9 +76,14 @@ export function UpgradeToProConfirmation({
             </div>
             <div className="flex items-center space-x-3">
               <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
-              <span className="text-sm text-neutral-900 dark:text-dark-1000">
-                {t`Board analytics (coming soon)`}
-              </span>
+              <div className="flex items-center space-x-2">
+                <span className="text-xs text-neutral-900 dark:text-dark-1000">
+                  {t`Board analytics`}
+                </span>
+                <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-0.5 text-[10px] font-medium text-gray-600 ring-1 ring-inset ring-gray-500/20 dark:text-gray-400 sm:text-[10px]">
+                  {t`Coming soon`}
+                </span>
+              </div>
             </div>
             <div className="flex items-center space-x-3">
               <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
diff --git a/packages/shared/src/utils/subscriptions.ts b/packages/shared/src/utils/subscriptions.ts
index 0779306e..191d2bfc 100644
--- a/packages/shared/src/utils/subscriptions.ts
+++ b/packages/shared/src/utils/subscriptions.ts
@@ -14,7 +14,7 @@ export interface Subscription {
   unlimitedSeats: boolean;
   periodStart: Date | null;
   periodEnd: Date | null;
-  referenceId: string;
+  referenceId: string | null;
   stripeSubscriptionId: string | null;
   stripeCustomerId: string | null;
   createdAt: Date;