Tweaked some options

frontend/src/app.svelte

@@ -12,6 +12,7 @@
 
   const connections = {};
   let hosts = {};
+  let environment;
 
   let activeHostKey = '';
   let activeDbKey = '';
@@ -104,102 +105,117 @@
   }
 
   onMount(() => {
+    window.runtime.Environment().then(e => environment = e);
     Hosts().then(h => hosts = h);
   });
 </script>
 
-<main class:empty={!host || !connection}>
+<div id="app" class="platform-{environment?.platform}">
-  <AddressBar {hosts} bind:activeHostKey on:select={e => openConnection(e.detail)} bind:modalOpen={addressBarModalOpen} />
+  {#if environment}
+    {#if environment.platform === 'darwin'}
+      <div class="darwin-titlebar"></div>
+    {/if}
 
-  {#if host && connection}
+    <main class:empty={!host || !connection}>
-    <div class="databaselist">
+      <AddressBar {hosts} bind:activeHostKey on:select={e => openConnection(e.detail)} bind:modalOpen={addressBarModalOpen} />
-      <Grid
-        columns={[ { key: 'id' }, { key: 'collCount', right: true } ]}
-        items={Object.keys(connection.databases).map(dbKey => ({
-          id: dbKey,
-          collCount: Object.keys(connection.databases[dbKey].collections || {}).length || '',
-          children: Object.keys(connection.databases[dbKey].collections).map(collKey => ({
-            id: collKey,
-            menu: [ { label: `Drop ${collKey}`, fn: () => dropCollection(dbKey, collKey) } ],
-          })).sort((a, b) => a.id.localeCompare(b)) || [],
-          menu: [ { label: `Drop ${dbKey}`, fn: () => dropDatabase(dbKey) } ],
-        }))}
-        actions={[
-          { icon: 'reload', fn: reload },
-          { icon: '+', fn: evt => {
-            if (activeDbKey) {
-              contextMenu.show(evt, [
-                { label: 'New database', fn: () => newDb = {} },
-                { label: 'New collection', fn: () => newColl = {} },
-              ]);
-            }
-            else {
-              newDb = {};
-            }
-          } },
-          { icon: '-', fn: evt => {
-            if (activeCollKey) {
-              contextMenu.show(evt, [
-                { label: 'Drop database', fn: () => dropDatabase(activeDbKey) },
-                { label: 'Drop collection', fn: () => dropCollection(activeDbKey, activeCollKey) },
-              ]);
-            }
-            else {
-              dropDatabase(activeDbKey);
-            }
-          }, disabled: !activeDbKey },
-        ]}
-        bind:activeKey={activeDbKey}
-        bind:activeChildKey={activeCollKey}
-        on:select={e => openDatabase(e.detail)}
-        on:selectChild={e => openCollection(e.detail)}
-      />
-    </div>
 
-    <div class="collection">
+      {#if host && connection}
-      <CollectionDetail
+        <div class="databaselist">
-        {collection}
+          <Grid
-        hostKey={activeHostKey}
+            columns={[ { key: 'id' }, { key: 'collCount', right: true } ]}
-        dbKey={activeDbKey}
+            items={Object.keys(connection.databases).map(dbKey => ({
-        collectionKey={activeCollKey}
+              id: dbKey,
-      />
+              collCount: Object.keys(connection.databases[dbKey].collections || {}).length || '',
-    </div>
+              children: Object.keys(connection.databases[dbKey].collections).map(collKey => ({
-  {:else}
+                id: collKey,
-    <BlankState label="A database client is nothing without a host" image="/fish.svg" />
+                menu: [ { label: `Drop ${collKey}`, fn: () => dropCollection(dbKey, collKey) } ],
+              })).sort((a, b) => a.id.localeCompare(b)) || [],
+              menu: [ { label: `Drop ${dbKey}`, fn: () => dropDatabase(dbKey) } ],
+            }))}
+            actions={[
+              { icon: 'reload', fn: reload },
+              { icon: '+', fn: evt => {
+                if (activeDbKey) {
+                  contextMenu.show(evt, [
+                    { label: 'New database', fn: () => newDb = {} },
+                    { label: 'New collection', fn: () => newColl = {} },
+                  ]);
+                }
+                else {
+                  newDb = {};
+                }
+              } },
+              { icon: '-', fn: evt => {
+                if (activeCollKey) {
+                  contextMenu.show(evt, [
+                    { label: 'Drop database', fn: () => dropDatabase(activeDbKey) },
+                    { label: 'Drop collection', fn: () => dropCollection(activeDbKey, activeCollKey) },
+                  ]);
+                }
+                else {
+                  dropDatabase(activeDbKey);
+                }
+              }, disabled: !activeDbKey },
+            ]}
+            bind:activeKey={activeDbKey}
+            bind:activeChildKey={activeCollKey}
+            on:select={e => openDatabase(e.detail)}
+            on:selectChild={e => openCollection(e.detail)}
+          />
+        </div>
+
+        <div class="collection">
+          <CollectionDetail
+            {collection}
+            hostKey={activeHostKey}
+            dbKey={activeDbKey}
+            collectionKey={activeCollKey}
+          />
+        </div>
+      {:else}
+        <BlankState label="A database client is nothing without a host" image="/fish.svg" />
+      {/if}
+    </main>
+
+    {#if newDb}
+      <Modal bind:show={newDb}>
+        <p><strong>Create a database</strong></p>
+        <p>Note: databases in MongoDB do not exist until they have a collection and an item. Your new database will not persist on the server; fill it to have it created.</p>
+        <form on:submit|preventDefault={createDatabase}>
+          <label class="field">
+            <input type="text" spellcheck="false" bind:value={newDb.name} use:input placeholder="New collection name" bind:this={newDbInput} />
+          </label>
+          <button class="btn create" type="submit">Create database</button>
+        </form>
+      </Modal>
+    {/if}
+
+    {#if newColl}
+      <Modal bind:show={newColl}>
+        <p><strong>Create a collections</strong></p>
+        <p>Note: collections in MongoDB do not exist until they have at least one item. Your new collection will not persist on the server; fill it to have it created.</p>
+        <form on:submit|preventDefault={createCollection}>
+          <label class="field">
+            <input type="text" spellcheck="false" bind:value={newColl.name} use:input placeholder="New collection name" bind:this={newCollInput} />
+          </label>
+          <button class="btn create" type="submit">Create collection</button>
+        </form>
+      </Modal>
+    {/if}
+
+    {#key $contextMenu}
+      <ContextMenu {...$contextMenu} on:close={contextMenu.hide} />
+    {/key}
   {/if}
-</main>
+</div>
-
-{#if newDb}
-  <Modal bind:show={newDb}>
-    <p><strong>Create a database</strong></p>
-    <p>Note: databases in MongoDB do not exist until they have a collection and an item. Your new database will not persist on the server; fill it to have it created.</p>
-    <form on:submit|preventDefault={createDatabase}>
-      <label class="field">
-        <input type="text" spellcheck="false" bind:value={newDb.name} use:input placeholder="New collection name" bind:this={newDbInput} />
-      </label>
-      <button class="btn create" type="submit">Create database</button>
-    </form>
-  </Modal>
-{/if}
-
-{#if newColl}
-  <Modal bind:show={newColl}>
-    <p><strong>Create a collections</strong></p>
-    <p>Note: collections in MongoDB do not exist until they have at least one item. Your new collection will not persist on the server; fill it to have it created.</p>
-    <form on:submit|preventDefault={createCollection}>
-      <label class="field">
-        <input type="text" spellcheck="false" bind:value={newColl.name} use:input placeholder="New collection name" bind:this={newCollInput} />
-      </label>
-      <button class="btn create" type="submit">Create collection</button>
-    </form>
-  </Modal>
-{/if}
-
-{#key $contextMenu}
-  <ContextMenu {...$contextMenu} on:close={contextMenu.hide} />
-{/key}
 
 <style>
+  .darwin-titlebar {
+    --wails-draggable: drag;
+    height: var(--darwin-titlebar-height, 36px);
+    background-color: #00002a;
+  }
+
   main {
     height: 100vh;
     display: grid;
@@ -207,6 +223,9 @@
     gap: 0.5rem;
     padding: 0.5rem;
   }
+  #app.platform-darwin main {
+    height: calc(100vh - var(--darwin-titlebar-height, 46px));
+  }
   main.empty {
     grid-template: 3rem auto / 1fr;
   }

frontend/src/components/contextmenu.svelte

@@ -45,6 +45,7 @@
   .contextmenu {
     position: fixed;
     background-color: rgba(230, 230, 230, 0.7);
+    -webkit-backdrop-filter: blur(30px);
     backdrop-filter: blur(30px);
     border-radius: 10px;
     padding: 5px;

frontend/src/components/modal.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from 'svelte';
   import { fade, fly } from 'svelte/transition';
   import Icon from './icon.svelte';
 
@@ -47,9 +48,12 @@
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.5);
     margin: 0;
-    padding-top: 1rem;
+    padding-top: 50px;
     cursor: pointer;
   }
+  :global(#app.platform-darwin) .outer {
+    margin-top: var(--darwin-titlebar-height, 46px);
+  }
 
   .inner {
     max-width: 80vw;

frontend/src/style.css

@@ -1,3 +1,7 @@
+:root {
+    --darwin-titlebar-height: 36px;
+}
+
 html,
 body {
     height: 100vh;
@@ -10,7 +14,7 @@ body {
     cursor: default;
     font-size: 15px;
     line-height: 15px;
-    background-color: #eee;
+    background-color: rgba(0, 0, 0, 0);
 }
 
 * {

main.go

@@ -7,26 +7,47 @@ import (
 	"github.com/wailsapp/wails/v2"
 	"github.com/wailsapp/wails/v2/pkg/options"
 	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
+	"github.com/wailsapp/wails/v2/pkg/options/mac"
 )
 
-//go:embed all:frontend/dist
+var (
-var assets embed.FS
+	//go:embed all:frontend/dist
+	assets embed.FS
+
+	//go:embed build/appicon.png
+	appIcon []byte
+)
 
 func main() {
 	app := app.NewApp()
 
 	err := wails.Run(&options.App{
-		Title:  "Mongodup",
+		Title:            "Mongodup",
-		Width:  1000,
+		Width:            1000,
-		Height: 600,
+		Height:           600,
+		MinWidth:         1000,
+		MinHeight:        600,
+		BackgroundColour: &options.RGBA{R: 0, G: 0, B: 139, A: 1},
+		OnStartup:        app.Startup,
+
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},
-		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
+
-		OnStartup:        app.Startup,
 		Bind: []interface{}{
 			app,
 		},
+
+		Mac: &mac.Options{
+			TitleBar:             mac.TitleBarHiddenInset(),
+			WebviewIsTransparent: true,
+			WindowIsTranslucent:  true,
+			About: &mac.AboutInfo{
+				Title:   "Mongodup - MongoDB client",
+				Message: "© 2023 Romein van Buren",
+				Icon:    appIcon,
+			},
+		},
 	})
 
 	if err != nil {