wip: rewind mode

Author: al3xnag

packages/jsrepl/src/app/repl/components/activity-bar.tsx

@@ -1,16 +1,9 @@
 import { useCallback, useContext } from 'react'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
-import { ResumeIcon } from '@radix-ui/react-icons'
-import {
-  LucideChevronLeft,
-  LucideChevronRight,
-  LucideFiles,
-  LucidePause,
-  LucidePlay,
-} from 'lucide-react'
+import { ReplPayload } from '@jsrepl/shared-types'
+import { LucideFiles, LucidePlay, LucideRewind, LucideRotateCw } from 'lucide-react'
 import { LucideEye, LucideMoon, LucidePalette, LucideShare2, LucideSun } from 'lucide-react'
-import IconPause from '~icons/mdi/pause.jsx'
 import IconGithub from '~icons/simple-icons/github.jsx'
 import Logo from '@/components/logo'
 import ShareRepl from '@/components/share-repl'
@@ -25,72 +18,35 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { ReplHistoryModeContext } from '@/context/repl-history-mode-context'
 import { ReplPayloadsContext } from '@/context/repl-payloads-context'
-import { ReplStateContext } from '@/context/repl-state-context'
+import { ReplRewindModeContext } from '@/context/repl-rewind-mode-context'
 import { UserStateContext } from '@/context/user-state-context'
+import { useReplPreviewShown } from '@/hooks/useReplPreviewShown'
 import { Themes } from '@/lib/themes'
 import { cn } from '@/lib/utils'
 
 export default function ActivityBar() {
   const { resolvedTheme: themeId, setTheme } = useTheme()
-  const { replState, setReplState } = useContext(ReplStateContext)!
   const { userState, setUserState } = useContext(UserStateContext)!
-  const { historyMode, setHistoryMode } = useContext(ReplHistoryModeContext)!
+  const { rewindMode, setRewindMode } = useContext(ReplRewindModeContext)!
   const { payloads } = useContext(ReplPayloadsContext)!
-
-  const startRepl = useCallback(() => {
-    window.dispatchEvent(new Event('jsrepl-start-repl'))
-  }, [])
-
-  const toggleHistoryMode = useCallback(() => {
-    const lastPayload = payloads[payloads.length - 1]
-    if (!lastPayload) {
-      return
-    }
-
-    setHistoryMode((prev) => ({ ...prev, currentPayloadId: lastPayload.id }))
-  }, [payloads, setHistoryMode])
-
-  const historyModeGoPrev = useCallback(() => {
-    if (!historyMode) {
-      return
-    }
-
-    const currentIndex = payloads.findIndex(
-      (payload) => payload.id === historyMode.currentPayloadId
-    )
-    if (currentIndex === -1) {
-      return
-    }
-
-    const prevPayload = payloads[currentIndex - 1]
-    if (!prevPayload) {
-      return
-    }
-
-    setHistoryMode((prev) => ({ ...prev, currentPayloadId: prevPayload.id }))
-  }, [payloads, setHistoryMode, historyMode])
-
-  const historyModeGoNext = useCallback(() => {
-    if (!historyMode) {
-      return
-    }
-
-    const currentIndex = payloads.findIndex(
-      (payload) => payload.id === historyMode.currentPayloadId
-    )
-    if (currentIndex === -1) {
-      return
-    }
-
-    const nextPayload = payloads[currentIndex + 1]
-    if (!nextPayload) {
-      return
-    }
-
-    setHistoryMode((prev) => ({ ...prev, currentPayloadId: nextPayload.id }))
-  }, [payloads, setHistoryMode, historyMode])
+  const { previewEnabled, previewShown, setPreviewShown } = useReplPreviewShown()
+
+  const restartRepl = useCallback(() => {
+    setRewindMode((prev) => ({ ...prev, active: false, currentPayloadId: null }))
+    window.dispatchEvent(new Event('jsrepl-restart-repl'))
+  }, [setRewindMode])
+
+  const toggleRewindMode = useCallback(() => {
+    setRewindMode((prev) => {
+      if (prev.active) {
+        return { ...prev, active: false, currentPayloadId: null }
+      } else {
+        const lastPayload: ReplPayload | undefined = payloads[payloads.length - 1]
+        return { ...prev, active: true, currentPayloadId: lastPayload ? lastPayload.id : null }
+      }
+    })
+  }, [payloads, setRewindMode])
 
   return (
     <div className="bg-activityBar flex flex-col gap-2 px-1 pb-2 pt-1 [grid-area:activity-bar]">
@@ -135,9 +91,10 @@ export default function ActivityBar() {
             variant="ghost"
             className={cn(
               'text-activityBar-foreground',
-              replState.showPreview && 'bg-accent border-activityBar-foreground/30 border'
+              previewShown && 'bg-accent border-activityBar-foreground/30 border'
             )}
-            onClick={() => setReplState((prev) => ({ ...prev, showPreview: !prev.showPreview }))}
+            disabled={!previewEnabled}
+            onClick={() => setPreviewShown((prev) => !prev)}
           >
             <LucideEye size={20} />
           </Button>
@@ -155,21 +112,22 @@ export default function ActivityBar() {
             size="icon"
             variant="ghost"
             className="text-activityBar-foreground"
-            onClick={startRepl}
+            onClick={restartRepl}
           >
             <div className="relative">
-              <LucidePlay size={20} />
-              {!userState.autostartOnCodeChange && (
-                <IconPause width={10} height={10} className="absolute -bottom-1 -right-0.5" />
+              {userState.autostartOnCodeChange ? (
+                <LucideRotateCw size={18} />
+              ) : (
+                <LucidePlay size={19} />
               )}
             </div>
           </Button>
         </TooltipTrigger>
         <TooltipContent side="right" sideOffset={8} align="start">
-          Start / Restart REPL
+          {userState.autostartOnCodeChange ? 'Restart REPL' : 'Start REPL'}
           <div className="bg-secondary text-secondary-foreground border-primary -mx-2 -mb-1 mt-1 rounded-b border px-2 py-2">
             <label className="flex items-center gap-1">
-              <span>Autostart on code change</span>
+              <span>Restart on code change</span>
               <input
                 type="checkbox"
                 defaultChecked={userState.autostartOnCodeChange}
@@ -182,32 +140,24 @@ export default function ActivityBar() {
         </TooltipContent>
       </Tooltip>
 
-      <Button
-        size="icon"
-        variant="ghost"
-        className="text-activityBar-foreground"
-        onClick={toggleHistoryMode}
-      >
-        {historyMode ? <ResumeIcon width={18} height={18} /> : <LucidePause size={18} />}
-      </Button>
-
-      <Button
-        size="icon"
-        variant="ghost"
-        className="text-activityBar-foreground"
-        onClick={historyModeGoPrev}
-      >
-        <LucideChevronLeft size={18} />
-      </Button>
-
-      <Button
-        size="icon"
-        variant="ghost"
-        className="text-activityBar-foreground"
-        onClick={historyModeGoNext}
-      >
-        <LucideChevronRight size={18} />
-      </Button>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            size="icon"
+            variant="ghost"
+            className={cn(
+              'text-activityBar-foreground',
+              rewindMode.active && 'bg-accent border-activityBar-foreground/30 border'
+            )}
+            onClick={toggleRewindMode}
+          >
+            <LucideRewind size={18} />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="right" sideOffset={8}>
+          Rewind mode
+        </TooltipContent>
+      </Tooltip>
 
       <div className="flex-1" />
 
@@ -259,7 +209,7 @@ export default function ActivityBar() {
 
         <DropdownMenuContent className="w-96" side="left" align="end">
           <DropdownMenuLabel className="text-foreground/80 text-sm font-normal">
-            <ShareRepl setReplState={setReplState} />
+            <ShareRepl />
           </DropdownMenuLabel>
         </DropdownMenuContent>
       </DropdownMenu>

packages/jsrepl/src/app/repl/components/code-editor-container.tsx

@@ -5,6 +5,7 @@ import { cn } from '@/lib/utils'
 import CodeEditor from './code-editor'
 import CodeEditorHeader from './code-editor-header'
 import { ErrorsNotification } from './errors-notification'
+import RewindModePanel from './rewind-mode-panel'
 
 export default function CodeEditorContainer({ className }: { className?: string }) {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
@@ -19,6 +20,7 @@ export default function CodeEditorContainer({ className }: { className?: string
       <MonacoEditorContext.Provider value={contextValue}>
         <div className={cn(className, 'relative flex min-w-24 flex-col [grid-area:editor]')}>
           <CodeEditorHeader />
+          <RewindModePanel />
           <CodeEditor />
           <ErrorsNotification />
         </div>

packages/jsrepl/src/app/repl/components/code-editor-header.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react'
-import { LucideEllipsisVertical, LucideX } from 'lucide-react'
+import { LucideEllipsisVertical, LucideLock, LucideX } from 'lucide-react'
 import IconPrettier from '~icons/simple-icons/prettier'
 import { Button } from '@/components/ui/button'
 import {
@@ -14,6 +14,7 @@ import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { MonacoEditorContext } from '@/context/monaco-editor-context'
 import { ReplInfoContext } from '@/context/repl-info-context'
+import { ReplModelsContext } from '@/context/repl-models-context'
 import { ReplStateContext } from '@/context/repl-state-context'
 import { cn } from '@/lib/utils'
 import { FileIcon } from './file-icon'
@@ -30,8 +31,14 @@ export default function CodeEditorHeader() {
   const { replState, setReplState } = useContext(ReplStateContext)!
   const { replInfo } = useContext(ReplInfoContext)!
   const { editorRef } = useContext(MonacoEditorContext)!
+  const { readOnlyModels } = useContext(ReplModelsContext)!
+
   const headerRef = useRef<HTMLDivElement>(null)
 
+  const isReadOnly = useMemo(() => {
+    return readOnlyModels.has(replState.activeModel)
+  }, [replState.activeModel, readOnlyModels])
+
   useEffect(() => {
     requestAnimationFrame(() => {
       const activeModelElement = headerRef.current?.querySelector('[data-active="true"]')
@@ -141,6 +148,11 @@ export default function CodeEditorHeader() {
                       {modelOption.labelDescription}
                     </span>
                   )}
+                  {readOnlyModels.has(modelOption.value) && (
+                    <span className="opacity-40 group-hover:opacity-80 group-data-[active=true]:opacity-80">
+                      <LucideLock size={14} />
+                    </span>
+                  )}
                 </span>
               </Button>
 
@@ -165,6 +177,7 @@ export default function CodeEditorHeader() {
               variant="ghost"
               size="icon-xs"
               className="text-muted-foreground"
+              disabled={isReadOnly}
               onClick={() => {
                 editorRef.current?.getAction('editor.action.formatDocument')?.run()
               }}

packages/jsrepl/src/app/repl/components/code-editor.module.css

@@ -83,6 +83,7 @@
   --color: rgb(177, 35, 35);
 }
 
-.jsreplDecorHighlighted {
-  outline: 2px solid green;
+.jsreplDecorHighlighted::after {
+  outline: 2px solid theme('colors.primary.DEFAULT');
+  outline-offset: 1px;
 }

packages/jsrepl/src/app/repl/components/code-editor.tsx

@@ -2,17 +2,14 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useTheme } from 'next-themes'
 import * as monaco from 'monaco-editor'
 import { MonacoEditorContext } from '@/context/monaco-editor-context'
-import { ReplHistoryModeContext } from '@/context/repl-history-mode-context'
+import { ReplModelsContext } from '@/context/repl-models-context'
 import { ReplStateContext } from '@/context/repl-state-context'
 import { UserStateContext } from '@/context/user-state-context'
 import useCodeEditorDTS from '@/hooks/useCodeEditorDTS'
 import useCodeEditorRepl from '@/hooks/useCodeEditorRepl'
-import { CodeEditorModel } from '@/lib/code-editor-model'
 import { getFileExtension } from '@/lib/fs-utils'
 import { loadMonacoTheme } from '@/lib/monaco-themes'
 import { PrettierFormattingProvider } from '@/lib/prettier-formatting-provider'
-import * as ReplFS from '@/lib/repl-fs'
-import { readOnlyFiles } from '@/lib/repl-fs-meta'
 import { Themes } from '@/lib/themes'
 import { cn } from '@/lib/utils'
 import styles from './code-editor.module.css'
@@ -25,37 +22,15 @@ if (process.env.NEXT_PUBLIC_NODE_ENV === 'test' && typeof window !== 'undefined'
 export default function CodeEditor() {
   const { replState, saveReplState } = useContext(ReplStateContext)!
   const { userState } = useContext(UserStateContext)!
-  const { historyMode } = useContext(ReplHistoryModeContext)!
   const { editorRef, setEditor } = useContext(MonacoEditorContext)!
+  const { models, readOnlyModels } = useContext(ReplModelsContext)!
 
   const containerRef = useRef<HTMLDivElement>(null)
   const monacoModelRefs = useRef(new Set<monaco.editor.ITextModel>())
 
   const [isThemeLoaded, setIsThemeLoaded] = useState(false)
   const { resolvedTheme: themeId } = useTheme()
-  const theme = useMemo(() => Themes.find((theme) => theme.id === themeId) ?? Themes[0], [themeId])
-
-  const models = useMemo(() => {
-    const map = new Map<string, InstanceType<typeof CodeEditorModel>>()
-    console.log('models')
-
-    replState.fs.walk('/', (path, entry) => {
-      if (entry.kind === ReplFS.Kind.File) {
-        const uri = monaco.Uri.parse('file://' + path)
-        const model = new CodeEditorModel(uri, entry)
-        map.set(uri.path, model)
-      }
-    })
-
-    for (const monacoModel of monaco.editor.getModels()) {
-      if (!map.has(monacoModel.uri.path)) {
-        console.log('monacoModel dispose in models', monacoModel.uri.path)
-        monacoModel.dispose()
-      }
-    }
-
-    return map
-  }, [replState.fs])
+  const theme = useMemo(() => Themes.find((theme) => theme.id === themeId) ?? Themes[0]!, [themeId])
 
   useEffect(() => {
     const _monacoModelRefs = new Set<monaco.editor.ITextModel>()
@@ -111,17 +86,12 @@ export default function CodeEditor() {
   }, [models, saveReplState])
 
   const isReadOnly = useMemo(() => {
-    if (historyMode) {
-      return true
-    }
-
-    const path = replState.activeModel
-    if (path && readOnlyFiles.has(path)) {
-      return true
-    }
+    return readOnlyModels.has(replState.activeModel)
+  }, [replState.activeModel, readOnlyModels])
 
-    return false
-  }, [replState.activeModel, historyMode])
+  const readOnlyMessage = useMemo(() => {
+    return readOnlyModels.get(replState.activeModel)?.message
+  }, [replState.activeModel, readOnlyModels])
 
   const editorInitialOptions = useRef<monaco.editor.IStandaloneEditorConstructionOptions>({
     model: null,
@@ -153,11 +123,21 @@ export default function CodeEditor() {
   }, [models, replState.activeModel, editorRef])
 
   useEffect(() => {
-    editorInitialOptions.current.readOnly = isReadOnly
-    if (isReadOnly !== editorRef.current?.getOption(monaco.editor.EditorOptions.readOnly.id)) {
-      editorRef.current?.updateOptions({ readOnly: isReadOnly })
+    const options = {
+      readOnly: isReadOnly,
+      readOnlyMessage: readOnlyMessage ? { value: readOnlyMessage } : undefined,
+    }
+
+    Object.assign(editorInitialOptions.current, options)
+
+    if (
+      options.readOnly !== editorRef.current?.getOption(monaco.editor.EditorOptions.readOnly.id) ||
+      options.readOnlyMessage !==
+        editorRef.current?.getOption(monaco.editor.EditorOptions.readOnlyMessage.id)
+    ) {
+      editorRef.current?.updateOptions(options)
     }
-  }, [isReadOnly, editorRef])
+  }, [isReadOnly, editorRef, readOnlyMessage])
 
   useEffect(() => {
     editorRef.current?.updateOptions({ fontSize: userState.editorFontSize })