V0.6.2 - New config and filtering system

README.md

@@ -81,6 +81,7 @@ pm2 monit
 - [ ] API keys for users
 - [ ] Move to Oauth2 for authentication
 - [ ] Allow session management (Track/logout from sessions)
+- [ ] Add support for multiple databases
 - [ ] Add support for more notification services
 - [ ] Better role based access control
 

app/components/home/menu/mobile.jsx

@@ -1,12 +1,14 @@
 // import dependencies
 import PropTypes from 'prop-types';
+import { FaCog, FaPlus } from 'react-icons/fa';
 import { observer } from 'mobx-react-lite';
 
 // import local files
-import useDropdown from '../../../hooks/useDropdown';
-import { FaEllipsisVertical } from '../../icons';
-import Dropdown from '../../ui/dropdown';
 import useContextStore from '../../../context';
+import Modal from '../../ui/modal';
+import Button from '../../ui/button';
+import HomeMobileMenuStatus from './mobile/status';
+import HomeMobileMenuLayout from './mobile/layout';
 import MonitorConfigureModal from '../../modal/monitor/configure';
 
 const HomeMenuMobile = ({ handleReset }) => {
@@ -15,40 +17,54 @@ const HomeMenuMobile = ({ handleReset }) => {
     globalStore: { addMonitor },
   } = useContextStore();
 
-  const { toggleDropdown, dropdownIsOpen } = useDropdown(true);
   return (
-    <Dropdown.Container isOpen={dropdownIsOpen} toggleDropdown={toggleDropdown}>
-      <Dropdown.Trigger
-        isOpen={dropdownIsOpen}
-        toggleDropdown={toggleDropdown}
-        style={{ height: '45px' }}
-      >
-        <FaEllipsisVertical style={{ width: '30px', height: '30px' }} />
-      </Dropdown.Trigger>
-      <Dropdown.List isOpen={dropdownIsOpen}>
-        <Dropdown.Item
-          onClick={() =>
-            openModal(
-              <MonitorConfigureModal
-                closeModal={closeModal}
-                handleMonitorSubmit={addMonitor}
-              />,
-              false
-            )
-          }
-        >
-          Add Monitor
-        </Dropdown.Item>
-        <Dropdown.Item
-          onClick={() => {
-            handleReset();
-            toggleDropdown();
-          }}
-        >
-          Reset
-        </Dropdown.Item>
-      </Dropdown.List>
-    </Dropdown.Container>
+    <Button
+      iconLeft={<FaCog style={{ width: '30px', height: '30px' }} />}
+      onClick={() => {
+        openModal(
+          <Modal.Container>
+            <Modal.Title>Settings</Modal.Title>
+            <Modal.Message>
+              <div className="input-label">Status</div>
+              <HomeMobileMenuStatus />
+              <div className="input-label">Layout</div>
+              <HomeMobileMenuLayout />
+              <br />
+              <Button
+                iconLeft={<FaPlus style={{ width: '20px', height: '20px' }} />}
+                color={'gray'}
+                fullWidth
+                onClick={() => {
+                  closeModal();
+                  openModal(
+                    <MonitorConfigureModal
+                      closeModal={closeModal}
+                      handleMonitorSubmit={addMonitor}
+                    />,
+                    false
+                  );
+                }}
+              >
+                New Monitor
+              </Button>
+            </Modal.Message>
+            <Modal.Actions>
+              <Modal.Button onClick={closeModal}>Close</Modal.Button>
+              <Modal.Button
+                color="red"
+                onClick={() => {
+                  handleReset();
+                  closeModal();
+                }}
+              >
+                Reset
+              </Modal.Button>
+            </Modal.Actions>
+          </Modal.Container>,
+          false
+        );
+      }}
+    />
   );
 };
 

app/components/home/menu/mobile/layout.jsx

@@ -0,0 +1,71 @@
+// import dependencies
+import { observer } from 'mobx-react-lite';
+
+// import local files
+import useDropdown from '../../../../hooks/useDropdown';
+import Dropdown from '../../../ui/dropdown';
+import useLocalStorageContext from '../../../../hooks/useLocalstorage';
+import { FaBars, IoGrid } from '../../../icons';
+
+const views = [
+  {
+    text: 'Cards',
+    id: 'cards',
+    icon: <IoGrid style={{ width: '20px', height: '20px' }} />,
+  },
+  {
+    text: 'Compact',
+    id: 'compact',
+    icon: <FaBars style={{ width: '20px', height: '20px' }} />,
+  },
+];
+
+const HomeMobileMenuLayout = () => {
+  const { toggleDropdown, dropdownIsOpen } = useDropdown(true);
+
+  const { layout, setLayout } = useLocalStorageContext();
+
+  const dropdownItems = views.map((view) => (
+    <Dropdown.Item
+      key={view.id}
+      onClick={() => {
+        setLayout(view.id);
+        toggleDropdown();
+      }}
+      showDot
+      isSelected={layout === view.id}
+      dotColor="primary"
+    >
+      <div className="layout-option">
+        {view.icon}
+        {view.text}
+      </div>
+    </Dropdown.Item>
+  ));
+
+  return (
+    <Dropdown.Container
+      position="center"
+      isOpen={dropdownIsOpen}
+      toggleDropdown={toggleDropdown}
+      id="home-menu-layout"
+    >
+      <Dropdown.Trigger
+        isOpen={dropdownIsOpen}
+        toggleDropdown={toggleDropdown}
+        asInput
+      >
+        {layout.charAt(0).toUpperCase() + layout.slice(1)}
+      </Dropdown.Trigger>
+      <Dropdown.List isOpen={dropdownIsOpen} fullWidth>
+        {dropdownItems}
+      </Dropdown.List>
+    </Dropdown.Container>
+  );
+};
+
+HomeMobileMenuLayout.displayName = 'HomeMobileMenuLayout';
+
+HomeMobileMenuLayout.propTypes = {};
+
+export default observer(HomeMobileMenuLayout);

app/components/home/menu/mobile/status.jsx

@@ -0,0 +1,73 @@
+// import local files
+import useDropdown from '../../../../hooks/useDropdown';
+import Dropdown from '../../../ui/dropdown';
+import useLocalStorageContext from '../../../../hooks/useLocalstorage';
+
+import { HiStatusOffline, HiStatusOnline, FaBars } from '../../../icons';
+
+const statusOptions = [
+  {
+    text: 'All',
+    id: 'all',
+    icon: <FaBars style={{ width: '20px', height: '20px' }} />,
+  },
+  {
+    text: 'Up',
+    id: 'up',
+    icon: <HiStatusOnline style={{ width: '20px', height: '20px' }} />,
+  },
+  {
+    text: 'Down',
+    id: 'down',
+    icon: <HiStatusOffline style={{ width: '20px', height: '20px' }} />,
+  },
+];
+
+const HomeMobileMenuStatus = () => {
+  const { toggleDropdown, dropdownIsOpen } = useDropdown(true);
+
+  const { status, setStatus } = useLocalStorageContext();
+
+  const dropdownItems = statusOptions.map((view) => (
+    <Dropdown.Item
+      key={view.id}
+      onClick={() => {
+        setStatus(view.id);
+        toggleDropdown();
+      }}
+      showDot
+      isSelected={status === view.id}
+    >
+      <div className="layout-option">
+        {view.icon}
+        {view.text}
+      </div>
+    </Dropdown.Item>
+  ));
+
+  return (
+    <Dropdown.Container
+      position="center"
+      isOpen={dropdownIsOpen}
+      toggleDropdown={toggleDropdown}
+      id="home-menu-status"
+    >
+      <Dropdown.Trigger
+        isOpen={dropdownIsOpen}
+        toggleDropdown={toggleDropdown}
+        asInput
+      >
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </Dropdown.Trigger>
+      <Dropdown.List isOpen={dropdownIsOpen} fullWidth>
+        {dropdownItems}
+      </Dropdown.List>
+    </Dropdown.Container>
+  );
+};
+
+HomeMobileMenuStatus.displayName = 'HomeMobileMenuStatus';
+
+HomeMobileMenuStatus.propTypes = {};
+
+export default HomeMobileMenuStatus;

app/components/home/menu/styles.scss

@@ -27,12 +27,6 @@
   display: none;
 }
 
-@include tablet {
-  #home-menu-status {
-    display: none;
-  }
-}
-
 @include mobile {
   .home-menu-buttons {
     display: none;

app/components/icons/index.jsx

@@ -22,6 +22,7 @@ import {
   FaCheck,
   FaBars,
   FaTrashCan,
+  FaFilter,
 } from 'react-icons/fa6';
 import { IoArrowBack, IoColorPalette, IoGrid, IoReload } from 'react-icons/io5';
 import { RiStackFill } from 'react-icons/ri';
@@ -38,6 +39,7 @@ export {
   FaCircleCheck,
   FaCog,
   FaEllipsisVertical,
+  FaFilter,
   FaHome,
   FaPlus,
   FaSignOutAlt,

app/components/navigation/left.scss

@@ -72,17 +72,10 @@
   }
 
   .left-actions-bottom {
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    gap: 20px;
+    display: none;
   }
 
   .navigation-left-top-action {
     flex: 1;
   }
-
-  .navigation-left-signout-button {
-    display: none;
-  }
 }

app/components/notifications/menu/styles.scss

@@ -27,12 +27,6 @@
   display: none;
 }
 
-@include tablet {
-  #home-menu-status {
-    display: none;
-  }
-}
-
 @include mobile {
   .home-menu-buttons {
     display: none;

app/main.jsx

@@ -68,6 +68,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
         <Route path="/verify" element={<Verify />} />
         <Route path="/error" element={<ErrorPage />} />
         <Route path="/404" element={<ErrorPage />} />
+        <Route path="/*" element={<ErrorPage />} />
       </Routes>
     </BrowserRouter>
   </React.StrictMode>

docs/.vitepress/config.mts

@@ -58,6 +58,7 @@ export default defineConfig({
           // { text: 'Overview', link: '/internals/overview' },
           { text: 'Changelog', link: '/internals/changelog' },
           // { text: 'Flows', link: '/internals/flows' },
+          { text: 'Config', link: '/internals/config' },
           { text: 'Notifications', link: '/internals/notifications' },
           { text: 'Permissions', link: '/internals/permissions' },
           { text: 'Roadmap', link: '/internals/roadmap' },