Code format

Make it not look like such dogshit
Make better autocomplete selections
2024-11-08 10:36:24 +01:00 · 2024-11-08 10:34:32 +01:00 · 2024-11-08 09:05:55 +01:00 · 2024-10-25 16:37:37 +02:00 · 2024-10-25 15:16:10 +02:00
29 changed files with 476 additions and 359 deletions
--- a/food.ddl
+++ b/food.ddl
@@ -1,6 +1,7 @@
 begin;

 create table weight (
+	id integer primary key,
 	date datetime default (datetime('now', '+2 hours')),
 	weight real not null
 );
@@ -18,7 +19,7 @@ drop view if exists weightMonthly;
 drop view if exists weightYearly;

 create view weightView as
-select rowid,
+select id,
 	date,
 	round(weight, 2) as weight
 from weight
@@ -53,6 +54,7 @@ group by strftime('%Y', date)
 order by date desc;

 create table food(
+	id integer primary key,
 	date datetime default (datetime('now', '+2 hours')),
 	food varchar not null,
 	description varchar,
@@ -150,7 +152,7 @@ drop view if exists foodYearly;
 drop view if exists foodRecent;

 create view foodView as
-select rowid,
+select id,
 	date,
 	food,
 	description,
@@ -196,8 +198,7 @@ group by strftime('%Y', date)
 order by date desc;

 create view foodRecent as
-select rowid,
-	*
+select *
 from food
 order by date desc
 limit 10;
@@ -218,7 +219,7 @@ set per100 = coalesce(
 			limit 1
 		)
 	)
-where rowid = new.rowid;
+where id = new.id;
 end;

 create table settings(
--- a/foodservice.go
+++ b/foodservice.go
@@ -11,7 +11,7 @@ type (
 		db *DB
 	}
 	Food struct {
-		Rowid      int64   `json:"rowid"`
+		Id         int64   `json:"id"`
 		Date       string  `json:"date"`
 		Food       string  `json:"food"`
 		Descripton string  `json:"description"`
@@ -31,7 +31,7 @@ type (
 	}
 )

-const foodColumns = "rowid, date, food, description, amount, per100, energy"
+const foodColumns = "id, date, food, description, amount, per100, energy"
 const foodAggregatedColumns = "period, amount, avgPer100, energy"

 func (s *FoodService) GetRecent() ([]Food, error) {
@@ -48,7 +48,7 @@ func (s *FoodService) GetRecent() ([]Food, error) {

 	for row.Next() {
 		var food Food
-		err := row.Scan(&food.Rowid, &food.Date, &food.Food, &food.Descripton, &food.Amount, &food.Per100, &food.Energy)
+		err := row.Scan(&food.Id, &food.Date, &food.Food, &food.Descripton, &food.Amount, &food.Per100, &food.Energy)
 		if err != nil {
 			log.Printf("error scanning row: %v", err)
 			continue
@@ -89,7 +89,7 @@ limit %d

 	for rows.Next() {
 		var f FoodSearch
-		err := rows.Scan(&f.Rowid, &f.Date, &f.Food.Food, &f.Descripton, &f.Amount, &f.Per100, &f.Energy, &f.Score)
+		err := rows.Scan(&f.Id, &f.Date, &f.Food.Food, &f.Descripton, &f.Amount, &f.Per100, &f.Energy, &f.Score)
 		if err != nil {
 			log.Printf("error scanning row: %v", err)
 			continue
@@ -129,20 +129,20 @@ func (s *FoodService) Create(food Food) (Food, error) {
 		}
 	}

-	rowid, err := res.LastInsertId()
+	id, err := res.LastInsertId()
 	if err != nil {
 		return food, fmt.Errorf("error getting last insert id: %v", err)
 	}

-	return s.GetByRowid(rowid)
+	return s.GetById(id)
 }

 func (s *FoodService) Update(food Food) (Food, error) {
 	if s.db == nil || !s.db.Ready {
 		return food, fmt.Errorf("cannot update food, db is nil or is not ready")
 	}
-	if food.Rowid <= 0 {
-		return food, fmt.Errorf("cannot update food, rowid is less than or equal to 0")
+	if food.Id <= 0 {
+		return food, fmt.Errorf("cannot update food, id is less than or equal to 0")
 	}
 	if food.Food == "" {
 		return food, fmt.Errorf("cannot update food, food is empty")
@@ -152,28 +152,28 @@ func (s *FoodService) Update(food Food) (Food, error) {
 	}

 	if food.Per100 > 0 {
-		_, err := s.db.writeConn.Exec("UPDATE food SET food = ?, description = ?, amount = ?, per100 = ? WHERE rowid = ?", food.Food, food.Descripton, food.Amount, food.Per100, food.Rowid)
+		_, err := s.db.writeConn.Exec("UPDATE food SET food = ?, description = ?, amount = ?, per100 = ? WHERE Id = ?", food.Food, food.Descripton, food.Amount, food.Per100, food.Id)
 		if err != nil {
 			return food, fmt.Errorf("error updating food: %v", err)
 		}
 	} else {
-		_, err := s.db.writeConn.Exec("UPDATE food SET food = ?, description = ?, amount = ? WHERE rowid = ?", food.Food, food.Descripton, food.Amount, food.Rowid)
+		_, err := s.db.writeConn.Exec("UPDATE food SET food = ?, description = ?, amount = ? WHERE Id = ?", food.Food, food.Descripton, food.Amount, food.Id)
 		if err != nil {
 			return food, fmt.Errorf("error updating food: %v", err)
 		}
 	}

-	return s.GetByRowid(food.Rowid)
+	return s.GetById(food.Id)
 }

-func (s *FoodService) GetByRowid(rowid int64) (Food, error) {
+func (s *FoodService) GetById(id int64) (Food, error) {
 	var res Food
 	if s.db == nil || !s.db.Ready {
-		return res, fmt.Errorf("cannot get food by rowid, db is nil or is not ready")
+		return res, fmt.Errorf("cannot get food by id, db is nil or is not ready")
 	}

-	row := s.db.readConn.QueryRow(fmt.Sprintf("SELECT %s from foodView WHERE rowid = ?", foodColumns), rowid)
-	err := row.Scan(&res.Rowid, &res.Date, &res.Food, &res.Descripton, &res.Amount, &res.Per100, &res.Energy)
+	row := s.db.readConn.QueryRow(fmt.Sprintf("SELECT %s from foodView WHERE id = ?", foodColumns), id)
+	err := row.Scan(&res.Id, &res.Date, &res.Food, &res.Descripton, &res.Amount, &res.Per100, &res.Energy)
 	if err != nil {
 		return res, fmt.Errorf("error scanning row: %v", err)
 	}
--- a/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodComp.svelte
+++ b/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodComp.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
 	import { main } from "$wails/models";

-	export let item: main.AggregatedFood
+	export let item: main.AggregatedFood;
 </script>

 <template>
 	<tr class="border-b border-gray-200 dark:border-gray-700">
-		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-		    scope="row">
+		<th
+			class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+			scope="row"
+		>
 			{item.period}
 		</th>
 		<td class="px-6 py-4">
--- a/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte
+++ b/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte
@@ -24,17 +24,18 @@
 	let reversedItems = items.slice().reverse();

 	const defaultOptions = {
-		backgroundColor: "rgba(225, 204,230, .3)",
-		borderColor: "rgb(205, 130, 158)",
-		pointBorderColor: "rgb(205, 130, 158)",
+		backgroundColor: "rgba(59, 130, 246, 0.1)",
+		borderColor: "rgb(59, 130, 246)",
+		pointBorderColor: "rgb(59, 130, 246)",
 		pointBackgroundColor: "rgb(255, 255, 255)",
-		pointBorderWidth: 10,
-		pointHoverRadius: 5,
-		pointHoverBackgroundColor: "rgb(0, 157, 123)",
-		pointHoverBorderColor: "rgba(220, 220, 220, 1)",
+		pointBorderWidth: 2,
+		pointHoverRadius: 6,
+		pointHoverBackgroundColor: "rgb(59, 130, 246)",
+		pointHoverBorderColor: "rgb(255, 255, 255)",
 		pointHoverBorderWidth: 2,
-		pointRadius: 1,
+		pointRadius: 3,
 		pointHitRadius: 20,
+		tension: 0.4,
 	};
 	const data: ChartData<"line", (number | Point)[]> = {
 		labels: reversedItems.map((f) => f.period),
@@ -87,25 +88,72 @@
 </script>

 <template>
-	<Line {data} class="max-h-[50vh] h-[50vh]" />
-	<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
-		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
-					<tr>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th>
-						<th class="px-6 py-3" scope="col"> Amount </th>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col"> AvgPer100 </th>
-						<th class="px-6 py-3" scope="col"> Energy </th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each items as f}
-						<AggregatedFoodComp item={f} />
-					{/each}
-				</tbody>
-			</table>
+	<div class="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
+		<div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
+			<Line
+				{data}
+				options={{
+					responsive: true,
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							position: "top",
+							labels: {
+								padding: 20,
+								color: "rgb(229, 231, 235)",
+								font: {
+									size: 12,
+									family: "'Nunito', sans-serif",
+								},
+							},
+						},
+					},
+					scales: {
+						y: {
+							grid: {
+								color: "rgba(75, 85, 99, 0.2)",
+							},
+							ticks: {
+								color: "rgb(229, 231, 235)",
+								font: {
+									family: "'Nunito', sans-serif",
+								},
+							},
+						},
+						x: {
+							grid: {
+								color: "rgba(75, 85, 99, 0.2)",
+							},
+							ticks: {
+								color: "rgb(229, 231, 235)",
+								font: {
+									family: "'Nunito', sans-serif",
+								},
+							},
+						},
+					},
+				}}
+				class="max-h-[50vh] h-[50vh]"
+			/>
+		</div>
+		<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
+			<div class="relative overflow-x-auto shadow-md rounded-lg">
+				<table class="w-full text-sm text-left text-gray-400">
+					<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
+						<tr>
+							<th class="px-6 py-4 font-semibold" scope="col">Period</th>
+							<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
+							<th class="px-6 py-4 font-semibold" scope="col">AvgPer100</th>
+							<th class="px-6 py-4 font-semibold" scope="col">Energy</th>
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-gray-700">
+						{#each items as f}
+							<AggregatedFoodComp item={f} />
+						{/each}
+					</tbody>
+				</table>
+			</div>
 		</div>
-		<div></div>
 	</div>
 </template>
--- a/frontend/src/lib/components/Energy/EmptyFoodComp.svelte
+++ b/frontend/src/lib/components/Energy/EmptyFoodComp.svelte
@@ -9,7 +9,7 @@
 		food: "",
 		amount: 0,
 		description: "",
-		rowid: 0,
+		id: 0,
 		date: "",
 		per100: 0,
 		energy: 0,
@@ -23,9 +23,8 @@
 	let nameElement: HTMLTableCellElement;
 	let autocompleteList: HTMLUListElement;
 	let foodSearch: main.Food[] = [];
+	let hiLiteIndex: number = -1;

-	// Maybe it would be a good idea to use $ instead of update down there...
-	// Maybe it's a topic for another day
 	$: {
 		name = name.trim();
 		if (!name) {
@@ -38,16 +37,37 @@
 	function updateAutocomplete() {
 		if (!per100Edited)
 			GetLastPer100(name.trim()).then((res) => {
-				// Prevent search when there's nothing to search
-				// Sometimes we get search results after deleting name
 				if (res.success && res.data && name) {
 					foodSearch = res.data;
+					hiLiteIndex = -1;
 				} else {
 					foodSearch = [];
 				}
 			});
 	}

+	async function handleSubmit() {
+		item.food = name;
+		item.description = description;
+		item.amount = parseInt(amount);
+		item.per100 = parseInt(per100);
+
+		const res = await CreateFood(item);
+		name = "";
+		amount = "";
+		per100 = "";
+		per100Edited = false;
+
+		if (!res.success) {
+			toast.error(`failed to create item with error ${res.error}`);
+			return;
+		}
+
+		foodStore.update((value) => [res.data, ...value]);
+		nameElement.focus();
+		foodSearch = [];
+	}
+
 	async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) {
 		name = name.trim();
 		amount = amount.trim();
@@ -61,53 +81,48 @@

 		if (!per100Edited && event.currentTarget == per100Element) per100Edited = true;

-		if (event.key == "Enter") {
+		if (event.key === "Enter") {
 			event.preventDefault();
-			item.food = name;
-			item.description = description;
-			item.amount = parseInt(amount);
-			item.per100 = parseInt(per100);

-			const res = await CreateFood(item);
-			name = "";
-			amount = "";
-			// description = ''
-			per100 = "";
-			per100Edited = false;
-
-			if (!res.success) {
-				toast.error(`failed to create item with error ${res.error}`);
+			// If suggestions are visible and we have a highlighted item or at least one suggestion
+			if (foodSearch.length > 0) {
+				const selectedFood = hiLiteIndex >= 0 ? foodSearch[hiLiteIndex] : foodSearch[0];
+				setInputVal(selectedFood);
 				return;
 			}

-			foodStore.update((value) => [res.data, ...value]);
-			nameElement.focus();
-			foodSearch = [];
+			// Only submit if we have no suggestions visible
+			if (name && amount && per100) {
+				await handleSubmit();
+			}
+		}
+	}
+
+	function navigateList(e: KeyboardEvent) {
+		if (!foodSearch.length) return;
+
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				hiLiteIndex = Math.min(hiLiteIndex + 1, foodSearch.length - 1);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				hiLiteIndex = Math.max(hiLiteIndex - 1, -1);
+				break;
+			case "Escape":
+				e.preventDefault();
+				foodSearch = [];
+				hiLiteIndex = -1;
+				break;
 		}
 	}

-	let hiLiteIndex: number | null = null;
-	// function navigateList(e: KeyboardEvent) {
-	// 	console.log(foodSearch, hiLiteIndex);
-	// 	// @ts-ignore shut the fuck up
-	// 	if (e.key == "ArrowDown" && hiLiteIndex <= foodSearch.length - 2) {
-	// 		hiLiteIndex == null ? (hiLiteIndex = 0) : (hiLiteIndex += 1);
-	// 	} else if (e.key == "ArrowUp" && hiLiteIndex !== null) {
-	// 		hiLiteIndex == 0 ? 0 : (hiLiteIndex -= 1);
-	// 	} else if (e.key == "Enter") {
-	// 		// @ts-ignore ITS NOT NULL YOU ASSHAT
-	// 		// WE CHECKED
-	// 		// ITS NOT
-	// 		setInputVal(foodSearch[hiLiteIndex]);
-	// 	} else {
-	// 		return;
-	// 	}
-	// }
 	function setInputVal(food: main.Food) {
 		name = food.food;
 		per100 = String(food.per100);
 		amount = String(food.amount);
-		hiLiteIndex = null;
+		hiLiteIndex = -1;
 		foodSearch = [];
 	}

@@ -123,6 +138,7 @@
 	function handleFocusOut() {
 		timeout = setTimeout(() => {
 			foodSearch = [];
+			hiLiteIndex = -1;
 		}, 100);
 	}

@@ -132,20 +148,16 @@
 	}
 </script>

-<!-- <svelte:window on:keydown={navigateList} /> -->
+<svelte:window on:keydown={navigateList} />

 <template>
-	<tr class="border-b border-gray-200 dark:border-gray-700 text-lg font-bold relative">
-		<th
-			class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-			scope="row"
-		></th>
-		<!-- svelte-ignore a11y-autofocus -->
+	<tr class="border-b border-gray-700 text-lg font-medium hover:bg-gray-800/50 transition-colors">
+		<th class="px-6 py-4 font-medium text-gray-200 whitespace-nowrap" scope="row" />
 		<td
 			bind:innerText={name}
-			class:border-[3px]={!name}
-			class:border-red-600={!name}
-			class="px-6 py-4 overflow-hidden"
+			class="px-6 py-4 overflow-hidden focus:outline-none focus:ring-2 focus:ring-blue-500 rounded transition-all"
+			class:ring-2={!name}
+			class:ring-red-500={!name}
 			contenteditable="true"
 			autofocus
 			on:keydown={update}
@@ -180,7 +192,7 @@
 	{#if foodSearch.length > 0}
 		<ul bind:this={autocompleteList} class="z-50 fixed top-0 left-0 w-3/12 border border-x-gray-800">
 			{#each foodSearch as f, i}
-				<FoodSearchEntry itemLabel={f.food} highlighted={i == hiLiteIndex} on:click={() => setInputVal(f)} />
+				<FoodSearchEntry itemLabel={f.food} highlighted={i === hiLiteIndex} on:click={() => setInputVal(f)} />
 			{/each}
 		</ul>
 	{/if}
--- a/frontend/src/lib/components/Energy/EnergyToday.svelte
+++ b/frontend/src/lib/components/Energy/EnergyToday.svelte
@@ -57,5 +57,11 @@
 </script>

 <template>
-	<div class="px-4 text-bold text-3xl" style="color: {color}">{remainingToday}</div>
+	<div
+		class="px-6 py-3 text-3xl font-bold rounded-lg bg-gray-800/50 shadow-lg border border-gray-700"
+		style="color: {color}"
+	>
+		<span class="mr-2">{remainingToday}</span>
+		<span class="text-lg text-gray-400">kcal remaining</span>
+	</div>
 </template>
--- a/frontend/src/lib/components/Energy/FoodComp.svelte
+++ b/frontend/src/lib/components/Energy/FoodComp.svelte
@@ -1,84 +1,94 @@
 <script lang="ts">
-	import { UpdateFood } from '$wails/main/App';
-	import {main} from '$wails/models'
-	import { toast } from 'svelte-sonner'
+	import { UpdateFood } from "$wails/main/App";
+	import { main } from "$wails/models";
+	import { toast } from "svelte-sonner";

-	export let item: main.Food
-	export let energyColor: string
-	export let nameColor: string
-	export let dateColor: string
+	export let item: main.Food;
+	export let energyColor: string;
+	export let nameColor: string;
+	export let dateColor: string;

-	let amount: string = item.amount.toString()
-	let per100: string = item.per100?.toString() ?? ''
-	let description: string = item.description ?? ''
-	let name: string = item.food
+	let amount: string = item.amount.toString();
+	let per100: string = item.per100?.toString() ?? "";
+	let description: string = item.description ?? "";
+	let name: string = item.food;

-	async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
-		if (event.key == 'Enter') {
-			event.preventDefault()
-			await updateItem()
+	async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) {
+		if (event.key == "Enter") {
+			event.preventDefault();
+			await updateItem();
 		}
 	}

 	async function focusOutUpdate() {
-		await updateItem()
+		await updateItem();
 	}

 	async function updateItem() {
-		amount = amount.trim()
-		per100 = per100.trim()
-		description = description.trim()
-		name = name.trim()
+		amount = amount.trim();
+		per100 = per100.trim();
+		description = description.trim();
+		name = name.trim();

-		item.food = name
-		item.description = description
-		item.amount = parseInt(amount)
-		item.per100 = parseInt(per100)
+		item.food = name;
+		item.description = description;
+		item.amount = parseInt(amount);
+		item.per100 = parseInt(per100);

-		const res = await UpdateFood(item)
+		const res = await UpdateFood(item);
 		if (!res.success) {
-			toast.error(`failed to update food item with error ${res.error}`)
+			toast.error(`failed to update food item with error ${res.error}`);
 		} else {
-			item = res.data
+			item = res.data;
 		}
-		name = item.food
-		description = item.description ?? ''
-		amount = item.amount.toString()
-		per100 = item.per100?.toString() ?? ''
+		name = item.food;
+		description = item.description ?? "";
+		amount = item.amount.toString();
+		per100 = item.per100?.toString() ?? "";
 	}
 </script>

 <template>
 	<tr class="border-b border-gray-200 dark:border-gray-700 font-bold text-lg">
-		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-		    style="color: {dateColor}"
-		    scope="row">
+		<th
+			class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+			style="color: {dateColor}"
+			scope="row"
+		>
 			{item.date}
 		</th>
-		<td class="px-6 py-4"
-		    style="color: {nameColor}"
-		    contenteditable="true"
-		    bind:innerText={name}
-		    on:focusout={focusOutUpdate}
-		    on:keydown={update}>
+		<td
+			class="px-6 py-4"
+			style="color: {nameColor}"
+			contenteditable="true"
+			bind:innerText={name}
+			on:focusout={focusOutUpdate}
+			on:keydown={update}
+		>
 		</td>
-		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
-		    contenteditable="true"
-		    bind:innerText={description}
-		    on:focusout={focusOutUpdate}
-		    on:keydown={update}>
+		<td
+			class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
+			contenteditable="true"
+			bind:innerText={description}
+			on:focusout={focusOutUpdate}
+			on:keydown={update}
+		>
 		</td>
-		<td class="px-6 py-4"
-		    contenteditable="true"
-		    bind:innerText={amount}
-		    on:focusout={focusOutUpdate}
-		    on:keydown={update}>
+		<td
+			class="px-6 py-4"
+			contenteditable="true"
+			bind:innerText={amount}
+			on:focusout={focusOutUpdate}
+			on:keydown={update}
+		>
 		</td>
-		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
-		    contenteditable="true"
-		    bind:innerText={per100}
-		    on:focusout={focusOutUpdate}
-		    on:keydown={update}>
+		<td
+			class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
+			contenteditable="true"
+			bind:innerText={per100}
+			on:focusout={focusOutUpdate}
+			on:keydown={update}
+		>
 		</td>
 		<td class="px-6 py-4" style="color: {energyColor}">
 			{item.energy}
--- a/frontend/src/lib/components/Energy/FoodSearchEntry.svelte
+++ b/frontend/src/lib/components/Energy/FoodSearchEntry.svelte
@@ -1,15 +1,13 @@
-<script>
-	// This doesn't update when navigating with arrows keys...
-	// Fucking svelte and reactivity again, here we fucking go
-	export let itemLabel;
-	export let highlighted;
+<script lang="ts">
+	export let itemLabel: string;
+	export let highlighted: boolean;
 </script>

-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <li
-	class="list-none border-b border-gray-800 z-50 px-2 py-2 cursor-pointer bg-[#1b2636] hover:bg-[#81921f] hover:text-white active:bg-DodgerBlue active:text-white text-lg"
-	class:bg-DodgerBlue={highlighted}
+	class="list-none px-4 py-3 cursor-pointer bg-gray-800 text-gray-200 text-base border-b border-gray-700 transition-colors"
+	class:bg-blue-600={highlighted}
 	class:text-white={highlighted}
-	on:click>
+	on:click
+>
 	{itemLabel}
 </li>
--- a/frontend/src/lib/components/Energy/FoodTable.svelte
+++ b/frontend/src/lib/components/Energy/FoodTable.svelte
@@ -59,20 +59,20 @@
 </script>

 <template>
-	<div class="relative flex flex-col flex-grow h-[93vh] select-none" data-vaul-drawer-wrapper id="page">
-		<div class="relative overflow-auto h-full shadow-md sm:rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
+	<div class="relative flex flex-col flex-grow h-[93vh] select-none bg-gray-900" data-vaul-drawer-wrapper id="page">
+		<div class="relative overflow-auto h-full shadow-md rounded-lg">
+			<table class="w-full text-sm text-left text-gray-400">
+				<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
 					<tr>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Date </th>
-						<th class="px-6 py-3 w-3/12" scope="col"> Food </th>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-4/12" scope="col"> Description </th>
-						<th class="px-6 py-3 w-1/12" scope="col"> Amount </th>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-1/12" scope="col"> Cal Per 100 </th>
-						<th class="px-6 py-3 w-1/12" scope="col"> Energy </th>
+						<th class="px-6 py-4 font-semibold w-2/12" scope="col">Date</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Food</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Description</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Cal Per 100</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Energy</th>
 					</tr>
 				</thead>
-				<tbody>
+				<tbody class="divide-y divide-gray-700">
 					<EmptyFoodComp />
 					{#each items as f}
 						<FoodComp
@@ -85,6 +85,5 @@
 				</tbody>
 			</table>
 		</div>
-		<div></div>
 	</div>
 </template>
--- a/frontend/src/lib/components/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { link, location } from "svelte-spa-router";
-	import { faGear} from "@fortawesome/free-solid-svg-icons";
+	import { faGear } from "@fortawesome/free-solid-svg-icons";
 	import Fa from "svelte-fa";
 	import Settings from "./Settings/Settings.svelte";
 	import EnergyToday from "./Energy/EnergyToday.svelte";
@@ -49,48 +49,40 @@
 </script>

 <header
-	class="flex h-22 items-center justify-center bg-base-100 shadow-lg sticky top-0 z-50 border-b
-   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+	class="flex h-24 items-center justify-between bg-gray-900 shadow-lg sticky top-0 z-50 border-b border-gray-700/40 backdrop-blur supports-[backdrop-filter]:bg-gray-900/60 px-6"
 >
-	<div>
-		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
+	<div class="flex flex-col gap-2">
+		<nav class="flex space-x-6 text-2xl font-bold select-none">
 			<a
 				use:link
-				class={"/" == $location
-					? "transition-colors hover:text-foreground/80"
-					: "transition-colors hover:text-foreground/80 text-foreground/60"}
+				class="transition-colors hover:text-gray-200 {$location === '/' ? 'text-white' : 'text-gray-400'}"
 				href="/"
-				on:click={(e) => (selected = "Energy")}>Energy</a
+				on:click={() => (selected = "Energy")}>Energy</a
 			>
 			<a
 				use:link
-				class={"/Weight" == $location
-					? "transition-colors hover:text-foreground/80"
-					: "transition-colors hover:text-foreground/80 text-foreground/60"}
+				class="transition-colors hover:text-gray-200 {$location === '/Weight' ? 'text-white' : 'text-gray-400'}"
 				href="/Weight"
-				on:click={(e) => (selected = "Weight")}>Weight</a
+				on:click={() => (selected = "Weight")}>Weight</a
 			>
 		</nav>
-		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
+		<nav class="flex space-x-6 text-xl font-medium select-none">
 			{#each sublinks as { label, href }}
 				<a
 					use:link
 					{href}
-					class={href == $location
-						? "transition-colors hover:text-foreground/80"
-						: "transition-colors hover:text-foreground/80 text-foreground/60"}>{label}</a
+					class="transition-colors hover:text-gray-200 {href === $location ? 'text-white' : 'text-gray-400'}"
+					>{label}</a
 				>
 			{/each}
 		</nav>
 	</div>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div class="absolute right-0 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={() => (showModal = true)}>
-		<button>
+	<div class="flex items-center gap-6">
+		<EnergyToday />
+		<button class="p-3 hover:bg-gray-800 rounded-lg transition-colors" on:click={() => (showModal = true)}>
 			<Fa icon={faGear} scale={2} />
 		</button>
 	</div>
-	<RefreshComponent />
-	<EnergyToday />
 </header>

 <Settings bind:showModal />
--- a/frontend/src/lib/components/RefreshComponent.svelte
+++ b/frontend/src/lib/components/RefreshComponent.svelte
@@ -35,7 +35,7 @@
 <template>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div class="absolute right-20 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={refreshStores}>
-		<button>
+		<button class="p-3 hover:bg-gray-800 rounded-lg transition-colors">
 			<Fa icon={faRefresh} scale={2} />
 		</button>
 	</div>
--- a/frontend/src/lib/components/Settings/Setting.svelte
+++ b/frontend/src/lib/components/Settings/Setting.svelte
@@ -18,7 +18,7 @@
 		if (!res.success) {
 			toast.error(`Failed to set setting with error ${res.error}`);
 			editSetting = String(setting);
-			return
+			return;
 		}
 		setting = numSetting;
 		settingsStore.update((store) => {
--- a/frontend/src/lib/components/Settings/Settings.svelte
+++ b/frontend/src/lib/components/Settings/Settings.svelte
@@ -11,7 +11,7 @@

 	<div class="flex flex-2 flex-col gap-4 text-left text-xl">
 		{#each Object.keys($settingsStore) as key}
-			<Setting key={key} setting={$settingsStore[key]} />
+			<Setting {key} setting={$settingsStore[key]} />
 		{/each}
 	</div>
 </Modal>
--- a/frontend/src/lib/components/Weight/Aggregated/AggregatedWeightComp.svelte
+++ b/frontend/src/lib/components/Weight/Aggregated/AggregatedWeightComp.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
-	import {main} from '$wails/models'
+	import { main } from "$wails/models";

-	export let item: main.AggregatedWeight
+	export let item: main.AggregatedWeight;
 </script>

 <template>
 	<tr class="border-b border-gray-200 dark:border-gray-700">
-		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-		    scope="row">
+		<th
+			class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+			scope="row"
+		>
 			{item.period}
 		</th>
 		<td class="px-6 py-4">
--- a/frontend/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte
+++ b/frontend/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte
@@ -21,17 +21,18 @@
 	let reversedItems = items.slice().reverse();

 	const defaultOptions = {
-		backgroundColor: "rgba(225, 204,230, .3)",
-		borderColor: "rgb(205, 130, 158)",
-		pointBorderColor: "rgb(205, 130, 158)",
+		backgroundColor: "rgba(59, 130, 246, 0.1)",
+		borderColor: "rgb(59, 130, 246)",
+		pointBorderColor: "rgb(59, 130, 246)",
 		pointBackgroundColor: "rgb(255, 255, 255)",
-		pointBorderWidth: 10,
-		pointHoverRadius: 5,
-		pointHoverBackgroundColor: "rgb(0, 157, 123)",
-		pointHoverBorderColor: "rgba(220, 220, 220, 1)",
+		pointBorderWidth: 2,
+		pointHoverRadius: 6,
+		pointHoverBackgroundColor: "rgb(59, 130, 246)",
+		pointHoverBorderColor: "rgb(255, 255, 255)",
 		pointHoverBorderWidth: 2,
-		pointRadius: 1,
-		pointHitRadius: 10,
+		pointRadius: 3,
+		pointHitRadius: 20,
+		tension: 0.4,
 	};
 	const data: ChartData<"line", (number | Point)[]> = {
 		labels: reversedItems.map((f) => f.period),
@@ -56,23 +57,70 @@
 </script>

 <template>
-	<Line {data} class="max-h-[50vh] h-[50vh]" />
-	<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
-		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
-					<tr>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th>
-						<th class="px-6 py-3" scope="col"> Amount </th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each items as f}
-						<AggregatedWeightComp item={f} />
-					{/each}
-				</tbody>
-			</table>
+	<div class="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
+		<div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
+			<Line
+				{data}
+				options={{
+					responsive: true,
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							position: "top",
+							labels: {
+								padding: 20,
+								color: "rgb(229, 231, 235)",
+								font: {
+									size: 12,
+									family: "'Nunito', sans-serif",
+								},
+							},
+						},
+					},
+					scales: {
+						y: {
+							grid: {
+								color: "rgba(75, 85, 99, 0.2)",
+							},
+							ticks: {
+								color: "rgb(229, 231, 235)",
+								font: {
+									family: "'Nunito', sans-serif",
+								},
+							},
+						},
+						x: {
+							grid: {
+								color: "rgba(75, 85, 99, 0.2)",
+							},
+							ticks: {
+								color: "rgb(229, 231, 235)",
+								font: {
+									family: "'Nunito', sans-serif",
+								},
+							},
+						},
+					},
+				}}
+				class="max-h-[50vh] h-[50vh]"
+			/>
+		</div>
+		<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
+			<div class="relative overflow-x-auto shadow-md rounded-lg">
+				<table class="w-full text-sm text-left text-gray-400">
+					<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
+						<tr>
+							<th class="px-6 py-4 font-semibold" scope="col">Period</th>
+							<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each items as f}
+							<AggregatedWeightComp item={f} />
+						{/each}
+					</tbody>
+				</table>
+			</div>
 		</div>
-		<div></div>
 	</div>
 </template>
--- a/frontend/src/lib/components/Weight/EmptyWeightComp.svelte
+++ b/frontend/src/lib/components/Weight/EmptyWeightComp.svelte
@@ -1,34 +1,34 @@
 <script lang="ts">
-	import { toast } from 'svelte-sonner'
+	import { toast } from "svelte-sonner";
 	import { main } from "$wails/models";
-	import { CreateWeight } from '$wails/main/App';
-	import { weightStore } from '$lib/store/Weight/weightStore';
+	import { CreateWeight } from "$wails/main/App";
+	import { weightStore } from "$lib/store/Weight/weightStore";

 	let item: main.Weight = {
 		weight: 0,
-		rowid: 0,
-		date: ''
-	}
-	let weight: string | null = null
+		id: 0,
+		date: "",
+	};
+	let weight: string | null = null;

-	async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
-		if (!weight) return
-		weight = weight.trim()
+	async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) {
+		if (!weight) return;
+		weight = weight.trim();

-		if (event.key == 'Enter') {
-			event.preventDefault()
-			item.weight = parseFloat(weight)
+		if (event.key == "Enter") {
+			event.preventDefault();
+			item.weight = parseFloat(weight);

 			if (isNaN(item.weight)) {
-				toast.error('Weight must be a number')
-				return
+				toast.error("Weight must be a number");
+				return;
 			}
-			const res = await CreateWeight(item)
-			weight = ''
+			const res = await CreateWeight(item);
+			weight = "";

 			if (!res.success) {
-				toast.error(`failed to create weight with error ${res.error}`)
-				return
+				toast.error(`failed to create weight with error ${res.error}`);
+				return;
 			}

 			console.log("update");
@@ -39,16 +39,20 @@

 <template>
 	<tr class="border-b border-gray-200 dark:border-gray-700 text-lg font-bold">
-		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-		    scope="row">
+		<th
+			class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+			scope="row"
+		>
 		</th>
-		<td bind:innerText={weight}
-		    class:border-[3px]={!weight}
-		    class:border-red-600={!weight}
-		    class="px-6 py-4 overflow-hidden"
-		    contenteditable="true"
-		    autofocus
-		    on:keydown={update}>
+		<td
+			bind:innerText={weight}
+			class:border-[3px]={!weight}
+			class:border-red-600={!weight}
+			class="px-6 py-4 overflow-hidden"
+			contenteditable="true"
+			autofocus
+			on:keydown={update}
+		>
 		</td>
 	</tr>
 </template>
--- a/frontend/src/lib/components/Weight/WeightComp.svelte
+++ b/frontend/src/lib/components/Weight/WeightComp.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { main } from "$wails/models";

-	export let item: main.Weight
-	export let dateColor: string
+	export let item: main.Weight;
+	export let dateColor: string;
 </script>

 <template>
 	<tr class="border-b border-gray-200 dark:border-gray-700 font-bold text-lg">
-		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-		    style="color: {dateColor}"
-		    scope="row">
+		<th
+			class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+			style="color: {dateColor}"
+			scope="row"
+		>
 			{item.date}
 		</th>
 		<td class="px-6 py-4">
--- a/frontend/src/lib/components/Weight/WeightTable.svelte
+++ b/frontend/src/lib/components/Weight/WeightTable.svelte
@@ -15,25 +15,22 @@
 		const date = item.date.toString().split("T")[0];
 		if (!date) return GenerateColor();
 		if (!dateColors.has(date)) dateColors.set(date, GenerateColor());
-		// THERE'S NOTHING UNDEFINED HERE
-		// WE GOT RID OF UNDEFINED ON LINE 33
-		// ASSHOLE
 		// @ts-ignore
 		return dateColors.get(date);
 	}
 </script>

 <template>
-	<div class="relative flex flex-col flex-grow h-[93vh]" data-vaul-drawer-wrapper id="page">
-		<div class="relative overflow-auto h-full shadow-md sm:rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
+	<div class="relative flex flex-col flex-grow h-[93vh] select-none bg-gray-900" data-vaul-drawer-wrapper id="page">
+		<div class="relative overflow-auto h-full shadow-md rounded-lg">
+			<table class="w-full text-sm text-left text-gray-400">
+				<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
 					<tr>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Date </th>
-						<th class="px-6 py-3 w-10/12" scope="col"> Weight </th>
+						<th class="px-6 py-4 font-semibold w-2/12" scope="col">Date</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Weight</th>
 					</tr>
 				</thead>
-				<tbody>
+				<tbody class="divide-y divide-gray-700">
 					<EmptyWeightComp />
 					{#each items as f}
 						<WeightComp item={f} dateColor={getDateColor(f)} />
@@ -41,6 +38,5 @@
 				</tbody>
 			</table>
 		</div>
-		<div></div>
 	</div>
 </template>
--- a/frontend/src/lib/router/Router.svelte
+++ b/frontend/src/lib/router/Router.svelte
@@ -1,29 +1,29 @@
 <script lang="ts">
-	import Router from 'svelte-spa-router'
-	import Energy from './routes/Energy/Energy.svelte'
-	import Daily from './routes/Energy/Daily.svelte'
-	import Weekly from './routes/Energy/Weekly.svelte'
-	import Monthly from './routes/Energy/Monthly.svelte'
-	import Yearly from './routes/Energy/Yearly.svelte'
-	import Weight from './routes/Weight/Weight.svelte'
-	import WDaily from './routes/Weight/WDaily.svelte'
-	import WWeekly from './routes/Weight/WWeekly.svelte'
-	import WMonthly from './routes/Weight/WMonthly.svelte'
-	import WYearly from './routes/Weight/WYearly.svelte'
+	import Router from "svelte-spa-router";
+	import Energy from "./routes/Energy/Energy.svelte";
+	import Daily from "./routes/Energy/Daily.svelte";
+	import Weekly from "./routes/Energy/Weekly.svelte";
+	import Monthly from "./routes/Energy/Monthly.svelte";
+	import Yearly from "./routes/Energy/Yearly.svelte";
+	import Weight from "./routes/Weight/Weight.svelte";
+	import WDaily from "./routes/Weight/WDaily.svelte";
+	import WWeekly from "./routes/Weight/WWeekly.svelte";
+	import WMonthly from "./routes/Weight/WMonthly.svelte";
+	import WYearly from "./routes/Weight/WYearly.svelte";

 	const routes = {
-		'/': Energy,
-		'/Energy': Energy,
-		'/Energy/daily': Daily,
-		'/Energy/weekly': Weekly,
-		'/Energy/monthly': Monthly,
-		'/Energy/yearly': Yearly,
-		'/Weight': Weight,
-		'/Weight/daily': WDaily,
-		'/Weight/weekly': WWeekly,
-		'/Weight/monthly': WMonthly,
-		'/Weight/yearly': WYearly
-	}
+		"/": Energy,
+		"/Energy": Energy,
+		"/Energy/daily": Daily,
+		"/Energy/weekly": Weekly,
+		"/Energy/monthly": Monthly,
+		"/Energy/yearly": Yearly,
+		"/Weight": Weight,
+		"/Weight/daily": WDaily,
+		"/Weight/weekly": WWeekly,
+		"/Weight/monthly": WMonthly,
+		"/Weight/yearly": WYearly,
+	};
 </script>

 <Router {routes} />
--- a/frontend/src/lib/router/routes/Energy/Energy.svelte
+++ b/frontend/src/lib/router/routes/Energy/Energy.svelte
@@ -11,16 +11,16 @@
 	// Not when pushing unshifting the store
 	// This is the only thing that works
 	// Hacky ass shit
-    let forceUpdate = false;
-    foodStore.subscribe(() => {
-        forceUpdate = !forceUpdate;
-    });
+	let forceUpdate = false;
+	foodStore.subscribe(() => {
+		forceUpdate = !forceUpdate;
+	});
 </script>

 <template>
-    {#if forceUpdate}
-        <FoodTable items={$foodStore} />
-    {:else}
-        <FoodTable items={$foodStore} />
-    {/if}
+	{#if forceUpdate}
+		<FoodTable items={$foodStore} />
+	{:else}
+		<FoodTable items={$foodStore} />
+	{/if}
 </template>
--- a/frontend/src/lib/router/routes/Weight/WDaily.svelte
+++ b/frontend/src/lib/router/routes/Weight/WDaily.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
-	import { dailyWeightStore } from '$lib/store/Weight/dailyWeightStore'
+	import AggregatedWeightTable from "$components/Weight/Aggregated/AggregatedWeightTable.svelte";
+	import { dailyWeightStore } from "$lib/store/Weight/dailyWeightStore";
 </script>

 <template>
-	<AggregatedWeightTable items="{$dailyWeightStore}" />
+	<AggregatedWeightTable items={$dailyWeightStore} />
 </template>
--- a/frontend/src/lib/router/routes/Weight/WMonthly.svelte
+++ b/frontend/src/lib/router/routes/Weight/WMonthly.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { monthlyWeightStore } from '$lib/store/Weight/monthlyWeightStore'
-	import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
+	import { monthlyWeightStore } from "$lib/store/Weight/monthlyWeightStore";
+	import AggregatedWeightTable from "$components/Weight/Aggregated/AggregatedWeightTable.svelte";
 </script>

 <template>
-	<AggregatedWeightTable items="{$monthlyWeightStore}" />
+	<AggregatedWeightTable items={$monthlyWeightStore} />
 </template>
--- a/frontend/src/lib/router/routes/Weight/WWeekly.svelte
+++ b/frontend/src/lib/router/routes/Weight/WWeekly.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { weeklyWeightStore } from '$lib/store/Weight/weeklyWeightStore'
-	import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
+	import { weeklyWeightStore } from "$lib/store/Weight/weeklyWeightStore";
+	import AggregatedWeightTable from "$components/Weight/Aggregated/AggregatedWeightTable.svelte";
 </script>

 <template>
-	<AggregatedWeightTable items="{$weeklyWeightStore}" />
+	<AggregatedWeightTable items={$weeklyWeightStore} />
 </template>
--- a/frontend/src/lib/router/routes/Weight/WYearly.svelte
+++ b/frontend/src/lib/router/routes/Weight/WYearly.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
-	import { yearlyWeightStore } from '$lib/store/Weight/yearlyWeightStore'
+	import AggregatedWeightTable from "$components/Weight/Aggregated/AggregatedWeightTable.svelte";
+	import { yearlyWeightStore } from "$lib/store/Weight/yearlyWeightStore";
 </script>

 <template>
-	<AggregatedWeightTable items="{$yearlyWeightStore}" />
+	<AggregatedWeightTable items={$yearlyWeightStore} />
 </template>
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,7 +1,6 @@
 import { cubicOut } from "svelte/easing";
 import type { TransitionConfig } from "svelte/transition";
 import regression from "regression";
-import type { ChartData, Point } from "chart.js";

 type FlyAndScaleParams = {
 	y?: number;
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,8 +1,8 @@
-import './style.css'
-import App from './App.svelte'
+import "./style.css";
+import App from "./App.svelte";

 const app = new App({
-  target: document.getElementById('app')
-})
+	target: document.getElementById("app"),
+});

-export default app
+export default app;
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -3,28 +3,26 @@
@tailwind utilities;

 html {
-    background-color: rgba(27, 38, 54, 1);
-    text-align: center;
-    color: white;
+	background-color: rgba(27, 38, 54, 1);
+	text-align: center;
+	color: white;
 }

 body {
-    margin: 0;
-    color: white;
-    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+	margin: 0;
+	color: white;
+	font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+		"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 }

@font-face {
-    font-family: "Nunito";
-    font-style: normal;
-    font-weight: 400;
-    src: local(""),
-    url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
+	font-family: "Nunito";
+	font-style: normal;
+	font-weight: 400;
+	src: local(""), url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
 }

 #app {
-    height: 100vh;
-    text-align: center;
+	height: 100vh;
+	text-align: center;
 }
--- a/frontend/wailsjs/go/models.ts
+++ b/frontend/wailsjs/go/models.ts
@@ -33,7 +33,7 @@ export namespace main {
 	    }
 	}
 	export class Food {
-	    rowid: number;
+	    id: number;
 	    date: string;
 	    food: string;
 	    description: string;
@@ -47,7 +47,7 @@ export namespace main {
 	
 	    constructor(source: any = {}) {
 	        if ('string' === typeof source) source = JSON.parse(source);
-	        this.rowid = source["rowid"];
+	        this.id = source["id"];
 	        this.date = source["date"];
 	        this.food = source["food"];
 	        this.description = source["description"];
@@ -57,7 +57,7 @@ export namespace main {
 	    }
 	}
 	export class FoodSearch {
-	    rowid: number;
+	    id: number;
 	    date: string;
 	    food: string;
 	    description: string;
@@ -72,7 +72,7 @@ export namespace main {
 	
 	    constructor(source: any = {}) {
 	        if ('string' === typeof source) source = JSON.parse(source);
-	        this.rowid = source["rowid"];
+	        this.id = source["id"];
 	        this.date = source["date"];
 	        this.food = source["food"];
 	        this.description = source["description"];
@@ -267,7 +267,7 @@ export namespace main {
 	    }
 	}
 	export class Weight {
-	    rowid: number;
+	    id: number;
 	    date: string;
 	    weight: number;
 	
@@ -277,7 +277,7 @@ export namespace main {
 	
 	    constructor(source: any = {}) {
 	        if ('string' === typeof source) source = JSON.parse(source);
-	        this.rowid = source["rowid"];
+	        this.id = source["id"];
 	        this.date = source["date"];
 	        this.weight = source["weight"];
 	    }
--- a/weightservice.go
+++ b/weightservice.go
@@ -10,7 +10,7 @@ type (
 		db *DB
 	}
 	Weight struct {
-		Rowid  int64   `json:"rowid"`
+		Id  int64   `json:"id"`
 		Date   string  `json:"date"`
 		Weight float32 `json:"weight"`
 	}
@@ -20,7 +20,7 @@ type (
 	}
 )

-const weightcolumns = "rowid, date, weight"
+const weightcolumns = "id, date, weight"
 const weightAggregatedColumns = "period, amount"

 func (w *WeightService) GetRecent() ([]Weight, error) {
@@ -37,7 +37,7 @@ func (w *WeightService) GetRecent() ([]Weight, error) {

 	for row.Next() {
 		var weight Weight
-		err := row.Scan(&weight.Rowid, &weight.Date, &weight.Weight)
+		err := row.Scan(&weight.Id, &weight.Date, &weight.Weight)
 		if err != nil {
 			log.Printf("error scanning row: %v", err)
 			continue
@@ -62,22 +62,22 @@ func (w *WeightService) Create(weight Weight) (Weight, error) {
 		return weight, fmt.Errorf("error inserting weight: %v", err)
 	}

-	rowid, err := res.LastInsertId()
+	id, err := res.LastInsertId()
 	if err != nil {
 		return weight, fmt.Errorf("error getting last insert id: %v", err)
 	}

-	return w.GetByRowid(rowid)
+	return w.GetById(id)
 }

-func (w *WeightService) GetByRowid(rowid int64) (Weight, error) {
+func (w *WeightService) GetById(id int64) (Weight, error) {
 	var res Weight
 	if w.db == nil || !w.db.Ready {
-		return res, fmt.Errorf("cannot get weight by rowid, db is nil or is not ready")
+		return res, fmt.Errorf("cannot get weight by id, db is nil or is not ready")
 	}

-	row := w.db.readConn.QueryRow(fmt.Sprintf("SELECT %s from weightView WHERE rowid = ?", weightcolumns), rowid)
-	err := row.Scan(&res.Rowid, &res.Date, &res.Weight)
+	row := w.db.readConn.QueryRow(fmt.Sprintf("SELECT %s from weightView WHERE id = ?", weightcolumns), id)
+	err := row.Scan(&res.Id, &res.Date, &res.Weight)
 	if err != nil {
 		return res, fmt.Errorf("error scanning row: %v", err)
 	}
Author	SHA1	Message	Date
PhatPhuckDave	fc688bf4bc	Code format	2024-11-08 10:36:24 +01:00
PhatPhuckDave	31c7b31e65	Make it not look like such dogshit	2024-11-08 10:34:32 +01:00
PhatPhuckDave	cb0d8860ed	Make better autocomplete selections	2024-11-08 09:05:55 +01:00
PhatPhuckDave	24546a4ef5	Migrate the rest of everything from rowid to id	2024-10-25 16:37:37 +02:00
PhatPhuckDave	b89e27d5b4	Add primary keys to tables	2024-10-25 15:16:10 +02:00