Tweaked some options

frontend/src/app.svelte

@@ -12,6 +12,7 @@
 
   const connections = {};
   let hosts = {};
+  let environment;
 
   let activeHostKey = '';
   let activeDbKey = '';
@@ -104,10 +105,17 @@
   }
 
   onMount(() => {
+    window.runtime.Environment().then(e => environment = e);
     Hosts().then(h => hosts = h);
   });
 </script>
 
+<div id="app" class="platform-{environment?.platform}">
+  {#if environment}
+    {#if environment.platform === 'darwin'}
+      <div class="darwin-titlebar"></div>
+    {/if}
+
     <main class:empty={!host || !connection}>
       <AddressBar {hosts} bind:activeHostKey on:select={e => openConnection(e.detail)} bind:modalOpen={addressBarModalOpen} />
 
@@ -198,8 +206,16 @@
     {#key $contextMenu}
       <ContextMenu {...$contextMenu} on:close={contextMenu.hide} />
     {/key}
+  {/if}
+</div>
 
 <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,10 +7,16 @@ 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"
 )
 
+var (
 	//go:embed all:frontend/dist
-var assets embed.FS
+	assets embed.FS
+
+	//go:embed build/appicon.png
+	appIcon []byte
+)
 
 func main() {
 	app := app.NewApp()
@@ -19,14 +25,29 @@ func main() {
 		Title:            "Mongodup",
 		Width:            1000,
 		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 {