perf: support border radius on Linux, Windows 7 and below

.github/workflows/release-linux.yaml

@@ -53,7 +53,7 @@ jobs:
       - name: Build frontend assets
         shell: bash
         run: |
-          npm install -g npm@8
+          npm install -g npm@9
           jq '.info.productVersion = "${{ steps.normalise_version.outputs.version }}"' wails.json > tmp.json
           mv tmp.json wails.json
           cd frontend

.github/workflows/release-macos.yaml

@@ -59,7 +59,7 @@ jobs:
       - name: Build frontend assets
         shell: bash
         run: |
-          npm install -g npm@8
+          npm install -g npm@9
           jq '.info.productVersion = "${{ steps.normalise_version.outputs.version }}"' wails.json > tmp.json
           mv tmp.json wails.json
           cd frontend

.github/workflows/release-windows.yaml

@@ -52,7 +52,7 @@ jobs:
       - name: Build frontend assets
         shell: bash
         run: |
-          npm install -g npm@8
+          npm install -g npm@9
           jq '.info.productVersion = "${{ steps.normalise_version.outputs.version }}"' wails.json > tmp.json
           mv tmp.json wails.json
           cd frontend

frontend/src/App.vue

@@ -26,7 +26,7 @@ hljs.registerLanguage('plaintext', plaintext)
 const prefStore = usePreferencesStore()
 const connectionStore = useConnectionStore()
 const i18n = useI18n()
-const initializing = ref(false)
+const initializing = ref(true)
 onMounted(async () => {
     try {
         initializing.value = true
@@ -61,12 +61,8 @@ watch(
         :theme-overrides="themeOverrides"
         :locale="prefStore.themeLocale"
         class="fill-height">
-        <n-global-style />
         <n-dialog-provider>
-            <n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }" style="--wails-draggable: drag">
-                <div id="launch-container" />
-            </n-spin>
-            <app-content v-if="!initializing" class="flex-item-expand" />
+            <app-content :loading="initializing" />
 
             <!-- top modal dialogs -->
             <connection-dialog />
@@ -82,16 +78,4 @@ watch(
     </n-config-provider>
 </template>
 
-<style lang="scss">
-#launch-container {
-    width: 100vw;
-    height: 100vh;
-}
-
-#app-title {
-    text-align: center;
-    width: 100vw;
-    height: 30px;
-    line-height: 30px;
-}
-</style>
+<style lang="scss"></style>

frontend/src/AppContent.vue

@@ -19,8 +19,11 @@ import iconUrl from '@/assets/images/icon.png'
 
 const themeVars = useThemeVars()
 
+const props = defineProps({
+    loading: Boolean,
+})
+
 const data = reactive({
-    initializing: false,
     navMenuWidth: 60,
     hoverResize: false,
     resizing: false,
@@ -75,7 +78,18 @@ watch(
 
 <template>
     <!-- app content-->
-    <div id="app-content-wrapper" class="flex-box-v">
+    <n-spin
+        :show="props.loading"
+        :theme-overrides="{ opacitySpinning: 0 }"
+        style="--wails-draggable: drag; border-radius: 10px"
+        :style="{ backgroundColor: themeVars.bodyColor }">
+        <div
+            id="app-content-wrapper"
+            class="flex-box-v"
+            :style="{
+                backgroundColor: themeVars.bodyColor,
+                color: themeVars.textColorBase,
+            }">
             <!-- title bar -->
             <div
                 id="app-toolbar"
@@ -165,13 +179,16 @@ watch(
                 </div>
             </div>
         </div>
+    </n-spin>
 </template>
 
 <style lang="scss" scoped>
 #app-content-wrapper {
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     overflow: hidden;
     box-sizing: border-box;
+    border-radius: 10px;
 
     #app-toolbar {
         background-color: v-bind('themeVars.tabColor');

frontend/src/styles/style.scss

@@ -18,17 +18,10 @@ html {
 
 body {
   margin: 0;
-  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-  sans-serif;
-}
-
-@font-face {
-  font-family: "Nunito";
-  font-style: normal;
-  font-weight: 400;
-  src: local(""),
-  url("../assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
+  padding: 0;
+  background-color: #0000;
+  line-height: 1.5;
+  font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
 }
 
 #app {

main.go

@@ -9,6 +9,7 @@ import (
 	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
 	"github.com/wailsapp/wails/v2/pkg/options/linux"
 	"github.com/wailsapp/wails/v2/pkg/options/mac"
+	"github.com/wailsapp/wails/v2/pkg/options/windows"
 	"runtime"
 	"tinyrdm/backend/services"
 )
@@ -46,7 +47,7 @@ func main() {
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},
-		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
+		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 0},
 		OnStartup: func(ctx context.Context) {
 			app.startup(ctx)
 			connSvc.Start(ctx)
@@ -66,12 +67,18 @@ func main() {
 				Message: "A modern lightweight cross-platform Redis desktop client.\n\nCopyright © 2023",
 				Icon:    icon,
 			},
-			//WebviewIsTransparent: true,
-			//WindowIsTranslucent:  true,
+			WebviewIsTransparent: false,
+			WindowIsTranslucent:  false,
+		},
+		Windows: &windows.Options{
+			WebviewIsTransparent:              true,
+			WindowIsTranslucent:               true,
+			DisableFramelessWindowDecorations: true,
 		},
 		Linux: &linux.Options{
 			Icon:                icon,
 			WebviewGpuPolicy:    linux.WebviewGpuPolicyOnDemand,
+			WindowIsTranslucent: true,
 		},
 	})