fix: views do not invoke commands anymore, only main app

.prettierignore

@@ -6,3 +6,5 @@ yarn.lock
 /src-tauri
 src/bindings.ts
 /.vscode
+
+CHANGELOG.md

src/App.svelte

@@ -4,7 +4,7 @@
 	import Record from './view/Record.svelte';
 	import Menu from './view/Menu.svelte';
 	import List from './view/List.svelte';
-	import { todaysHighlight } from './store';
+	import { highlights, todaysHighlight } from './store';
 	import Spinner from './lib/components/Spinner.svelte';
 	import JumpToTopButton from './lib/components/JumpToTopButton.svelte';
 	import { getToday } from './lib/utils/date';
@@ -40,6 +40,11 @@
 	};
 
 	const toMenu = () => (state = AppState.Menu);
+	const toList = async () => {
+		state = AppState.Loading;
+		$highlights = await commands.listHighlights();
+		state = AppState.List;
+	};
 
 	const deleteHighlights = async ({ detail: ids }: CustomEvent<number[]>) => {
 		await commands.deleteHighlight(ids);
@@ -62,11 +67,7 @@
 	</div>
 {:else if state === AppState.Menu}
 	<div in:fade={{ duration: 200 }}>
-		<Menu
-			on:toNew={() => (state = AppState.Record)}
-			on:toList={() => (state = AppState.List)}
-			on:exit={quit}
-		/>
+		<Menu on:toNew={() => (state = AppState.Record)} on:toList={toList} on:exit={quit} />
 	</div>
 {:else if state === AppState.Record}
 	<div in:fade={{ duration: 100 }}>

src/store.ts

@@ -2,3 +2,4 @@ import { writable, type Writable } from 'svelte/store';
 import type { Highlight } from './bindings';
 
 export const todaysHighlight: Writable<Highlight[]> = writable([]);
+export const highlights: Writable<Highlight[]> = writable([]);

src/view/List.svelte

@@ -1,26 +1,17 @@
 <script lang="ts">
-	import { commands, type Highlight } from '../bindings';
+	import { type Highlight } from '../bindings';
 	import dayjs from 'dayjs';
 	import RandomEmoji from '../lib/components/RandomEmoji.svelte';
 	import { happyEmojis, sadEmojis } from '../lib/constants/emojis';
 	import ViewHeader from '@/lib/layouts/ViewHeader.svelte';
 	import ViewMain from '@/lib/layouts/ViewMain.svelte';
 	import { randomColor } from '@/lib/utils/color';
-	import { onMount } from 'svelte';
-	import Spinner from '@/lib/components/Spinner.svelte';
 	import { DATE_FORMAT } from '@/lib/utils/date';
-
-	let loading = true;
-	let highlights: Highlight[] = [];
-
-	onMount(async () => {
-		highlights = await commands.listHighlights();
-		loading = false;
-	});
+	import { highlights } from '@/store';
 
 	type GroupedHighlights = Record<string, Highlight[]>;
 
-	$: shownHighlights = highlights.reduce((group: GroupedHighlights, highlight) => {
+	$: shownHighlights = $highlights.reduce((group: GroupedHighlights, highlight) => {
 		const date = dayjs(highlight.created_at).format(DATE_FORMAT);
 		if (!group[date]) {
 			group[date] = [];
@@ -47,39 +38,35 @@
 	</button>
 </ViewHeader>
 <ViewMain>
-	{#if loading}
-		<Spinner />
-	{:else}
-		{#each Object.entries(shownHighlights) as [date, highlights]}
-			{@const bests = highlights.filter((highlight) => highlight.kind === 'BEST')}
-			{@const worsts = highlights.filter((highlight) => highlight.kind === 'WORST')}
-			<div class="highlight">
-				<span class="highlight-date">
-					{dayjs(date, DATE_FORMAT).format('LL')}
-				</span>
-				<div class="highlight-container">
-					{#each bests as best, index}
-						<div
-							class="highlight-best"
-							style:background-color={randomColor('light')}
-							data-last={bests.length === index + 1 && !!worsts.length}
-						>
-							<RandomEmoji emojis={happyEmojis} />
-							<span>{best?.content}</span>
-						</div>
-					{/each}
-					{#each worsts as worst}
-						<div class="highlight-worst" style:background-color={randomColor('dark')}>
-							<RandomEmoji emojis={sadEmojis} />
-							<span>{worst?.content}</span>
-						</div>
-					{/each}
-				</div>
+	{#each Object.entries(shownHighlights) as [date, highlights]}
+		{@const bests = highlights.filter((highlight) => highlight.kind === 'BEST')}
+		{@const worsts = highlights.filter((highlight) => highlight.kind === 'WORST')}
+		<div class="highlight">
+			<span class="highlight-date">
+				{dayjs(date, DATE_FORMAT).format('LL')}
+			</span>
+			<div class="highlight-container">
+				{#each bests as best, index}
+					<div
+						class="highlight-best"
+						style:background-color={randomColor('light')}
+						data-last={bests.length === index + 1 && !!worsts.length}
+					>
+						<RandomEmoji emojis={happyEmojis} />
+						<span>{best?.content}</span>
+					</div>
+				{/each}
+				{#each worsts as worst}
+					<div class="highlight-worst" style:background-color={randomColor('dark')}>
+						<RandomEmoji emojis={sadEmojis} />
+						<span>{worst?.content}</span>
+					</div>
+				{/each}
 			</div>
-		{:else}
-			<p>No highlights to list yet!</p>
-		{/each}
-	{/if}
+		</div>
+	{:else}
+		<p>No highlights to list yet!</p>
+	{/each}
 </ViewMain>
 
 <style scoped>