improvement(settings): draw the sprout as an emcn line icon, move to Platform

The emoji rendered in the platform's own colors, so it was the one glyph in the
nav that ignored --text-icon. Replaced with a hand-drawn emcn Sprout (24 grid,
1.55 stroke, currentColor) matching the house style, renamed the tab to
Self hosting, and regrouped it under Platform — self-hosting is deployment-wide,
not per-workspace. Still self-hosted-only.

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/settings/navigation.test.ts

@@ -51,7 +51,7 @@ describe('unified settings navigation', () => {
       { id: 'sandboxes', label: 'Sandboxes', section: 'workspace' },
       { id: 'inbox', label: 'Sim Mailer', section: 'workspace' },
       { id: 'recently-deleted', label: 'Recently deleted', section: 'workspace' },
-      { id: 'self-host', label: 'Self-host', section: 'workspace' },
+      { id: 'self-host', label: 'Self hosting', section: 'platform' },
       { id: 'sso', label: 'Single sign-on', section: 'organization' },
       { id: 'sessions', label: 'Session policies', section: 'organization' },
       { id: 'data-retention', label: 'Data retention', section: 'organization' },
@@ -88,7 +88,6 @@ describe('unified settings navigation', () => {
       'apikeys',
       'sandboxes',
       'recently-deleted',
-      'self-host',
     ])
     expect(idsForSection('organization')).toEqual([
       'organization',
@@ -102,7 +101,7 @@ describe('unified settings navigation', () => {
       'data-retention',
       'data-drains',
     ])
-    expect(idsForSection('platform')).toEqual(['admin', 'mothership'])
+    expect(idsForSection('platform')).toEqual(['admin', 'mothership', 'self-host'])
   })
 
   it('derives every unified item from exactly one registry entry', () => {

apps/sim/components/icons.tsx

@@ -8944,24 +8944,3 @@ export function ZohoDeskIcon(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
-
-/**
- * The Self-host settings mark — a sprout, for a deployment you grow yourself.
- *
- * Text rather than an SVG because the icon set ships no botanical glyph. It is
- * consequently the one nav mark that keeps its own colors instead of inheriting
- * `--text-icon`, and it renders in the host platform's emoji font. The explicit
- * font size pins the glyph to the 14px the line icons around it optically read
- * as, independent of whatever the consumer's `size-*` box sets.
- */
-export function SproutIcon({ className }: { className?: string }) {
-  return (
-    <span
-      className={`inline-flex items-center justify-center text-sm leading-none ${className ?? ''}`}
-      role='img'
-      aria-label='Self-host'
-    >
-      🌱
-    </span>
-  )
-}

apps/sim/components/settings/navigation.test.ts

@@ -180,13 +180,17 @@ describe('settings navigation boundaries', () => {
   })
 
   /**
-   * The sprout is a text glyph, not an SVG line icon — a swap back to an icon
-   * component would silently drop the mark this section is recognized by.
+   * The mark must be a line icon that inherits `--text-icon` like every other
+   * nav glyph — an emoji would render in the platform's own colors and be the
+   * one colored item in a monochrome icon column.
    */
-  it('marks the Self-host section with the sprout glyph', () => {
+  it('marks the Self hosting section with a currentColor line icon', () => {
     const selfHost = buildUnifiedSettingsNavigation().find(({ id }) => id === 'self-host')
+    const markup = renderToStaticMarkup(createElement(selfHost!.icon, {}))
 
-    expect(renderToStaticMarkup(createElement(selfHost!.icon, {}))).toContain('\u{1F331}')
+    expect(selfHost?.label).toBe('Self hosting')
+    expect(markup).toContain('<svg')
+    expect(markup).toContain('stroke="currentColor"')
   })
 
   it('keeps the Sandboxes section on the pre-Daytona E2B flag alone', () => {

apps/sim/components/settings/navigation.ts

@@ -16,6 +16,7 @@ import {
   Settings,
   ShieldCheck,
   Shuffle,
+  Sprout,
   TerminalWindow,
   TrashOutline,
   Upload,
@@ -24,7 +25,7 @@ import {
   Wrench,
 } from '@sim/emcn/icons'
 import { type PermissionType, permissionSatisfies } from '@sim/platform-authz/workspace'
-import { CodeIcon, McpIcon, SproutIcon } from '@/components/icons'
+import { CodeIcon, McpIcon } from '@/components/icons'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import {
   isAccessControlEnabled,
@@ -689,13 +690,13 @@ export const SETTINGS_SECTION_REGISTRY: readonly SettingsSectionRegistryEntry[]
     },
   },
   {
-    label: 'Self-host',
-    icon: SproutIcon,
+    label: 'Self hosting',
+    icon: Sprout,
     unified: {
       id: 'self-host',
       description: 'Manage this deployment from the Sim managed service.',
-      group: 'workspace',
-      order: 10,
+      group: 'platform',
+      order: 2,
       requiresSelfHosted: true,
     },
     planes: {

packages/emcn/src/icons/index.ts

@@ -89,6 +89,7 @@ export { Shuffle } from './shuffle'
 export { Sim } from './sim'
 export { Slash } from './slash'
 export { Split } from './split'
+export { Sprout } from './sprout'
 export { Square } from './square'
 export { SquareArrowUpRight } from './square-arrow-up-right'
 export { Table } from './table'

packages/emcn/src/icons/sprout.tsx

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Sprout icon component - a seedling with two leaves
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Sprout(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <path d='M12 20.5V11' />
+      <path d='M12 14.75Q4.94 15.12 3.5 8.2Q10.56 7.83 12 14.75Z' />
+      <path d='M12 11.25Q19.06 11.62 20.5 4.7Q13.44 4.33 12 11.25Z' />
+    </svg>
+  )
+}