Manual refresh (#106)

* feat: add a manual refresh button
* 📸 Updated screenshots

Co-authored-by: 🤖 ViteShot <viteshot-bot@zenc.io>

package.json

@@ -71,6 +71,7 @@
     "@mui/material": "5.5.0",
     "@reduxjs/toolkit": "1.8.0",
     "@uiw/react-codemirror": "4.5.1",
+    "classnames": "^2.3.1",
     "compare-versions": "4.1.3",
     "electron-log": "4.4.6",
     "electron-store": "8.0.1",

src/renderer/components/sidebar/SidebarFooter.tsx

@@ -1,17 +1,62 @@
+import { closeCurrentFile, setActiveOverlay, setFatalError, setFileListing } from '~renderer/redux';
+import { useAppDispatch, useAppSelector, useDebouncedState } from '~renderer/hooks';
+import cn from 'classnames';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
-import { setActiveOverlay } from '~renderer/redux';
-import Settings from '@mui/icons-material/SettingsSharp';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import SettingsIcon from '@mui/icons-material/SettingsSharp';
+import { styled } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
-import { useAppDispatch } from '~renderer/hooks';
 
 export interface SidebarFooterProps {
   width: string;
 }
 
+const SpinningRefreshIcon = styled(RefreshIcon)`
+  &.spin {
+    animation-name: spin;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+  }
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
 export const SidebarFooter: React.FC<SidebarFooterProps> = ({ width }) => {
   const dispatch = useAppDispatch();
+  const currentFile = useAppSelector((s) => s.files.currentFile);
+  const [spinning, setSpinning, flushSpinning] = useDebouncedState(false, 1_000);
+
+  const handleRefresh: React.MouseEventHandler = () => {
+    setSpinning(true);
+    flushSpinning();
+
+    editorApi
+      .listNoteFiles()
+      .then((fs) => {
+        dispatch(setFileListing(fs));
+
+        const newFiles = Object.values(fs)
+          .flatMap((f) => f.categories)
+          .flatMap((c) => c.files);
+        if (newFiles.find((f) => f.url === currentFile?.url) == null) {
+          // Currently editing file no longer exists...
+          dispatch(closeCurrentFile());
+        }
+
+        setSpinning(false);
+      })
+      .catch((e: unknown) => {
+        dispatch(setFatalError(e));
+      });
+  };
 
   return (
     <Paper
@@ -35,7 +80,7 @@ export const SidebarFooter: React.FC<SidebarFooterProps> = ({ width }) => {
             dispatch(setActiveOverlay('configuration'));
           }}
         >
-          <Settings />
+          <SettingsIcon />
         </IconButton>
       </Tooltip>
       <Tooltip title='About'>
@@ -47,6 +92,11 @@ export const SidebarFooter: React.FC<SidebarFooterProps> = ({ width }) => {
           <HelpOutlineIcon />
         </IconButton>
       </Tooltip>
+      <Tooltip title='Refresh notes list'>
+        <IconButton onClick={handleRefresh}>
+          <SpinningRefreshIcon className={cn({ spin: spinning })} />
+        </IconButton>
+      </Tooltip>
     </Paper>
   );
 };