Make the URL the source of truth for the dashboard workspace

client/www/components/dash/BackToAppsButton.tsx

@@ -1,16 +1,19 @@
 import { ArrowUturnLeftIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { createPortal } from 'react-dom';
 
 export const BackToAppsButton = () => {
+  const router = useRouter();
+  const org = router.query.org as string | undefined;
   const element = document.getElementById('left-top-bar')!;
   if (!element) {
     return null;
   }
   return createPortal(
     <Link
       className="ml-4 flex items-center gap-2 rounded-xs p-1 px-2 text-sm opacity-70 transition-colors hover:bg-gray-200/50 dark:hover:bg-neutral-700/60"
-      href="/dash"
+      href={org ? `/dash?org=${org}` : '/dash'}
     >
       <ArrowUturnLeftIcon width={12} />
       Back to Apps

client/www/components/dash/MainDashLayout.tsx

@@ -19,27 +19,56 @@ import { useRouter } from 'next/router';
 
 export type FetchedDash = ReturnType<typeof useFetchedDash>;
 
-const getInitialWorkspace = () => {
-  // pull from the "org" query param
-  const org = new URLSearchParams(window.location.search).get('org');
+const WORKSPACE_STORAGE_KEY = 'workspace';
 
-  if (org) return org;
-  if (!window) return 'personal';
+const getSavedWorkspace = () =>
+  typeof window === 'undefined'
+    ? null
+    : window.localStorage.getItem(WORKSPACE_STORAGE_KEY);
 
-  const possibleSaved = window.localStorage.getItem('workspace');
-
-  if (possibleSaved) return possibleSaved;
-  return 'personal';
+const saveWorkspace = (workspaceId: string) => {
+  if (typeof window !== 'undefined') {
+    window.localStorage.setItem(WORKSPACE_STORAGE_KEY, workspaceId);
+  }
 };
 
 export const { use: useFetchedDash, provider: DashFetchProvider } =
   createInitializedContext(
     'dashResponse',
     (args?: { workspaceId?: string | null | undefined }) => {
       const dashResult = useDashFetch();
-      const [currentWorkspaceId, setWorkspace] = useState<string | 'personal'>(
-        args?.workspaceId || getInitialWorkspace(),
-      );
+      const router = useReadyRouter();
+
+      // Read once: the workspace we were in last time, used to reopen a bare
+      // /dash where you left off. An explicit switch clears it so a restored
+      // default never overrides a deliberate choice.
+      const [restoredWorkspace, setRestoredWorkspace] =
+        useState(getSavedWorkspace);
+
+      // The URL is the source of truth. With no `org` we reopen the workspace
+      // you were last in (a bare entry); an `app` in the URL resolves its own
+      // workspace (see pages/dash), so we skip the restore then. The devtool
+      // seeds the workspace via `args`.
+      const getWorkspaceId = (): string => {
+        if (router.query.org) return router.query.org as string;
+        if (args?.workspaceId) return args.workspaceId;
+        if (restoredWorkspace && !router.query.app) return restoredWorkspace;
+        return 'personal';
+      };
+      const currentWorkspaceId = getWorkspaceId();
+
+      const setWorkspace = (
+        workspaceId: string | 'personal',
+        opts?: { replace?: boolean },
+      ) => {
+        setRestoredWorkspace(null);
+        const query = workspaceId === 'personal' ? {} : { org: workspaceId };
+        if (opts?.replace) {
+          router.replace({ query });
+        } else {
+          router.push({ query });
+        }
+      };
 
       const workspace = useWorkspace(dashResult, currentWorkspaceId);
 
@@ -48,43 +77,19 @@ export const { use: useFetchedDash, provider: DashFetchProvider } =
         await workspace.mutate();
       };
 
-      const router = useReadyRouter();
+      // Remember the current workspace so the next bare /dash can restore it.
+      useEffect(() => {
+        saveWorkspace(currentWorkspaceId);
+      }, [currentWorkspaceId]);
 
+      // If we can't load the org (e.g. we were removed from it) fall back to
+      // the personal account.
       useEffect(() => {
         if (workspace.error) {
-          setWorkspace('personal');
+          setWorkspace('personal', { replace: true });
         }
       }, [workspace.error]);
 
-      useEffect(() => {
-        if (typeof window === 'undefined') return;
-
-        window.localStorage.setItem('workspace', currentWorkspaceId);
-
-        // Use Next.js router for navigation instead of direct history manipulation
-        const currentUrl = new URL(window.location.href);
-
-        // set the query param
-        // if its personal remove the query param
-        if (currentWorkspaceId === 'personal') {
-          if (currentUrl.searchParams.has('org')) {
-            const newUrl = new URL(window.location.href);
-            newUrl.searchParams.delete('org');
-            router.replace(newUrl.pathname + newUrl.search, undefined, {
-              shallow: true,
-            });
-          }
-        } else {
-          if (currentUrl.searchParams.get('org') !== currentWorkspaceId) {
-            const newUrl = new URL(window.location.href);
-            newUrl.searchParams.set('org', currentWorkspaceId);
-            router.replace(newUrl.pathname + newUrl.search, undefined, {
-              shallow: true,
-            });
-          }
-        }
-      }, [currentWorkspaceId, router.pathname]);
-
       const addNewAppOptimistically = (
         promise: Promise<any>,
         app: InstantApp,

client/www/components/dash/ProfilePanel.tsx

@@ -8,7 +8,6 @@ import {
 } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Link from 'next/link';
-import { useReadyRouter } from '../clientOnlyPage';
 import { UserSettingsIcon } from '../icons/UserSettingsIcon';
 import {
   Button,
@@ -24,7 +23,6 @@ import { useFlag } from '@/lib/hooks/useFlag';
 
 export const ProfilePanel = () => {
   const dashResponse = useFetchedDash();
-  const router = useReadyRouter();
 
   const email = dashResponse.data.user.email;
 
@@ -74,9 +72,8 @@ export const ProfilePanel = () => {
                 )}
               >
                 <button
-                  onClick={async () => {
+                  onClick={() => {
                     dashResponse.setWorkspace('personal');
-                    router.push('/dash');
                     close();
                   }}
                   className="grow px-2 py-2 text-left"
@@ -110,10 +107,6 @@ export const ProfilePanel = () => {
                   <button
                     onClick={() => {
                       dashResponse.setWorkspace(org.id);
-                      router.push({
-                        pathname: '/dash',
-                        query: { org: org.id },
-                      });
                       close();
                     }}
                     className="grow px-2 py-2 text-left"
@@ -132,11 +125,8 @@ export const ProfilePanel = () => {
                     <Tooltip>
                       <TooltipTrigger onClick={() => {}}>
                         <Link
-                          href="/dash/org"
-                          onClick={() => {
-                            dashResponse.setWorkspace(org.id);
-                            close();
-                          }}
+                          href={`/dash/org?org=${org.id}`}
+                          onClick={() => close()}
                         >
                           <div className="p-3 transition-colors hover:bg-gray-200 dark:hover:bg-neutral-600">
                             <Cog6ToothIcon height={16} width={16} />

client/www/pages/dash/index.tsx

@@ -282,6 +282,24 @@ function Dashboard() {
     ...(cliOauthTicket ? { [cliOauthParamName]: cliOauthTicket } : {}),
   };
 
+  // Build the canonical /dash query. `org` is how the workspace lives in the
+  // URL, so it's always included for an org workspace and no call site has to
+  // remember it. Defaults to the current workspace; pass `workspace` to target
+  // another. Hand the result to router.replace/push.
+  const dashQueryParams = (input?: {
+    app?: string;
+    tab?: string;
+    workspace?: string | 'personal';
+  }) => {
+    const workspace = input?.workspace ?? fetchedDash.data.currentWorkspaceId;
+    return {
+      s: 'main',
+      ...(input?.app ? { app: input.app } : {}),
+      t: input?.tab ?? tab,
+      ...(workspace !== 'personal' ? { org: workspace } : {}),
+    };
+  };
+
   // Local states
   const [hideAppId, setHideAppId] = useLocalStorage('hide_app_id', false);
 
@@ -340,13 +358,7 @@ function Dashboard() {
   useEffect(() => {
     if (!app) return;
     if (!router.query.app || !router.query.t) {
-      router.replace({
-        query: {
-          s: 'main',
-          app: app.id,
-          t: tab,
-        },
-      });
+      router.replace({ query: dashQueryParams({ app: app.id }) });
     }
   }, [app, router.query.app]);
 
@@ -370,13 +382,7 @@ function Dashboard() {
     const replaceDefault = () => {
       if (!defaultAppId) return;
 
-      router.replace({
-        query: {
-          s: 'main',
-          app: defaultAppId,
-          t: tab,
-        },
-      });
+      router.replace({ query: dashQueryParams({ app: defaultAppId }) });
 
       setLocallySavedApp({
         id: defaultAppId,
@@ -399,19 +405,17 @@ function Dashboard() {
             dashResponse.data?.currentWorkspaceId &&
             dashResponse.data?.currentWorkspaceId !== 'personal'
           ) {
-            dashResponse.setWorkspace('personal');
+            // The app is personally owned; follow it to the personal account.
+            router.replace({
+              query: dashQueryParams({ app: appId, workspace: 'personal' }),
+            });
           } else if (
             res?.app?.org_id &&
             res?.app?.org_id !== router.query.org
           ) {
-            dashResponse.setWorkspace(res.app.org_id);
+            // The app lives in another org; follow it there.
             router.replace({
-              query: {
-                s: 'main',
-                app: appId,
-                org: res?.app?.org_id,
-                t: tab,
-              },
+              query: dashQueryParams({ app: appId, workspace: res.app.org_id }),
             });
           } else {
             replaceDefault();
@@ -470,9 +474,7 @@ function Dashboard() {
     }
 
     router
-      .push({
-        query: q,
-      })
+      .push({ query: dashQueryParams({ app: q.app, tab: q.t }) })
       .then(() => {
         if (opts?.cb) {
           opts.cb();
@@ -537,10 +539,14 @@ function Dashboard() {
   }
 
   if (apps.length === 0) {
+    const workspaceId = dashResponse.data.currentWorkspaceId;
     router.replace(
       {
         pathname: '/dash/new',
-        query: cliTicketQuery,
+        query: {
+          ...cliTicketQuery,
+          ...(workspaceId !== 'personal' ? { org: workspaceId } : {}),
+        },
       },
       undefined,
       { shallow: true },
@@ -1035,10 +1041,11 @@ function AppCombobox({
   appId: string;
   tab: MainTabId;
 }) {
+  const workspaceId = useFetchedDash().data.currentWorkspaceId;
   const currentApp = apps.find((a) => a.id === appId) || null;
   const [appQuery, setAppQuery] = useState('');
   const [pinnedIds, setPinnedIds] = useState(() =>
-    getPinnedAppIds(localStorage.getItem('workspace')),
+    getPinnedAppIds(workspaceId),
   );
   const comboboxInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -1126,9 +1133,8 @@ function AppCombobox({
                     onPointerDown={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
-                      const wsId = localStorage.getItem('workspace');
-                      togglePinnedApp(app.id, wsId);
-                      setPinnedIds(getPinnedAppIds(wsId));
+                      togglePinnedApp(app.id, workspaceId);
+                      setPinnedIds(getPinnedAppIds(workspaceId));
                     }}
                     title={isPinned ? 'Unpin app' : 'Pin app to top'}
                   >