logout button and small fixes (#477)

modules/desktop/src/components/popout-menu/popout-menu.svelte

@@ -18,8 +18,24 @@
 </script>
 
 <nav class="w-full p-2 text-sm" use:mouseLeaveDelay={2000} on:leave_delay={() => hidePopup()}>
-	<!-- <SelectLang />
-	<hr /> -->
+	<button
+		class="hover:bg-gray outline-gray focus:bg-secondary h-8 w-full p-1 text-left outline-1 transition-all hover:bg-opacity-25 hover:outline"
+	>
+		language
+	</button>
+	<hr />
+	<button
+		class="hover:bg-gray outline-gray focus:bg-secondary h-8 w-full p-1 text-left outline-1 transition-all hover:bg-opacity-25 hover:outline"
+	>
+		docs
+	</button>
+	<hr />
+	<button
+		class="hover:bg-gray outline-gray focus:bg-secondary h-8 w-full p-1 text-left outline-1 transition-all hover:bg-opacity-25 hover:outline"
+	>
+		update tea
+	</button>
+	<hr />
 	<button
 		class="hover:bg-gray outline-gray focus:bg-secondary h-8 w-full p-1 text-left outline-1 transition-all hover:bg-opacity-25 hover:outline"
 		class:animate-pulse={submittedMessage === "syncing..."}

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

@@ -3,10 +3,13 @@
 	import { getSession } from "@native";
 	import { baseUrl } from "$libs/v1-client";
 	import { shellOpenExternal } from "@native";
+	import mouseLeaveDelay from "@tea/ui/lib/mouse-leave-delay";
 	const { user } = authStore;
 
 	$: authenticating = false;
 
+	$: isLogoutOpen = false;
+
 	const openGithub = async () => {
 		if (!authenticating) {
 			authenticating = true;
@@ -25,27 +28,48 @@
 				authenticating = false;
 			}
 		}
+		isLogoutOpen = false;
 	};
+
+	const logout = () => authStore.clearSession();
+
+	const preventDoubleClick = (evt: MouseEvent) => evt.stopPropagation();
 </script>
 
 {#if $user}
-	<section
-		class="border-gray text-gray group flex h-[28px] w-[120px] items-center justify-between rounded-sm border pl-2 text-sm transition-all 
-  hover:bg-[#e1e1e1] hover:text-black"
-	>
-		<div class="text-gray line-clamp-1 group-hover:text-black">@{$user?.login}</div>
-		<img
-			id="avatar"
-			class="flex rounded-sm"
-			src={$user?.avatar_url || "/images/bored-ape.png"}
-			alt="profile"
-		/>
-	</section>
+	<div class="relative" use:mouseLeaveDelay={2000} on:leave_delay={() => (isLogoutOpen = false)}>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<section
+			class="border-gray text-gray group flex h-[28px] w-[120px] items-center justify-between rounded-sm border bg-black pl-2 text-sm transition-all 
+		hover:bg-[#e1e1e1] hover:text-black"
+			on:click={() => (isLogoutOpen = !isLogoutOpen)}
+			on:dblclick={preventDoubleClick}
+		>
+			<div class="text-gray line-clamp-1 group-hover:text-black">@{$user?.login}</div>
+			<img
+				id="avatar"
+				class="flex rounded-sm"
+				src={$user?.avatar_url || "/images/bored-ape.png"}
+				alt="profile"
+			/>
+		</section>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			class="border-gray text-gray group absolute z-50 mt-1 flex h-[28px] w-[120px] items-center justify-between rounded-sm border bg-black pl-3 text-sm transition-all 
+		hover:bg-[#e1e1e1] hover:text-black"
+			class:invisible={!isLogoutOpen}
+			class:visible={isLogoutOpen}
+			on:click={logout}
+		>
+			logout
+		</div>
+	</div>
 {:else}
 	<button
 		class="border-gray text-gray h-[28px] w-[120px] rounded-sm border px-1 text-sm transition-all hover:bg-[#e1e1e1] hover:text-black"
 		class:animate-pulse={authenticating}
 		on:click={openGithub}
+		on:dblclick={preventDoubleClick}
 	>
 		login
 	</button>
@@ -53,7 +77,7 @@
 
 <style>
 	#avatar {
-    padding: 1px;
+		padding: 1px;
 		height: 26px !important;
 		width: 26px !important;
 	}

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

@@ -1,32 +1,35 @@
 <script lang="ts">
 	import { shellOpenExternal, submitLogs } from "@native";
-	// import { navStore } from "$libs/stores";
+	import { navStore } from "$libs/stores";
 	import LoginButton from "./login-button.svelte";
-	// const { sideNavOpen } = navStore;
+	const { sideNavOpen } = navStore;
 
-	// const toggleSideNav = () => {
-	// 	sideNavOpen.update((v) => !v);
-	// };
+	const toggleSideNav = () => {
+		sideNavOpen.update((v) => !v);
+	};
 
 	const submitBugReport = async () => {
 		const logId = await submitLogs();
 		const bugFormUrl = `https://airtable.com/shravDxWeNwwpPkFV?prefill_log_id=${logId}&hide_log_id=true`;
 		shellOpenExternal(bugFormUrl);
-	}
+	};
+
+	const preventDoubleClick = (evt: MouseEvent) => evt.stopPropagation();
 </script>
 
 <div class="mr-1 flex h-full items-center justify-end gap-2 p-2">
 	<button
 		class="border-gray group flex h-[28px] w-[28px] items-center justify-center rounded-sm border hover:bg-[#e1e1e1]"
 		on:click={() => submitBugReport()}
+		on:dblclick={preventDoubleClick}
 	>
 		<div class="icon-bug text-l text-gray flex group-hover:text-black" />
 	</button>
-	<!--
-	unused: the popout menu only have sync logs atm	
-	<button
+	<!-- Add this back when dropdown is ready -->
+	<!-- <button
 		class="border-gray group flex h-[28px] w-[28px] items-center justify-center rounded-sm border hover:bg-[#e1e1e1]"
 		on:click={toggleSideNav}
+		on:dblclick={preventDoubleClick}
 	>
 		<div class="icon-gear text-l text-gray flex group-hover:text-black" />
 	</button> -->

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

@@ -18,7 +18,7 @@
 </script>
 
 <header
-	class="border-gray flex h-12 w-full items-center justify-between border border-x-0 border-t-0 pr-2"
+	class="border-gray relative z-20 flex h-12 w-full items-center justify-between border border-x-0 border-t-0 pr-2"
 	style="-webkit-app-region: drag"
 	on:dblclick={topbarDoubleClick}
 >

modules/desktop/src/libs/stores/auth.ts

@@ -12,7 +12,7 @@ export const getSession = async (): Promise<Session | null> => {
 };
 
 export default function initAuthStore() {
-	const user = writable<Developer>();
+	const user = writable<Developer | undefined>();
 	const sessionStore = writable<Session>({});
 	let pollLoop = 0;
 
@@ -70,11 +70,17 @@ export default function initAuthStore() {
 		}
 	}
 
+	function clearSession() {
+		updateSession({ key: undefined, user: undefined });
+		user.set(undefined);
+	}
+
 	return {
 		user,
 		session: sessionStore,
 		deviceId,
 		deviceIdStore,
-		pollSession
+		pollSession,
+		clearSession
 	};
 }

modules/desktop/src/routes/+layout.svelte

@@ -59,7 +59,7 @@
 
 <div id="main-layout" class="font-inter border-gray rounded-xl border transition-all">
 	<TopBar />
-	<div class="scroll-manager relative">
+	<div class="scroll-manager relative z-10">
 		<section class="relative" bind:this={view}>
 			<div class="content">
 				<slot />
@@ -116,7 +116,6 @@
 		overflow-x: hidden;
 	}
 
-
 	/* width */
 	::-webkit-scrollbar {
 		width: 6px;

modules/ui/src/lib/mouse-leave-delay.ts

@@ -21,7 +21,6 @@ export default function mouseLeaveDelay(element: HTMLElement, timeout = 600) {
 		timeoutId = setTimeout(() => {
 			if (isOut && element) {
 				element.dispatchEvent(new CustomEvent("leave_delay"));
-				onDestroy();
 			}
 		}, timeout);
 	};

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

@@ -43,9 +43,11 @@
 			return false;
 		};
 	});
+
+	const preventDoubleClick = (evt: MouseEvent) => evt.stopPropagation();
 </script>
 
-<section class="flex items-center pb-1 {size} {clazz}">
+<section class="flex items-center pb-1 {size} {clazz}" on:dblclick={preventDoubleClick}>
 	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>