Simplify the Platform shell's links, help and sign-out against what already exists

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx

@@ -15,14 +15,14 @@ import { useMutation } from '@tanstack/react-query'
 import Image from 'next/image'
 import { Controller, useForm } from 'react-hook-form'
 import { z } from 'zod'
+import { HELP_REQUEST_TYPES } from '@/lib/api/contracts/common'
 import {
   ACCEPTED_HELP_IMAGE_TYPES,
   compressHelpImage,
   DEFAULT_HELP_REQUEST_TYPE,
   HELP_REQUEST_TYPE_OPTIONS,
-  HELP_REQUEST_TYPES,
-  MAX_HELP_IMAGE_BYTES,
   submitHelpRequest,
+  validateHelpImage,
 } from '@/lib/help/request'
 
 const logger = createLogger('HelpModal')
@@ -151,12 +151,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
       let hasError = false
 
       for (const file of Array.from(files)) {
-        if (file.size > MAX_HELP_IMAGE_BYTES) {
-          hasError = true
-          continue
-        }
-
-        if (!ACCEPTED_HELP_IMAGE_TYPES.includes(file.type)) {
+        if (validateHelpImage(file)) {
           hasError = true
           continue
         }

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx

@@ -2,7 +2,6 @@
 
 import type { ComponentType } from 'react'
 import { ANONYMOUS_USER_ID } from '@sim/auth/principal'
-import type { DesktopUpdateState } from '@sim/desktop-bridge'
 import {
   Chip,
   chipContentLabelClass,
@@ -32,22 +31,13 @@ import {
   SIDEBAR_RAIL_CHIP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { useUserProfile } from '@/hooks/queries/user-profile'
-import { useDesktopUpdateState } from '@/hooks/use-desktop-update-state'
+import {
+  desktopUpdateActionLabel,
+  hasAvailableDesktopUpdate,
+  useDesktopUpdateState,
+} from '@/hooks/use-desktop-update-state'
 import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
 
-function hasAvailableDesktopUpdate(state: DesktopUpdateState): boolean {
-  return state.status === 'available' || state.status === 'downloading' || state.status === 'ready'
-}
-
-function desktopUpdateActionLabel(state: DesktopUpdateState): string {
-  if (state.status === 'downloading') {
-    return state.percent === undefined
-      ? 'Downloading update…'
-      : `Downloading update ${state.percent}%`
-  }
-  return state.status === 'ready' ? 'Restart to update' : 'Update'
-}
-
 /** Compact primary update circle using the same footprint as the surrounding sidebar icons. */
 function DesktopUpdateIcon({ className }: { className?: string }) {
   return (

apps/sim/hooks/use-desktop-update-state.ts

@@ -4,6 +4,19 @@ import { useEffect, useState } from 'react'
 import type { DesktopUpdateState } from '@sim/desktop-bridge'
 import { getDesktopUpdates } from '@/lib/desktop'
 
+export function hasAvailableDesktopUpdate(state: DesktopUpdateState): boolean {
+  return state.status === 'available' || state.status === 'downloading' || state.status === 'ready'
+}
+
+export function desktopUpdateActionLabel(state: DesktopUpdateState): string {
+  if (state.status === 'downloading') {
+    return state.percent === undefined
+      ? 'Downloading update…'
+      : `Downloading update ${state.percent}%`
+  }
+  return state.status === 'ready' ? 'Restart to update' : 'Update'
+}
+
 const INITIAL_UPDATE_STATE: DesktopUpdateState = { status: 'idle' }
 
 export function useDesktopUpdateState(): DesktopUpdateState {

apps/sim/lib/api/contracts/common.ts

@@ -4,14 +4,16 @@ import { defineRouteContract } from '@/lib/api/contracts/types'
 
 const NO_EMAIL_HEADER_CONTROL_CHARS_REGEX = /^[^\r\n\u0000-\u001F\u007F]+$/
 
+export const HELP_REQUEST_TYPES = ['bug', 'feedback', 'feature_request', 'other'] as const
+
 export const helpFormBodySchema = z.object({
   subject: z
     .string()
     .trim()
     .min(1, 'Subject is required')
     .regex(NO_EMAIL_HEADER_CONTROL_CHARS_REGEX, 'Invalid characters'),
   message: z.string().min(1, 'Message is required'),
-  type: z.enum(['bug', 'feedback', 'feature_request', 'other']),
+  type: z.enum(HELP_REQUEST_TYPES),
 })
 export type HelpFormBody = z.input<typeof helpFormBodySchema>
 

apps/sim/lib/help/request.ts

@@ -1,9 +1,9 @@
 import { createLogger } from '@sim/logger'
-import imageCompression from 'browser-image-compression'
+import type { HelpFormBody } from '@/lib/api/contracts/common'
 
 const logger = createLogger('HelpRequest')
 
-export const MAX_HELP_IMAGE_BYTES = 20 * 1024 * 1024
+const MAX_HELP_IMAGE_BYTES = 20 * 1024 * 1024
 const TARGET_SIZE_MB = 2
 export const ACCEPTED_HELP_IMAGE_TYPES = [
   'image/jpeg',
@@ -13,12 +13,7 @@ export const ACCEPTED_HELP_IMAGE_TYPES = [
   'image/gif',
 ]
 
-export const HELP_REQUEST_TYPES = ['bug', 'feedback', 'feature_request', 'other'] as const
-
-export const HELP_REQUEST_TYPE_OPTIONS: {
-  label: string
-  value: (typeof HELP_REQUEST_TYPES)[number]
-}[] = [
+export const HELP_REQUEST_TYPE_OPTIONS: { label: string; value: HelpFormBody['type'] }[] = [
   { label: 'Bug report', value: 'bug' },
   { label: 'Feedback', value: 'feedback' },
   { label: 'Feature request', value: 'feature_request' },
@@ -27,12 +22,21 @@ export const HELP_REQUEST_TYPE_OPTIONS: {
 
 export const DEFAULT_HELP_REQUEST_TYPE = 'bug'
 
+/** Why `file` cannot be attached to a help request, or null when it can. */
+export function validateHelpImage(file: Pick<File, 'size' | 'type'>): string | null {
+  if (file.size > MAX_HELP_IMAGE_BYTES) return 'Images must be 20MB or smaller.'
+  if (!ACCEPTED_HELP_IMAGE_TYPES.includes(file.type))
+    return 'Attach a JPEG, PNG, WebP or GIF image.'
+  return null
+}
+
 export async function compressHelpImage(file: File): Promise<File> {
   if (file.size < TARGET_SIZE_MB * 1024 * 1024 || file.type === 'image/gif') {
     return file
   }
 
   try {
+    const { default: imageCompression } = await import('browser-image-compression')
     const compressedFile = await imageCompression(file, {
       maxSizeMB: TARGET_SIZE_MB,
       maxWidthOrHeight: 1920,
@@ -53,7 +57,7 @@ export async function compressHelpImage(file: File): Promise<File> {
 }
 
 interface SubmitHelpRequestInput {
-  data: { subject: string; message: string; type: string }
+  data: HelpFormBody
   images: readonly File[]
   workflowId?: string
   workspaceId?: string

apps/sim/platform/app/(shell)/_components/model.ts

@@ -105,12 +105,14 @@ interface ChatRemoval {
 /** The optional members are the ones only a real backend can honour. */
 export interface ShellChatActions {
   removeLabel: 'Archive' | 'Delete'
+  /** What happens to removed chats, when there is more to say than the label. */
+  removeDetail?: (count: number) => string
   rename: (id: string, title: string) => Promise<void>
   remove: (ids: readonly string[]) => Promise<ChatRemoval>
   setPinned?: (id: string, pinned: boolean) => void
   setRead?: (id: string, read: boolean) => void
   /** Reads a chat ahead of an intended open. Returns how to call it off. */
-  prefetch?: (id: string) => () => void
+  prefetch?: (chat: ShellChat) => () => void
   retry?: () => void
 }
 
@@ -155,8 +157,6 @@ export interface ShellHelp {
   changelogUrl?: string
   downloadUrl?: string
   desktopUpdate?: { label: string; disabled: boolean; run: () => void }
-  onOpenDocumentation?: () => void
-  onOpenSlack?: () => void
 }
 
 /**

apps/sim/platform/app/(shell)/_components/organization-menu/organization-menu.tsx

@@ -15,7 +15,6 @@ import {
 } from '@/platform/design-system/components'
 import { IdentityButton } from '@/platform/design-system/components/identity-button/identity-button'
 import { AnchoredPopover } from '@/platform/design-system/components/menu/anchored-popover'
-import { toast } from '@/platform/lib/data/toast'
 
 /** Lazy because its form reads real data, which a fixture session never loads. */
 const InviteModal = dynamic(
@@ -60,7 +59,6 @@ export function OrganizationMenu({
   if (savedName && savedName.replaces !== organization?.name) setSavedName(null)
   const name = savedName?.name ?? organization?.name ?? 'Organization'
   const logo = organization?.logo ?? undefined
-  const canEdit = Boolean(actions?.canEditIdentity)
 
   function stopRenaming() {
     setDraftName(null)
@@ -96,13 +94,8 @@ export function OrganizationMenu({
   async function uploadLogo(file: File | undefined) {
     if (!file || uploading || !actions) return
     setUploading(true)
-    try {
-      await actions.uploadLogo(file)
-    } catch (error) {
-      toast.error(getErrorMessage(error, 'Failed to upload logo'))
-    } finally {
-      setUploading(false)
-    }
+    await actions.uploadLogo(file)
+    setUploading(false)
   }
 
   return (
@@ -190,7 +183,7 @@ export function OrganizationMenu({
               </Button>
             )}
           </div>
-          {canEdit && actions && (
+          {actions?.canEditIdentity && (
             <>
               <input
                 ref={fileInput}

apps/sim/platform/app/(shell)/_components/platform-shell/platform-shell.tsx

@@ -14,14 +14,13 @@ import { WindowHistoryButtons } from '@/platform/app/(shell)/_components/platfor
 import { useChatChanges } from '@/platform/app/(shell)/_components/session/chat-changes'
 import { useSessionShellActions } from '@/platform/app/(shell)/_components/session/shell-actions'
 import { SETTINGS_DESTINATIONS } from '@/platform/app/(shell)/_components/settings-navigation/destinations'
-import { LEGACY_DESTINATION } from '@/platform/app/(shell)/_components/sidebar/row-links'
 import { Sidebar } from '@/platform/app/(shell)/_components/sidebar/sidebar'
 import { useSidebarLayout } from '@/platform/app/(shell)/_components/sidebar/sidebar-layout'
 import { SidebarToolbar } from '@/platform/app/(shell)/_components/sidebar/sidebar-toolbar'
 import { IconButton, OverflowText, ScrollArea, Tooltip } from '@/platform/design-system/components'
 import { useCompactViewport } from '@/platform/design-system/components/layout/use-compact-viewport'
 import { useScrollEdges } from '@/platform/design-system/components/scroll-area/use-scroll-edges'
-import { platformHref } from '@/platform/design-system/navigation'
+import { isAbsoluteHref, platformHref } from '@/platform/design-system/navigation'
 import { useLiveShellActions } from '@/platform/lib/data/shell-context'
 
 function isEditableTarget(target: EventTarget | null): boolean {
@@ -32,17 +31,6 @@ function isEditableTarget(target: EventTarget | null): boolean {
   )
 }
 
-/** A focused editor can claim a shortcut through `data-owned-shortcuts`, as on the legacy surface. */
-function ownsShortcut(target: EventTarget | null, shortcut: string): boolean {
-  const owner = target instanceof Element ? target.closest('[data-owned-shortcuts]') : null
-  return Boolean(
-    owner
-      ?.getAttribute('data-owned-shortcuts')
-      ?.split(',')
-      .some((entry) => entry.trim() === shortcut)
-  )
-}
-
 interface PlatformShellProps {
   data: ShellData | null
   /** A row of its own below any native titlebar, where the window controls stay reachable. */
@@ -127,12 +115,7 @@ export function PlatformShell({ data, banner, children }: PlatformShellProps) {
         event.preventDefault()
         setCommand((open) => !open && canOpen)
       }
-      if (
-        key === 'b' &&
-        canOpen &&
-        !isEditableTarget(event.target) &&
-        !ownsShortcut(event.target, 'Mod+B')
-      ) {
+      if (key === 'b' && canOpen && !isEditableTarget(event.target)) {
         event.preventDefault()
         toggleOnShortcut()
       }
@@ -150,7 +133,7 @@ export function PlatformShell({ data, banner, children }: PlatformShellProps) {
     setCommand(false)
     setDrawer(false)
     actions.requestLeave(() => {
-      if (LEGACY_DESTINATION.test(path)) window.location.assign(path)
+      if (isAbsoluteHref(path)) window.location.assign(path)
       else router.push(platformHref(path, search))
     })
   }

apps/sim/platform/app/(shell)/_components/sidebar/account-menu.tsx

@@ -11,7 +11,7 @@ interface AccountMenuProps {
   name: string
   image?: string | null
   onSettings: () => void
-  onSignOut?: () => void
+  onSignOut: () => void
 }
 
 export function AccountMenu({ anchor, name, image, onSettings, onSignOut }: AccountMenuProps) {
@@ -42,16 +42,14 @@ export function AccountMenu({ anchor, name, image, onSettings, onSignOut }: Acco
             onSettings()
           }}
         />
-        {onSignOut && (
-          <MenuItem
-            label='Sign out'
-            icon='I132'
-            onSelect={() => {
-              setOpen(false)
-              onSignOut()
-            }}
-          />
-        )}
+        <MenuItem
+          label='Sign out'
+          icon='I132'
+          onSelect={() => {
+            setOpen(false)
+            onSignOut()
+          }}
+        />
       </div>
     </AnchoredPopover>
   )

apps/sim/platform/app/(shell)/_components/sidebar/chats-section.tsx

@@ -7,10 +7,7 @@ import type {
   ShellChat,
   ShellQueryStatus,
 } from '@/platform/app/(shell)/_components/model'
-import {
-  LEGACY_DESTINATION,
-  linkMenuActions,
-} from '@/platform/app/(shell)/_components/sidebar/row-links'
+import { linkMenuActions, readFormText } from '@/platform/app/(shell)/_components/sidebar/row-links'
 import { SectionStatus } from '@/platform/app/(shell)/_components/sidebar/section-status'
 import styles from '@/platform/app/(shell)/_components/sidebar/sidebar-collections.module.css'
 import { useSidebarLayout } from '@/platform/app/(shell)/_components/sidebar/sidebar-layout'
@@ -222,14 +219,15 @@ export function ChatsSection({ chats, status, activeChat, actions, navigate }: C
             const href = item.href ?? `/chat/${item.id}`
             const rows = rowActions(item)
             const isCurrent = activeChat === item.id
+            const selectOnMenuOpen = (open: boolean) => {
+              if (open && !selected.has(item.id)) selectOnly(item.id)
+            }
             return (
               <ContextActionMenu
                 key={item.id}
                 label={`Actions for ${item.title}`}
                 actions={rows}
-                onOpenChange={(open) => {
-                  if (open && !selected.has(item.id)) selectOnly(item.id)
-                }}
+                onOpenChange={selectOnMenuOpen}
               >
                 <div
                   className={styles.row}
@@ -240,8 +238,7 @@ export function ChatsSection({ chats, status, activeChat, actions, navigate }: C
                       selectOnly(item.id)
                   }}
                   onPointerEnter={() => {
-                    if (!isCurrent && !LEGACY_DESTINATION.test(href))
-                      cancelPrefetch.current = actions.prefetch?.(item.id) ?? null
+                    if (!isCurrent) cancelPrefetch.current = actions.prefetch?.(item) ?? null
                   }}
                   onPointerLeave={() => cancelPrefetch.current?.()}
                 >
@@ -256,9 +253,7 @@ export function ChatsSection({ chats, status, activeChat, actions, navigate }: C
                         triggerSize='compact'
                         align='end'
                         actions={rows}
-                        onOpenChange={(open) => {
-                          if (open && !selected.has(item.id)) selectOnly(item.id)
-                        }}
+                        onOpenChange={selectOnMenuOpen}
                       />
                     }
                   >
@@ -278,8 +273,7 @@ export function ChatsSection({ chats, status, activeChat, actions, navigate }: C
           title='Rename chat'
           confirmLabel='Save'
           onConfirm={async (values) => {
-            const title = values.get('title')
-            const next = typeof title === 'string' ? title.trim() : ''
+            const next = readFormText(values, 'title')
             if (!next) throw new Error('Enter a chat name.')
             if (next !== renamingChat.title) await actions.rename(renamingChat.id, next)
           }}
@@ -307,8 +301,7 @@ export function ChatsSection({ chats, status, activeChat, actions, navigate }: C
             {removing.length === 1
               ? `${actions.removeLabel} “${removing[0].title}”?`
               : `${actions.removeLabel} ${removing.length} chats?`}
-            {actions.removeLabel === 'Delete' &&
-              ` You can restore ${removing.length === 1 ? 'it' : 'them'} from Recently deleted in Settings.`}
+            {actions.removeDetail && ` ${actions.removeDetail(removing.length)}`}
           </p>
         </Modal>
       )}