feat(files): inline rich markdown editor

apps/sim/app/_styles/globals.css

@@ -66,38 +66,11 @@
  opacity: 0;
 }
 
-html[data-sidebar-collapsed] .sidebar-container span,
-html[data-sidebar-collapsed] .sidebar-container .text-small {
- opacity: 0;
-}
-
 .sidebar-container .sidebar-collapse-hide {
  transition: opacity 60ms ease;
 }
 
-.sidebar-container .sidebar-collapse-show {
- opacity: 0;
- pointer-events: none;
- transition: opacity 120ms ease-out;
-}
-
-.sidebar-container[data-collapsed] .sidebar-collapse-hide,
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-hide {
- opacity: 0;
-}
-
-.sidebar-container[data-collapsed] .sidebar-collapse-show,
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-show {
- opacity: 1;
- pointer-events: auto;
-}
-
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-remove {
- display: none;
-}
-
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
- width: 0;
+.sidebar-container[data-collapsed] .sidebar-collapse-hide {
  opacity: 0;
 }
 

apps/sim/app/layout.tsx

@@ -78,26 +78,36 @@ export default function RootLayout({ children }: { children: React.ReactNode })
  // window yields a width >= MIN instead of a sub-minimum sliver.
  var defaultSidebarWidth = 248;
  try {
- var stored = localStorage.getItem('sidebar-state');
- if (stored) {
- var parsed = JSON.parse(stored);
- var state = parsed && parsed.state;
- var isCollapsed = state && state.isCollapsed;
-
- if (isCollapsed) {
- document.documentElement.style.setProperty('--sidebar-width', '51px');
- document.documentElement.setAttribute('data-sidebar-collapsed', '');
- } else {
- var width = state && state.sidebarWidth;
- var maxSidebarWidth = Math.max(248, window.innerWidth * 0.3);
- var finalWidth =
- typeof width === 'number' && isFinite(width)
- ? Math.min(Math.max(width, 248), maxSidebarWidth)
- : defaultSidebarWidth;
- document.documentElement.style.setProperty('--sidebar-width', finalWidth + 'px');
- }
+ // Collapse comes from the cookie (independent of localStorage
+ // parsing); the persisted width is read defensively below. Match the
+ // value strictly so 'sidebar_collapsed=10' isn't read as collapsed.
+ var cookieMatch = document.cookie.match(/(?:^|;\s*)sidebar_collapsed=([^;]*)/);
+ var hasCookie = cookieMatch !== null;
+ var collapsed = cookieMatch !== null && cookieMatch[1] === '1';
+
+ var state = null;
+ try {
+ var stored = localStorage.getItem('sidebar-state');
+ state = stored ? JSON.parse(stored).state : null;
+ } catch (e) {}
+
+ // One-time migration: seed the cookie from the legacy localStorage
+ // flag for users who collapsed before the cookie existed.
+ if (!hasCookie && state && typeof state.isCollapsed === 'boolean') {
+ collapsed = state.isCollapsed;
+ document.cookie = 'sidebar_collapsed=' + (collapsed ? '1' : '0') + '; path=/; max-age=31536000; samesite=lax';
+ }
+
+ if (collapsed) {
+ document.documentElement.style.setProperty('--sidebar-width', '51px');
  } else {
- document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth + 'px');
+ var width = state && state.sidebarWidth;
+ var maxSidebarWidth = Math.max(248, window.innerWidth * 0.3);
+ var finalWidth =
+ typeof width === 'number' && isFinite(width)
+ ? Math.min(Math.max(width, 248), maxSidebarWidth)
+ : defaultSidebarWidth;
+ document.documentElement.style.setProperty('--sidebar-width', finalWidth + 'px');
  }
  } catch (e) {
  document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth + 'px');

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx

@@ -371,6 +371,14 @@ interface BreadcrumbLocationPopoverProps {
  veilBoundaryRef: React.RefObject<HTMLDivElement | null>
 }
 
+/**
+ * Grace period before a hover-out dismisses the path popover. Covers the gap
+ * the pointer crosses between the trigger and the popover content (and brief
+ * jitter at their edges); re-entering either within this window cancels the
+ * close. Standard hover-intent close delay — not tied to any navigation timing.
+ */
+const POPOVER_CLOSE_DELAY_MS = 120
+
 function BreadcrumbLocationPopover({
  icon: Icon,
  breadcrumbs,
@@ -381,22 +389,44 @@ function BreadcrumbLocationPopover({
  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const rootBreadcrumb = breadcrumbs[0]
 
- const openPopover = () => {
+ const cancelScheduledClose = () => {
  if (closeTimeoutRef.current) {
  clearTimeout(closeTimeoutRef.current)
  closeTimeoutRef.current = null
  }
+ }
+
+ /**
+ * Hover-intent open. Driven only by pointer-/keyboard-enter — never by
+ * pointer movement. This is what makes the popover dismiss cleanly on a
+ * click-to-navigate: a stationary click fires no enter event, so once
+ * {@link navigateAndClose} sets `open` false nothing re-opens it before the
+ * route swaps. (A move-driven open would re-fire under the resting cursor and
+ * flash the popover/veil back in mid-navigation.)
+ */
+ const openPopover = () => {
+ cancelScheduledClose()
  setOpen(true)
  }
 
  const scheduleClose = () => {
- if (closeTimeoutRef.current) {
- clearTimeout(closeTimeoutRef.current)
- }
+ cancelScheduledClose()
  closeTimeoutRef.current = setTimeout(() => {
  setOpen(false)
  closeTimeoutRef.current = null
- }, 120)
+ }, POPOVER_CLOSE_DELAY_MS)
+ }
+
+ /**
+ * Closes the popover up front, then runs the crumb's handler. Closing first
+ * lets the veil fade and the popover play its exit animation instead of
+ * snapping away when navigation unmounts the header.
+ */
+ const navigateAndClose = (onClick?: () => void) => {
+ if (!onClick) return
+ cancelScheduledClose()
+ setOpen(false)
+ onClick()
  }
 
  useEffect(() => {
@@ -413,15 +443,11 @@ function BreadcrumbLocationPopover({
  <button
  type='button'
  aria-label={rootBreadcrumb?.label ?? 'Path'}
- onClick={rootBreadcrumb?.onClick}
+ onClick={() => navigateAndClose(rootBreadcrumb?.onClick)}
  onFocus={openPopover}
  onBlur={scheduleClose}
  onMouseEnter={openPopover}
  onMouseLeave={scheduleClose}
- onMouseMove={openPopover}
- onPointerEnter={openPopover}
- onPointerLeave={scheduleClose}
- onPointerMove={openPopover}
  className={cn(
  chipVariants({ flush: true }),
  'max-w-none gap-1.5 px-2 transition-colors',
@@ -457,10 +483,6 @@ function BreadcrumbLocationPopover({
  )}
  onMouseEnter={openPopover}
  onMouseLeave={scheduleClose}
- onMouseMove={openPopover}
- onPointerEnter={openPopover}
- onPointerLeave={scheduleClose}
- onPointerMove={openPopover}
  >
  <PopoverSection className='px-1.5 py-0.5 text-[var(--text-muted)] text-xs'>
  <span className='inline-flex items-center gap-1'>
@@ -474,7 +496,7 @@ function BreadcrumbLocationPopover({
  key={`${crumb.label}-${index}`}
  icon={crumb.icon || (index === 0 ? Icon : undefined)}
  label={crumb.label}
- onClick={crumb.onClick}
+ onClick={crumb.onClick ? () => navigateAndClose(crumb.onClick) : undefined}
  active={index === breadcrumbs.length - 1}
  />
  ))}

apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx

@@ -15,6 +15,8 @@ const SLIDE_TRANSITION =
 
 interface WorkspaceChromeProps {
  children: React.ReactNode
+ /** Cookie-derived collapse state from the server layout; seeds the sidebar's first render. */
+ initialSidebarCollapsed?: boolean
 }
 
 function isFullscreenPath(pathname: string | null): boolean {
@@ -41,7 +43,7 @@ function isFullscreenPath(pathname: string | null): boolean {
  * On a direct load of a fullscreen route the wrapper mounts already collapsed,
  * so no slide plays (CSS transitions don't run on mount).
  */
-export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
+export function WorkspaceChrome({ children, initialSidebarCollapsed }: WorkspaceChromeProps) {
  const pathname = usePathname()
  const isFullscreen = isFullscreenPath(pathname)
 
@@ -103,7 +105,7 @@ export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
  isFullscreen && '-translate-x-full'
  )}
  >
- <Sidebar />
+ <Sidebar initialCollapsed={initialSidebarCollapsed} />
  </div>
  </div>
  <div

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx

@@ -1,20 +1,14 @@
 'use client'
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
 import { Music } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
 import { useWorkspaceFileBinary, useWorkspaceFileContent } from '@/hooks/queries/workspace-files'
-import { resolveFileCategory } from './file-category'
-import type { StreamingMode } from './text-editor-state'
-import { useDocPreviewBinary } from './use-doc-preview-binary'
-
-export type { StreamingMode } from './text-editor-state'
-
 import { CsvTablePreview } from './csv-table-preview'
 import { DocxPreview } from './docx-preview'
+import { resolveFileCategory } from './file-category'
 import { ImagePreview } from './image-preview'
 import type { PdfDocumentSource } from './pdf-viewer'
 import { PptxPreview } from './pptx-preview'
@@ -27,13 +21,17 @@ import {
  resolvePreviewError,
 } from './preview-shared'
 import { TextEditor } from './text-editor'
+import { useDocPreviewBinary } from './use-doc-preview-binary'
 import { XlsxPreview } from './xlsx-preview'
 
 const PdfViewerCore = dynamic(() => import('./pdf-viewer').then((m) => m.PdfViewerCore), {
  ssr: false,
 })
 
-const logger = createLogger('FileViewer')
+const RichMarkdownEditor = dynamic(
+ () => import('./rich-markdown-editor/rich-markdown-editor').then((m) => m.RichMarkdownEditor),
+ { ssr: false, loading: () => <PreviewLoadingFrame className='flex flex-1 flex-col' /> }
+)
 
 /**
  * CSVs at or below this size load fully into the editor (editable, with an inline preview).
@@ -50,6 +48,15 @@ export function isPreviewable(file: { type: string; name: string }): boolean {
  return resolvePreviewType(file.type, file.name) !== null
 }
 
+/**
+ * Markdown files render in the inline rich editor ({@link RichMarkdownEditor}) rather than
+ * the raw Monaco editor. Toolbars use this to hide the raw/split/preview mode controls,
+ * which don't apply to the single-surface editor.
+ */
+export function isMarkdownFile(file: { type: string; name: string }): boolean {
+ return resolvePreviewType(file.type, file.name) === 'markdown'
+}
+
 /**
  * A CSV larger than {@link CSV_INLINE_EDIT_MAX_BYTES} is shown as a streamed, read-only preview —
  * the editor would OOM loading the whole file. The viewer renders {@link CsvTablePreview} for it,
@@ -84,7 +91,6 @@ interface FileViewerProps {
  onSaveStatusChange?: (status: 'idle' | 'saving' | 'saved' | 'error') => void
  saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
  streamingContent?: string
- streamingMode?: StreamingMode
  disableStreamingAutoScroll?: boolean
  previewContextKey?: string
 }
@@ -100,7 +106,6 @@ export function FileViewer({
  onSaveStatusChange,
  saveRef,
  streamingContent,
- streamingMode,
  disableStreamingAutoScroll = false,
  previewContextKey,
 }: FileViewerProps) {
@@ -114,6 +119,14 @@ export function FileViewer({
  if (isCsvStreamOnly(file)) {
  return <UnsupportedPreview file={file} />
  }
+ // Markdown renders through the inline rich editor (non-editable) so the public share
+ // surface matches the in-app reading experience; canEdit={false} disables autosave,
+ // the bubble menu, and every other editing affordance.
+ if (isMarkdownFile(file)) {
+ return (
+ <RichMarkdownEditor key={file.id} file={file} workspaceId={workspaceId} canEdit={false} />
+ )
+ }
  return <ReadOnlyTextPreview file={file} workspaceId={workspaceId} />
  }
  // A large CSV can't be loaded whole into the editor (the browser OOMs on the full text).
@@ -122,6 +135,24 @@ export function FileViewer({
  return <CsvTablePreview key={file.id} file={file} workspaceId={workspaceId} />
  }
 
+ if (isMarkdownFile(file)) {
+ return (
+ <RichMarkdownEditor
+ key={file.id}
+ file={file}
+ workspaceId={workspaceId}
+ canEdit={canEdit}
+ autoFocus={autoFocus}
+ onDirtyChange={onDirtyChange}
+ onSaveStatusChange={onSaveStatusChange}
+ saveRef={saveRef}
+ streamingContent={streamingContent}
+ disableStreamingAutoScroll={disableStreamingAutoScroll}
+ previewContextKey={previewContextKey}
+ />
+ )
+ }
+
  return (
  <TextEditor
  file={file}
@@ -133,7 +164,6 @@ export function FileViewer({
  onSaveStatusChange={onSaveStatusChange}
  saveRef={saveRef}
  streamingContent={streamingContent}
- streamingMode={streamingMode}
  disableStreamingAutoScroll={disableStreamingAutoScroll}
  previewContextKey={previewContextKey}
  />

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/index.ts

@@ -1,4 +1,10 @@
 export { resolveFileCategory } from './file-category'
 export type { PreviewMode } from './file-viewer'
-export { FileViewer, isCsvStreamOnly, isPreviewable, isTextEditable } from './file-viewer'
+export {
+ FileViewer,
+ isCsvStreamOnly,
+ isMarkdownFile,
+ isPreviewable,
+ isTextEditable,
+} from './file-viewer'
 export { PreviewPanel, RICH_PREVIEWABLE_EXTENSIONS, resolvePreviewType } from './preview-panel'