Make the app feel more native & use transparency on windows & macos

bun.lock

@@ -5,7 +5,6 @@
     "": {
       "name": "password-generator",
       "dependencies": {
-        "@fontsource/lexend": "5.2.11",
         "@tailwindcss/vite": "4.3.0",
         "@tauri-apps/api": "2.11.0",
         "@tauri-apps/plugin-clipboard-manager": "2.3.2",
@@ -89,8 +88,6 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
 
-    "@fontsource/lexend": ["@fontsource/lexend@5.2.11", "", {}, "sha512-bShbQr2g2sWl7GJNyIxdllZST1faVbebXN6H7AEEDCRms/g4orDLxWnmTVodOtiErdZVUJURq4jpafZ34nIkTw=="],
-
     "@humanfs/core": ["@humanfs/core@0.19.2", "", { "dependencies": { "@humanfs/types": "^0.15.0" } }, "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.8", "", { "dependencies": { "@humanfs/core": "^0.19.2", "@humanfs/types": "^0.15.0", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ=="],

package.json

@@ -11,7 +11,6 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@fontsource/lexend": "5.2.11",
     "@tailwindcss/vite": "4.3.0",
     "@tauri-apps/api": "2.11.0",
     "@tauri-apps/plugin-clipboard-manager": "2.3.2",

src-tauri/Cargo.toml

@@ -22,6 +22,12 @@ tauri-plugin-os = "2.3.2"
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-single-instance = "2.4.2"
 
+[target.'cfg(any(target_os = "windows", target_os = "macos"))'.dependencies]
+window-vibrancy = "0.7.1"
+
+[target.'cfg(target_os = "windows")'.dependencies]
+windows-version = "0.1.7"
+
 [profile.release]
 opt-level = 3
 lto = "fat"

src-tauri/src/lib.rs

@@ -1,4 +1,4 @@
-use tauri::Manager;
+use tauri::{Manager, WebviewUrl, WebviewWindowBuilder};
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
@@ -11,6 +11,58 @@ pub fn run() {
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_clipboard_manager::init())
         .invoke_handler(tauri::generate_handler![])
+        .setup(|app| {
+            #[allow(unused)]
+            let mut transparency = false;
+
+            #[cfg(target_os = "macos")]
+            {
+                transparency = true;
+            }
+
+            #[cfg(target_os = "windows")]
+            {
+                transparency = windows_version::OsVersion::current()
+                    >= windows_version::OsVersion::new(10, 0, 0, 22000);
+            }
+
+            let window = WebviewWindowBuilder::new(
+                app,
+                "main",
+                WebviewUrl::App(
+                    format!(
+                        "/{}",
+                        if transparency {
+                            "?transparent=true"
+                        } else {
+                            ""
+                        }
+                    )
+                    .into(),
+                ),
+            )
+            .title("Password Generator")
+            .inner_size(400.0, 600.0)
+            .min_inner_size(400.0, 600.0)
+            .transparent(transparency)
+            .visible(false)
+            .build()?;
+
+            #[cfg(target_os = "macos")]
+            apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, None)
+                .expect("Unable to apply window blur");
+
+            #[cfg(target_os = "windows")]
+            if transparency {
+                window_vibrancy::apply_mica(&window, Some(true))
+                    .expect("Unable to apply window blur");
+            }
+
+            window.show().unwrap();
+            window.set_focus().unwrap();
+
+            Ok(())
+        })
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/tauri.conf.json

@@ -10,15 +10,7 @@
     "frontendDist": "../dist"
   },
   "app": {
-    "windows": [
-      {
-        "title": "Password Generator",
-        "width": 400,
-        "height": 600,
-        "minWidth": 400,
-        "minHeight": 600
-      }
-    ],
+    "windows": [],
     "security": {
       "csp": null
     }
@@ -26,10 +18,6 @@
   "bundle": {
     "active": true,
     "targets": "all",
-    "icon": [
-      "icons/icon.icns",
-      "icons/icon.png",
-      "icons/icon.ico"
-    ]
+    "icon": ["icons/icon.icns", "icons/icon.png", "icons/icon.ico"]
   }
 }

src/App.css

@@ -5,8 +5,7 @@
 }
 
 body {
-  @apply bg-(--col0) text-white h-screen text-center select-none relative;
-  font-family: "Lexend", sans-serif;
+  @apply text-white h-screen text-center select-none relative;
 
   --col0: rgb(8, 8, 8);
   --col1: rgb(16, 16, 16);
@@ -39,7 +38,7 @@ p {
 }
 
 button {
-  @apply bg-(--col1) hover:bg-(--col3) border border-(--col3) hover:border-(--col5) rounded-lg cursor-pointer transition-all;
+  @apply bg-(--col1)/50 hover:bg-(--col3)/50 border border-(--col3)/50 hover:border-(--col5)/50 rounded-lg cursor-pointer transition-all;
 }
 
 .preset-buttons,
@@ -53,7 +52,7 @@ button {
 }
 
 .char-selection-buttons button.char-selected {
-  @apply bg-(--col3) hover:bg-(--col5) border-(--col5) hover:border-(--col7) -translate-y-0.5;
+  @apply bg-(--col3)/50 hover:bg-(--col5)/50 border-(--col5)/50 hover:border-(--col7)/50 -translate-y-0.5;
 }
 
 .generate-btn {
@@ -65,7 +64,7 @@ button {
 }
 
 .password-display {
-  @apply w-full mb-2 p-2 bg-(--col1) border border-(--col3) rounded-lg wrap-break-word text-sm max-h-36 overflow-y-auto select-text;
+  @apply w-full mb-2 p-2 bg-(--col1)/50 border border-(--col3)/50 rounded-lg wrap-break-word text-sm max-h-48 overflow-y-auto select-text;
 }
 
 .result-buttons {

src/App.tsx

@@ -1,6 +1,5 @@
-import { useState, useEffect, useCallback } from 'react'
-import '@fontsource/lexend'
 import './App.css'
+import { useState, useEffect, useCallback } from 'react'
 import { writeText } from '@tauri-apps/plugin-clipboard-manager'
 import { platform } from '@tauri-apps/plugin-os'
 
@@ -64,7 +63,7 @@ function App () {
             : 'h-[calc(100vh-32px)] top-4 rounded-lg'
         }`}
       >
-        <h1>Password Generator</h1>
+        <p className='text-3xl font-bold'>Password Generator</p>
         <p>Select a length, or use the slider for a custom value.</p>
 
         <form

src/main.tsx

@@ -2,6 +2,10 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 
+const params = new URLSearchParams(window.location.search)
+const html = document.documentElement
+html.className = params.get('transparent') ? 'bg-transparent' : 'bg-black'
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />