feat(front): add done state for notifications (colinlienard#121)

src/lib/components/common/Button.svelte

@@ -3,6 +3,7 @@
 
 	export let type: 'primary' | 'secondary' = 'primary';
 	export let small = false;
+	export let icon = false;
 	export let href: string | undefined = undefined;
 	export let external = false;
 	export let loading = false;
@@ -21,6 +22,7 @@
 	<a
 		class="button {type}"
 		class:small
+		class:icon
 		class:loading
 		class:disabled
 		{href}
@@ -33,7 +35,14 @@
 		</span>
 	</a>
 {:else}
-	<button class="button {type}" class:small class:loading class:disabled on:click={handleClick}>
+	<button
+		class="button {type}"
+		class:small
+		class:icon
+		class:loading
+		class:disabled
+		on:click={handleClick}
+	>
 		<span class="content">
 			<slot />
 		</span>
@@ -48,6 +57,7 @@
 		@include mixins.shiny(variables.$blue-2);
 		@include mixins.shadow;
 		display: block;
+		--svg-size: 1.25rem;
 
 		&.secondary {
 			@include mixins.shiny(variables.$grey-3);
@@ -56,22 +66,25 @@
 		&:not(.small) {
 			@include typography.bold;
 			padding: 0.75em 1em;
-			--svg-size: 1.25rem;
 
 			.content {
 				gap: 0.5em;
 			}
 		}
 
-		&.small {
+		&.small,
+		&.icon {
 			padding: 0.5rem;
-			--svg-size: 1rem;
 
 			.content {
 				gap: 0.25em;
 			}
 		}
 
+		&.small {
+			--svg-size: 1rem;
+		}
+
 		&.loading,
 		&.disabled {
 			opacity: 0.5;

src/lib/components/common/Modal.svelte

@@ -99,6 +99,7 @@
 
 		&.small {
 			width: 32rem;
+			height: 32rem;
 		}
 
 		.header {
@@ -114,7 +115,6 @@
 		}
 
 		.content {
-			padding: 2rem;
 			height: 100%;
 			overflow: hidden;
 		}

src/lib/components/common/Tooltip.svelte

@@ -89,6 +89,7 @@
 		<div
 			class="tooltip {position}"
 			class:no-wrap={width === 'auto'}
+			class:fit-content={typeof content === 'string'}
 			transition:fade={{ duration: 150, easing: sineInOut }}
 			style:width
 		>
@@ -141,6 +142,7 @@
 <style lang="scss">
 	.container {
 		position: relative;
+		z-index: 1;
 	}
 
 	.tooltip {
@@ -152,10 +154,18 @@
 		display: flex;
 		flex-direction: column;
 
+		&.fit-content {
+			max-width: fit-content;
+		}
+
 		&.no-wrap {
 			white-space: nowrap;
 		}
 
+		&:not(.no-wrap) {
+			@include typography.base;
+		}
+
 		&.left {
 			top: 50%;
 			right: calc(100% + 0.25rem);
@@ -184,6 +194,7 @@
 		&.top {
 			&.left {
 				left: 0;
+				right: unset;
 				translate: 0 0;
 			}
 

src/lib/components/dashboard/DoneModal.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { Button, Modal, ScrollbarContainer } from '~/lib/components';
+	import { DoubleCheckIcon } from '~/lib/icons';
+	import { githubNotifications } from '~/lib/stores';
+	import Notification from './Notification.svelte';
+
+	$: dones = $githubNotifications.filter(({ done }) => done);
+</script>
+
+{#if dones.length}
+	<div class="wrapper">
+		<Modal title="Done" small>
+			<Button slot="trigger" type="secondary" small>
+				<DoubleCheckIcon />
+				Done
+			</Button>
+			<ScrollbarContainer slot="content" margin="2rem 1rem">
+				<ul class="list">
+					{#each dones as notification (notification.id)}
+						<li class="list-item">
+							<Notification data={notification} />
+						</li>
+					{/each}
+				</ul>
+			</ScrollbarContainer>
+		</Modal>
+	</div>
+{/if}
+
+<style lang="scss">
+	.wrapper {
+		margin-left: auto;
+	}
+
+	.list {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		padding: 2rem;
+	}
+</style>

src/lib/components/dashboard/Main.svelte

@@ -19,22 +19,22 @@
 		Logo,
 		UnreadIcon,
 		PinIcon,
-		RefreshIcon
+		RefreshIcon,
+		DoubleCheckIcon
 	} from '~/lib/icons';
 	import { fetchGithub } from '~/lib/helpers';
 	import { browser } from '$app/environment';
+	import DoneModal from './DoneModal.svelte';
 
 	export let synced: boolean;
 
 	let syncTime = 0;
 	let interval: ReturnType<typeof setInterval>;
 
 	// Filter events
-	$: pinned = $filteredNotifications.filter((item) => item.pinned);
-	$: unread = $filteredNotifications.filter((item) => !item.pinned && item.unread);
-	$: read = $filteredNotifications.filter((item) => !item.pinned && !item.unread);
-
-	$: showReadAll = unread.length > 0;
+	$: pinned = $filteredNotifications.filter((item) => item.pinned && !item.done);
+	$: unread = $filteredNotifications.filter((item) => !item.pinned && item.unread && !item.done);
+	$: read = $filteredNotifications.filter((item) => !item.pinned && !item.unread && !item.done);
 
 	$: if (synced && !syncTime) {
 		interval = setInterval(() => {
@@ -55,6 +55,12 @@
 		});
 	}
 
+	function markAllAsDone() {
+		$githubNotifications = $githubNotifications.map((notifications) =>
+			read.includes(notifications) ? { ...notifications, done: true } : notifications
+		);
+	}
+
 	// Animations settings
 	const animationSettings = { duration: 400, easing: cubicInOut };
 	const [send, receive] = crossfade(animationSettings);
@@ -137,6 +143,7 @@
 			<p class="text">GitLab</p>
 			<div class="tag soon">Coming soon</div>
 		</button>
+		<DoneModal />
 	</nav>
 	<ScrollbarContainer>
 		<section class="columns-container" class:horizontal={!$largeScreen}>
@@ -159,7 +166,7 @@
 				{transitions}
 			>
 				<div slot="header-addon">
-					{#if showReadAll}
+					{#if unread.length}
 						<button class="read-all" on:click={markAllAsRead}>
 							<CheckIcon />
 							All
@@ -177,7 +184,16 @@
 					text: 'Click on the check icon to mark a notification as read.'
 				}}
 				{transitions}
-			/>
+			>
+				<div slot="header-addon">
+					{#if read.length}
+						<button class="read-all" on:click={markAllAsDone}>
+							<DoubleCheckIcon />
+							All
+						</button>
+					{/if}
+				</div>
+			</NotificationColumn>
 		</section>
 	</ScrollbarContainer>
 </main>