App menu

frontend/src/app.svelte

@@ -1,13 +1,13 @@
 <script>
   import { OpenConnection } from '../wailsjs/go/app/App';
-  import { WindowSetTitle } from '../wailsjs/runtime';
+  import { EventsOn, WindowSetTitle } from '../wailsjs/runtime';
   import BlankState from './components/blankstate.svelte';
   import ContextMenu from './components/contextmenu.svelte';
+  import About from './organisms/about/index.svelte';
   import AddressBar from './organisms/addressbar/index.svelte';
   import Connection from './organisms/connection/index.svelte';
   import Settings from './organisms/settings/index.svelte';
-  import { busy, contextMenu, connections, environment, applicationSettings } from './stores';
+  import { applicationSettings, busy, connections, contextMenu, environment } from './stores';
-  import { controlKeyDown } from './utils';
 
   let hosts = {};
   let activeHostKey = '';
@@ -15,12 +15,17 @@
   let activeCollKey = '';
   let addressBarModalOpen = true;
   let settingsModalOpen = false;
+  let aboutModalOpen = false;
 
   $: host = hosts[activeHostKey];
   $: connection = $connections[activeHostKey];
   $: database = connection?.databases[activeDbKey];
   $: collection = database?.collections?.[activeCollKey];
 
+  EventsOn('OpenPrefrences', () => settingsModalOpen = true);
+  EventsOn('OpenHostsModal', () => addressBarModalOpen = true);
+  EventsOn('OpenAboutModal', () => aboutModalOpen = true);
+
   async function openConnection(hostKey) {
     busy.start();
     const databases = await OpenConnection(hostKey);
@@ -38,15 +43,9 @@
     busy.end();
   }
 
-  function keydown(e) {
-    if (controlKeyDown(e) && e.key === ',') {
-      settingsModalOpen = true;
-      e.preventDefault();
-    }
-  }
 </script>
 
-<svelte:window on:contextmenu|preventDefault on:keydown={keydown} />
+<svelte:window on:contextmenu|preventDefault />
 
 <div id="root" class="platform-{$environment?.platform}">
   <div class="titlebar"></div>
@@ -66,6 +65,7 @@
       <ContextMenu {...$contextMenu} on:close={contextMenu.hide} />
     {/key}
     <Settings bind:show={settingsModalOpen} />
+    <About bind:show={aboutModalOpen} />
   {/if}
 </div>
 

frontend/src/organisms/about/index.svelte

@@ -0,0 +1,9 @@
+<script>
+  import Modal from '../../components/modal.svelte';
+
+  export let show = false;
+</script>
+
+<Modal bind:show>
+  about...
+</Modal>

frontend/wailsjs/go/app/App.d.ts

@@ -3,6 +3,7 @@
 import {app} from '../models';
 import {primitive} from '../models';
 import {map[string]app} from '../models';
+import {menu} from '../models';
 
 export function AddHost(arg1:string):Promise<void>;
 
@@ -20,6 +21,8 @@ export function Hosts():Promise<map[string]app.Host>;
 
 export function InsertItems(arg1:string,arg2:string,arg3:string,arg4:string):Promise<any>;
 
+export function Menu():Promise<menu.Menu>;
+
 export function OpenCollection(arg1:string,arg2:string,arg3:string):Promise<primitive.M>;
 
 export function OpenConnection(arg1:string):Promise<Array<string>>;

frontend/wailsjs/go/app/App.js

@@ -34,6 +34,10 @@ export function InsertItems(arg1, arg2, arg3, arg4) {
   return window['go']['app']['App']['InsertItems'](arg1, arg2, arg3, arg4);
 }
 
+export function Menu() {
+  return window['go']['app']['App']['Menu']();
+}
+
 export function OpenCollection(arg1, arg2, arg3) {
   return window['go']['app']['App']['OpenCollection'](arg1, arg2, arg3);
 }

internal/app/app.go

@@ -1,6 +1,13 @@
 package app
 
-import "context"
+import (
+	"context"
+	"runtime"
+
+	"github.com/wailsapp/wails/v2/pkg/menu"
+	"github.com/wailsapp/wails/v2/pkg/menu/keys"
+	wailsRuntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
 
 type App struct {
 	ctx context.Context
@@ -13,3 +20,35 @@ func NewApp() *App {
 func (a *App) Startup(ctx context.Context) {
 	a.ctx = ctx
 }
+
+func (a *App) Menu() *menu.Menu {
+	appMenu := menu.NewMenu()
+
+	aboutMenu := appMenu.AddSubmenu("About")
+	aboutMenu.AddText("About…", nil, func(cd *menu.CallbackData) {
+		wailsRuntime.EventsEmit(a.ctx, "OpenAboutModal")
+	})
+	aboutMenu.AddText("Prefrences…", keys.CmdOrCtrl(","), func(cd *menu.CallbackData) {
+		wailsRuntime.EventsEmit(a.ctx, "OpenPrefrences")
+	})
+	aboutMenu.AddSeparator()
+	aboutMenu.AddText("Quit", keys.CmdOrCtrl("q"), func(cd *menu.CallbackData) {
+		wailsRuntime.Quit(a.ctx)
+	})
+
+	fileMenu := appMenu.AddSubmenu("File")
+	fileMenu.AddText("Hosts…", keys.CmdOrCtrl("k"), func(cd *menu.CallbackData) {
+		wailsRuntime.EventsEmit(a.ctx, "OpenHostsModal")
+	})
+
+	helpMenu := appMenu.AddSubmenu("Help")
+	helpMenu.AddText("User guide", nil, func(cd *menu.CallbackData) {
+		wailsRuntime.BrowserOpenURL(a.ctx, "")
+	})
+
+	if runtime.GOOS == "darwin" {
+		appMenu.Append(menu.EditMenu())
+	}
+
+	return appMenu
+}

main.go

@@ -29,6 +29,7 @@ func main() {
 		MinHeight:        600,
 		BackgroundColour: &options.RGBA{R: 0, G: 0, B: 139, A: 1},
 		OnStartup:        app.Startup,
+		Menu:             app.Menu(),
 
 		AssetServer: &assetserver.Options{
 			Assets: assets,