From 144a9929958f940da43a77580076367d1f032f4d Mon Sep 17 00:00:00 2001 From: Andy Shinn Date: Fri, 22 Aug 2025 15:21:07 -0500 Subject: [PATCH 1/2] initial custom titlebar --- electron/src/main/index.ts | 2 ++ ui/src/App.svelte | 33 +++++++++------------------ ui/src/Map.svelte | 24 ++++++++------------ ui/src/Welcome.svelte | 38 ++++++++++++++++++++++++++++++++ ui/src/app.css | 5 +++++ ui/src/lib/ButtonBar.svelte | 16 ++++++++++++++ ui/src/lib/CustomTitleBar.svelte | 13 +++++++++++ ui/src/lib/util.ts | 2 +- 8 files changed, 94 insertions(+), 39 deletions(-) create mode 100644 ui/src/Welcome.svelte create mode 100644 ui/src/lib/ButtonBar.svelte create mode 100644 ui/src/lib/CustomTitleBar.svelte diff --git a/electron/src/main/index.ts b/electron/src/main/index.ts index 32cdf11..64a4712 100644 --- a/electron/src/main/index.ts +++ b/electron/src/main/index.ts @@ -35,7 +35,9 @@ function createWindow(): void { height: 900, show: false, autoHideMenuBar: true, + titleBarStyle: 'hidden', ...(process.platform === 'linux' ? { icon } : {}), + ...(process.platform !== "darwin" ? { titleBarOverlay: true } : {}), webPreferences: { preload: join(__dirname, '../preload/index.js'), sandbox: false diff --git a/ui/src/App.svelte b/ui/src/App.svelte index 8f746b8..62f373a 100644 --- a/ui/src/App.svelte +++ b/ui/src/App.svelte @@ -12,8 +12,11 @@ import { allowRemoteMessaging, connectionStatus, version } from 'api/src/vars' import UpdateStatus from './lib/UpdateStatus.svelte' import SettingsModal from './SettingsModal.svelte' - import { hasAccess } from './lib/util' + import { isElectron, hasAccess } from './lib/util' import News, { newsVisible } from './News.svelte' + import CustomTitleBar from './lib/CustomTitleBar.svelte' + import ButtonBar from './lib/ButtonBar.svelte' + import Welcome from './Welcome.svelte' export const ws = new WebSocketClient(`${import.meta.env.VITE_PATH || ''}/ws`) axios.defaults.baseURL = import.meta.env.VITE_PATH @@ -44,7 +47,11 @@ -
+{#if isElectron} + +{/if} + +
{#if $hasAccess} @@ -61,27 +68,7 @@ {#if $connectionStatus == 'connected'} {:else} -
-
Welcome to MeshSense!
-
-
Available bluetooth devices will appear on the left
-
If your device is on the network, enter it's IP address in the Device IP field and click Connect.
- - {#if !$hasAccess} -
If you do not see the option to connect, you can get access by connecting via localhost or by setting your Access and User key.
- {/if} - -
- For additional information, take a look at our FAQ and - Bluetooth Tips -
-
-
-
MeshSense {$version}
- - -
-
+ {/if} {#if !$expandedMap} diff --git a/ui/src/Map.svelte b/ui/src/Map.svelte index 05979d5..4dfb313 100644 --- a/ui/src/Map.svelte +++ b/ui/src/Map.svelte @@ -7,7 +7,7 @@ export function getSvgUri(name: string) { const hexId = parseInt(name).toString(16).padStart(8, '0') const colorId = hexId.slice(-6) - return 'data:image/svg+xml;utf8,' + encodeURIComponent(generateHexer({ + return 'data:image/svg+xml;utf8,' + encodeURIComponent(generateHexer({ name, borderColor: `#${colorId}` })) @@ -25,13 +25,14 @@ -

+

Map
- -
- +
+ {#if !isElectron} + + {/if}
-
MeshSense {$version}
- by Affirmatech - ♥ - - 🌎 -

+ import { hasAccess } from './lib/util' + import Card from './lib/Card.svelte' + import ButtonBar from './lib/ButtonBar.svelte' + import { isElectron } from './lib/util' + + + +

+
Welcome
+
+ {#if !isElectron} + + {/if} +
+

+ +
+
+
+
+
Welcome to MeshSense!
+
+
Available bluetooth devices will appear on the left
+
If your device is on the network, enter it's IP address in the Device IP field and click Connect.
+ + {#if !$hasAccess} +
If you do not see the option to connect, you can get access by connecting via localhost or by setting your Access and User key.
+ {/if} + +
+ For additional information, take a look at our FAQ and + Bluetooth Tips +
+
+
+
+ \ No newline at end of file diff --git a/ui/src/app.css b/ui/src/app.css index 5a957be..b553e44 100644 --- a/ui/src/app.css +++ b/ui/src/app.css @@ -48,6 +48,11 @@ h2 { @apply select-none bg-gradient-to-br from-black to-blue-950 p-1 px-3 font-bold text-white; } +.titlebar { + @apply fixed flex top-0 left-0 right-0 z-0 select-none justify-center text-center p-2 px-3 font-bold text-white; + -webkit-app-region: drag; +} + .header-t { @apply select-none bg-gradient-to-br from-black to-blue-950 p-1 px-3 font-bold text-white rounded-t; } diff --git a/ui/src/lib/ButtonBar.svelte b/ui/src/lib/ButtonBar.svelte new file mode 100644 index 0000000..faf78b3 --- /dev/null +++ b/ui/src/lib/ButtonBar.svelte @@ -0,0 +1,16 @@ + + +
+
MeshSense {$version}
+ by Affirmatech + ♥ + + 🌎 + +
\ No newline at end of file diff --git a/ui/src/lib/CustomTitleBar.svelte b/ui/src/lib/CustomTitleBar.svelte new file mode 100644 index 0000000..88c0ef6 --- /dev/null +++ b/ui/src/lib/CustomTitleBar.svelte @@ -0,0 +1,13 @@ + + +
+
{$$restProps.title}
+ {#if isElectron} +
+ +
+ {/if} +
diff --git a/ui/src/lib/util.ts b/ui/src/lib/util.ts index 37a3d78..38d0824 100644 --- a/ui/src/lib/util.ts +++ b/ui/src/lib/util.ts @@ -6,7 +6,7 @@ import axios from 'axios' export let blockUserKey = writable(false) export const userKey = writable(localStorage.getItem('userKey') || '') - +export const isElectron = window?.api != null export const hasAccess = derived([accessKey, userKey], ([$accessKey, $userKey]) => window.location.hostname == 'localhost' || ($accessKey != '' && $accessKey == $userKey)) let failedUserKeyAttempts = 0 From 919a6df8bce5cd102dadb316e459884b52b48253 Mon Sep 17 00:00:00 2001 From: Andy Shinn Date: Fri, 22 Aug 2025 20:44:23 -0500 Subject: [PATCH 2/2] center welcome message in card --- ui/src/Welcome.svelte | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/ui/src/Welcome.svelte b/ui/src/Welcome.svelte index f29096a..f1f00a0 100644 --- a/ui/src/Welcome.svelte +++ b/ui/src/Welcome.svelte @@ -14,25 +14,22 @@ {/if}
- -
-
-
-
+ +
+ +
Welcome to MeshSense!
-
-
Available bluetooth devices will appear on the left
-
If your device is on the network, enter it's IP address in the Device IP field and click Connect.
+
Available bluetooth devices will appear on the left
+
If your device is on the network, enter it's IP address in the Device IP field and click Connect.
- {#if !$hasAccess} -
If you do not see the option to connect, you can get access by connecting via localhost or by setting your Access and User key.
- {/if} + {#if !$hasAccess} +
If you do not see the option to connect, you can get access by connecting via localhost or by setting your Access and User key.
+ {/if} -
- For additional information, take a look at our FAQ and - Bluetooth Tips -
+
+ For additional information, take a look at our FAQ and + Bluetooth Tips
- \ No newline at end of file +