From df7e2a7489861446e34fe271c62bc7180973ec5e Mon Sep 17 00:00:00 2001
From: XenosG <65891277+XenosG@users.noreply.github.com>
Date: Tue, 13 Aug 2024 12:26:53 +0300
Subject: [PATCH] Homepage (#319)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: created homepage

* refactor: moved buttons to card footer

* feat: added more cards

* feat: setup masonry layout for cards

* fix: fixed masonry layout (for now)

* fix: Run prettier format

* fix: fixed temp info in cards
fix: added temp link to homepage in root

* fix: fixed formatting

* refactor: Changed all text to use Text component

* feat: Pity widget (uncompleted)
chore: added more temp data to reminder
feat: started work on Achievement widget

* fix: fixed formatting, commented unused code

* feat: added progress component (shadcn)
fix: fixed colors in progress component
feat: Achievement widget (almost complete)

* fix: Run Prettier formatter

* fix: Text component now doesnt have margin by default, has margin property instead

* fix: Run formatter

* fix: fixed achievement widget
fix: fixed progress component colors to work with new color system

* feat: added a bunch of components for future development

* fix: added dependencies

* refactor: removed unneeded comments
refactor: using tuples instead of arrays

* feat: removed dragdrop pkg, took svelte file and modified it
feat: added Edit menu

(ts is angry at dragdrop svelte, because there's no type declaration)

* refactor: commented unused code

* fix: fixed dragdrop to work with ts type system

* fix: formatter

* feat: added more widgets and a welcome dialog
fix: dragdrop now works
chore: ran prettier

* chore: ran prettier

* feat: changed most values to variables instead of plain text
feat: resin tracker now almost fully working (lacks realtime resin regeneration)
feat: display is coming together
feat: wish buttons now work

* feat: added underline when hovering and focusing on resin tracker input
refactor: total wishes now take info directly from the userProfile
feat: moved and changed total wishes in wishing stats widget
feat: moved up wishing page link in pity widget and swapped buttons in wishing stats widget
fix: text colors are now using tailwind theme colors
fix: dark theme now uses brighter color for five stars
fix: resin now wont overflow 2000 when increasing with button
refactor: fixed misspell "standart" in variable names

* refactor: total wishes counter is now readable
feat: wrote code for getting some achievements data from userProfile

Feat is commented for now until we have achievement data in userProfile

* feat: added localization for the dashboard
chore: added .vscode to gitignore

* refactor: moved the homepage to the root

* chore: regenerate lockfile

---------

Co-authored-by: Alexander König <mail@koenig-alexander.dev>
Co-authored-by: Ludovic Malot <ludovicmalot@icloud.com>
---
 .gitignore                                    |    2 +-
 .../ui/dragdrop/DragDropList.svelte           |  295 +++++
 src/lib/locales/DE.json                       |   47 +
 src/lib/locales/EN.json                       |   47 +
 src/lib/locales/ES.json                       |   47 +
 src/lib/locales/FR.json                       |   47 +
 src/lib/locales/IT.json                       |   49 +-
 src/lib/locales/PL.json                       |   47 +
 src/lib/locales/PT.json                       |   49 +-
 src/lib/locales/RU.json                       |   47 +
 src/lib/locales/TH.json                       |   47 +
 src/lib/locales/ZH-S.json                     |   47 +
 src/lib/locales/ZH-T.json                     |   47 +
 src/routes/+page.svelte                       | 1027 ++++++++++++++++-
 tailwind.config.js                            |    2 +-
 15 files changed, 1812 insertions(+), 35 deletions(-)
 create mode 100644 src/lib/components/ui/dragdrop/DragDropList.svelte

diff --git a/.gitignore b/.gitignore
index 2a361b5e..d9129b77 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,4 +10,4 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .idea
 .vscode
-/.npm-only-allow
\ No newline at end of file
+/.npm-only-allow
diff --git a/src/lib/components/ui/dragdrop/DragDropList.svelte b/src/lib/components/ui/dragdrop/DragDropList.svelte
new file mode 100644
index 00000000..423d65b2
--- /dev/null
+++ b/src/lib/components/ui/dragdrop/DragDropList.svelte
@@ -0,0 +1,295 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { Label } from '$lib/components/ui/label';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import Text from '$lib/components/typography/Text.svelte';
+
+	class DatumType {
+		id!: number;
+		check?: string;
+		checked?: boolean;
+		html?: string;
+		text?: string;
+	}
+
+	export let data: DatumType[] = [];
+	export let removesItems = false;
+
+	let ghost: HTMLElement;
+	let grabbed: HTMLElement | null;
+
+	let lastTarget: Element;
+
+	let mouseY = 0; // pointer y coordinate within client
+	let offsetY = 0; // y distance from top of grabbed element to pointer
+	let layerY = 0; // distance from top of list to top of client
+
+	function grab(clientY: number, element: HTMLElement) {
+		// modify grabbed element
+		grabbed = element;
+		grabbed.dataset.grabY = String(clientY);
+
+		// modify ghost element (which is actually dragged)
+		ghost.innerHTML = grabbed.innerHTML;
+
+		// record offset from cursor to top of element
+		// (used for positioning ghost)
+		offsetY = grabbed.getBoundingClientRect().y - clientY;
+		drag(clientY);
+	}
+
+	// drag handler updates cursor position
+	function drag(clientY: number) {
+		if (grabbed) {
+			mouseY = clientY;
+			layerY = ghost.parentElement!.getBoundingClientRect().y;
+		}
+	}
+
+	// touchEnter handler emulates the mouseenter event for touch input
+	// (more or less)
+	function touchEnter(ev: Touch) {
+		drag(ev.clientY);
+		// trigger dragEnter the first time the cursor moves over a list item
+		let target = document
+			.elementFromPoint(ev.clientX, ev.clientY)!
+			.closest('.item') as HTMLElement;
+		if (target && target != lastTarget) {
+			lastTarget = target;
+			dragEnter(target);
+		}
+	}
+
+	function dragEnter(target: EventTarget) {
+		if (!(target instanceof HTMLElement)) return;
+		// swap items in data
+		if (grabbed && target != grabbed && target.classList.contains('item')) {
+			moveDatum(parseInt(grabbed.dataset.index!), parseInt(target.dataset.index!));
+		}
+	}
+
+	// does the actual moving of items in data
+	function moveDatum(from: number, to: number) {
+		let temp = data[from];
+		data = [...data.slice(0, from), ...data.slice(from + 1)];
+		data = [...data.slice(0, to), temp, ...data.slice(to)];
+	}
+
+	function release() {
+		grabbed = null;
+	}
+
+	function removeDatum(index: number) {
+		data = [...data.slice(0, index), ...data.slice(index + 1)];
+	}
+
+	function check(index: number) {
+		data[index].checked = !data[index].checked;
+	}
+</script>
+
+<!-- All the documentation has to go up here, sorry.
+     (otherwise it conflicts with the HTML or svelte/animate) 
+     The .list has handlers for pointer movement and pointer up/release/end.
+     Each .item has a handler for pointer down/click/start, which assigns that
+     element as the item currently being "grabbed".  They also have a handler
+     for pointer enter (the touchmove handler has extra logic to behave like the
+     no longer extant 'touchenter'), which swaps the entered element with the
+     grabbed element when triggered.
+     You'll also find reactive styling below, which keeps it from being directly
+     part of the imperative javascript handlers. -->
+<main class="basis-[100%]">
+	<div
+		bind:this={ghost}
+		id="ghost"
+		class={grabbed ? 'item haunting' : 'item'}
+		style={'top: ' + (mouseY + offsetY - layerY) + 'px'}
+	>
+		<p></p>
+	</div>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="list"
+		on:mousemove={function (ev) {
+			ev.stopPropagation();
+			drag(ev.clientY);
+		}}
+		on:touchmove={function (ev) {
+			ev.stopPropagation();
+			drag(ev.touches[0].clientY);
+		}}
+		on:mouseup={function (ev) {
+			ev.stopPropagation();
+			release();
+		}}
+		on:touchend={function (ev) {
+			ev.stopPropagation();
+			release();
+		}}
+	>
+		{#each data as datum, i (datum.id ? datum.id : JSON.stringify(datum))}
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				id={grabbed && (datum.id ? datum.id : JSON.stringify(datum)) == grabbed.dataset.id
+					? 'grabbed'
+					: ''}
+				class="item"
+				data-index={i}
+				data-id={datum.id}
+				data-grabY="0"
+				on:mousedown={function (ev) {
+					grab(ev.clientY, ev.currentTarget);
+				}}
+				on:touchstart={function (ev) {
+					grab(ev.touches[0].clientY, ev.currentTarget);
+				}}
+				on:mouseenter={function (ev) {
+					ev.stopPropagation();
+					dragEnter(ev.currentTarget);
+				}}
+				on:touchmove={function (ev) {
+					ev.stopPropagation();
+					ev.preventDefault();
+					touchEnter(ev.touches[0]);
+				}}
+				animate:flip={{ duration: 200 }}
+			>
+				<div class="buttons">
+					<button
+						class="up"
+						style={'visibility: ' + (i > 0 ? '' : 'hidden') + ';'}
+						on:click={function (ev) {
+							moveDatum(i, i - 1);
+						}}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							width="16px"
+							height="16px"
+						>
+							<path d="M0 0h24v24H0V0z" fill="none" />
+							<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z" />
+						</svg>
+					</button>
+					<button
+						class="down"
+						style={'visibility: ' + (i < data.length - 1 ? '' : 'hidden') + ';'}
+						on:click={function (ev) {
+							moveDatum(i, i + 1);
+						}}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							width="16px"
+							height="16px"
+						>
+							<path d="M0 0h24v24H0V0z" fill="none" />
+							<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+						</svg>
+					</button>
+				</div>
+
+				<div class="content m-0 w-full">
+					{#if datum.html}
+						{@html datum.html}
+					{:else if datum.text}
+						<p>{datum.text}</p>
+					{:else if datum.check}
+						<div class="w-full h-full flex flex-row items-center justify-between px-16">
+							<Label
+								for={datum.check
+									.replace(/[^a-zA-Z]/g, '')
+									.replace(/(?:^\w|[A-Z]|\b\w)/g, (match, index) =>
+										index === 0 ? match.toLowerCase() : match.toUpperCase()
+									)
+									.concat('Check')}
+							>
+								<Text type="h4">
+									{datum.check}
+								</Text>
+							</Label>
+							<Checkbox
+								on:click={(e) => check(i)}
+								class=""
+								id={datum.check
+									.replace(/[^a-zA-Z]/g, '')
+									.replace(/(?:^\w|[A-Z]|\b\w)/g, (match, index) =>
+										index === 0 ? match.toLowerCase() : match.toUpperCase()
+									)
+									.concat('Check')}
+								checked={data[i].checked}
+							/>
+						</div>
+					{:else}
+						<p>{datum}</p>
+					{/if}
+				</div>
+
+				<div class="buttons delete">
+					{#if removesItems}
+						<button
+							on:click={function (ev) {
+								removeDatum(i);
+							}}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								height="16"
+								viewBox="0 0 24 24"
+								width="16"
+							>
+								<path d="M0 0h24v24H0z" fill="none" />
+								<path
+									d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+								/>
+							</svg>
+						</button>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+</main>
+
+<style>
+	main {
+		position: relative;
+	}
+
+	.list {
+		@apply cursor-grab z-[5] flex flex-col shrink;
+	}
+	.item {
+		@apply bg-foreground box-border inline-flex w-full min-h-[3em] border select-none mb-[0.5em] rounded-sm border-solid border-black;
+	}
+	.item:last-child {
+		@apply mb-0;
+	}
+	.item:not(#grabbed):not(#ghost) {
+		@apply z-10;
+	}
+	.buttons {
+		@apply w-8 min-w-[32px] flex flex-col mx-0 my-auto;
+	}
+	.buttons button {
+		@apply cursor-pointer w-[18px] h-[18px] border bg-inherit mx-auto my-0 p-0 border-solid border-[rgba(0,0,0,0)] focus:border focus:border-solid focus:border-[black];
+		@apply invert;
+	}
+	.delete {
+		@apply w-8;
+	}
+	#grabbed {
+		@apply opacity-[0.0];
+	}
+	#ghost {
+		@apply pointer-events-none z-[-5] absolute opacity-[0.0] left-0 top-0;
+	}
+	#ghost * {
+		@apply pointer-events-none;
+	}
+	#ghost.haunting {
+		@apply z-20 opacity-[1.0];
+	}
+</style>
diff --git a/src/lib/locales/DE.json b/src/lib/locales/DE.json
index d2e6b6c6..53e8d95e 100644
--- a/src/lib/locales/DE.json
+++ b/src/lib/locales/DE.json
@@ -8,6 +8,7 @@
 		"action.yes": "Ja",
 		"action.no": "Nein",
 		"action.confirm": "Bestätigen",
+		"action.cancel": "Cancel",
 		"action.sort_by": "Sortieren nach: {{sortFN}}",
 		"action.filter_by": "Filtern nach",
 		"navigation.category.collection": "Deine Sammlung",
@@ -18,6 +19,52 @@
 		"navigation.logout": "Abmelden",
 		"error.title": "Fehler",
 		"dashboard.title": "Startseite",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "Verlauf des Waffengebets",
 		"wish.detailed.title.Standard": "Verlauf des Standartgebets",
 		"wish.detailed.title.CharacterEvent": "Verlauf des Charaktergebets",
diff --git a/src/lib/locales/EN.json b/src/lib/locales/EN.json
index 10a32199..3fac2852 100644
--- a/src/lib/locales/EN.json
+++ b/src/lib/locales/EN.json
@@ -8,6 +8,7 @@
 		"action.yes": "Yes",
 		"action.no": "No",
 		"action.confirm": "Confirm",
+		"action.cancel": "Cancel",
 		"action.sort_by": "Sort By: {{sortFN}}",
 		"action.filter_by": "Filter By",
 		"navigation.category.collection": "Your collection",
@@ -18,6 +19,52 @@
 		"navigation.logout": "Logout",
 		"error.title": "Error",
 		"dashboard.title": "Dashboard",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "Weapon banner history",
 		"wish.detailed.title.Standard": "Standard banner history",
 		"wish.detailed.title.CharacterEvent": "Character banner history",
diff --git a/src/lib/locales/ES.json b/src/lib/locales/ES.json
index 354af486..dd0dba8d 100644
--- a/src/lib/locales/ES.json
+++ b/src/lib/locales/ES.json
@@ -8,6 +8,7 @@
 		"action.yes": "Yes",
 		"action.no": "No",
 		"action.confirm": "Confirm",
+		"action.cancel": "Cancel",
 		"action.sort_by": "Ordenar por",
 		"action.filter_by": "Filter By",
 		"navigation.category.collection": "Tu colección",
@@ -18,6 +19,52 @@
 		"navigation.logout": "Cerrar sesión",
 		"error.title": "Error",
 		"dashboard.title": "Inicio",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "Weapon banner history",
 		"wish.detailed.title.Standard": "Standard banner history",
 		"wish.detailed.title.CharacterEvent": "Character banner history",
diff --git a/src/lib/locales/FR.json b/src/lib/locales/FR.json
index e0da3276..674e400c 100644
--- a/src/lib/locales/FR.json
+++ b/src/lib/locales/FR.json
@@ -8,6 +8,7 @@
 		"action.yes": "Oui",
 		"action.no": "Non",
 		"action.confirm": "Confirmer",
+		"action.cancel": "Cancel",
 		"action.sort_by": "Trier par",
 		"action.filter_by": "Filtrer par",
 		"navigation.category.collection": "Votre collection",
@@ -18,6 +19,52 @@
 		"navigation.logout": "Déconnexion",
 		"error.title": "Erreur",
 		"dashboard.title": "Tableau de bord",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "Historique de la bannière d'armes",
 		"wish.detailed.title.Standard": "Historique de la bannière permantente",
 		"wish.detailed.title.CharacterEvent": "Historique de la bannière de personnages",
diff --git a/src/lib/locales/IT.json b/src/lib/locales/IT.json
index 8ee11e88..80014807 100644
--- a/src/lib/locales/IT.json
+++ b/src/lib/locales/IT.json
@@ -8,6 +8,7 @@
 		"action.yes": "Sì",
 		"action.no": "No",
 		"action.confirm": "Conferma",
+		"action.cancel": "Cancel",
 		"action.sort_by": "Ordina per",
 		"action.filter_by": "Filtra per",
 		"navigation.category.collection": "La tua collezione",
@@ -17,7 +18,53 @@
 		"navigation.login": "Accedi o Registrati",
 		"navigation.logout": "Esci",
 		"error.title": "Errore",
-		"dashboard.title": "Dashboard",
+		"dashboard.title": "Pannello di Controllo",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "Cronologia banner Armi",
 		"wish.detailed.title.Standard": "Cronologia banner Standard",
 		"wish.detailed.title.CharacterEvent": "Cronologia banner Personaggi",
diff --git a/src/lib/locales/PL.json b/src/lib/locales/PL.json
index b5c57029..24828987 100644
--- a/src/lib/locales/PL.json
+++ b/src/lib/locales/PL.json
@@ -8,6 +8,7 @@
 		"action.yes": "Tak",
 		"action.no": "Nie",
 		"action.confirm": "Potwierdź",
+		"action.cancel": "Cancel",
 		"action.sort_by": "Sortuj według: {{sortFN}}",
 		"action.filter_by": "Filtruj według",
 		"navigation.category.collection": "Twoja kolekcja",
@@ -18,6 +19,52 @@
 		"navigation.logout": "Wyloguj się",
 		"error.title": "Błąd",
 		"dashboard.title": "Panel",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "Historia banerów broni",
 		"wish.detailed.title.Standard": "Historia baneru standardowego",
 		"wish.detailed.title.CharacterEvent": "Historia banerów postaci",
diff --git a/src/lib/locales/PT.json b/src/lib/locales/PT.json
index 98a67528..c3776cab 100644
--- a/src/lib/locales/PT.json
+++ b/src/lib/locales/PT.json
@@ -8,7 +8,8 @@
 		"action.yes": "Sim",
 		"action.no": "Não",
 		"action.confirm": "Confirmar",
-		"action.sort_by": "Organizar por {{sortFN}}",
+		"action.cancel": "Cancel",
+		"action.sort_by": "Organizar por",
 		"action.filter_by": "Filtrar por",
 		"navigation.category.collection": "Sua coleção",
 		"navigation.category.trackers": "Progresso",
@@ -18,6 +19,52 @@
 		"navigation.logout": "Sair",
 		"error.title": "Erro",
 		"dashboard.title": "Painel principal",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "Histórico do evento de armas",
 		"wish.detailed.title.Standard": "Histórico da invocação do mochileiro",
 		"wish.detailed.title.CharacterEvent": "Histórico do evento de personagens",
diff --git a/src/lib/locales/RU.json b/src/lib/locales/RU.json
index 44f8ee32..a15dc0a8 100644
--- a/src/lib/locales/RU.json
+++ b/src/lib/locales/RU.json
@@ -8,6 +8,7 @@
 		"action.yes": "Да",
 		"action.no": "Нет",
 		"action.confirm": "Подтвердить",
+		"action.cancel": "Cancel",
 		"action.sort_by": "Сортировать",
 		"action.filter_by": "Фильтр",
 		"navigation.category.collection": "Коллекция",
@@ -18,6 +19,52 @@
 		"navigation.logout": "Выйти из аккаунта",
 		"error.title": "Ошибка",
 		"dashboard.title": "Информационная панель",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "Молитва события оружия",
 		"wish.detailed.title.Standard": "Стандартная молитва",
 		"wish.detailed.title.CharacterEvent": "Молитва события персонажа",
diff --git a/src/lib/locales/TH.json b/src/lib/locales/TH.json
index 57775bd7..f4e70c1e 100644
--- a/src/lib/locales/TH.json
+++ b/src/lib/locales/TH.json
@@ -8,6 +8,7 @@
 		"action.yes": "Yes",
 		"action.no": "No",
 		"action.confirm": "Confirm",
+		"action.cancel": "Cancel",
 		"action.sort_by": "Sort By",
 		"action.filter_by": "Filter By",
 		"navigation.category.collection": "คอลเลคชั่นของคุณ",
@@ -18,6 +19,52 @@
 		"navigation.logout": "ออกจากระบบ",
 		"error.title": "Error",
 		"dashboard.title": "แผงควบคุม",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "Weapon banner history",
 		"wish.detailed.title.Standard": "Standard banner history",
 		"wish.detailed.title.CharacterEvent": "Character banner history",
diff --git a/src/lib/locales/ZH-S.json b/src/lib/locales/ZH-S.json
index e6c160f0..ac1f3c09 100644
--- a/src/lib/locales/ZH-S.json
+++ b/src/lib/locales/ZH-S.json
@@ -8,6 +8,7 @@
 		"action.yes": "是",
 		"action.no": "否",
 		"action.confirm": "确认",
+		"action.cancel": "Cancel",
 		"action.sort_by": "排序方式",
 		"action.filter_by": "过滤方式",
 		"navigation.category.collection": "你的收藏",
@@ -18,6 +19,52 @@
 		"navigation.logout": "登出",
 		"error.title": "错误",
 		"dashboard.title": "主页",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "武器池记录",
 		"wish.detailed.title.Standard": "常驻池记录",
 		"wish.detailed.title.CharacterEvent": "角色池记录",
diff --git a/src/lib/locales/ZH-T.json b/src/lib/locales/ZH-T.json
index d925fc58..855061c6 100644
--- a/src/lib/locales/ZH-T.json
+++ b/src/lib/locales/ZH-T.json
@@ -8,6 +8,7 @@
 		"action.yes": "是",
 		"action.no": "否",
 		"action.confirm": "確認",
+		"action.cancel": "Cancel",
 		"action.sort_by": "排序方式",
 		"action.filter_by": "過濾方式",
 		"navigation.category.collection": "你的收藏",
@@ -18,6 +19,52 @@
 		"navigation.logout": "登出",
 		"error.title": "錯誤",
 		"dashboard.title": "首頁",
+		"dashboard.welcome.title": "Welcome to Dval.in!",
+		"dashboard.welcome.message": "Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
+		"dashboard.edit_layout.button": "Edit",
+		"dashboard.edit_layout.title": "Edit the layout",
+		"dashboard.edit_layout.description": "Edit your homepage layout to fit your needs.",
+		"dashboard.widget.changelog.title": "Changelog",
+		"dashboard.widget.reminder.title": "Reminder",
+		"dashboard.widget.reminder.daily": "Daily",
+		"dashboard.widget.reminder.daily.teapot_currency": "Teapot currency and friendship",
+		"dashboard.widget.reminder.daily.commissions": "Daily commissions",
+		"dashboard.widget.reminder.daily.resin": "Spend resin",
+		"dashboard.widget.reminder.daily.welkin": "Welkin moon",
+		"dashboard.widget.reminder.two_day.title": "Every 2 days",
+		"dashboard.widget.reminder.two_day.local_specialties": "Local specialties",
+		"dashboard.widget.reminder.two_day.ores": "Ores",
+		"dashboard.widget.reminder.three_day.title": "Every 3 days",
+		"dashboard.widget.reminder.three_day.crystals": "Crystal chunks",
+		"dashboard.widget.reminder.three_day.teapot_farm": "Teapot farms",
+		"dashboard.widget.reminder.three_day.fishing": "Fishing",
+		"dashboard.widget.reminder.weekly.title": "Weekly",
+		"dashboard.widget.reminder.weekly.parametric_transformer": "Parametric transformer",
+		"dashboard.widget.reminder.weekly.crystalfly_trap": "Crystalfly trap",
+		"dashboard.widget.reminder.weekly.bosses": "Weekly bosses",
+		"dashboard.widget.reminder.weekly.reputation": "Reputation bounties",
+		"dashboard.widget.events.title": "Current Events",
+		"dashboard.widget.events.version": "For version",
+		"dashboard.widget.events.timeline.button": "View timeline",
+		"dashboard.widget.todo.title": "To-do List",
+		"dashboard.widget.domain.title": "Domain Rotation",
+		"dashboard.widget.achievements.title": "Achievements",
+		"dashboard.widget.achievements.progress": "Overall progress",
+		"dashboard.widget.achievements.latest": "Latest achievements",
+		"dashboard.widget.achievements.more": "View more achievements",
+		"dashboard.widget.pity.title": "Pity",
+		"dashboard.widget.wishing.title": "Wishing stats",
+		"dashboard.widget.wishing.pity": "Pity",
+		"dashboard.widget.wishing.total": "Total wishes",
+		"dashboard.widget.wishing.latest": "Latest pulls",
+		"dashboard.widget.display.title": "Display",
+		"dashboard.widget.global_wishing.title": "Global wishing stats",
+		"dashboard.widget.global_wishing.percentage": "of all",
+		"dashboard.widget.global_wishing.pity_average": "Pity average",
+		"dashboard.widget.global_wishing.based_on": "based on {{number}} submissions",
+		"dashboard.widget.resin.title": "Resin tracker",
+		"dashboard.widget.resin.hour": "h",
+		"dashboard.widget.resin.minute": "m",
 		"wish.detailed.title.WeaponEvent": "武器池記錄",
 		"wish.detailed.title.Standard": "常駐池記錄",
 		"wish.detailed.title.CharacterEvent": "角色池記錄",
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cfd2e8bd..81a5bf1c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,40 +1,1005 @@
 <script lang="ts">
+	import * as Card from '$lib/components/ui/card';
 	import { Button } from '$lib/components/ui/button';
 	import Text from '$lib/components/typography/Text.svelte';
-	import DefaultLayout from '$lib/components/layout/DefaultLayout.svelte';
-	import { Card, CardContent, CardFooter, CardHeader } from '$lib/components/ui/card';
+	import S3Service from '$lib/services/s3';
 	import i18n from '$lib/services/i18n';
+	import { Progress } from '$lib/components/ui/progress';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import DragDropList from '$lib/components/ui/dragdrop/DragDropList.svelte';
+	import DefaultLayout from '$lib/components/layout/DefaultLayout.svelte';
+	import IconButton from '$lib/components/ui/icon-button/IconButton.svelte';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import Icon from '$lib/components/ui/icon/icon.svelte';
+	import PullChip from '$lib/components/ui/pull-chip/PullChip.svelte';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Label } from '$lib/components/ui/label';
+	import { Input } from '$lib/components/ui/input';
+
+	import { mdiPencil, mdiImport, mdiAccount, mdiSwordCross, mdiTrashCanOutline } from '@mdi/js';
+	import CharCard from '$lib/components/ui/card/CharCard.svelte';
+	import type { Elements } from '$lib/types/elements';
+	import type { WeaponTypes } from '$lib/types/weapon';
+	import { onMount } from 'svelte';
+	import { userProfile } from '$lib/store/user_profile';
+
+	let changeLog = ` `;
+	let currentVer = `4.5`;
+
+	$: changeLogWidget = $i18n.t('dashboard.widget.changelog.title');
+	$: reminderWidget = $i18n.t('dashboard.widget.reminder.title');
+	$: eventsWidget = $i18n.t('dashboard.widget.events.title');
+	$: todoWidget = $i18n.t('dashboard.widget.todo.title');
+	$: domainWidget = $i18n.t('dashboard.widget.domain.title');
+	$: achievementsWidget = $i18n.t('dashboard.widget.achievements.title');
+	$: pityWidget = $i18n.t('dashboard.widget.pity.title');
+	$: wishingWidget = $i18n.t('dashboard.widget.wishing.title');
+	$: displayWidget = $i18n.t('dashboard.widget.display.title');
+	$: globalWishingWidget = $i18n.t('dashboard.widget.global_wishing.title');
+	$: resinWidget = $i18n.t('dashboard.widget.resin.title');
+
+	$: dragDropList = [
+		{ id: 0, check: changeLogWidget, checked: true },
+		{ id: 1, check: reminderWidget, checked: true },
+		{ id: 2, check: eventsWidget, checked: true },
+		{ id: 3, check: todoWidget, checked: true },
+		{ id: 4, check: domainWidget, checked: true },
+		{ id: 5, check: achievementsWidget, checked: true },
+		{ id: 6, check: pityWidget, checked: true },
+		{ id: 7, check: wishingWidget, checked: true },
+		{ id: 8, check: displayWidget, checked: true },
+		{ id: 9, check: globalWishingWidget, checked: true },
+		{ id: 10, check: resinWidget, checked: true }
+	];
+
+	type Achievement = {
+		id: number;
+		name: string;
+		desc: string;
+		reward: number;
+		hidden: boolean;
+		order: number;
+	};
+
+	const mockAchievement: Achievement = {
+		id: 0,
+		name: 'Test Achievement',
+		desc: 'lorem ipsum',
+		reward: 1,
+		hidden: false,
+		order: 0
+	};
+
+	type Event = {
+		id: number;
+		name: string;
+		desc: string;
+		start: Date;
+		end: Date;
+	};
+
+	const mockEvent: Event = {
+		id: 0,
+		name: 'Test Event',
+		desc: 'lorem ipsum',
+		start: new Date(2024, 3, 8, 5, 59),
+		end: new Date(2024, 3, 18, 5, 59)
+	};
+
+	type character = {
+		obtained: boolean;
+		link: string;
+		name: string;
+		element: Elements;
+		weapon: WeaponTypes;
+		img: string;
+		rarity: number;
+	};
+
+	const transformIntoElements = (element: string): Elements => {
+		switch (element) {
+			case 'Pyro':
+				return 'pyro';
+			case 'Hydro':
+				return 'hydro';
+			case 'Anemo':
+				return 'anemo';
+			case 'Electro':
+				return 'electro';
+			case 'Dendro':
+				return 'dendro';
+			case 'Cryo':
+				return 'cryo';
+			case 'Geo':
+				return 'geo';
+			default:
+				return 'anemo';
+		}
+	};
+
+	const transformIntoWeapons = (weapon: string): WeaponTypes => {
+		switch (weapon) {
+			case 'Sword':
+				return 'sword';
+			case 'Claymore':
+				return 'claymore';
+			case 'Polearm':
+				return 'polearm';
+			case 'Catalyst':
+				return 'catalyst';
+			case 'Bow':
+				return 'bow';
+			default:
+				return 'sword';
+		}
+	};
+
+	const displayed_character: character = {
+		obtained: true,
+		link: `/characters/${'Amber'}`,
+		name: 'David',
+		element: transformIntoElements('Anemo'),
+		weapon: transformIntoWeapons('Catalyst'),
+		img: S3Service.getCharacter('Amber').icon,
+		rarity: 5
+	};
+
+	let achievementsDone = 998;
+	let achievementsTotal = 1143;
+
+	let characterPity: [number, number] = [76, 8];
+	let weaponPity: [number, number] = [23, 2];
+	let standardPity: [number, number] = [53, 5];
+
+	const card = S3Service.getCharacter('Amber').gachaCard;
+
+	let firstTimeUser = false;
+
+	type GachaCharacterWishingData = {
+		name: string;
+		pulls: number;
+		percentage: number;
+		average: number;
+	};
+
+	let currentGachaFirst: GachaCharacterWishingData = {
+		name: 'Amber',
+		pulls: 13994,
+		percentage: 23,
+		average: 25
+	};
+
+	let currentGachaSecond: GachaCharacterWishingData = {
+		name: 'Amber',
+		pulls: 1994,
+		percentage: 12,
+		average: 55
+	};
+
+	let submissions: number = 69420;
+
+	let currentResin: number = 12;
+	let maxResin: number = 200;
+
+	let resinRegenTime = 8;
+
+	let currentDate = new Date();
+
+	$: currentTime = currentDate.getTime();
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			currentDate = new Date();
+		}, 5000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+
+	$: ResinCounter = {
+		HandleInput(): void {
+			let temp = currentResin.toString();
+			temp = temp.replace(/[.e]/g, '');
+			currentResin = parseInt(temp);
+			if (currentResin > 2000) currentResin = maxResin;
+			else if (currentResin < 1 || !currentResin) currentResin = 0;
+		},
+
+		increaseResin(n: number): void {
+			currentResin += n;
+			if (currentResin > 2000) currentResin = maxResin;
+		},
+
+		decreaseResin(n: number): void {
+			currentResin -= n;
+			if (currentResin < 0) currentResin = 0;
+		},
+
+		countTimeLeft(goal: number): string {
+			let output: string;
+
+			let minutesTillRegen = (goal - currentResin) * resinRegenTime;
+			let hoursTillRegen = Math.floor(minutesTillRegen / 60);
+			minutesTillRegen -= hoursTillRegen * 60;
+
+			if (hoursTillRegen == 0)
+				output = `${minutesTillRegen}${$i18n.t('dashboard.widget.resin.hour')}`;
+			else if (minutesTillRegen > 0)
+				output = `${hoursTillRegen}${$i18n.t('dashboard.widget.resin.hour')} ${minutesTillRegen}${$i18n.t('dashboard.widget.resin.minute')}`;
+			else output = `${hoursTillRegen}${$i18n.t('dashboard.widget.resin.hour')}`;
+
+			return output;
+		},
+
+		countEndTime(goal: number): string {
+			let output: string;
+
+			let currentMins = currentDate.getMinutes();
+			let currentHours = currentDate.getHours();
+
+			let minutesTillRegen = currentMins + (goal - currentResin) * resinRegenTime;
+			let hoursTillRegen = Math.floor(minutesTillRegen / 60);
+			minutesTillRegen -= hoursTillRegen * 60;
+
+			let endHours = ((currentHours + hoursTillRegen) % 24).toString().padStart(2, '0');
+			let endMins = minutesTillRegen.toString().padStart(2, '0');
+
+			output = `${endHours}:${endMins}`;
+
+			return output;
+		}
+	};
 </script>
 
+<AlertDialog.Root open={firstTimeUser}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>{$i18n.t('dashboard.welcome.title')}</AlertDialog.Title>
+			<AlertDialog.Description>
+				{$i18n.t('dashboard.welcome.message')}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>{$i18n.t('action.cancel')}</AlertDialog.Cancel>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
+
 <DefaultLayout title={$i18n.t('dashboard.title')}>
-	<div class="col-span-2 row-span-2">
-		<Card class="size-full flex flex-col">
-			<CardHeader>
-				<Text type="h3">Changelog:</Text>
-			</CardHeader>
-			<CardContent class="flex-1">
-				<Text type="p">
-					Improved import (support a wider range of exports, no multi account though!!)
-				</Text>
-				<Text type="p">Beginner's banner</Text>
-				<Text type="p">
-					Improved pull list (added pull number, highlight 4 & 5 star, filter by dates)
-				</Text>
-				<Text type="p">
-					Fixed images (no brokey anymore!!!!, huge thanks to @Flappydom for helping with
-					renaming files)
-				</Text>
-				<Text type="p">Improved search experience</Text>
-				<Text type="p">Characters are retrieved from user data</Text>
-				<Text type="p">
-					Use GOOD types under the hood (You cant see it but believe me... its there)
-				</Text>
-				<Text type="p">Character/weapon/rarity mapping</Text>
-			</CardContent>
-			<CardFooter class="flex-1 justify-end gap-2">
-				<Button variant="default">{$i18n.t('action.more')}</Button>
-				<Button variant="ghost">{$i18n.t('action.hide')}</Button>
-			</CardFooter>
-		</Card>
+	<svelte:fragment slot="titlebarActions">
+		<Dialog.Root>
+			<Dialog.Trigger>
+				<IconButton icon={mdiPencil}>{$i18n.t('dashboard.edit_layout.button')}</IconButton>
+			</Dialog.Trigger>
+			<Dialog.Content>
+				<Dialog.Header>
+					<Dialog.Title>
+						<Text type="h3">{$i18n.t('dashboard.edit_layout.title')}</Text>
+					</Dialog.Title>
+					<Dialog.Description>
+						<Text type="p">{$i18n.t('dashboard.edit_layout.description')}</Text>
+					</Dialog.Description>
+				</Dialog.Header>
+				<div>
+					<DragDropList bind:data={dragDropList} />
+				</div>
+			</Dialog.Content>
+		</Dialog.Root>
+	</svelte:fragment>
+	<div>
+		<div
+			class="h-fit [column-count:auto] [column-width:370px] gap-2 [&>div:not(:first-child)]:mt-2 [&>div]:break-inside-avoid"
+		>
+			{#each dragDropList as Widget}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.changelog.title')}` && Widget.checked == true}
+					<!-- Changelog card -->
+					<Card.Root class=" flex flex-col">
+						<Card.Header>
+							<Card.Title>
+								<Text type="h4">
+									{$i18n.t('dashboard.widget.changelog.title')}:
+								</Text>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content class="whitespace-pre-line">
+							<Text type="p">{changeLog}</Text>
+						</Card.Content>
+						<Card.Footer class="items-end justify-end mt-2.5">
+							<Button>{$i18n.t('action.more')}</Button>
+						</Card.Footer>
+					</Card.Root>
+				{/if}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.reminder.title')}` && Widget.checked == true}
+					<!-- Reminder card -->
+					<Card.Root class=" flex flex-col">
+						<Card.Header>
+							<Card.Title>
+								<Text type="h4">{$i18n.t('dashboard.widget.reminder.title')}</Text>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							<!-- The checks will uncheck themselves after N server resets -->
+
+							<!-- Daily -->
+							<Text type="large">{$i18n.t('dashboard.widget.reminder.daily')}</Text>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_teapot" class="mr-3" />
+								<Label for="reminder_teapot" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t('dashboard.widget.reminder.daily.teapot_currency')}
+									</Text>
+								</Label>
+							</div>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_commissions" class="mr-3" />
+								<Label for="reminder_commissions" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t('dashboard.widget.reminder.daily.commissions')}
+									</Text>
+								</Label>
+							</div>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_resin" class="mr-3" />
+								<Label for="reminder_resin" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t('dashboard.widget.reminder.daily.resin')}
+									</Text>
+								</Label>
+							</div>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_welkin" class="mr-3" />
+								<Label for="reminder_welkin" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t('dashboard.widget.reminder.daily.welkin')}
+									</Text>
+								</Label>
+							</div>
+
+							<!-- Every 2 days -->
+							<Text type="large">
+								{$i18n.t('dashboard.widget.reminder.two_day.title')}
+							</Text>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_local" class="mr-3" />
+								<Label for="reminder_local" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t(
+											'dashboard.widget.reminder.two_day.local_specialties'
+										)}
+									</Text>
+								</Label>
+							</div>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_ore" class="mr-3" />
+								<Label for="reminder_ore" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t('dashboard.widget.reminder.two_day.ores')}
+									</Text>
+								</Label>
+							</div>
+
+							<!-- Every 3 days -->
+							<Text type="large">
+								{$i18n.t('dashboard.widget.reminder.three_day.title')}
+							</Text>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_chunks" class="mr-3" />
+								<Label for="reminder_chunks" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t('dashboard.widget.reminder.three_day.crystals')}
+									</Text>
+								</Label>
+							</div>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_teapotFarm" class="mr-3" />
+								<Label for="reminder_teapotFarm" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t('dashboard.widget.reminder.three_day.teapot_farm')}
+									</Text>
+								</Label>
+							</div>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_fish" class="mr-3" />
+								<Label for="reminder_fish" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t('dashboard.widget.reminder.three_day.fishing')}
+									</Text>
+								</Label>
+							</div>
+
+							<!-- Weekly -->
+							<Text type="large">
+								{$i18n.t('dashboard.widget.reminder.weekly.title')}
+							</Text>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_parametric" class="mr-3" />
+								<Label for="reminder_parametric" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t(
+											'dashboard.widget.reminder.weekly.parametric_transformer'
+										)}
+									</Text>
+								</Label>
+							</div>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_trap" class="mr-3" />
+								<Label for="reminder_trap" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t(
+											'dashboard.widget.reminder.weekly.crystalfly_trap'
+										)}
+									</Text>
+								</Label>
+							</div>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_boss" class="mr-3" />
+								<Label for="reminder_boss" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t('dashboard.widget.reminder.weekly.bosses')}
+									</Text>
+								</Label>
+							</div>
+							<div class="flex flex-row items-center">
+								<Checkbox id="reminder_reputation" class="mr-3" />
+								<Label for="reminder_reputation" class="text-base font-normal">
+									<Text type="p">
+										{$i18n.t('dashboard.widget.reminder.weekly.reputation')}
+									</Text>
+								</Label>
+							</div>
+						</Card.Content>
+					</Card.Root>
+				{/if}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.events.title')}` && Widget.checked == true}
+					<!-- Events card -->
+					<Card.Root class=" flex flex-col">
+						<Card.Header>
+							<Card.Title>
+								<Text type="h4">
+									{$i18n.t('dashboard.widget.events.title')} Current Events
+								</Text>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							<Text type="large">
+								{$i18n.t('dashboard.widget.events.version')}
+								{currentVer}
+							</Text>
+							<div class="flex flex-col gap-1.5 mt-2">
+								<!-- TODO: get localized event names -->
+								<div
+									class="flex flex-row justify-between bg-neutral rounded-md py-3 px-2"
+								>
+									<Text type="p">{mockEvent.name}</Text>
+									<Text type="p">
+										{Math.floor(
+											(mockEvent.end.getTime() - currentTime) / 3600000 / 24
+										)}d
+										{Math.floor(
+											(mockEvent.end.getTime() - currentTime) / 3600000
+										) -
+											24 *
+												Math.floor(
+													(mockEvent.end.getTime() - currentTime) /
+														3600000 /
+														24
+												)}h
+									</Text>
+								</div>
+								<div
+									class="flex flex-row justify-between bg-neutral rounded-md py-3 px-2"
+								>
+									<Text type="p">{mockEvent.name}</Text>
+									<Text type="p">
+										{Math.floor(
+											(mockEvent.end.getTime() - currentTime) / 3600000 / 24
+										)}d
+										{Math.floor(
+											(mockEvent.end.getTime() - currentTime) / 3600000
+										) -
+											24 *
+												Math.floor(
+													(mockEvent.end.getTime() - currentTime) /
+														3600000 /
+														24
+												)}h
+									</Text>
+								</div>
+								<div
+									class="flex flex-row justify-between bg-neutral rounded-md py-3 px-2"
+								>
+									<Text type="p">{mockEvent.name}</Text>
+									<Text type="p">
+										{Math.floor(
+											(mockEvent.end.getTime() - currentTime) / 3600000 / 24
+										)}d
+										{Math.floor(
+											(mockEvent.end.getTime() - currentTime) / 3600000
+										) -
+											24 *
+												Math.floor(
+													(mockEvent.end.getTime() - currentTime) /
+														3600000 /
+														24
+												)}h
+									</Text>
+								</div>
+								<div
+									class="flex flex-row justify-between bg-neutral rounded-md py-3 px-2"
+								>
+									<Text type="p">{mockEvent.name}</Text>
+									<Text type="p">
+										{Math.floor(
+											(mockEvent.end.getTime() - currentTime) / 3600000 / 24
+										)}d
+										{Math.floor(
+											(mockEvent.end.getTime() - currentTime) / 3600000
+										) -
+											24 *
+												Math.floor(
+													(mockEvent.end.getTime() - currentTime) /
+														3600000 /
+														24
+												)}h
+									</Text>
+								</div>
+							</div>
+						</Card.Content>
+						<Card.Footer class="mt-2.5">
+							<Button class="w-full">
+								{$i18n.t('dashboard.widget.events.timeline.button')}
+							</Button>
+						</Card.Footer>
+					</Card.Root>{/if}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.todo.title')}` && Widget.checked == true}
+					<!-- To-do card -->
+					<Card.Root class=" flex flex-col">
+						<Card.Header>
+							<Card.Title>
+								<Text type="h4">{$i18n.t('dashboard.widget.todo.title')}</Text>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							<Text type="p">
+								Farmable today: thing thing thing thing summary: some more even more
+								thing
+							</Text>
+						</Card.Content>
+					</Card.Root>{/if}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.domain.title')}` && Widget.checked == true}
+					<!-- Domain rotation card -->
+					<Card.Root class=" flex flex-col">
+						<Card.Header>
+							<Card.Title>
+								<Text type="h4">{$i18n.t('dashboard.widget.domain.title')}</Text>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							<Text type="p">
+								talent materials, weapon materials + corresponding chars/weaps
+							</Text>
+						</Card.Content>
+					</Card.Root>{/if}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.achievements.title')}` && Widget.checked == true}
+					<!-- Achievements card -->
+					<Card.Root class=" flex flex-col">
+						<Card.Header>
+							<Card.Title>
+								<Text type="h4">
+									{$i18n.t('dashboard.widget.achievements.title')}
+								</Text>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							<div class="flex flex-row justify-between">
+								<Text type="p">
+									{$i18n.t('dashboard.widget.achievements.progress')}:
+								</Text>
+								<Text type="p">
+									<!-- TODO: check if that works, when we have achievement data -->
+
+									<!-- {Object.values($userProfile.achievements ?? {}).reduce(
+										(count, achievements) =>
+											count +
+											Object.values(achievements).filter(
+												(achievement) => achievement.achieved
+											).length,
+										0
+									)}/
+									{Object.values($userProfile.achievements ?? {}).reduce(
+										(count, achievements) =>
+											count + Object.values(achievements).length,
+										0
+									)} -->
+
+									{achievementsDone}/{achievementsTotal}
+								</Text>
+							</div>
+							<Progress
+								value={(achievementsDone / achievementsTotal) * 100}
+								class="mt-1.5"
+							></Progress>
+							<div class="flex flex-col gap-1.5 justify-between">
+								<Text type="p">
+									{$i18n.t('dashboard.widget.achievements.latest')}:
+								</Text>
+								<div class="bg-neutral rounded-md py-3 px-2">
+									<Text type="p">{mockAchievement.name}</Text>
+								</div>
+								<div class="bg-neutral rounded-md py-3 px-2">
+									<Text type="p">{mockAchievement.name}</Text>
+								</div>
+								<div class="bg-neutral rounded-md py-3 px-2">
+									<Text type="p">{mockAchievement.name}</Text>
+								</div>
+								<div class="bg-neutral rounded-md py-3 px-2">
+									<Text type="p">{mockAchievement.name}</Text>
+								</div>
+								<div class="bg-neutral rounded-md py-3 px-2">
+									<Text type="p">{mockAchievement.name}</Text>
+								</div>
+							</div>
+						</Card.Content>
+						<Card.Footer class="mt-2.5">
+							<Button class="w-full">
+								{$i18n.t('dashboard.widget.achievements.more')}
+							</Button>
+						</Card.Footer>
+					</Card.Root>{/if}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.pity.title')}` && Widget.checked == true}<!-- Pity card -->
+					<Card.Root class=" flex flex-col gap-5">
+						<Card.Header>
+							<Card.Title class="flex flex-row justify-between items-center">
+								<Text type="h4">{$i18n.t('dashboard.widget.pity.title')}</Text>
+								<Button href="wish-statistics/overview">
+									{$i18n.t('wish.overview.title')}
+								</Button>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							<div class="flex justify-between *:py-[5%] *:px-[8%] *:bg-neutral">
+								<!-- char -->
+								<div
+									class="flex flex-col gap-3 justify-center items-center rounded-md"
+								>
+									<Icon path={mdiAccount} />
+									<div class="flex gap-4 font-semibold">
+										<Text type="p" class="text-fivestar">
+											{characterPity[0]}
+										</Text>
+										<Text type="p" class="text-fourstar">
+											{characterPity[1]}
+										</Text>
+									</div>
+								</div>
+								<!-- weap -->
+								<div
+									class="flex flex-col gap-3 justify-center items-center rounded-md"
+								>
+									<Icon path={mdiSwordCross} />
+									<div class="flex gap-4 font-semibold">
+										<Text type="p" class="text-fivestar">{weaponPity[0]}</Text>
+										<Text type="p" class="text-fourstar">
+											{weaponPity[1]}
+										</Text>
+									</div>
+								</div>
+								<!-- standard -->
+								<div
+									class="flex flex-col gap-3 justify-center items-center rounded-md"
+								>
+									<Icon path={mdiTrashCanOutline} />
+									<div class="flex gap-4 font-semibold">
+										<Text type="p" class="text-fivestar">
+											{standardPity[0]}
+										</Text>
+										<Text type="p" class="text-fourstar">
+											{standardPity[1]}
+										</Text>
+									</div>
+								</div>
+							</div>
+						</Card.Content>
+					</Card.Root>{/if}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.wishing.title')}` && Widget.checked == true}
+					<!-- Wish card -->
+					<Card.Root class=" flex flex-col gap-5">
+						<Card.Header>
+							<Card.Title class="flex justify-between items-center">
+								<Text type="h4">{$i18n.t('dashboard.widget.wishing.title')}</Text>
+								<Button href="wish-statistics/overview">
+									{$i18n.t('action.more')}
+								</Button>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content class="flex flex-col gap-3">
+							<!-- pity -->
+							<Text type="large">{$i18n.t('dashboard.widget.wishing.pity')}</Text>
+							<div class="flex justify-between *:py-[5%] *:px-[8%] *:bg-neutral">
+								<!-- char -->
+								<div
+									class="flex flex-col gap-3 justify-center items-center rounded-md"
+								>
+									<Icon path={mdiAccount} />
+									<div class="flex gap-4 font-semibold">
+										<Text type="p" class="text-fivestar">
+											{characterPity[0]}
+										</Text>
+										<Text type="p" class="text-fourstar">
+											{characterPity[1]}
+										</Text>
+									</div>
+								</div>
+								<!-- weap -->
+								<div
+									class="flex flex-col gap-3 justify-center items-center rounded-md"
+								>
+									<Icon path={mdiSwordCross} />
+									<div class="flex gap-4 font-semibold">
+										<Text type="p" class="text-fivestar">
+											{weaponPity[0]}
+										</Text>
+										<Text type="p" class="text-fourstar">
+											{weaponPity[1]}
+										</Text>
+									</div>
+								</div>
+								<!-- standard -->
+								<div
+									class="flex flex-col gap-3 justify-center items-center rounded-md"
+								>
+									<Icon path={mdiTrashCanOutline} />
+									<div class="flex gap-4 font-semibold">
+										<Text type="p" class="text-fivestar">
+											{standardPity[0]}
+										</Text>
+										<Text type="p" class="text-fourstar">
+											{standardPity[1]}
+										</Text>
+									</div>
+								</div>
+							</div>
+							<!-- total pulls -->
+							<div
+								class="flex justify-between items-center bg-neutral pl-3 rounded-md"
+							>
+								<Text type="large">
+									{$i18n.t('dashboard.widget.wishing.total')}
+								</Text>
+								<Text type="large" class="bg-neutral rounded-md p-3">
+									{($userProfile.wishes?.WeaponEvent?.length ?? 0) +
+										($userProfile.wishes?.CharacterEvent?.length ?? 0) +
+										($userProfile.wishes?.Beginner?.length ?? 0) +
+										($userProfile.wishes?.Chronicled?.length ?? 0) +
+										($userProfile.wishes?.Standard?.length ?? 0)}
+								</Text>
+							</div>
+							<!-- latest pulls -->
+							<div>
+								<Text type="large">
+									{$i18n.t('dashboard.widget.wishing.latest')}
+								</Text>
+								<div class="flex flex-row flex-wrap gap-1">
+									<PullChip name="Xiao" key="Xiao" counter={20}></PullChip>
+									<PullChip name="Xiao" key="Xiao" counter={20}></PullChip>
+									<PullChip
+										name="Ballad of The Boundless Blue"
+										key="BalladOfTheBoundlessBlue"
+										counter={20}
+									></PullChip>
+									<PullChip name="Xiao" key="Xiao" counter={20}></PullChip>
+								</div>
+							</div>
+						</Card.Content>
+						<Card.Footer class="flex justify-end">
+							<IconButton icon={mdiImport} href="/settings/import">
+								{$i18n.t('wish.overview.import_wish_button')}
+							</IconButton>
+						</Card.Footer>
+					</Card.Root>
+				{/if}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.display.title')}` && Widget.checked == true}
+					<!-- Display card -->
+					<Card.Root class=" flex flex-col">
+						<Card.Header>
+							<Card.Title>
+								<Text type="h4">{$i18n.t('dashboard.widget.display.title')}</Text>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							<div class="flex flex-row justify-around mt-2">
+								<CharCard
+									link={displayed_character.link}
+									name={displayed_character.name}
+									img={displayed_character.img}
+									level={0}
+									constellation={0}
+									element={displayed_character.element}
+									weapon={displayed_character.weapon}
+									rarity={displayed_character.rarity}
+									obtained={displayed_character.obtained}
+								/>
+								<CharCard
+									link={displayed_character.link}
+									name={displayed_character.name}
+									img={displayed_character.img}
+									level={0}
+									constellation={0}
+									element={displayed_character.element}
+									weapon={displayed_character.weapon}
+									rarity={displayed_character.rarity}
+									obtained={displayed_character.obtained}
+								/>
+							</div>
+							<!-- Display setup will be in character/weapon tabs -->
+						</Card.Content>
+					</Card.Root>
+				{/if}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.global_wishing.title')}` && Widget.checked == true}
+					<!-- Global wishing stats -->
+					<Card.Root class=" flex flex-col gap-5">
+						<Card.Header>
+							<Card.Title class="flex justify-between items-center">
+								<Text type="h4">
+									{$i18n.t('dashboard.widget.global_wishing.title')}
+								</Text>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content class="flex flex-col gap-3">
+							<div class="flex flex-row justify-around">
+								<div class="flex flex-col items-center">
+									<img
+										class="w-32 h-44"
+										src={card}
+										alt="{currentGachaFirst.name} Gacha Card"
+									/>
+									<Text type="large">{currentGachaFirst.name}</Text>
+									<Text type="large">
+										{Math.round(
+											(currentGachaFirst.pulls / 1000 + Number.EPSILON) * 10
+										) / 10}k
+									</Text>
+									<Text type="p">
+										{currentGachaFirst.percentage}% {$i18n.t(
+											'dashboard.widget.global_wishing.percentage'
+										)} 5*
+									</Text>
+									<Text type="p">
+										{$i18n.t('dashboard.widget.global_wishing.pity_average')}
+										{currentGachaFirst.average}
+									</Text>
+								</div>
+								<div class="flex flex-col items-center">
+									<img
+										class="w-32 h-44"
+										src={card}
+										alt="{currentGachaSecond.name} Gacha Card"
+									/>
+									<Text type="large">{currentGachaSecond.name}</Text>
+									<Text type="large">
+										{Math.round(
+											(currentGachaSecond.pulls / 1000 + Number.EPSILON) * 10
+										) / 10}k
+									</Text>
+									<Text type="p">
+										{currentGachaSecond.percentage}% {$i18n.t(
+											'dashboard.widget.global_wishing.percentage'
+										)} 5*
+									</Text>
+									<Text type="p">
+										{$i18n.t('dashboard.widget.global_wishing.pity_average')}
+										{currentGachaSecond.average}
+									</Text>
+								</div>
+							</div>
+							<Text type="p" class="self-center">
+								{$i18n.t('dashboard.widget.global_wishing.based_on', {
+									number: submissions
+								})}
+							</Text>
+						</Card.Content>
+						<Card.Footer class="flex justify-end">
+							<Button class="w-full">{$i18n.t('action.more')}</Button>
+						</Card.Footer>
+					</Card.Root>
+				{/if}
+				{#if Widget.check === `${$i18n.t('dashboard.widget.resin.title')}` && Widget.checked == true}
+					<!-- Resin tracker  -->
+					<Card.Root class=" flex flex-col gap-5">
+						<Card.Header>
+							<Card.Title class="flex justify-between items-center">
+								<Text type="h4">{$i18n.t('dashboard.widget.resin.title')}</Text>
+							</Card.Title>
+						</Card.Header>
+						<Card.Content class="flex flex-col gap-3">
+							<div class="flex flex-row items-center justify-center gap-4">
+								<img class="w-8 h-8" src="" alt="Resin Icon" />
+								<Text type="large">
+									<Input
+										type="number"
+										class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none
+										w-12 h-5 border-none text-lg font-semibold inline text-right p-0 pl-1 rounded-none pb-1
+										hover:border-solid hover:border-0 hover:border-b-2 hover:border-text/30
+										focus-visible:border-solid focus-visible:border-0 focus-visible:border-b-2 focus-visible:border-text/30
+										focus-visible:ring-0 focus-visible:ring-offset-0"
+										bind:value={currentResin}
+										on:input={() => ResinCounter.HandleInput()}
+									/>/{maxResin}
+								</Text>
+							</div>
+							<div class="flex flex-row justify-center">
+								<Button
+									on:click={() => ResinCounter.decreaseResin(20)}
+									class="rounded-l-md rounded-r-none"
+								>
+									-20
+								</Button>
+								<Button
+									on:click={() => ResinCounter.decreaseResin(30)}
+									class="rounded-none"
+								>
+									-30
+								</Button>
+								<Button
+									on:click={() => ResinCounter.decreaseResin(40)}
+									class="rounded-none"
+								>
+									-40
+								</Button>
+								<Button
+									on:click={() => ResinCounter.decreaseResin(60)}
+									class="rounded-none"
+								>
+									-60
+								</Button>
+								<Button
+									on:click={() => ResinCounter.increaseResin(60)}
+									class="rounded-r-md rounded-l-none"
+								>
+									+60
+								</Button>
+							</div>
+
+							{#if currentResin < maxResin}
+								<div class="flex flex-col items-center">
+									{#if currentResin < 20}
+										<Text type="p">
+											20 in {ResinCounter.countTimeLeft(20)}
+											({ResinCounter.countEndTime(20)})
+										</Text>
+									{/if}
+									{#if currentResin < 30}
+										<Text type="p">
+											30 in {ResinCounter.countTimeLeft(30)}
+											({ResinCounter.countEndTime(30)})
+										</Text>
+									{/if}
+									{#if currentResin < 40}
+										<Text type="p">
+											40 in {ResinCounter.countTimeLeft(40)}
+											({ResinCounter.countEndTime(40)})
+										</Text>
+									{/if}
+									{#if currentResin < 60}
+										<Text type="p">
+											60 in {ResinCounter.countTimeLeft(60)}
+											({ResinCounter.countEndTime(60)})
+										</Text>
+									{/if}
+									<Text type="p">
+										{maxResin} in {ResinCounter.countTimeLeft(maxResin)}
+										({ResinCounter.countEndTime(maxResin)})
+									</Text>
+								</div>
+							{/if}
+						</Card.Content>
+						<!-- <Card.Footer class="flex justify-end">
+							<Button class="w-full">View more</Button>
+						</Card.Footer> -->
+					</Card.Root>
+				{/if}
+			{/each}
+		</div>
 	</div>
 </DefaultLayout>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9c54049f..d412a9d1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,7 +50,7 @@ const config = {
 					tertiaryActive: '#1C1C22',
 					neutral: '#1C1C22',
 					text: '#FFFFFF',
-					fivestar: '#805920'
+					fivestar: '#FFB13F'
 				},
 				light: {
 					border: '#000000',