Fix content being pushed right when too many tabs in the web app is open

src/components/Expire.jsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+import { Text } from "@mantine/core";
+// Elements within this component will be unrendered after a specified delay
+export default function Expire({delay, children}){
+    const [visible, setVisible] = useState(true)
+
+    useEffect(() =>{
+        setTimeout(() =>{
+            setVisible(false)
+        }, delay)
+    }, [])
+
+    return(
+       <>
+            {visible && children}
+       </>
+    )
+}

src/components/activities/Activities.jsx

@@ -1,8 +1,8 @@
-import { Box, Tabs, Title, Tooltip } from '@mantine/core'
+import { Box, Tabs, Title, Tooltip, Text } from '@mantine/core'
 import { useActiveActivity, useActivities } from '../../redux/hooks/activityHooks'
 import { getActivity } from '../../activities'
 import { SVGIcon } from '../../icons'
-import { FaBug } from "react-icons/fa";
+import SaveIndicatorDisplay from '../saveIndicatorDisplay'
 
 export default function Activities() {
 
@@ -36,7 +36,10 @@ export default function Activities() {
         const activityDef = getActivity(activityId)
         return (
             <Tabs.Panel value={activityId} key={activityId}>
-                <Title order={6}>{activityDef.title}</Title>
+                <Title style={{display:"inline"}} order={6}>{activityDef.title}</Title>
+                <Text style={{display:"inline"}} size={'xs'} ml={10}>
+                    <SaveIndicatorDisplay/>
+                </Text>
                 <activityDef.component {...activityState} />
             </Tabs.Panel>
         )

src/components/activities/explorer/ExplorerList.jsx

@@ -1,8 +1,9 @@
 import { useCreateFile, useFiles } from '../../../redux/hooks/workingDirectoryHooks'
 import CreateNewButton from "./CreateNewButton"
-import { Accordion, ScrollArea, Title } from '@mantine/core'
+import { Accordion, ScrollArea, Title, Text, Flex } from '@mantine/core'
 import { ObjectTypes } from '../../../objectTypes'
 import ExplorerListItem from './ExplorerListItem'
+import SaveIndicatorDisplay from '../../saveIndicatorDisplay'
 
 
 export default function ExplorerList({currentDirectory}) {
@@ -27,7 +28,10 @@ export default function ExplorerList({currentDirectory}) {
 
     return (
         <ScrollArea style={{ height: 'calc(100vh - 120px)' }}>
-            <Title mt={10} order={6}>Current Folder: {currentDirectory}</Title>
+            <Title mt={10} order={6}>
+                Current Folder: {currentDirectory}            
+            </Title>
+
             <Accordion
                 mt={10}
                 multiple

src/components/panels/DragTabs.jsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from "react"
-import { Tabs } from '@mantine/core'
+import { Text, Tabs } from '@mantine/core'
+import { useSelector } from 'react-redux'
 
 
 export default function DragTabs({
@@ -114,6 +115,7 @@ export default function DragTabs({
         !tabIds.length && setDragState(null)
     }, [tabIds.length])
 
+
     return (
         !!tabIds.length &&
             <div

src/components/panels/Panels.jsx

@@ -11,12 +11,12 @@ export default function Panels() {
     const panelIds = usePanelIds()
     const [activePanel, setActivePanel] = useActivePanel()
     const reorderPanels = useReorderPanels()
-
+    
     // first time visitor
     const [firstTime] = useLocalStorage({ key: 'first-time-visiting', defaultValue: true })
-
-    return (
-        <div style={{ flexGrow: 1 }}>
+   
+    return ( // overflow: hidden to prevent content from moving offscreen when too many tabs are open
+        <div style={{flexGrow: 1, overflow: "hidden"}}> 
             {panelIds.length ?
                 <DragTabs
                     tabComponent={Panel.Tab}

src/components/saveIndicatorDisplay.jsx

@@ -0,0 +1,23 @@
+import { CgCheckO } from "react-icons/cg";
+import Expire from "./Expire";
+import { useSelector } from "react-redux";
+import { MdDataSaverOff } from "react-icons/md";
+
+export default function SaveIndicatorDisplay() {
+    const isSaving = useSelector(state => state.saveIndicator.isSaving)
+    return (
+        <>
+            {isSaving ? 
+                <span>
+                    Saving...
+                    <MdDataSaverOff color="#FFFF00" style={{marginLeft: "5px"}}/>
+                </span>
+                : 
+                <Expire delay={3000}>
+                    Saved
+                    <CgCheckO style={{marginLeft: "5px"}} color='green'/>
+                </Expire>
+            }
+        </>
+    );
+}

src/redux/hooks/panelsHooks.js

@@ -6,7 +6,7 @@ import { createSelector } from "@reduxjs/toolkit"
 import { useEffect, useMemo, useRef } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { getPanelType, getPanelTypeForObject } from "../../panels"
-
+import { setIsSaving } from "../slices/saveIndicatorSlice"
 const { actions, selectors } = panelsSlice
 
 
@@ -104,6 +104,8 @@ export function useActivePanel() {
 
 export function useAutoSavePanel(id, debounceTime) {
     const panel = usePanel(id)
+    useSelector(state => state.saveIndicator)
+    const dispatch = useDispatch()
 
     // memoize serialization of panel
     const serialized = useMemo(() => serializePanel(id), [panel])
@@ -118,7 +120,13 @@ export function useAutoSavePanel(id, debounceTime) {
 
     // save when debounced serialized content changes
     useEffect(() => {
-        commands.FileSave.execute(id)
+        const save = async() =>{
+            dispatch(setIsSaving(true))
+            await commands.FileSave.execute(id) // saving could be very fast, making it hard for users to see the "Saving..." text. 
+            dispatch(setIsSaving(false))
+        }
+        save()
+
     }, [debouncedPanelContent])
 }
 

src/redux/slices/saveIndicatorSlice.js

@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+const initialState = {
+    isSaving: false
+}
+
+export const saveIndicatorSlice = createSlice({
+    name: "saveIndicator",
+    initialState,
+    reducers:{
+        setIsSaving: (state, action) =>{
+            state.isSaving = action.payload
+        }
+    }
+})
+
+export const {setIsSaving} = saveIndicatorSlice.actions
+export default saveIndicatorSlice.reducer

src/redux/store.js

@@ -2,13 +2,15 @@ import { configureStore } from '@reduxjs/toolkit'
 import panelsSlice from './slices/panelsSlice'
 import workingDirectorySlice from "./slices/workingDirectorySlice"
 import activitySlice from "./slices/activitySlice"
+import saveIndicatorReducer from './slices/saveIndicatorSlice'
 
 export default configureStore({
     reducer: {
         activities: activitySlice.reducer,
         workingDirectory: workingDirectorySlice.reducer,
         panels: panelsSlice.reducer,
+        saveIndicator: saveIndicatorReducer
     }
 })
 
-export { panelsSlice, workingDirectorySlice, activitySlice }
+export { panelsSlice, workingDirectorySlice, activitySlice, saveIndicatorReducer }