refactor(front): improve settings (#123)

colinlienard · Jul 8, 2023 · 95b5678 · 95b5678 · vercel · Jul 8, 2023
1 parent 32bc5e7
commit 95b5678
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 92 deletions.
diff --git a/src/app.html b/src/app.html
@@ -16,6 +16,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
+		<div id="root" style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/common/Modal.svelte b/src/lib/components/common/Modal.svelte
@@ -20,7 +20,7 @@
 	function portal(node: HTMLElement, _: boolean) {
 		return {
 			update() {
-				document.body.appendChild(node);
+				document.querySelector('#root')?.appendChild(node);
 			},
 			destroy() {
 				node.parentNode?.removeChild(node);
@@ -47,9 +47,11 @@
 	}
 </script>
 
-<button class="trigger" on:click={handleToggle}>
-	<slot name="trigger" />
-</button>
+{#if $$slots.trigger}
+	<button class="trigger" on:click={handleToggle}>
+		<slot name="trigger" />
+	</button>
+{/if}
 
 <div use:portal={open}>
 	{#if open}

diff --git a/src/lib/components/dashboard/Main.svelte b/src/lib/components/dashboard/Main.svelte
@@ -335,18 +335,13 @@
 
 		.read-all {
 			@include typography.small;
-			@include typography.bold;
+			@include mixins.link;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			gap: 0.25rem;
-			color: variables.$blue-3;
 			z-index: 1;
 
-			&:hover {
-				filter: brightness(130%);
-			}
-
 			:global(svg) {
 				height: 1rem;
 			}

diff --git a/src/lib/components/settings/Settings.svelte b/src/lib/components/settings/Settings.svelte
@@ -11,23 +11,36 @@
 	import Update from './Update.svelte';
 	import type { GithubRelease } from '~/lib/types';
 	import Permissions from './permissions';
+	import { GearIcon } from '~/lib/icons';
 
 	let mounted = false;
 	let forceOpenSettings = false;
 	let scrollContainer: SvelteComponent;
+	let imageLoaded = false;
 
 	$: tabs = [
 		{ name: 'Preferences', component: Preferences },
 		{ name: 'GitHub settings', component: GithubSettings },
 		{ name: 'Permissions', component: Permissions },
 		{ name: 'Accounts', component: Accounts },
 		...(browser && window.__TAURI__
-			? [{ name: 'Update', indicator: !!$updateAvailable, component: Update }]
+			? [{ name: 'Update', strong: !!$updateAvailable, component: Update }]
 			: [])
-	] satisfies Array<{ name: string; indicator?: boolean; component: ComponentType }>;
+	] satisfies Array<{ name: string; strong?: boolean; component: ComponentType }>;
 
 	const user = $page.data.session?.user;
 
+	// Check if an update is available every hour
+	const interval = setInterval(async () => {
+		if (!window.__TAURI__) return;
+
+		const release = await fetchGithub<GithubRelease>('repos/colinlienard/gitlight/releases/latest');
+		const latest = release.tag_name.split('v')[1];
+		if (latest !== getAppVersion()) {
+			$updateAvailable = latest;
+		}
+	}, 3600000);
+
 	function handleKeyDown(event: KeyboardEvent) {
 		if (!browser) return;
 		if (event.key === ',' && event.metaKey) {
@@ -39,6 +52,13 @@
 		}
 	}
 
+	function handleTrigger(tab: number) {
+		return () => {
+			$settingsTab = tab;
+			forceOpenSettings = true;
+		};
+	}
+
 	onMount(async () => {
 		const saved = storage.get('settings');
 		if (saved) {
@@ -53,6 +73,7 @@
 	});
 
 	onDestroy(() => {
+		clearInterval(interval);
 		if (browser) {
 			window.removeEventListener('keydown', handleKeyDown);
 		}
@@ -62,44 +83,40 @@
 		storage.set('settings', $settings);
 	}
 
-	$: if (forceOpenSettings) {
-		$settingsTab = storage.has('settings') ? 0 : 1;
-
-		(async () => {
-			if (!window.__TAURI__) return;
-
-			const release = await fetchGithub<GithubRelease>(
-				'repos/colinlienard/gitlight/releases/latest'
-			);
-			const latest = release.tag_name.split('v')[1];
-			if (latest !== getAppVersion()) {
-				$updateAvailable = latest;
-			}
-		})();
-	}
-
 	$: {
 		$settingsTab;
-		scrollContainer?.scrollTo(0, 0);
+		scrollContainer?.scrollTo && scrollContainer?.scrollTo(0, 0);
 	}
 </script>
 
-<Modal title="Settings" bind:open={forceOpenSettings}>
-	<button class="trigger" slot="trigger">
-		<img class="image" src={user?.avatar} alt="" />
+<div class="triggers">
+	<button
+		class="preferences-trigger"
+		on:click={handleTrigger(($settingsTab = $updateAvailable ? 4 : 0))}
+	>
+		<GearIcon />
 		{#if $updateAvailable}
 			<div class="indicator" />
 		{/if}
 	</button>
+	<button class="account-trigger" on:click={handleTrigger(($settingsTab = 3))}>
+		<img
+			class="image"
+			class:loaded={imageLoaded}
+			src={user?.avatar}
+			alt=""
+			on:load={() => (imageLoaded = true)}
+		/>
+	</button>
+</div>
+
+<Modal title="Settings" bind:open={forceOpenSettings}>
 	<div class="content" slot="content">
 		<ul class="tabs">
 			{#each tabs as tab, index}
-				<li class="tab" class:active={$settingsTab === index}>
+				<li class="tab" class:strong={tab.strong} class:active={$settingsTab === index}>
 					<button on:click={() => ($settingsTab = index)}>
 						{tab.name}
-						{#if tab.indicator}
-							<div class="indicator">1</div>
-						{/if}
 					</button>
 				</li>
 			{/each}
@@ -114,40 +131,53 @@
 </Modal>
 
 <style lang="scss">
-	.trigger {
-		position: relative;
-		transition: opacity variables.$transition;
-
-		&:hover {
-			opacity: 0.75;
-		}
+	.triggers {
+		display: flex;
+		gap: 1rem;
 
-		.image {
+		.preferences-trigger {
+			position: relative;
 			width: 2rem;
 			height: 2rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			border-radius: 50%;
-			background-color: variables.$grey-2;
+			transition: background-color variables.$transition;
+
+			&:hover {
+				background-color: variables.$grey-3;
+			}
+
+			:global(svg) {
+				height: 1.25rem;
+			}
+
+			.indicator {
+				width: 0.75rem;
+				height: 0.75rem;
+				border-radius: 50%;
+				background-color: variables.$blue-2;
+				position: absolute;
+				inset: 0 auto auto 0;
+			}
 		}
 
-		.indicator {
-			width: 1rem;
-			height: 1rem;
-			border-radius: 50%;
-			background-color: variables.$blue-2;
-			position: absolute;
-			inset: -0.25rem auto auto -0.25rem;
-			box-shadow: 0 0 0.5rem variables.$grey-2;
-			animation: pulse 1s infinite ease-in-out;
-
-			@keyframes pulse {
-				0% {
-					scale: 0.75;
-				}
-				50% {
-					scale: 1;
-				}
-				100% {
-					scale: 0.75;
+		.account-trigger {
+			transition: opacity variables.$transition;
+
+			&:hover {
+				opacity: 0.75;
+			}
+
+			.image {
+				width: 2rem;
+				height: 2rem;
+				border-radius: 50%;
+				transition: opacity variables.$transition;
+
+				&:not(.loaded) {
+					opacity: 0;
 				}
 			}
 		}
@@ -172,25 +202,14 @@
 					color: variables.$grey-4;
 				}
 
+				&.strong button {
+					@include mixins.link;
+				}
+
 				button {
 					width: 100%;
 					text-align: left;
 					position: relative;
-
-					.indicator {
-						@include typography.small;
-						@include typography.bold;
-						width: 1.5rem;
-						height: 1.5rem;
-						border-radius: 50%;
-						background-color: variables.$blue-2;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						color: variables.$white;
-						position: absolute;
-						inset: -0.2rem auto auto calc(100% + 0.5rem);
-					}
 				}
 			}
 		}

diff --git a/src/lib/components/settings/Update.svelte b/src/lib/components/settings/Update.svelte
@@ -3,15 +3,18 @@
 	import { Button } from '~/lib/components';
 	import { updateAvailable } from '~/lib/stores';
 
+	let loading = false;
+
 	async function update() {
+		loading = true;
 		await emit('tauri://update');
 	}
 </script>
 
 {#if $updateAvailable}
 	<div class="card">
 		<p>Version {$updateAvailable} is available!</p>
-		<Button on:click={update}>Install it now</Button>
+		<Button on:click={update} {loading}>Install it now</Button>
 	</div>
 {:else}
 	<p>GitLight is up to date.</p>

diff --git a/src/lib/components/settings/permissions/PatItem.svelte b/src/lib/components/settings/permissions/PatItem.svelte
@@ -104,12 +104,7 @@
 			}
 
 			.show-token {
-				@include typography.bold;
-				color: variables.$blue-3;
-
-				&:hover {
-					filter: brightness(130%);
-				}
+				@include mixins.link;
 			}
 		}
 

diff --git a/src/lib/components/settings/permissions/Permissions.svelte b/src/lib/components/settings/permissions/Permissions.svelte
@@ -86,11 +86,7 @@
 		}
 
 		a {
-			color: variables.$blue-3;
-
-			&:hover {
-				text-decoration: underline;
-			}
+			@include mixins.link;
 		}
 	}
 

diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use './typography';
 @use './variables';
 
 @mixin shiny($color, $hover: true, $radius: variables.$radius) {
@@ -31,6 +32,16 @@
 	border-radius: variables.$radius;
 }
 
+@mixin link() {
+	@include typography.bold;
+	color: variables.$blue-3;
+	transition: filter variables.$transition;
+
+	&:hover {
+		filter: brightness(130%);
+	}
+}
+
 @mixin shadow {
 	box-shadow: 0 2px 0.25rem rgba(black, 0.1);
 }