Dynamic menubars

src/components/topbar/menubar/Menu.tsx

@@ -11,7 +11,7 @@ export const Menu = ({ menu }: MenuProps) => {
   return (
     <div class={css.container} tabIndex={-1}>
       <RovingTabIndexProvider options={{ direction: 'vertical', loopAround: true }}>
-        {Object.keys<string>(menu).map((key) => (
+        {Object.keys<string>(menu || {}).map((key) => (
           <>
             <MenuItemButton
               key={key}

src/components/topbar/menubar/MenuBar.tsx

@@ -1,16 +1,18 @@
 import { mdiApple } from '@mdi/js';
 import clsx from 'clsx';
 import { useAtom } from 'jotai';
-import { useRef } from 'preact/hooks';
+import { useLayoutEffect, useRef } from 'preact/hooks';
 import { AppIcon } from '__/components/utils/AppIcon';
-import { useFocusOutside, useOutsideClick } from '__/hooks';
+import { finderMenuConfig } from '__/data/menu/finder.menu.config';
+import { useFocusOutside, useOutsideClick, usePrevious } from '__/hooks';
+import { activeAppStore, openAppsStore } from '__/stores/apps.store';
 import { activeMenuStore, menuBarMenusStore } from '__/stores/menubar.store';
 import { Menu } from './Menu';
 import css from './MenuBar.module.scss';
 
 export const MenuBar = () => {
-  const [currentAppMenus] = useAtom(menuBarMenusStore);
   const [activeMenu, setActiveMenu] = useAtom(activeMenuStore);
+  const [currentAppMenus] = useRightMenusForRightApp();
 
   const parentRef = useRef<HTMLDivElement>();
 
@@ -56,3 +58,40 @@ export const MenuBar = () => {
     </div>
   );
 };
+
+const useRightMenusForRightApp = () => {
+  const [activeApp] = useAtom(activeAppStore);
+  const [openApps] = useAtom(openAppsStore);
+
+  const [currentAppMenus, setCurrentAppMenus] = useAtom(menuBarMenusStore);
+
+  // Store previoussly active app to see if it is open now or now
+  const prevActiveApp = usePrevious(activeApp || 'finder');
+
+  useLayoutEffect(() => {
+    async function main() {
+      // If previous app was closed, revert to Finder
+      if (prevActiveApp !== 'finder' && !openApps[prevActiveApp]) {
+        return void setCurrentAppMenus(finderMenuConfig);
+      }
+
+      let config = finderMenuConfig;
+
+      const allConfigs = import.meta.glob('../../../data/menu/*.menu.config.ts');
+
+      const pathOfConfig = `../../../data/menu/${activeApp}.menu.config.ts`;
+
+      try {
+        config = (await allConfigs[pathOfConfig]()).default;
+      } catch (e) {
+        console.log(e);
+      }
+
+      setCurrentAppMenus(config);
+    }
+
+    main();
+  }, [activeApp, openApps]);
+
+  return [currentAppMenus] as const;
+};

src/data/menu/calculator.menu.config.ts

@@ -0,0 +1,57 @@
+import { createMenuConfig } from '__/helpers/create-menu-config';
+
+export const vscodeMenuConfig = createMenuConfig({
+  default: {
+    title: 'Code',
+    menu: {},
+  },
+
+  file: {
+    title: 'File',
+    menu: {
+      'new-file': {
+        title: 'New File',
+      },
+      'new-window': {
+        title: 'New Window',
+        breakAfter: true,
+      },
+
+      'open-file': {
+        title: 'Open File',
+      },
+      'open-folder': {
+        title: 'Open Folder',
+      },
+      'open-workspace': {
+        title: 'Open Workspace',
+      },
+      'open-recent': {
+        title: 'Open recent',
+        breakAfter: true,
+      },
+
+      'add-folder-to-workspace': {
+        title: 'Add Folder to Workspace',
+      },
+      'save-workspace-as': {
+        title: 'Add Folder to Workspace as...',
+        breakAfter: true,
+      },
+
+      save: {
+        title: 'Save',
+      },
+      'save-as': {
+        title: 'Save as...',
+      },
+      'save-all': {
+        title: 'Save All',
+        breakAfter: true,
+        disabled: true,
+      },
+    },
+  },
+});
+
+export default vscodeMenuConfig;

src/data/menu/finder.menu.config.ts

@@ -384,3 +384,5 @@ export const finderMenuConfig = createMenuConfig({
     },
   },
 });
+
+export default finderMenuConfig;

src/hooks/index.ts

@@ -4,3 +4,4 @@ export { useTheme } from './use-theme';
 export { useTimeout } from './use-timeout';
 export { useContextMenu } from './use-context-menu';
 export { useFocusOutside } from './use-focus-outside';
+export { usePrevious } from './use-previous';

src/hooks/use-previous.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+export function usePrevious<T>(value: T) {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+}

src/stores/menubar.store.ts

@@ -1,12 +1,9 @@
 import { atom } from 'jotai';
 import { finderMenuConfig } from '__/data/menu/finder.menu.config';
 
-const menuConfigs = { finder: finderMenuConfig };
-
-export const menuBarMenusStore = atom(
-  // Uncomment when all apps get their own menus
-  // (get) => menuConfigs[get(activeAppStore) as keyof typeof menuConfigs],
-  menuConfigs.finder,
+export const menuBarMenusStore = atom<Record<any, any>>(
+  // All apps will load their own configs, to support code splitting
+  {},
 );
 
 export const activeMenuStore = atom<string>('');