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>('');