feat: enhance user experience with improved workspace switcher functionality

2026-01-22 00:52:31 +01:00
parent db4350097a
commit 2fc4344302
1 changed files with 77 additions and 0 deletions
--- a/components/WorkspaceSwitcher.tsx
+++ b/components/WorkspaceSwitcher.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { PlusIcon, CubeIcon, CheckIcon } from '@radix-ui/react-icons'
+import { switchContext, OrganizationMember } from '@/lib/api/organization'
+import { setSessionAction } from '@/app/actions/auth'
+import Link from 'next/link'
+
+export default function WorkspaceSwitcher({ orgs, activeOrgId }: { orgs: OrganizationMember[], activeOrgId: string | null }) {
+  const router = useRouter()
+  const [switching, setSwitching] = useState<string | null>(null)
+  
+  const handleSwitch = async (orgId: string) => {
+    console.log('Switching to workspace:', orgId)
+    setSwitching(orgId)
+    try {
+      const { token, refresh_token } = await switchContext(orgId)
+      
+      // * Update session cookie via server action
+      await setSessionAction(token, refresh_token)
+      
+      // * Update local storage for client-side optimistics
+      // * We store the full user object usually, but here we just need to trigger a refresh
+      
+      // Force reload to pick up new permissions
+      window.location.reload() 
+      
+    } catch (err) {
+      console.error('Failed to switch workspace', err)
+      setSwitching(null)
+    }
+  }
+
+  return (
+    <div className="border-b border-neutral-100 dark:border-neutral-800 pb-2 mb-2">
+      <div className="px-3 py-2 text-xs font-medium text-neutral-500 uppercase tracking-wider">
+        Workspaces
+      </div>
+      
+      {/* Organization Workspaces */}
+      {orgs.map((org) => (
+        <button
+          key={org.organization_id}
+          onClick={() => handleSwitch(org.organization_id)}
+          className={`w-full flex items-center justify-between px-3 py-2 text-sm rounded-md transition-colors mt-1 ${
+            activeOrgId === org.organization_id ? 'bg-neutral-100 dark:bg-neutral-800' : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50'
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            <div className="h-5 w-5 rounded bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
+              <CubeIcon className="h-3 w-3 text-blue-600 dark:text-blue-400" />
+            </div>
+            <span className="text-neutral-700 dark:text-neutral-300 truncate max-w-[140px]">
+              {org.organization_name}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            {switching === org.organization_id && <span className="text-xs text-neutral-400">Loading...</span>}
+            {activeOrgId === org.organization_id && !switching && <CheckIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />}
+          </div>
+        </button>
+      ))}
+
+      {/* Create New */}
+      <Link
+        href="/onboarding"
+        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-neutral-500 hover:text-blue-600 dark:text-neutral-400 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/10 rounded-md transition-colors mt-1"
+      >
+        <div className="h-5 w-5 rounded border border-dashed border-neutral-300 dark:border-neutral-600 flex items-center justify-center">
+          <PlusIcon className="h-3 w-3" />
+        </div>
+        <span>Create Organization</span>
+      </Link>
+    </div>
+  )
+}