fix: multiple improvements (#186)

colinlienard · Sep 9, 2023 · 42e6ba5 · 42e6ba5
1 parent e227e00
commit 42e6ba5
Show file tree

Hide file tree

Showing 14 changed files with 155 additions and 111 deletions.
diff --git a/src/lib/components/dashboard/Main.svelte b/src/lib/components/dashboard/Main.svelte
@@ -34,20 +34,25 @@
 
 	$: verticalKanban = $settings.viewMode === 'Kanban (vertical)';
 
-	function markAllAsRead() {
-		$githubNotifications = $githubNotifications.map((notifications) =>
-			unread.includes(notifications) ? { ...notifications, unread: false } : notifications
-		);
+	function readAllInGithub() {
 		fetchGithub('notifications', {
 			method: 'PUT',
 			body: { read: true }
 		});
 	}
 
+	function markAllAsRead() {
+		$githubNotifications = $githubNotifications.map((notifications) =>
+			unread.includes(notifications) ? { ...notifications, unread: false } : notifications
+		);
+		readAllInGithub();
+	}
+
 	function markAllAsDone() {
 		$githubNotifications = $githubNotifications.map((notifications) =>
 			read.includes(notifications) ? { ...notifications, done: true } : notifications
 		);
+		readAllInGithub();
 	}
 
 	// Animations settings

diff --git a/src/lib/components/dashboard/notifications/Notification.svelte b/src/lib/components/dashboard/notifications/Notification.svelte
@@ -17,7 +17,8 @@
 		MutedIcon,
 		UnpinIcon,
 		UnreadIcon,
-		ExternalLinkIcon
+		ExternalLinkIcon,
+		ThreeDotsIcon
 	} from '$lib/icons';
 	import { githubNotifications, settings } from '$lib/stores';
 	import type { NotificationData } from '$lib/types';
@@ -51,6 +52,8 @@
 		previously
 	} = data;
 	let repoUrl = `https://github.com/${owner}/${repo}`;
+	let hoverAction = false;
+	let hoverActionTimeout: ReturnType<typeof setTimeout>;
 
 	$: isTrayApp = browser && window.location.pathname === '/tray';
 
@@ -70,6 +73,17 @@
 		}
 	});
 
+	function handleHoverActions(event: MouseEvent) {
+		if (event.type === 'mouseenter') {
+			hoverAction = true;
+			clearTimeout(hoverActionTimeout);
+			return;
+		}
+		hoverActionTimeout = setTimeout(() => {
+			hoverAction = false;
+		}, 200);
+	}
+
 	function markAsReadInGitHub() {
 		fetchGithub(`notifications/threads/${id}`, { method: 'PATCH' });
 	}
@@ -86,9 +100,8 @@
 				if (key === 'pinned' && !notification.pinned && $settings.readWhenPin) {
 					return { ...notification, pinned: !notification.pinned, unread: false };
 				}
-				if (key === 'done' && unread) {
-					markAsReadInGitHub();
-					return { ...notification, done: !notification.done, unread: false };
+				if (key === 'done') {
+					return { ...notification, done: !notification.done, unread: false, pinned: false };
 				}
 				return { ...notification, [key]: !notification[key] };
 			});
@@ -97,7 +110,7 @@
 				unread = !unread;
 			}
 
-			if (key === 'unread' && unread) {
+			if ((key === 'unread' || key === 'done') && unread) {
 				markAsReadInGitHub();
 			}
 
@@ -181,70 +194,84 @@
 		</div>
 		<NotificationLabels {labels} />
 		{#if !dragged && interactive}
-			<div class="over">
-				{#if !done}
-					{#if !unread}
-						<Tooltip content="Mark as done" position="bottom right" hover>
-							<Button icon on:click={handleToggle('done')}>
-								<DoubleCheckIcon />
-							</Button>
-						</Tooltip>
-					{/if}
-					{#if unread}
-						<Tooltip content="Mark as read" position="bottom right" hover>
-							<Button icon on:click={handleToggle('unread')}>
-								<CheckIcon />
-							</Button>
-						</Tooltip>
-						<Tooltip content="Mark as done" position="bottom" hover>
-							<Button secondary icon on:click={handleToggle('done')}>
-								<DoubleCheckIcon />
+			<div
+				class="over"
+				class:large-shadow={hoverAction}
+				on:mouseenter={handleHoverActions}
+				on:mouseleave={handleHoverActions}
+				role="presentation"
+			>
+				{#if !hoverAction}
+					<div class="action-trigger">
+						<Button secondary icon>
+							<ThreeDotsIcon />
+						</Button>
+					</div>
+				{:else}
+					{#if !done}
+						{#if !unread}
+							<Tooltip content="Mark as done" position="bottom right" hover>
+								<Button icon on:click={handleToggle('done')}>
+									<DoubleCheckIcon />
+								</Button>
+							</Tooltip>
+						{/if}
+						{#if unread}
+							<Tooltip content="Mark as read" position="bottom right" hover>
+								<Button icon on:click={handleToggle('unread')}>
+									<CheckIcon />
+								</Button>
+							</Tooltip>
+							<Tooltip content="Mark as done" position="bottom" hover>
+								<Button secondary icon on:click={handleToggle('done')}>
+									<DoubleCheckIcon />
+								</Button>
+							</Tooltip>
+						{:else}
+							<Tooltip content="Mark as unread" position="bottom" hover>
+								<Button secondary icon on:click={handleToggle('unread')}>
+									<UnreadIcon />
+								</Button>
+							</Tooltip>
+						{/if}
+						<Tooltip content={pinned ? 'Unpin' : 'Pin'} position="bottom" hover>
+							<Button secondary icon on:click={handleToggle('pinned')}>
+								{#if pinned}
+									<UnpinIcon />
+								{:else}
+									<PinIcon />
+								{/if}
 							</Button>
 						</Tooltip>
 					{:else}
-						<Tooltip content="Mark as unread" position="bottom" hover>
-							<Button secondary icon on:click={handleToggle('unread')}>
-								<UnreadIcon />
+						<Tooltip content="Restore" position="bottom" hover>
+							<Button icon on:click={handleToggle('done')}>
+								<RestoreIcon />
 							</Button>
 						</Tooltip>
 					{/if}
-					<Tooltip content={pinned ? 'Unpin' : 'Pin'} position="bottom" hover>
-						<Button secondary icon on:click={handleToggle('pinned')}>
-							{#if pinned}
-								<UnpinIcon />
-							{:else}
-								<PinIcon />
-							{/if}
-						</Button>
-					</Tooltip>
-				{:else}
-					<Tooltip content="Restore" position="bottom" hover>
-						<Button icon on:click={handleToggle('done')}>
-							<RestoreIcon />
-						</Button>
-					</Tooltip>
-				{/if}
-				{#if url}
-					<Tooltip content="Open in browser" position="bottom" hover>
-						<Button secondary icon on:click={handleOpenInBrowser}>
-							<ExternalLinkIcon />
-						</Button>
-					</Tooltip>
-				{/if}
-				{#if type === 'Discussion' || type === 'Issue' || type === 'PullRequest'}
-					{#if muted}
-						<Tooltip content="Muted" position="bottom" hover>
-							<Button secondary icon on:click={handleToggle('muted')}>
-								<MutedIcon />
-							</Button>
-						</Tooltip>
-					{:else}
-						<Tooltip content="Mute" position="bottom" hover>
-							<Button secondary icon on:click={handleToggle('muted')}>
-								<MuteIcon />
+					{#if url}
+						<Tooltip content="Open in browser" position="bottom" hover>
+							<Button secondary icon on:click={handleOpenInBrowser}>
+								<ExternalLinkIcon />
 							</Button>
 						</Tooltip>
 					{/if}
+					{#if type === 'Discussion' || type === 'Issue' || type === 'PullRequest'}
+						{#if muted}
+							<Tooltip content="Muted" position="bottom" hover>
+								<Button secondary icon on:click={handleToggle('muted')}>
+									<MutedIcon />
+								</Button>
+							</Tooltip>
+						{:else}
+							<Tooltip content="Mute" position="bottom" hover>
+								<Button secondary icon on:click={handleToggle('muted')}>
+									<MuteIcon />
+								</Button>
+							</Tooltip>
+						{/if}
+					{/if}
 				{/if}
 			</div>
 		{/if}
@@ -440,18 +467,27 @@
 
 		&::before {
 			position: absolute;
-			width: 16rem;
-			height: 5rem;
+			width: 4rem;
+			height: 4rem;
 			border-radius: 0 calc(variables.$radius - 1px) calc(variables.$radius - 1px) 0;
 			background-image: radial-gradient(at top right, variables.$grey-1 25%, transparent 75%);
 			content: '';
 			inset: 0 0 auto auto;
 		}
 
+		&.large-shadow::before {
+			width: 20rem;
+			height: 6rem;
+		}
+
 		& > :global(div) {
 			height: fit-content;
 			pointer-events: all;
 		}
+
+		.action-trigger {
+			z-index: 1;
+		}
 	}
 
 	.previously {

diff --git a/src/lib/components/dashboard/notifications/NotificationLabels.svelte b/src/lib/components/dashboard/notifications/NotificationLabels.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Action } from 'svelte/action';
-	import { delayedHover } from '~/lib/features';
-	import { lightenColor } from '~/lib/helpers';
-	import type { GithubLabel } from '~/lib/types';
+	import { delayedHover } from '$lib/features';
+	import { lightenColor } from '$lib/helpers';
+	import type { GithubLabel } from '$lib/types';
 
 	export let labels: GithubLabel[] = [];
 

diff --git a/src/lib/components/dashboard/notifications/NotificationList.svelte b/src/lib/components/dashboard/notifications/NotificationList.svelte
@@ -7,11 +7,10 @@
 	export let notifications: NotificationData[];
 	export let scrollShadow = true;
 
-	$: displayNotifications = (() => {
-		const pinned = notifications.filter((item) => item.pinned);
-		const others = notifications.filter((item) => !item.pinned);
-		return [...pinned, ...others];
-	})();
+	$: displayNotifications = [...notifications]
+		.sort((a) => (!a.unread ? 1 : -1))
+		.sort((a) => (a.pinned ? 1 : -1))
+		.reverse();
 </script>
 
 <ul

diff --git a/src/lib/components/dashboard/sidebar/Sidebar.svelte b/src/lib/components/dashboard/sidebar/Sidebar.svelte
@@ -19,16 +19,13 @@
 
 	let search = '';
 
-	$: showPersonsAsCreators = $settings.showPersonsAsCreators;
 	$: showOnlyOpen = $settings.showOnlyOpen;
 
 	// Apply filters and search
 	$: $filteredNotifications = $githubNotifications.filter((notification) => {
 		const repo = $watchedRepos.find((item) => item.id === notification.repoId);
 		const person = $watchedPersons.find(
-			(item) =>
-				item.login ===
-				((showPersonsAsCreators && notification.creator?.login) || notification.author?.login)
+			(item) => item.login === (notification.creator?.login || notification.author?.login)
 		);
 
 		const searched = notification.title.toLowerCase().includes(search.toLowerCase());

diff --git a/src/lib/components/dashboard/sidebar/WatchedPersons.svelte b/src/lib/components/dashboard/sidebar/WatchedPersons.svelte
@@ -2,20 +2,18 @@
 	import { browser } from '$app/environment';
 	import { storage } from '$lib/features';
 	import { MuteIcon, MutedIcon } from '$lib/icons';
-	import { githubNotifications, loading, settings, watchedPersons } from '$lib/stores';
+	import { githubNotifications, loading, watchedPersons } from '$lib/stores';
 	import type { WatchedPerson } from '$lib/types';
 	import SidebarSection from './SidebarSection.svelte';
 
-	$: showPersonsAsCreators = $settings.showPersonsAsCreators;
-
 	// Update watched persons
 	$: if (browser && !$loading) {
 		const savedWatchedPersons = storage.get('github-watched-persons');
 
 		$watchedPersons = $githubNotifications
 			.reduce<WatchedPerson[]>((previous, current) => {
 				if (!current.author || current.done) return previous;
-				const involved = (showPersonsAsCreators && current?.creator) || current?.author;
+				const involved = current?.creator || current?.author;
 				const saved = savedWatchedPersons?.find((person) => person.login === involved?.login);
 				const index = previous.findIndex((person) => person.login === involved?.login);
 				if (index > -1) {
@@ -76,23 +74,14 @@
 			person.bot ? { ...person, active } : person
 		);
 	}
-
-	function handleShowPersonsAsCreators(active: boolean) {
-		$settings.showPersonsAsCreators = active;
-	}
 </script>
 
 <SidebarSection
-	title="Persons"
-	description="Authors of notifications."
+	title="Authors"
+	description="Perons who created PRs and issues, or authors of notifications."
 	bind:items={$watchedPersons}
 	actions={[
-		{ text: 'Show bots', active: botsHidden, onToggle: handleHideBots, disabled: !botsPresent },
-		{
-			text: 'Show as created by (only for pull requests and issues)',
-			active: $settings.showPersonsAsCreators,
-			onToggle: handleShowPersonsAsCreators
-		}
+		{ text: 'Show bots', active: botsHidden, onToggle: handleHideBots, disabled: !botsPresent }
 	]}
 >
 	{#if $watchedPersons.length}

diff --git a/src/lib/components/settings/permissions/PatItem.svelte b/src/lib/components/settings/permissions/PatItem.svelte
@@ -23,6 +23,7 @@
 	}
 
 	function handleDelete() {
+		dispatchEvent(new CustomEvent('refetch'));
 		showDeleteConfirm = false;
 		$settings.pats = $settings.pats.filter((p) => p.owner !== pat.owner);
 	}
@@ -36,8 +37,11 @@
 			error = 'This owner already exists.';
 			return;
 		}
+
 		$settings.pats.push(pat);
 		$settings.pats = $settings.pats;
+
+		dispatchEvent(new CustomEvent('refetch'));
 		dispatch('exit');
 	}