improvement(settings): make the sidebar wordmark a plane attribute

Replacing the Back chip everywhere was too broad — account and
organization are reached from inside the app, so Back is right there.
Self-host is reached from outside it (the CLI wizard, the README), so it
leads with the brand mark instead.

SETTINGS_PLANE_CHROME declares that per plane, keyed on
StandaloneSettingsPlane so adding a plane forces the decision rather than
defaulting silently. It also absorbs the shell's parallel plane-label map.

Author: TheodoreSpeaks

apps/sim/components/settings/navigation.ts

@@ -283,6 +283,23 @@ export const ACCOUNT_SETTINGS_GROUPS = [
   { key: 'platform', title: 'Platform' },
 ] as const
 
+/** Planes with their own standalone shell; the workspace plane renders inside the editor. */
+export type StandaloneSettingsPlane = Exclude<SettingsPlane, 'workspace'>
+
+/**
+ * Per-plane sidebar chrome. Self-host is reached from outside the app (the CLI
+ * wizard, the README), so it leads with the brand mark rather than a Back link
+ * into a workspace the visitor may not even be using.
+ */
+export const SETTINGS_PLANE_CHROME: Record<
+  StandaloneSettingsPlane,
+  { label: string; showWordmark: boolean }
+> = {
+  account: { label: 'Account', showWordmark: false },
+  organization: { label: 'Organization', showWordmark: false },
+  selfhost: { label: 'Self-host', showWordmark: true },
+}
+
 export const SELFHOST_SETTINGS_GROUPS = [
   { key: 'account', title: 'Account' },
   { key: 'developer', title: 'Developer' },

apps/sim/components/settings/settings-sidebar.tsx

@@ -2,8 +2,14 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { ChipConfirmModal, chipVariants, cn, Tooltip } from '@sim/emcn'
+import { ChevronDown } from '@sim/emcn/icons'
 import { useRouter } from 'next/navigation'
-import type { SettingsNavigationItem, SettingsSection } from '@/components/settings/navigation'
+import {
+  SETTINGS_PLANE_CHROME,
+  type SettingsNavigationItem,
+  type SettingsSection,
+  type StandaloneSettingsPlane,
+} from '@/components/settings/navigation'
 import { SimWordmark } from '@/app/(landing)/components/navbar/components'
 import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
 
@@ -13,6 +19,9 @@ import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
  */
 const LANDING_HREF = '/?home'
 
+/** Where the Back chip goes on planes that don't show the wordmark. */
+const WORKSPACE_HREF = '/workspace'
+
 interface SettingsNavigationGroup {
   key: string
   title: string
@@ -25,6 +34,7 @@ interface SidebarSettingsItem<Section extends SettingsSection>
 
 interface SettingsSidebarProps<Section extends SettingsSection> {
   activeSection: string
+  plane: StandaloneSettingsPlane
   groups: readonly SettingsNavigationGroup[]
   hrefForSection: (section: Section) => string
   items: readonly SidebarSettingsItem<Section>[]
@@ -52,6 +62,7 @@ function SidebarTooltip({
 
 export function SettingsSidebar<Section extends SettingsSection>({
   activeSection,
+  plane,
   groups,
   hrefForSection,
   items,
@@ -86,15 +97,30 @@ export function SettingsSidebar<Section extends SettingsSection>({
   return (
     <>
       <div className='flex flex-shrink-0 flex-col gap-0.5 px-2 pb-1.5'>
-        {/* Stays a button, not a Link: leaving settings must run the unsaved-changes guard. */}
-        <button
-          type='button'
-          aria-label='Sim home'
-          onClick={() => requestLeave(() => router.push(LANDING_HREF))}
-          className='flex h-[30px] flex-shrink-0 items-center px-2 transition-opacity hover:opacity-70'
-        >
-          <SimWordmark />
-        </button>
+        {/* Both stay buttons, not Links: leaving settings must run the unsaved-changes guard. */}
+        {SETTINGS_PLANE_CHROME[plane].showWordmark ? (
+          <button
+            type='button'
+            aria-label='Sim home'
+            onClick={() => requestLeave(() => router.push(LANDING_HREF))}
+            className='flex h-[30px] flex-shrink-0 items-center px-2 transition-opacity hover:opacity-70'
+          >
+            <SimWordmark />
+          </button>
+        ) : (
+          <SidebarTooltip label='Back' enabled={showCollapsedTooltips}>
+            <button
+              type='button'
+              onClick={() => requestLeave(() => router.push(WORKSPACE_HREF))}
+              className={chipVariants({ fullWidth: true })}
+            >
+              <div className='flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'>
+                <ChevronDown className='size-[10px] rotate-90' />
+              </div>
+              <span className='sidebar-collapse-hide truncate text-[var(--text-body)]'>Back</span>
+            </button>
+          </SidebarTooltip>
+        )}
       </div>
 
       <div

apps/sim/components/settings/standalone-settings-shell.tsx

@@ -19,19 +19,14 @@ import {
   resolveOrganizationSectionAccess,
   SELFHOST_SETTINGS_GROUPS,
   SELFHOST_SETTINGS_ITEMS,
+  SETTINGS_PLANE_CHROME,
 } from '@/components/settings/navigation'
 import { SettingsHeaderProvider, SettingsHeaderShell } from '@/components/settings/settings-header'
 import { SettingsSectionProvider } from '@/components/settings/settings-panel'
 import { SettingsSidebar } from '@/components/settings/settings-sidebar'
 import { useSettingsBeforeUnload } from '@/components/settings/use-settings-before-unload'
 import { isBillingEnabled } from '@/lib/core/config/env-flags'
 
-const SHELL_PLANE_LABELS: Record<'account' | 'organization' | 'selfhost', string> = {
-  account: 'Account',
-  organization: 'Organization',
-  selfhost: 'Self-host',
-}
-
 interface StandaloneSettingsShellBaseProps {
   children: ReactNode
 }
@@ -109,20 +104,23 @@ export function StandaloneSettingsShell(props: StandaloneSettingsShellProps) {
     plane === 'selfhost' ? (
       <SettingsSidebar
         activeSection={selfHostSection}
+        plane={plane}
         groups={SELFHOST_SETTINGS_GROUPS}
         hrefForSection={getSelfHostSettingsHref}
         items={selfHostItems}
       />
     ) : plane === 'account' ? (
       <SettingsSidebar
         activeSection={accountSection}
+        plane={plane}
         groups={ACCOUNT_SETTINGS_GROUPS}
         hrefForSection={getAccountSettingsHref}
         items={accountItems}
       />
     ) : (
       <SettingsSidebar
         activeSection={organizationSection}
+        plane={plane}
         groups={ORGANIZATION_SETTINGS_GROUPS}
         hrefForSection={(section) => getOrganizationSettingsHref(props.organizationId, section)}
         items={organizationItems}
@@ -134,7 +132,7 @@ export function StandaloneSettingsShell(props: StandaloneSettingsShellProps) {
       <div className='flex h-screen w-full overflow-hidden bg-[var(--surface-1)] p-2'>
         <aside
           className='mr-2 flex w-[248px] flex-shrink-0 flex-col rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] pt-3'
-          aria-label={`${SHELL_PLANE_LABELS[plane]} settings navigation`}
+          aria-label={`${SETTINGS_PLANE_CHROME[plane].label} settings navigation`}
         >
           {sidebar}
         </aside>