feat: list and record views are less spaghetti

src-tauri/src/highlight.rs

@@ -1,6 +1,8 @@
 use serde::{Deserialize, Serialize};
+use tap::Tap;
 use tauri::{async_runtime::block_on, State};
 use time::OffsetDateTime;
+use tracing::debug;
 
 use crate::db::DbWrapper;
 
@@ -33,32 +35,25 @@ pub fn record_highlight(
     state: State<'_, DbWrapper>,
     req: CreateHighlightRequest,
 ) -> GroupedHighlight {
-    let future = sqlx::query_as!(
-        Highlight,
+    let future = sqlx::query!(
         r#"
             INSERT INTO highlight ( content, kind ) 
             VALUES ( $1, $2 )
-            RETURNING id as "id: i32", content, kind as "kind: Kind", created_at, updated_at
         "#,
         req.content,
         req.kind
     )
-    .fetch_one(&state.pool);
-    let highlight = block_on(future).expect("error while saving highlight to database");
-
-    let todays_highlight = get_todays_highlight(state);
-    return if let Some(mut grouped_highlight) = todays_highlight {
-        grouped_highlight.add_highlight(highlight);
-        grouped_highlight
-    } else {
-        GroupedHighlight::new(highlight)
-    };
+    .execute(&state.pool);
+    block_on(future).expect("error while saving highlight to database");
+    get_todays_highlight(state)
+        .expect("error while fetching saved highlight")
+        .tap(|gh| debug!("returning saved highlight in today's grouped highlight\n{gh:#?}"))
 }
 
 #[derive(Debug, Serialize, Deserialize, specta::Type)]
 pub struct GroupedHighlight {
-    pub best: Option<Highlight>,
-    pub worst: Option<Highlight>,
+    pub best: Vec<Highlight>,
+    pub worst: Vec<Highlight>,
     #[serde(with = "time::serde::timestamp::milliseconds")]
     pub date: OffsetDateTime,
 }
@@ -68,22 +63,22 @@ impl GroupedHighlight {
         let created_at = highlight.created_at.clone();
         match highlight.kind {
             Kind::Best => Self {
-                best: Some(highlight),
-                worst: None,
+                best: vec![highlight],
+                worst: vec![],
                 date: created_at,
             },
             Kind::Worst => Self {
-                best: None,
-                worst: Some(highlight),
+                best: vec![],
+                worst: vec![highlight],
                 date: created_at,
             },
         }
     }
 
     pub fn add_highlight(&mut self, highlight: Highlight) {
         match highlight.kind {
-            Kind::Best => self.best = Some(highlight),
-            Kind::Worst => self.worst = Some(highlight),
+            Kind::Best => self.best.push(highlight),
+            Kind::Worst => self.worst.push(highlight),
         };
     }
 }

src-tauri/src/main.rs

@@ -22,10 +22,9 @@ fn main() {
         specta_builder.into_plugin()
     };
 
-    let subscriber = tracing_subscriber::FmtSubscriber::builder()
+    tracing_subscriber::FmtSubscriber::builder()
         .with_max_level(Level::INFO)
-        .finish();
-    tracing::subscriber::set_global_default(subscriber).expect("setting default subscriber failed");
+        .init();
 
     tauri::Builder::default()
         .setup(|app| {

src/bindings.ts

@@ -4,7 +4,7 @@
 async recordHighlight(req: CreateHighlightRequest) : Promise<GroupedHighlight> {
 return await TAURI_INVOKE("plugin:tauri-specta|record_highlight", { req });
 },
-async getTodaysHighlight() : Promise<{ best: Highlight | null; worst: Highlight | null; date: string } | null> {
+async getTodaysHighlight() : Promise<{ best: Highlight[]; worst: Highlight[]; date: string } | null> {
 return await TAURI_INVOKE("plugin:tauri-specta|get_todays_highlight");
 },
 async listHighlights() : Promise<GroupedHighlight[]> {
@@ -17,7 +17,7 @@ return await TAURI_INVOKE("plugin:tauri-specta|list_highlights");
 /** user-defined types **/
 
 export type CreateHighlightRequest = { content: string; kind: Kind }
-export type GroupedHighlight = { best: Highlight | null; worst: Highlight | null; date: string }
+export type GroupedHighlight = { best: Highlight[]; worst: Highlight[]; date: string }
 export type Highlight = { id: number; content: string; kind: Kind; created_at: string; updated_at: string | null }
 export type Kind = "BEST" | "WORST"
 

src/lib/layouts/ViewMain.svelte

@@ -10,5 +10,6 @@
 		gap: 8px;
 		margin-left: 8px;
 		margin-right: 8px;
+		padding-bottom: 8px;
 	}
 </style>

src/view/List.svelte

@@ -22,24 +22,28 @@
 				<span class="highlight-date" title={dayjs(highlight.date).format('LLL')}>
 					{dayjs(highlight.date).fromNow()}
 				</span>
-				<div class="highlight-container">
-					<div
-						class="highlight-best"
-						style={`background-color: #${randomColor('light')};`}
-					>
-						<ul>
-							<li><RandomEmoji emojis={happyEmojis} />{highlight.best?.content}</li>
-						</ul>
-					</div>
-					<div
-						class="highlight-worst"
-						style={`background-color: #${randomColor('dark')};`}
-					>
-						<ul>
-							<li><RandomEmoji emojis={sadEmojis} />{highlight.worst?.content}</li>
-						</ul>
-					</div>
-				</div>
+				<ul class="highlight-container">
+					{#each highlight.best as best, index}
+						<li
+							class="highlight-best"
+							style={`background-color: #${randomColor('light')};`}
+							data-last={highlight.best.length === index + 1 &&
+								!!highlight.worst.length}
+						>
+							<RandomEmoji emojis={happyEmojis} />
+							<span>{best?.content}</span>
+						</li>
+					{/each}
+					{#each highlight.worst as worst}
+						<li
+							class="highlight-worst"
+							style={`background-color: #${randomColor('dark')};`}
+						>
+							<RandomEmoji emojis={sadEmojis} />
+							<span>{worst?.content}</span>
+						</li>
+					{/each}
+				</ul>
 			</div>
 		{:else}
 			<p>No highlights to list yet!</p>
@@ -64,35 +68,38 @@
 		}
 
 		& .highlight-container {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			width: 100%;
-
-			& div[class^='highlight-'] {
-				font-size: small;
+			font-size: small;
+			margin: 0;
+			padding-left: 0;
 
-				& ul {
-					list-style-type: none;
-					margin: 8px;
-					padding-left: 4px;
+			& li {
+				align-items: center;
+				display: flex;
+				gap: 4px;
 
-					& li {
-						align-items: center;
-						display: flex;
-						gap: 4px;
-					}
+				& * {
+					margin: 4px;
 				}
 			}
 
-			& .highlight-best {
+			& li:first-of-type {
 				border-top-right-radius: 8px;
-				color: var(--very-dark);
 			}
 
-			& .highlight-worst {
+			& li:last-of-type {
 				border-bottom-left-radius: 8px;
 				border-bottom-right-radius: 8px;
+			}
+
+			& li[data-last='true'] {
+				border-bottom: 2px solid var(--highlight);
+			}
+
+			& .highlight-best {
+				color: var(--very-dark);
+			}
+
+			& .highlight-worst {
 				color: var(--light);
 			}
 		}

src/view/Record.svelte

@@ -102,12 +102,14 @@
 			kind === HighlightKind.WORST ? $todaysHighlight.worst : $todaysHighlight.best}
 		<div class="todays-highlights">
 			<ul>
-				<li
-					style={`background-color: #${randomColor(kind === HighlightKind.WORST ? 'dark' : 'light')};
-					color: ${kind === HighlightKind.WORST ? 'var(--light)' : 'var(--very-dark)'}`}
-				>
-					{highlights?.content}
-				</li>
+				{#each highlights as highlight}
+					<li
+						style={`background-color: #${randomColor(kind === HighlightKind.WORST ? 'dark' : 'light')};
+						 color: ${kind === HighlightKind.WORST ? 'var(--light)' : 'var(--very-dark)'}`}
+					>
+						{highlight?.content}
+					</li>
+				{/each}
 			</ul>
 		</div>
 	{/if}
@@ -210,10 +212,19 @@
 			padding-left: 24px;
 
 			& li {
-				border-radius: 8px;
 				padding: 8px;
 			}
 
+			& li:first-of-type {
+				border-top-left-radius: 8px;
+				border-top-right-radius: 8px;
+			}
+
+			& li:last-of-type {
+				border-bottom-left-radius: 8px;
+				border-bottom-right-radius: 8px;
+			}
+
 			& li::marker {
 				color: var(--very-dark);
 			}