feat(front): list view mode (#181)

colinlienard · Sep 1, 2023 · 8268f78 · 8268f78
1 parent af67f48
commit 8268f78
Show file tree

Hide file tree

Showing 18 changed files with 472 additions and 253 deletions.
diff --git a/src/lib/components/common/Tooltip.svelte b/src/lib/components/common/Tooltip.svelte
@@ -162,7 +162,7 @@
 		background-color: variables.$grey-1;
 
 		&.fit-content {
-			max-width: fit-content;
+			max-width: max-content;
 		}
 
 		&.no-wrap {

diff --git a/src/lib/components/dashboard/Main.svelte b/src/lib/components/dashboard/Main.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { invoke } from '@tauri-apps/api/tauri';
-	import { onDestroy, onMount } from 'svelte';
 	import { cubicInOut } from 'svelte/easing';
 	import { crossfade } from 'svelte/transition';
-	import { browser } from '$app/environment';
 	import { Separator, ScrollbarContainer, NotificationColumn } from '$lib/components';
 	import { fetchGithub } from '$lib/features';
 	import { CheckIcon, UnreadIcon, PinIcon, DoubleCheckIcon } from '$lib/icons';
-	import { filteredNotifications, githubNotifications, largeScreen, settings } from '$lib/stores';
+	import { filteredNotifications, githubNotifications, settings } from '$lib/stores';
+	import { NotificationList } from './notifications';
 
 	// Sort by priority
 	$: prioritySorting = $settings.prioritySorting;
 	$: notifications = (
 		prioritySorting
-			? $filteredNotifications.sort((a, b) => (b.priority?.value || 0) - (a.priority?.value || 0))
+			? [...$filteredNotifications].sort(
+					(a, b) => (b.priority?.value || 0) - (a.priority?.value || 0)
+			  )
 			: $filteredNotifications
 	).filter((item) => !item.done);
 
@@ -22,6 +22,8 @@
 	$: unread = notifications.filter((item) => !item.pinned && item.unread && !item.done);
 	$: read = notifications.filter((item) => !item.pinned && !item.unread && !item.done);
 
+	$: verticalKanban = $settings.viewMode === 'Kanban (vertical)';
+
 	function markAllAsRead() {
 		$githubNotifications = $githubNotifications.map((notifications) =>
 			unread.includes(notifications) ? { ...notifications, unread: false } : notifications
@@ -42,91 +44,62 @@
 	const animationSettings = { duration: 400, easing: cubicInOut };
 	const [send, receive] = crossfade(animationSettings);
 	const transitions = { send, receive, settings: animationSettings };
-
-	function handleResize() {
-		if (browser && $settings.notificationAxis === 'Auto') {
-			$largeScreen = window.innerWidth > 1200;
-		}
-	}
-
-	$: switch ($settings.notificationAxis) {
-		case 'Auto':
-			handleResize();
-			break;
-		case 'Vertical':
-			$largeScreen = false;
-			break;
-		case 'Horizontal':
-			$largeScreen = true;
-			break;
-	}
-
-	$: if (browser && window.__TAURI__ && !$filteredNotifications.some((item) => item.isNew)) {
-		invoke('update_tray', { newIcon: false });
-	}
-
-	onMount(() => {
-		handleResize();
-		window.addEventListener('resize', handleResize);
-	});
-
-	onDestroy(() => {
-		if (browser) {
-			window.removeEventListener('resize', handleResize);
-		}
-	});
 </script>
 
 <ScrollbarContainer margin="0.25rem">
-	<section class="columns-container" class:horizontal={!$largeScreen}>
-		<NotificationColumn
-			icon={PinIcon}
-			title="Pinned"
-			notifications={pinned}
-			placeholder={{
-				icon: PinIcon,
-				text: 'Click on the pin icon to mark a notification as pinned.'
-			}}
-			{transitions}
-		/>
-		<Separator vertical={$largeScreen} marginX={$largeScreen ? 0 : 1.5} />
-		<NotificationColumn
-			icon={UnreadIcon}
-			title="Unread"
-			notifications={unread}
-			placeholder={{ icon: UnreadIcon, text: 'New and unread notifications will appear here.' }}
-			{transitions}
-		>
-			<div slot="header-addon">
-				{#if unread.length}
-					<button class="read-all" on:click={markAllAsRead}>
-						<CheckIcon />
-						All
-					</button>
-				{/if}
-			</div>
-		</NotificationColumn>
-		<Separator vertical={$largeScreen} marginX={$largeScreen ? 0 : 1.5} />
-		<NotificationColumn
-			icon={CheckIcon}
-			title="Read"
-			notifications={read}
-			placeholder={{
-				icon: CheckIcon,
-				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>
+	{#if $settings.viewMode === 'List'}
+		<NotificationList {notifications} />
+	{:else}
+		<section class="columns-container" class:horizontal={verticalKanban}>
+			<NotificationColumn
+				icon={PinIcon}
+				title="Pinned"
+				notifications={pinned}
+				placeholder={{
+					icon: PinIcon,
+					text: 'Click on the pin icon to mark a notification as pinned.'
+				}}
+				{transitions}
+			/>
+			<Separator vertical={!verticalKanban} marginX={!verticalKanban ? 0 : 1.5} />
+			<NotificationColumn
+				icon={UnreadIcon}
+				title="Unread"
+				notifications={unread}
+				placeholder={{ icon: UnreadIcon, text: 'New and unread notifications will appear here.' }}
+				{transitions}
+			>
+				<div slot="header-addon">
+					{#if unread.length}
+						<button class="read-all" on:click={markAllAsRead}>
+							<CheckIcon />
+							All
+						</button>
+					{/if}
+				</div>
+			</NotificationColumn>
+			<Separator vertical={!verticalKanban} marginX={!verticalKanban ? 0 : 1.5} />
+			<NotificationColumn
+				icon={CheckIcon}
+				title="Read"
+				notifications={read}
+				placeholder={{
+					icon: CheckIcon,
+					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>
+	{/if}
 </ScrollbarContainer>
 
 <style lang="scss">