add Save and Fork buttons to Project panel

Author: al3xnag

packages/jsrepl/src/app/repl/[[...slug]]/components/info-panel-section.tsx

@@ -51,7 +51,7 @@ export function InfoPanelSection({ id: sectionId }: { id: string }) {
       </PanelSectionHeader>
 
       <PanelSectionContent className="text-muted-foreground flex select-text flex-col p-4 pr-2 pt-2 text-xs">
-        <h3 className="text-accent-foreground text-[0.8125rem] font-semibold leading-tight">
+        <h3 className="text-accent-foreground text-[0.8125rem] font-semibold leading-4">
           {replState.title || 'Untitled REPL'}
         </h3>
         {replState.description && <p className="mt-2">{replState.description}</p>}

packages/jsrepl/src/app/repl/[[...slug]]/components/project-panel.tsx

@@ -1,17 +1,53 @@
+import { LucideGitFork, LucideLoader, LucideSave } from 'lucide-react'
 import { PanelSections } from '@/components/panel-section'
+import { Button } from '@/components/ui/button'
+import { useReplSave } from '@/hooks/useReplSave'
 import { useUserStoredState } from '@/hooks/useUserStoredState'
 import FilesPanelSection from './files-panel-section'
 import { InfoPanelSection } from './info-panel-section'
 
 export function ProjectPanel() {
   const [userState, setUserState] = useUserStoredState()
+  const [, saveState, { isSaving, isForking, allowSave, forkState, allowFork }] = useReplSave()
 
   return (
     <>
-      <div className="h-repl-header text-muted-foreground bg-secondary flex items-center gap-2 pl-4 pr-1 text-xs font-semibold leading-6">
+      <div className="h-repl-header text-muted-foreground bg-secondary flex items-center gap-2 pl-4 pr-3 text-xs font-semibold leading-6">
         <span className="flex-1">PROJECT</span>
       </div>
 
+      <div className="flex items-center gap-2 pb-3 pl-4 pt-1">
+        <Button
+          size="xs"
+          variant="secondary"
+          className="text-accent-foreground gap-1"
+          disabled={!allowSave}
+          onClick={() => saveState()}
+        >
+          {isSaving ? (
+            <LucideLoader className="animate-spin" size={15} />
+          ) : (
+            <LucideSave size={15} className="opacity-80" strokeWidth={1.5} />
+          )}
+          Save
+        </Button>
+
+        <Button
+          size="xs"
+          variant="secondary"
+          className="text-accent-foreground gap-1"
+          disabled={!allowFork}
+          onClick={() => forkState()}
+        >
+          {isForking ? (
+            <LucideLoader className="animate-spin" size={15} />
+          ) : (
+            <LucideGitFork size={15} className="opacity-80" strokeWidth={1.5} />
+          )}
+          Fork
+        </Button>
+      </div>
+
       <div className="flex-1 overflow-y-auto">
         <PanelSections
           value={userState.projectPanelExpandedSections}

packages/jsrepl/src/components/panel-section.tsx

@@ -24,11 +24,7 @@ const PanelSection = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn('group/panel-section border-b last:border-b-0', className)}
-    {...props}
-  />
+  <AccordionPrimitive.Item ref={ref} className={cn('group/panel-section', className)} {...props} />
 ))
 PanelSection.displayName = 'PanelSection'
 
@@ -38,7 +34,10 @@ const PanelSectionHeader = React.forwardRef<
 >(({ className, children }, ref) => (
   <AccordionPrimitive.Header
     ref={ref}
-    className={cn('bg-secondary sticky -top-px z-[1] flex', className)}
+    className={cn(
+      'bg-secondary sticky top-0 z-[1] flex border-t group-first/panel-section:border-t-0',
+      className
+    )}
   >
     {children}
   </AccordionPrimitive.Header>

packages/jsrepl/src/components/providers/repl-save-provider.tsx

@@ -31,6 +31,7 @@ export type ReplSaveContextType = {
   isDirty: boolean
   isEffectivelyDirty: boolean
   isSaving: boolean
+  isForking: boolean
   allowSave: boolean
   allowFork: boolean
 }
@@ -48,6 +49,7 @@ export default function ReplSaveProvider({ children }: { children: React.ReactNo
   const { flushPendingChanges } = useWritableModels()
   const [savedState, setSavedState] = useReplSavedState()
   const [isSaving, setIsSaving] = useState(false)
+  const [isForking, setIsForking] = useState(false)
 
   const formatOnSave = useMemo(
     () => userStoredState.workbench.formatOnSave,
@@ -67,18 +69,18 @@ export default function ReplSaveProvider({ children }: { children: React.ReactNo
   const isDirty = useMemo<boolean>(() => checkDirty(state, savedState), [state, savedState])
 
   const allowSave = useMemo<boolean>(
-    () => !isSaving && (isNew || isDirty),
-    [isSaving, isNew, isDirty]
+    () => !isSaving && !isForking && (isNew || isEffectivelyDirty),
+    [isSaving, isForking, isNew, isEffectivelyDirty]
   )
 
-  const allowFork = useMemo<boolean>(() => !isSaving && !isNew, [isSaving, isNew])
+  const allowFork = useMemo<boolean>(() => !isForking && !isNew, [isForking, isNew])
 
   useEffect(() => {
     stateRef.current = state
   }, [state])
 
-  const handleSaveError = useCallback(
-    async (error: unknown) => {
+  const handleSaveOrForkError = useCallback(
+    async (type: 'save' | 'fork', error: unknown) => {
       const isAborted = isAbortError(error instanceof ResponseError ? error.cause : error)
       if (isAborted) {
         return
@@ -88,21 +90,26 @@ export default function ReplSaveProvider({ children }: { children: React.ReactNo
 
       if (error instanceof ResponseError) {
         if (error.status === 401) {
-          toast.info('Please sign in to save your changes.', {
-            action: {
-              label: 'Sign in with Github',
-              onClick: () => {
-                signInWithGithub({ popup: true })
+          toast.info(
+            type === 'save'
+              ? 'Please sign in to save your changes.'
+              : 'Please sign in to fork this REPL.',
+            {
+              action: {
+                label: 'Sign in with Github',
+                onClick: () => {
+                  signInWithGithub({ popup: true })
+                },
               },
-            },
-          })
+            }
+          )
         } else {
           toast.error(error.message, {
             description: `${error.status} ${error.statusText}: ${error.cause ?? 'Something went wrong :('}`,
           })
         }
       } else {
-        toast.error('Failed to save', {
+        toast.error(`Failed to ${type}`, {
           description: error instanceof Error ? error.message : 'Unknown error',
         })
       }
@@ -123,7 +130,7 @@ export default function ReplSaveProvider({ children }: { children: React.ReactNo
 
         return await callback({ signal })
       } catch (error) {
-        handleSaveError(error)
+        handleSaveOrForkError('save', error)
         return false
       } finally {
         if (signal === abortControllerRef.current?.signal) {
@@ -132,7 +139,32 @@ export default function ReplSaveProvider({ children }: { children: React.ReactNo
         }
       }
     },
-    [handleSaveError]
+    [handleSaveOrForkError]
+  )
+
+  const forkWrapper = useCallback(
+    async (callback: (args: { signal: AbortSignal }) => Promise<boolean>) => {
+      let signal: AbortSignal | null = null
+
+      try {
+        setIsForking(true)
+
+        abortControllerRef.current?.abort()
+        abortControllerRef.current = new AbortController()
+        signal = abortControllerRef.current.signal
+
+        return await callback({ signal })
+      } catch (error) {
+        handleSaveOrForkError('fork', error)
+        return false
+      } finally {
+        if (signal === abortControllerRef.current?.signal) {
+          setIsForking(false)
+          abortControllerRef.current = null
+        }
+      }
+    },
+    [handleSaveOrForkError]
   )
 
   const saveState = useCallback<() => Promise<boolean>>(async () => {
@@ -229,7 +261,7 @@ export default function ReplSaveProvider({ children }: { children: React.ReactNo
   ])
 
   const forkState = useCallback<() => Promise<boolean>>(async () => {
-    return await saveWrapper(forkFn)
+    return await forkWrapper(forkFn)
 
     async function forkFn({ signal }: { signal: AbortSignal }) {
       if (!user) {
@@ -280,7 +312,7 @@ export default function ReplSaveProvider({ children }: { children: React.ReactNo
     user,
     setState,
     setSavedState,
-    saveWrapper,
+    forkWrapper,
     signInWithGithub,
     queryClient,
     supabase,
@@ -296,6 +328,7 @@ export default function ReplSaveProvider({ children }: { children: React.ReactNo
         isEffectivelyDirty,
         isDirty,
         isSaving,
+        isForking,
         allowSave,
         allowFork,
       }}

packages/jsrepl/src/hooks/useReplSave.tsx

@@ -8,13 +8,30 @@ export function useReplSave(): [
   {
     isNew: boolean
     isDirty: boolean
+    isEffectivelyDirty: boolean
     isSaving: boolean
+    isForking: boolean
     allowSave: boolean
     forkState: () => Promise<boolean>
     allowFork: boolean
   },
 ] {
-  const { savedState, saveState, forkState, isNew, isDirty, isSaving, allowSave, allowFork } =
-    useContext(ReplSaveContext)!
-  return [savedState, saveState, { isNew, isDirty, isSaving, allowSave, forkState, allowFork }]
+  const {
+    savedState,
+    saveState,
+    forkState,
+    isNew,
+    isDirty,
+    isEffectivelyDirty,
+    isSaving,
+    isForking,
+    allowSave,
+    allowFork,
+  } = useContext(ReplSaveContext)!
+
+  return [
+    savedState,
+    saveState,
+    { isNew, isDirty, isEffectivelyDirty, isSaving, isForking, allowSave, forkState, allowFork },
+  ]
 }