Custom title bar (#278)

* #127 intiialize custom title bar

---------

Co-authored-by: neil <neil@neils-MacBook-Pro.local>

modules/desktop/electron/electron.ts

@@ -1,5 +1,6 @@
 import windowStateManager from "electron-window-state";
 import { app, BrowserWindow, ipcMain, net } from "electron";
+import { setupTitlebar, attachTitlebarToWindow } from "custom-electron-titlebar/main";
 import * as Sentry from "@sentry/electron";
 import contextMenu from "electron-context-menu";
 import serve from "electron-serve";
@@ -34,6 +35,8 @@ const port = process.env.PORT || 3000;
 const allowDebug = !app.isPackaged || process.env.DEBUG_BUILD === "1";
 let mainWindow: BrowserWindow | null;
 
+setupTitlebar();
+
 function createWindow() {
 	const windowState = windowStateManager({
 		defaultWidth: 800,
@@ -41,11 +44,12 @@ function createWindow() {
 	});
 
 	const mainWindow = new BrowserWindow({
+		titleBarStyle: "hidden",
 		backgroundColor: "black",
 		autoHideMenuBar: true,
 		trafficLightPosition: {
-			x: 17,
-			y: 32
+			x: 14,
+			y: 13
 		},
 		minHeight: 450,
 		minWidth: 500,
@@ -74,6 +78,7 @@ function createWindow() {
 		windowState.saveState(mainWindow);
 	});
 
+	attachTitlebarToWindow(mainWindow);
 	return mainWindow;
 }
 

modules/desktop/electron/preload.cjs

@@ -1,3 +1,5 @@
+import { Titlebar } from "custom-electron-titlebar";
+
 const isVite = () => {
 	try {
 		return window.location.href.includes("is-vite");
@@ -17,3 +19,10 @@ if (!isVite()) {
 		SvelteSentry.init
 	);
 }
+
+window.addEventListener("DOMContentLoaded", () => {
+	// Title bar implemenation
+	new Titlebar({
+		titleHorizontalAlignment: "left"
+	});
+});

modules/desktop/package.json

@@ -82,6 +82,7 @@
 		"axios": "^1.3.2",
 		"bcryptjs": "^2.4.3",
 		"buffer": "^6.0.3",
+		"custom-electron-titlebar": "4.2.0-beta.0",
 		"dayjs": "^1.11.7",
 		"electron-context-menu": "^3.6.1",
 		"electron-log": "^4.4.8",

modules/desktop/src/components/top-bar/top-bar.svelte

@@ -21,20 +21,26 @@
 	});
 </script>
 
-<header class="border-gray flex w-full border border-l-0 border-r-0">
-	<a href="/">
-		<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
-	</a>
-	<ul class="text-gray flex h-10 gap-4 pl-4 align-middle leading-10">
-		<button on:click={navStore.back} class={$prevPath ? 'active' : ''}>&#8592</button>
-		<button on:click={navStore.next} class={$nextPath ? 'active' : ''}>&#8594</button>
-	</ul>
-	<SearchInput
-		class="flex-grow border border-none py-4"
-		size="small"
-		placeholder={$t("store-search-placeholder")}
-		{onSearch}
-	/>
+<header class="border-gray flex w-full border border-l-0 border-r-0" style="-webkit-app-region: drag">
+	<div class="w-16 mr-2">
+		<!-- just spacing for the close/expand/ buttons in title bar
+			todo: handle this different when on linux probably move to right
+		-->
+	</div>
+	{#if $prevPath || $nextPath}
+		<ul class="text-gray flex h-10 gap-4 pl-2 align-middle leading-10 mr-2">
+			<button on:click={navStore.back} class={$prevPath ? 'active' : ''}>&#8592</button>
+			<button on:click={navStore.next} class={$nextPath ? 'active' : ''}>&#8594</button>
+		</ul>
+	{/if}
+	<div class="p-1 flex-grow h-8">
+		<SearchInput
+			class="w-full border border-gray rounded-sm"
+			size="small"
+			placeholder={$t("store-search-placeholder")}
+			{onSearch}
+		/>
+	</div>
 	<!-- <ul class="text-gray flex gap-4 pr-4 pt-2 align-middle">
 		<button class="icon-filter hover:text-white" />
 		<button class="icon-share hover:text-white" />

modules/desktop/src/libs/translations/translations.json

@@ -6,7 +6,7 @@
 		"cli": {
 			"install": "install tea"
 		},
-		"store-search-placeholder": "search the tea store",
+		"store-search-placeholder": "type to search",
 		"search": "search",
 		"home": {
 			"discover-title": "DISCOVER",

modules/ui/src/search-input/search-input.svelte

@@ -17,7 +17,7 @@
 	};
 </script>
 
-<section class={`flex items-center border-b border-r-0 border-l-0 py-2 ${size} ${clazz}`}>
+<section class={`flex items-center pb-1 ${size} ${clazz}`}>
 	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>
@@ -26,15 +26,18 @@
 
 <!-- <input type="search" class="w-full bg-black h-12 p-4 border border-x-0 border-gray"/> -->
 <style>
+	section {
+		padding-top: 0.15rem;
+	}
 	.icon-search-icon {
 		color: #949494;
-		margin-right: 20px;
+		margin-right: 10px;
 		position: relative;
-		top: 2px;
+		top: 3px;
 	}
 
 	section.medium .icon-search-icon {
-		font-size: 30px;
+		font-size: 24px;
 	}
 
 	section.medium {
@@ -47,7 +50,6 @@
 	section input {
 		font-family: "pp-neue-machina", sans-serif;
 		color: #00ffd0;
-		text-transform: uppercase;
 		margin-bottom: -5px;
 		min-width: 60%;
 		padding: 0px;
@@ -59,7 +61,7 @@
 	}
 
 	section.medium input {
-		font-size: 24px;
+		font-size: 16px;
 	}
 	section.large input {
 		font-size: 32px;

pnpm-lock.yaml

@@ -42,6 +42,7 @@ importers:
       buffer: ^6.0.3
       concurrently: ^7.6.0
       cross-env: ^7.0.3
+      custom-electron-titlebar: 4.2.0-beta.0
       dayjs: ^1.11.7
       electron: 22.1.0
       electron-builder: ^23.6.0
@@ -93,6 +94,7 @@ importers:
       axios: 1.3.2
       bcryptjs: 2.4.3
       buffer: 6.0.3
+      custom-electron-titlebar: 4.2.0-beta.0_electron@22.1.0
       dayjs: 1.11.7
       electron-context-menu: 3.6.1
       electron-log: 4.4.8
@@ -6006,6 +6008,14 @@ packages:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
     dev: true
 
+  /custom-electron-titlebar/4.2.0-beta.0_electron@22.1.0:
+    resolution: {integrity: sha512-d2HMG5uwlnTk6Qug37lYUsRFchXgqEyjhR+b9FnyIAN2l+GGnJohLOfmjgzBM3w/9TmuKI4XGvQiiyHujuZskg==}
+    peerDependencies:
+      electron: '>20.0.0'
+    dependencies:
+      electron: 22.1.0
+    dev: false
+
   /data-urls/3.0.2:
     resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
     engines: {node: '>=12'}