Code format

Exit would prevent defers from running which meant db would be left
dangling

app.go

@@ -2,7 +2,8 @@ package main
 
 import (
 	"context"
-	"os"
+
+	"github.com/wailsapp/wails/v2/pkg/runtime"
 )
 
 // App struct
@@ -44,12 +45,12 @@ func (a *App) UpdateFood(food Food) WailsFood1 {
 	return WailsFood1{Data: data, Success: true}
 }
 
-func (a *App) GetLastPer100(name string) WailsPer100 {
+func (a *App) GetLastPer100(name string) WailsFoodSearch {
 	data, err := foodService.GetLastPer100(name)
 	if err != nil {
-		return WailsPer100{Success: false, Error: err.Error()}
+		return WailsFoodSearch{Success: false, Error: err.Error()}
 	}
-	return WailsPer100{Data: data, Success: true}
+	return WailsFoodSearch{Data: data, Success: true}
 }
 
 func (a *App) GetDailyFood() WailsAggregateFood {
@@ -139,5 +140,5 @@ func (a *App) SetSetting(key string, value int64) WailsGenericAck {
 
 //region other
 func (a *App) Close() {
-	os.Exit(0)
+	runtime.Quit(a.ctx)
 }

db.go

@@ -4,9 +4,10 @@ import (
 	"database/sql"
 	"fmt"
 	"log"
+	"os"
 	"time"
 
-	_ "github.com/mattn/go-sqlite3"
+	"github.com/mattn/go-sqlite3"
 )
 
 type DB struct {
@@ -21,7 +22,27 @@ func (db *DB) Open() error {
 		return fmt.Errorf("database path not set")
 	}
 
-	writeConn, err := sql.Open("sqlite3", db.path+"?_journal=WAL&_synchronous=NORMAL")
+	file, err := os.Open(db.path)
+	if err != nil {
+		if os.IsNotExist(err) {
+			log.Printf("Database file does not exist at %s, creating", db.path)
+			file, err := os.Create(db.path)
+			if err != nil {
+				return fmt.Errorf("failed to create database file: %v", err)
+			}
+			log.Printf("Database created at %s", db.path)
+			file.Close()
+		} else {
+			return fmt.Errorf("failed to open database file: %v", err)
+		}
+	}
+	file.Close()
+
+	sql.Register("spellfixlite", &sqlite3.SQLiteDriver{
+		Extensions: []string{"spellfix"},
+	})
+
+	writeConn, err := sql.Open("spellfixlite", db.path+"?_journal=WAL&_synchronous=NORMAL")
 	if err != nil {
 		Error.Printf("%++v", err)
 		return err
@@ -31,7 +52,7 @@ func (db *DB) Open() error {
 	writeConn.SetConnMaxLifetime(30 * time.Second)
 	db.writeConn = writeConn
 
-	readConn, err := sql.Open("sqlite3", db.path+"?mode=ro&_journal=WAL&_synchronous=NORMAL&_mode=ro")
+	readConn, err := sql.Open("spellfixlite", db.path+"?mode=ro&_journal=WAL&_synchronous=NORMAL&_mode=ro")
 	if err != nil {
 		Error.Printf("%++v", err)
 		return err
@@ -79,7 +100,7 @@ func (db *DB) Init(ddl string) error {
 		if _, ok := rows[table]; !ok {
 			log.Printf("Table %s not found, initializing", table)
 			needsInit = true
-			break;
+			break
 		}
 	}
 
@@ -91,6 +112,11 @@ func (db *DB) Init(ddl string) error {
 	_, err = db.writeConn.Exec(ddl)
 	if err != nil {
 		Error.Printf("%++v", err)
+		log.Printf("%#v", "Rolling back")
+		_, err2 := db.writeConn.Exec("ROLLBACK;")
+		if err2 != nil {
+			Error.Printf("Error rollingback! %++v", err)
+		}
 		return err
 	}
 

food.ddl

@@ -1,6 +1,7 @@
-begin transaction;
+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
@@ -27,32 +28,33 @@ order by date desc;
 create view weightDaily as
 select strftime('%Y-%m-%d', date) as period,
 	round(avg(weight), 2) as amount
-	from weight
+from weight
 group by strftime('%Y-%m-%d', date)
 order by date desc;
 
 create view weightWeekly as
 select strftime('%Y-%W', date) as period,
 	round(avg(weight), 2) as amount
-	from weight
+from weight
 group by strftime('%Y-%W', date)
 order by date desc;
 
 create view weightMonthly as
 select strftime('%Y-%m', date) as period,
 	round(avg(weight), 2) as amount
-	from weight
+from weight
 group by strftime('%Y-%m', date)
 order by date desc;
 
 create view weightYearly as
 select strftime('%Y', date) as period,
 	round(avg(weight), 2) as amount
-	from weight
+from weight
 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,
@@ -61,6 +63,80 @@ create table food(
 	energy generated always as (coalesce(amount, 0) * coalesce(per100, 0) / 100) stored
 );
 
+create virtual table foodfix using spellfix1;
+insert into foodfix (word, rank)
+select food as word,
+	count(*) as rank
+from food
+group by food;
+
+drop trigger if exists food_foodfix_insert;
+create trigger food_foodfix_insert AFTER
+insert on food for EACH row
+begin
+update foodfix
+set rank = rank + 1
+where word = new.food;
+insert into foodfix (word, rank)
+select new.food,
+	1
+where not exists (
+		select 1
+		from foodfix
+		where word = new.food
+	);
+end;
+
+drop trigger if exists food_foodfix_delete;
+create trigger food_foodfix_delete AFTER
+delete on food for EACH row
+begin
+update foodfix
+set rank = rank - 1
+where word = old.food;
+
+delete from foodfix
+where word = old.food
+	and rank <= 0;
+end;
+
+
+drop trigger if exists food_foodfix_update;
+create trigger food_foodfix_update AFTER
+update on food for EACH row
+begin
+update foodfix
+set rank = rank - 1
+where word = old.food;
+
+delete from foodfix
+where word = old.food
+	and rank <= 0;
+update foodfix
+set rank = rank + 1
+where word = new.food;
+
+insert into foodfix (word, rank)
+select new.food,
+	1
+where not exists (
+		select 1
+		from foodfix
+		where word = new.food
+	);
+end;
+
+with search_results as (
+    select word, score, f.rowid, f.*
+    from foodfix
+	inner join food f on f.food == word
+    where word match 'B'
+)
+select rowid, food, score, date, description, amount, per100, energy 
+from search_results
+group by food
+order by score asc, date desc;
+
 create index dailyIdx on food(strftime('%Y-%m-%d', date));
 create index weeklyIdx on food(strftime('%Y-%W', date));
 create index monthlyIdx on food(strftime('%Y-%m', date));
@@ -76,7 +152,7 @@ drop view if exists foodYearly;
 drop view if exists foodRecent;
 
 create view foodView as
-select rowid,
+select id,
 	date,
 	food,
 	description,
@@ -122,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;
@@ -134,17 +209,17 @@ insert on food
 begin
 update food
 set per100 = coalesce(
-		new .per100,
+		new.per100,
 		(
 			select per100
 			from food
-			where food = new .food
+			where food = new.food
 				and per100 is not null
 			order by date desc
 			limit 1
 		)
 	)
-where rowid = new .rowid;
+where id = new.id;
 end;
 
 create table settings(

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"`
@@ -19,6 +19,10 @@ type (
 		Per100     float32 `json:"per100"`
 		Energy     float32 `json:"energy"`
 	}
+	FoodSearch struct {
+		Food
+		Score int64 `json:"score"`
+	}
 	AggregatedFood struct {
 		Period    string  `json:"period"`
 		Amount    float32 `json:"amount"`
@@ -27,11 +31,11 @@ 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) {
-	var res []Food
+	var res []Food = []Food{}
 	if s.db == nil || !s.db.Ready {
 		return res, fmt.Errorf("cannot get recent food, db is nil or is not ready")
 	}
@@ -44,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
@@ -56,19 +60,48 @@ func (s *FoodService) GetRecent() ([]Food, error) {
 	return res, nil
 }
 
-func (s *FoodService) GetLastPer100(name string) (float32, error) {
+func (s *FoodService) GetLastPer100(name string) ([]FoodSearch, error) {
+	res := []FoodSearch{}
 	if s.db == nil || !s.db.Ready {
-		return 0, fmt.Errorf("cannot get last per100, db is nil or is not ready")
+		return res, fmt.Errorf("cannot get last per100, db is nil or is not ready")
 	}
 
-	row := s.db.readConn.QueryRow("SELECT per100 FROM food WHERE food like ? ORDER BY rowid DESC LIMIT 1", name+"%")
+	query := fmt.Sprintf(`
-	var per100 float32
+with search_results as (
-	err := row.Scan(&per100)
+	select word, score, f.rowid, f.*,
+		row_number() over (partition by f.food order by score asc, date desc) as rn
+	from foodfix
+	inner join food f on f.food == word
+	where word MATCH ?
+)
+select %s, score
+from search_results
+where rn = 1
+order by score asc, date desc
+limit %d
+		`, foodColumns, Settings.SearchLimit)
+	// log.Printf("%#v", query)
+	rows, err := s.db.readConn.Query(query, name)
 	if err != nil {
-		return 0, fmt.Errorf("error scanning row: %v", err)
+		log.Printf("error getting last per100: %v", err)
+		return res, err
 	}
 
-	return per100, nil
+	for rows.Next() {
+		var f FoodSearch
+		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
+		}
+		res = append(res, f)
+	}
+
+	if len(res) == 0 {
+		return nil, fmt.Errorf("no results found for %s", name)
+	}
+
+	return res, nil
 }
 
 func (s *FoodService) Create(food Food) (Food, error) {
@@ -96,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 {
+	if food.Id <= 0 {
-		return food, fmt.Errorf("cannot update food, rowid is less than or equal to 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")
@@ -119,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)
+	row := s.db.readConn.QueryRow(fmt.Sprintf("SELECT %s from foodView WHERE id = ?", foodColumns), id)
-	err := row.Scan(&res.Rowid, &res.Date, &res.Food, &res.Descripton, &res.Amount, &res.Per100, &res.Energy)
+	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)
 	}
@@ -151,7 +184,7 @@ func (s *FoodService) GetByRowid(rowid int64) (Food, error) {
 // I could probably refactor this to be less of a disaster...
 // But I think it'll work for now
 func (s *FoodService) GetDaily() ([]AggregatedFood, error) {
-	var res []AggregatedFood
+	res := []AggregatedFood{}
 	if s.db == nil || !s.db.Ready {
 		return res, fmt.Errorf("cannot get daily food, db is nil or is not ready")
 	}
@@ -177,7 +210,7 @@ func (s *FoodService) GetDaily() ([]AggregatedFood, error) {
 }
 
 func (s *FoodService) GetWeekly() ([]AggregatedFood, error) {
-	var res []AggregatedFood
+	res := []AggregatedFood{}
 	if s.db == nil || !s.db.Ready {
 		return res, fmt.Errorf("cannot get weekly food, db is nil or is not ready")
 	}
@@ -203,7 +236,7 @@ func (s *FoodService) GetWeekly() ([]AggregatedFood, error) {
 }
 
 func (s *FoodService) GetMonthly() ([]AggregatedFood, error) {
-	var res []AggregatedFood
+	res := []AggregatedFood{}
 	if s.db == nil || !s.db.Ready {
 		return res, fmt.Errorf("cannot get monthly food, db is nil or is not ready")
 	}
@@ -229,7 +262,7 @@ func (s *FoodService) GetMonthly() ([]AggregatedFood, error) {
 }
 
 func (s *FoodService) GetYearly() ([]AggregatedFood, error) {
-	var res []AggregatedFood
+	res := []AggregatedFood{}
 	if s.db == nil || !s.db.Ready {
 		return res, fmt.Errorf("cannot get yearly food, db is nil or is not ready")
 	}

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"
+		<th
-		    scope="row">
+			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">

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)",
+		backgroundColor: "rgba(59, 130, 246, 0.1)",
-		borderColor: "rgb(205, 130, 158)",
+		borderColor: "rgb(59, 130, 246)",
-		pointBorderColor: "rgb(205, 130, 158)",
+		pointBorderColor: "rgb(59, 130, 246)",
 		pointBackgroundColor: "rgb(255, 255, 255)",
-		pointBorderWidth: 10,
+		pointBorderWidth: 2,
-		pointHoverRadius: 5,
+		pointHoverRadius: 6,
-		pointHoverBackgroundColor: "rgb(0, 157, 123)",
+		pointHoverBackgroundColor: "rgb(59, 130, 246)",
-		pointHoverBorderColor: "rgba(220, 220, 220, 1)",
+		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="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
-	<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
+		<div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
-		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+			<Line
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+				{data}
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
+				options={{
-					<tr>
+					responsive: true,
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th>
+					maintainAspectRatio: false,
-						<th class="px-6 py-3" scope="col"> Amount </th>
+					plugins: {
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col"> AvgPer100 </th>
+						legend: {
-						<th class="px-6 py-3" scope="col"> Energy </th>
+							position: "top",
-					</tr>
+							labels: {
-				</thead>
+								padding: 20,
-				<tbody>
+								color: "rgb(229, 231, 235)",
-					{#each items as f}
+								font: {
-						<AggregatedFoodComp item={f} />
+									size: 12,
-					{/each}
+									family: "'Nunito', sans-serif",
-				</tbody>
+								},
-			</table>
+							},
+						},
+					},
+					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>

frontend/src/lib/components/Energy/EmptyFoodComp.svelte

@@ -3,12 +3,13 @@
 	import { main } from "$wails/models";
 	import { CreateFood, GetLastPer100 } from "$wails/main/App";
 	import { foodStore } from "$lib/store/Energy/foodStore";
+	import FoodSearchEntry from "./FoodSearchEntry.svelte";
 
 	let item: main.Food = {
 		food: "",
 		amount: 0,
 		description: "",
-		rowid: 0,
+		id: 0,
 		date: "",
 		per100: 0,
 		energy: 0,
@@ -20,6 +21,52 @@
 	let per100Edited: boolean = false;
 	let per100Element: HTMLTableCellElement;
 	let nameElement: HTMLTableCellElement;
+	let autocompleteList: HTMLUListElement;
+	let foodSearch: main.Food[] = [];
+	let hiLiteIndex: number = -1;
+
+	$: {
+		name = name.trim();
+		if (!name) {
+			foodSearch = [];
+		} else {
+			updateAutocomplete();
+		}
+	}
+
+	function updateAutocomplete() {
+		if (!per100Edited)
+			GetLastPer100(name.trim()).then((res) => {
+				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();
@@ -27,66 +74,103 @@
 		description = description.trim();
 		per100 = per100.trim();
 
+		if (!name) {
+			foodSearch = [];
+			return;
+		}
+
 		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);
+			// If suggestions are visible and we have a highlighted item or at least one suggestion
-			name = "";
+			if (foodSearch.length > 0) {
-			amount = "";
+				const selectedFood = hiLiteIndex >= 0 ? foodSearch[hiLiteIndex] : foodSearch[0];
-			// description = ''
+				setInputVal(selectedFood);
-			per100 = "";
-			per100Edited = false;
-
-			if (!res.success) {
-				toast.error(`failed to create item with error ${res.error}`);
 				return;
 			}
 
-			foodStore.update((value) => [res.data, ...value]);
+			// Only submit if we have no suggestions visible
-			nameElement.focus();
+			if (name && amount && per100) {
+				await handleSubmit();
+			}
 		}
+	}
 
-		if (!per100Edited)
+	function navigateList(e: KeyboardEvent) {
-			GetLastPer100(name.trim()).then((res) => {
+		if (!foodSearch.length) return;
-				if (res.success) {
+
-					per100 = res.data.toString();
+		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;
+		}
+	}
+
+	function setInputVal(food: main.Food) {
+		name = food.food;
+		per100 = String(food.per100);
+		amount = String(food.amount);
+		hiLiteIndex = -1;
+		foodSearch = [];
+	}
+
+	$: {
+		if (nameElement && autocompleteList) {
+			const { top, left, height } = nameElement.getBoundingClientRect();
+			autocompleteList.style.top = `${top + height}px`;
+			autocompleteList.style.left = `${left}px`;
+		}
+	}
+
+	let timeout: number;
+	function handleFocusOut() {
+		timeout = setTimeout(() => {
+			foodSearch = [];
+			hiLiteIndex = -1;
+		}, 100);
+	}
+
+	function handleFocusIn() {
+		clearTimeout(timeout);
+		updateAutocomplete();
 	}
 </script>
 
+<svelte:window on:keydown={navigateList} />
+
 <template>
-	<tr class="border-b border-gray-200 dark:border-gray-700 text-lg font-bold">
+	<tr class="border-b border-gray-700 text-lg font-medium hover:bg-gray-800/50 transition-colors">
-		<th
+		<th class="px-6 py-4 font-medium text-gray-200 whitespace-nowrap" scope="row" />
-			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 -->
 		<td
 			bind:innerText={name}
-			class:border-[3px]={!name}
+			class="px-6 py-4 overflow-hidden focus:outline-none focus:ring-2 focus:ring-blue-500 rounded transition-all"
-			class:border-red-600={!name}
+			class:ring-2={!name}
-			class="px-6 py-4 overflow-hidden"
+			class:ring-red-500={!name}
 			contenteditable="true"
 			autofocus
 			on:keydown={update}
+			on:focusin={handleFocusIn}
+			on:focusout={handleFocusOut}
 			bind:this={nameElement}
-		>
+		/>
-		</td>
 		<td
 			bind:innerText={description}
 			class="px-6 py-4 bg-gray-50 dark:bg-gray-800 overflow-hidden"
 			contenteditable="true"
 			on:keydown={update}
-		>
+		/>
-		</td>
 		<td
 			bind:innerText={amount}
 			class:border-[3px]={!amount}
@@ -94,8 +178,7 @@
 			class="px-6 py-4 overflow-hidden"
 			contenteditable="true"
 			on:keydown={update}
-		>
+		/>
-		</td>
 		<td
 			bind:this={per100Element}
 			bind:innerText={per100}
@@ -104,7 +187,13 @@
 			class:border-orange-600={!per100}
 			contenteditable="true"
 			on:keydown={update}
-		>
+		/>
-		</td>
 	</tr>
+	{#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)} />
+			{/each}
+		</ul>
+	{/if}
 </template>

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>

frontend/src/lib/components/Energy/FoodComp.svelte

@@ -1,84 +1,94 @@
 <script lang="ts">
-	import { UpdateFood } from '$wails/main/App';
+	import { UpdateFood } from "$wails/main/App";
-	import {main} from '$wails/models'
+	import { main } from "$wails/models";
-	import { toast } from 'svelte-sonner'
+	import { toast } from "svelte-sonner";
 
-	export let item: main.Food
+	export let item: main.Food;
-	export let energyColor: string
+	export let energyColor: string;
-	export let nameColor: string
+	export let nameColor: string;
-	export let dateColor: string
+	export let dateColor: string;
 
-	let amount: string = item.amount.toString()
+	let amount: string = item.amount.toString();
-	let per100: string = item.per100?.toString() ?? ''
+	let per100: string = item.per100?.toString() ?? "";
-	let description: string = item.description ?? ''
+	let description: string = item.description ?? "";
-	let name: string = item.food
+	let name: string = item.food;
 
-	async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
+	async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) {
-		if (event.key == 'Enter') {
+		if (event.key == "Enter") {
-			event.preventDefault()
+			event.preventDefault();
-			await updateItem()
+			await updateItem();
 		}
 	}
 
 	async function focusOutUpdate() {
-		await updateItem()
+		await updateItem();
 	}
 
 	async function updateItem() {
-		amount = amount.trim()
+		amount = amount.trim();
-		per100 = per100.trim()
+		per100 = per100.trim();
-		description = description.trim()
+		description = description.trim();
-		name = name.trim()
+		name = name.trim();
 
-		item.food = name
+		item.food = name;
-		item.description = description
+		item.description = description;
-		item.amount = parseInt(amount)
+		item.amount = parseInt(amount);
-		item.per100 = parseInt(per100)
+		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
+		name = item.food;
-		description = item.description ?? ''
+		description = item.description ?? "";
-		amount = item.amount.toString()
+		amount = item.amount.toString();
-		per100 = item.per100?.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"
+		<th
-		    style="color: {dateColor}"
+			class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-		    scope="row">
+			style="color: {dateColor}"
+			scope="row"
+		>
 			{item.date}
 		</th>
-		<td class="px-6 py-4"
+		<td
-		    style="color: {nameColor}"
+			class="px-6 py-4"
-		    contenteditable="true"
+			style="color: {nameColor}"
-		    bind:innerText={name}
+			contenteditable="true"
-		    on:focusout={focusOutUpdate}
+			bind:innerText={name}
-		    on:keydown={update}>
+			on:focusout={focusOutUpdate}
+			on:keydown={update}
+		>
 		</td>
-		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
+		<td
-		    contenteditable="true"
+			class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
-		    bind:innerText={description}
+			contenteditable="true"
-		    on:focusout={focusOutUpdate}
+			bind:innerText={description}
-		    on:keydown={update}>
+			on:focusout={focusOutUpdate}
+			on:keydown={update}
+		>
 		</td>
-		<td class="px-6 py-4"
+		<td
-		    contenteditable="true"
+			class="px-6 py-4"
-		    bind:innerText={amount}
+			contenteditable="true"
-		    on:focusout={focusOutUpdate}
+			bind:innerText={amount}
-		    on:keydown={update}>
+			on:focusout={focusOutUpdate}
+			on:keydown={update}
+		>
 		</td>
-		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
+		<td
-		    contenteditable="true"
+			class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
-		    bind:innerText={per100}
+			contenteditable="true"
-		    on:focusout={focusOutUpdate}
+			bind:innerText={per100}
-		    on:keydown={update}>
+			on:focusout={focusOutUpdate}
+			on:keydown={update}
+		>
 		</td>
 		<td class="px-6 py-4" style="color: {energyColor}">
 			{item.energy}

frontend/src/lib/components/Energy/FoodSearchEntry.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let itemLabel: string;
+	export let highlighted: boolean;
+</script>
+
+<li
+	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
+>
+	{itemLabel}
+</li>

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 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 sm:rounded-lg">
+		<div class="relative overflow-auto h-full shadow-md rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+			<table class="w-full text-sm text-left text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark: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-4 font-semibold 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-4 font-semibold" 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-4 font-semibold" scope="col">Description</th>
-						<th class="px-6 py-3 w-1/12" scope="col"> Amount </th>
+						<th class="px-6 py-4 font-semibold" 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-4 font-semibold" 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" 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>

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
+	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"
-   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
 >
-	<div>
+	<div class="flex flex-col gap-2">
-		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
+		<nav class="flex space-x-6 text-2xl font-bold select-none">
 			<a
 				use:link
-				class={"/" == $location
+				class="transition-colors hover:text-gray-200 {$location === '/' ? 'text-white' : 'text-gray-400'}"
-					? "transition-colors hover:text-foreground/80"
-					: "transition-colors hover:text-foreground/80 text-foreground/60"}
 				href="/"
-				on:click={(e) => (selected = "Energy")}>Energy</a
+				on:click={() => (selected = "Energy")}>Energy</a
 			>
 			<a
 				use:link
-				class={"/Weight" == $location
+				class="transition-colors hover:text-gray-200 {$location === '/Weight' ? 'text-white' : 'text-gray-400'}"
-					? "transition-colors hover:text-foreground/80"
-					: "transition-colors hover:text-foreground/80 text-foreground/60"}
 				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
+					class="transition-colors hover:text-gray-200 {href === $location ? 'text-white' : 'text-gray-400'}"
-						? "transition-colors hover:text-foreground/80"
+					>{label}</a
-						: "transition-colors hover:text-foreground/80 text-foreground/60"}>{label}</a
 				>
 			{/each}
 		</nav>
 	</div>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="flex items-center gap-6">
-	<div class="absolute right-0 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={() => (showModal = true)}>
+		<EnergyToday />
-		<button>
+		<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 />

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>

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) => {

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>

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"
+		<th
-		    scope="row">
+			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">

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)",
+		backgroundColor: "rgba(59, 130, 246, 0.1)",
-		borderColor: "rgb(205, 130, 158)",
+		borderColor: "rgb(59, 130, 246)",
-		pointBorderColor: "rgb(205, 130, 158)",
+		pointBorderColor: "rgb(59, 130, 246)",
 		pointBackgroundColor: "rgb(255, 255, 255)",
-		pointBorderWidth: 10,
+		pointBorderWidth: 2,
-		pointHoverRadius: 5,
+		pointHoverRadius: 6,
-		pointHoverBackgroundColor: "rgb(0, 157, 123)",
+		pointHoverBackgroundColor: "rgb(59, 130, 246)",
-		pointHoverBorderColor: "rgba(220, 220, 220, 1)",
+		pointHoverBorderColor: "rgb(255, 255, 255)",
 		pointHoverBorderWidth: 2,
-		pointRadius: 1,
+		pointRadius: 3,
-		pointHitRadius: 10,
+		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="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
-	<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
+		<div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
-		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+			<Line
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+				{data}
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
+				options={{
-					<tr>
+					responsive: true,
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th>
+					maintainAspectRatio: false,
-						<th class="px-6 py-3" scope="col"> Amount </th>
+					plugins: {
-					</tr>
+						legend: {
-				</thead>
+							position: "top",
-				<tbody>
+							labels: {
-					{#each items as f}
+								padding: 20,
-						<AggregatedWeightComp item={f} />
+								color: "rgb(229, 231, 235)",
-					{/each}
+								font: {
-				</tbody>
+									size: 12,
-			</table>
+									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>

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 { CreateWeight } from "$wails/main/App";
-	import { weightStore } from '$lib/store/Weight/weightStore';
+	import { weightStore } from "$lib/store/Weight/weightStore";
 
 	let item: main.Weight = {
 		weight: 0,
-		rowid: 0,
+		id: 0,
-		date: ''
+		date: "",
-	}
+	};
-	let weight: string | null = null
+	let weight: string | null = null;
 
-	async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
+	async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) {
-		if (!weight) return
+		if (!weight) return;
-		weight = weight.trim()
+		weight = weight.trim();
 
-		if (event.key == 'Enter') {
+		if (event.key == "Enter") {
-			event.preventDefault()
+			event.preventDefault();
-			item.weight = parseFloat(weight)
+			item.weight = parseFloat(weight);
 
 			if (isNaN(item.weight)) {
-				toast.error('Weight must be a number')
+				toast.error("Weight must be a number");
-				return
+				return;
 			}
-			const res = await CreateWeight(item)
+			const res = await CreateWeight(item);
-			weight = ''
+			weight = "";
-			
+
 			if (!res.success) {
-				toast.error(`failed to create weight with error ${res.error}`)
+				toast.error(`failed to create weight with error ${res.error}`);
-				return
+				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"
+		<th
-		    scope="row">
+			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}
+		<td
-		    class:border-[3px]={!weight}
+			bind:innerText={weight}
-		    class:border-red-600={!weight}
+			class:border-[3px]={!weight}
-		    class="px-6 py-4 overflow-hidden"
+			class:border-red-600={!weight}
-		    contenteditable="true"
+			class="px-6 py-4 overflow-hidden"
-		    autofocus
+			contenteditable="true"
-		    on:keydown={update}>
+			autofocus
+			on:keydown={update}
+		>
 		</td>
 	</tr>
 </template>

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 item: main.Weight;
-	export let dateColor: string
+	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"
+		<th
-		    style="color: {dateColor}"
+			class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-		    scope="row">
+			style="color: {dateColor}"
+			scope="row"
+		>
 			{item.date}
 		</th>
 		<td class="px-6 py-4">

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 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 sm:rounded-lg">
+		<div class="relative overflow-auto h-full shadow-md rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+			<table class="w-full text-sm text-left text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark: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-4 font-semibold 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" 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>

frontend/src/lib/router/Router.svelte

@@ -1,28 +1,29 @@
 <script lang="ts">
-	import Router from 'svelte-spa-router'
+	import Router from "svelte-spa-router";
-	import Energy from './routes/Energy/Energy.svelte'
+	import Energy from "./routes/Energy/Energy.svelte";
-	import Daily from './routes/Energy/Daily.svelte'
+	import Daily from "./routes/Energy/Daily.svelte";
-	import Weekly from './routes/Energy/Weekly.svelte'
+	import Weekly from "./routes/Energy/Weekly.svelte";
-	import Monthly from './routes/Energy/Monthly.svelte'
+	import Monthly from "./routes/Energy/Monthly.svelte";
-	import Yearly from './routes/Energy/Yearly.svelte'
+	import Yearly from "./routes/Energy/Yearly.svelte";
-	import Weight from './routes/Weight/Weight.svelte'
+	import Weight from "./routes/Weight/Weight.svelte";
-	import WDaily from './routes/Weight/WDaily.svelte'
+	import WDaily from "./routes/Weight/WDaily.svelte";
-	import WWeekly from './routes/Weight/WWeekly.svelte'
+	import WWeekly from "./routes/Weight/WWeekly.svelte";
-	import WMonthly from './routes/Weight/WMonthly.svelte'
+	import WMonthly from "./routes/Weight/WMonthly.svelte";
-	import WYearly from './routes/Weight/WYearly.svelte'
+	import WYearly from "./routes/Weight/WYearly.svelte";
 
 	const routes = {
-		'/': Energy,
+		"/": Energy,
-		'/Energy/daily': Daily,
+		"/Energy": Energy,
-		'/Energy/weekly': Weekly,
+		"/Energy/daily": Daily,
-		'/Energy/monthly': Monthly,
+		"/Energy/weekly": Weekly,
-		'/Energy/yearly': Yearly,
+		"/Energy/monthly": Monthly,
-		'/Weight': Weight,
+		"/Energy/yearly": Yearly,
-		'/Weight/daily': WDaily,
+		"/Weight": Weight,
-		'/Weight/weekly': WWeekly,
+		"/Weight/daily": WDaily,
-		'/Weight/monthly': WMonthly,
+		"/Weight/weekly": WWeekly,
-		'/Weight/yearly': WYearly
+		"/Weight/monthly": WMonthly,
-	}
+		"/Weight/yearly": WYearly,
+	};
 </script>
 
 <Router {routes} />

frontend/src/lib/router/routes/Energy/Energy.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import FoodTable from "$lib/components/Energy/FoodTable.svelte";
+	import * as srouter from "svelte-spa-router";
+	import { location } from "svelte-spa-router";
 	import { foodStore } from "$lib/store/Energy/foodStore";
 
 	// Fuck this hacky shit
@@ -9,16 +11,16 @@
 	// Not when pushing unshifting the store
 	// This is the only thing that works
 	// Hacky ass shit
-    let forceUpdate = false;
+	let forceUpdate = false;
-    foodStore.subscribe(() => {
+	foodStore.subscribe(() => {
-        forceUpdate = !forceUpdate;
+		forceUpdate = !forceUpdate;
-    });
+	});
 </script>
 
 <template>
-    {#if forceUpdate}
+	{#if forceUpdate}
-        <FoodTable items={$foodStore} />
+		<FoodTable items={$foodStore} />
-    {:else}
+	{:else}
-        <FoodTable items={$foodStore} />
+		<FoodTable items={$foodStore} />
-    {/if}
+	{/if}
 </template>

frontend/src/lib/router/routes/Weight/WDaily.svelte

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

frontend/src/lib/router/routes/Weight/WMonthly.svelte

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

frontend/src/lib/router/routes/Weight/WWeekly.svelte

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

frontend/src/lib/router/routes/Weight/WYearly.svelte

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

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;

frontend/src/main.ts

@@ -1,8 +1,8 @@
-import './style.css'
+import "./style.css";
-import App from './App.svelte'
+import App from "./App.svelte";
 
 const app = new App({
-  target: document.getElementById('app')
+	target: document.getElementById("app"),
-})
+});
 
-export default app
+export default app;

frontend/src/style.css

@@ -3,28 +3,26 @@
 @tailwind utilities;
 
 html {
-    background-color: rgba(27, 38, 54, 1);
+	background-color: rgba(27, 38, 54, 1);
-    text-align: center;
+	text-align: center;
-    color: white;
+	color: white;
 }
 
 body {
-    margin: 0;
+	margin: 0;
-    color: white;
+	color: white;
-    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+	font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+		"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    sans-serif;
 }
 
 @font-face {
-    font-family: "Nunito";
+	font-family: "Nunito";
-    font-style: normal;
+	font-style: normal;
-    font-weight: 400;
+	font-weight: 400;
-    src: local(""),
+	src: local(""), url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
-    url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
 }
 
 #app {
-    height: 100vh;
+	height: 100vh;
-    text-align: center;
+	text-align: center;
-}
+}

frontend/wailsjs/go/main/App.d.ts

@@ -14,7 +14,7 @@ export function GetDailyWeight():Promise<main.WailsAggregateWeight>;
 
 export function GetFood():Promise<main.WailsFood>;
 
-export function GetLastPer100(arg1:string):Promise<main.WailsPer100>;
+export function GetLastPer100(arg1:string):Promise<main.WailsFoodSearch>;
 
 export function GetMonthlyFood():Promise<main.WailsAggregateFood>;
 

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"];
@@ -56,6 +56,32 @@ export namespace main {
 	        this.energy = source["energy"];
 	    }
 	}
+	export class FoodSearch {
+	    id: number;
+	    date: string;
+	    food: string;
+	    description: string;
+	    amount: number;
+	    per100: number;
+	    energy: number;
+	    score: number;
+	
+	    static createFrom(source: any = {}) {
+	        return new FoodSearch(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.id = source["id"];
+	        this.date = source["date"];
+	        this.food = source["food"];
+	        this.description = source["description"];
+	        this.amount = source["amount"];
+	        this.per100 = source["per100"];
+	        this.energy = source["energy"];
+	        this.score = source["score"];
+	    }
+	}
 	export class WailsAggregateFood {
 	    data: AggregatedFood[];
 	    success: boolean;
@@ -192,6 +218,40 @@ export namespace main {
 		    return a;
 		}
 	}
+	export class WailsFoodSearch {
+	    data: FoodSearch[];
+	    success: boolean;
+	    error?: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new WailsFoodSearch(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.data = this.convertValues(source["data"], FoodSearch);
+	        this.success = source["success"];
+	        this.error = source["error"];
+	    }
+	
+		convertValues(a: any, classs: any, asMap: boolean = false): any {
+		    if (!a) {
+		        return a;
+		    }
+		    if (a.slice && a.map) {
+		        return (a as any[]).map(elem => this.convertValues(elem, classs));
+		    } else if ("object" === typeof a) {
+		        if (asMap) {
+		            for (const key of Object.keys(a)) {
+		                a[key] = new classs(a[key]);
+		            }
+		            return a;
+		        }
+		        return new classs(a);
+		    }
+		    return a;
+		}
+	}
 	export class WailsGenericAck {
 	    success: boolean;
 	    error?: string;
@@ -206,24 +266,8 @@ export namespace main {
 	        this.error = source["error"];
 	    }
 	}
-	export class WailsPer100 {
-	    data: number;
-	    success: boolean;
-	    error?: string;
-	
-	    static createFrom(source: any = {}) {
-	        return new WailsPer100(source);
-	    }
-	
-	    constructor(source: any = {}) {
-	        if ('string' === typeof source) source = JSON.parse(source);
-	        this.data = source["data"];
-	        this.success = source["success"];
-	        this.error = source["error"];
-	    }
-	}
 	export class Weight {
-	    rowid: number;
+	    id: number;
 	    date: string;
 	    weight: number;
 	
@@ -233,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"];
 	    }
@@ -322,6 +366,7 @@ export namespace main {
 	    weightYearlyLookback: number;
 	    target: number;
 	    limit: number;
+	    searchLimit: number;
 	
 	    static createFrom(source: any = {}) {
 	        return new settings(source);
@@ -343,6 +388,7 @@ export namespace main {
 	        this.weightYearlyLookback = source["weightYearlyLookback"];
 	        this.target = source["target"];
 	        this.limit = source["limit"];
+	        this.searchLimit = source["searchLimit"];
 	    }
 	}
 

main.go

@@ -24,7 +24,7 @@ func init() {
 	logFile, err := os.Create("main.log")
 	if err != nil {
 		log.Printf("Error creating log file: %v", err)
-		os.Exit(1)
+		return
 	}
 	logger := io.MultiWriter(os.Stdout, logFile)
 	log.SetOutput(logger)
@@ -42,33 +42,59 @@ var (
 
 //go:embed food.ddl
 var foodDDL string
+//go:embed spellfix.dll
+var spellfixDll []byte
 
 // TODO: Embed food.ddl and create DB if no exists
 // TODO: Add averages to graphs (ie. R2) https://stackoverflow.com/questions/60622195/how-to-draw-a-linear-regression-line-in-chart-js
 func main() {
+	_, err := os.Open("spellfix.dll")
+	if err != nil && !os.IsNotExist(err) {
+		Error.Printf("Error looking for spellfix.dll: %v", err)
+		return
+	}
+	if err != nil && os.IsNotExist(err) {
+		log.Printf("No spellfix.dll found, creating...")
+		file, err := os.Create("spellfix.dll")
+		if err != nil {
+			Error.Printf("Error creating spellfix.dll: %v", err)
+			return
+		}
+		_, err = file.Write(spellfixDll)
+		if err != nil {
+			Error.Printf("Error writing spellfix.dll: %v", err)
+			return
+		}
+		file.Close()
+	}
+
 	dbpath := flag.String("db", "food.db", "Path to the database file")
 	flag.Parse()
 
 	db := DB{path: *dbpath}
-	err := db.Open()
+	err = db.Open()
 	if err != nil {
 		Error.Printf("%++v", err)
-		os.Exit(1)
+		return
 	}
 	defer db.Close()
-	db.Init(foodDDL)
+	err = db.Init(foodDDL)
+	if err != nil {
+		Error.Printf("Error initializing database: %++v", err)
+		return
+	}
 
 	settingsService = &SettingsService{db: &db}
 	err = settingsService.LoadSettings()
 	if err != nil {
 		Error.Printf("%++v", err)
-		os.Exit(1)
+		return
 	}
 	log.Printf("Loaded settings as: %++v", Settings)
 
 	foodService = &FoodService{db: &db}
 	weightService = &WeightService{db: &db}
-
+	
 	// Create an instance of the app structure
 	app := NewApp()
 

settingsservice.go

@@ -28,8 +28,9 @@ type settings struct {
 	WeightMonthlyLookback        int `default:"4" json:"weightMonthlyLookback"`
 	WeightYearlyLookback         int `default:"2" json:"weightYearlyLookback"`
 
-	Target int `default:"2000" json:"target"`
+	Target      int `default:"2000" json:"target"`
-	Limit  int `default:"2500" json:"limit"`
+	Limit       int `default:"2500" json:"limit"`
+	SearchLimit int `default:"5" json:"searchLimit"`
 }
 
 var Settings settings

wailstypes.go

@@ -28,6 +28,11 @@ type (
 		Success bool             `json:"success"`
 		Error   string           `json:"error,omitempty"`
 	}
+	WailsFoodSearch struct {
+		Data    []FoodSearch `json:"data"`
+		Success bool         `json:"success"`
+		Error   string       `json:"error,omitempty"`
+	}
 
 	WailsWeight struct {
 		Data    []Weight `json:"data"`

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,11 +20,11 @@ type (
 	}
 )
 
-const weightcolumns = "rowid, date, weight"
+const weightcolumns = "id, date, weight"
 const weightAggregatedColumns = "period, amount"
 
 func (w *WeightService) GetRecent() ([]Weight, error) {
-	var res []Weight
+	res := []Weight{}
 	if w.db == nil || !w.db.Ready {
 		return res, fmt.Errorf("cannot get recent weight, db is nil or is not ready")
 	}
@@ -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)
+	row := w.db.readConn.QueryRow(fmt.Sprintf("SELECT %s from weightView WHERE id = ?", weightcolumns), id)
-	err := row.Scan(&res.Rowid, &res.Date, &res.Weight)
+	err := row.Scan(&res.Id, &res.Date, &res.Weight)
 	if err != nil {
 		return res, fmt.Errorf("error scanning row: %v", err)
 	}
@@ -88,7 +88,7 @@ func (w *WeightService) GetByRowid(rowid int64) (Weight, error) {
 // I could probably refactor this to be less of a disaster...
 // But I think it'll work for now
 func (w *WeightService) GetDaily() ([]AggregatedWeight, error) {
-	var res []AggregatedWeight
+	res := []AggregatedWeight{}
 	if w.db == nil || !w.db.Ready {
 		return res, fmt.Errorf("cannot get daily weight, db is nil or is not ready")
 	}
@@ -114,7 +114,7 @@ func (w *WeightService) GetDaily() ([]AggregatedWeight, error) {
 }
 
 func (w *WeightService) GetWeekly() ([]AggregatedWeight, error) {
-	var res []AggregatedWeight
+	res := []AggregatedWeight{}
 	if w.db == nil || !w.db.Ready {
 		return res, fmt.Errorf("cannot get weekly weight, db is nil or is not ready")
 	}
@@ -140,7 +140,7 @@ func (w *WeightService) GetWeekly() ([]AggregatedWeight, error) {
 }
 
 func (w *WeightService) GetMonthly() ([]AggregatedWeight, error) {
-	var res []AggregatedWeight
+	res := []AggregatedWeight{}
 	if w.db == nil || !w.db.Ready {
 		return res, fmt.Errorf("cannot get monthly weight, db is nil or is not ready")
 	}
@@ -166,7 +166,7 @@ func (w *WeightService) GetMonthly() ([]AggregatedWeight, error) {
 }
 
 func (w *WeightService) GetYearly() ([]AggregatedWeight, error) {
-	var res []AggregatedWeight
+	res := []AggregatedWeight{}
 	if w.db == nil || !w.db.Ready {
 		return res, fmt.Errorf("cannot get yearly weight, db is nil or is not ready")
 	}