From 416bc37be7450d8f6bc906ceca1994e8feca3e71 Mon Sep 17 00:00:00 2001
From: lauslim12 <31909304+lauslim12@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:40:12 +0900
Subject: [PATCH 1/6] Remove unused `baseUrl`

---
 tsconfig.app.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tsconfig.app.json b/tsconfig.app.json
index a71faf8..0be8956 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -25,7 +25,6 @@
 
 		/* Custom */
 		"types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"],
-		"baseUrl": "./",
 		"paths": {
 			"~/*": ["./app/*"]
 		}

From 38b4d6cb594f7e00fd6ddd03f3120c19e4b26529 Mon Sep 17 00:00:00 2001
From: lauslim12 <31909304+lauslim12@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:40:44 +0900
Subject: [PATCH 2/6] Fix an unreadable `sw.ts` bug

Also, fixes the problem where the application got loaded in
Dark Mode in the initial render. I believe this is caused by
the service worker serving the cached version of the application,
so we had to do a hard refresh.
---
 vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite.config.ts b/vite.config.ts
index 0536ded..7e48335 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -24,7 +24,7 @@ export default defineConfig({
 			devOptions: {
 				enabled: true,
 			},
-			filename: "sw.ts",
+			filename: "sw.js",
 			manifest: {
 				background_color: "#f1c40f",
 				description: "Speednote, the fastest way to put your quick thoughts!",

From 8d545cb87b9337f71370eb11c277c2aa95705f25 Mon Sep 17 00:00:00 2001
From: lauslim12 <31909304+lauslim12@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:42:25 +0900
Subject: [PATCH 3/6] More minimalist footer and saving strategy

---
 app/app.tsx                | 11 +++++------
 app/editor/note-editor.tsx | 17 +++++------------
 index.html                 |  2 +-
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/app/app.tsx b/app/app.tsx
index 984c051..ccee579 100644
--- a/app/app.tsx
+++ b/app/app.tsx
@@ -11,21 +11,20 @@ import { Header } from "~/header";
  * The GPU attempts to optimize by skipping the paint for the empty stretched area,
  * resulting in dead, uninitialized tiles that render as solid black horizontal bands.
  *
- * By explicitly declaring the background colors (`bg-gray-50 dark:bg-slate-950`)
+ * By explicitly declaring the background colors (`bg-gray-50 dark:bg-stone-900`)
  * on this flex container, we force the hardware compositor to paint the tiles,
  * bypassing the optimization glitch.
  */
 export const App = () => (
-	<div className="mx-auto flex min-h-screen max-w-7xl flex-col bg-gray-50 p-5 transition-colors duration-300 dark:bg-gray-950">
+	<div className="mx-auto flex min-h-screen max-w-7xl flex-col bg-gray-50 p-5 transition-colors duration-300 dark:bg-stone-900">
 		<Header />
 
-		<main className="flex flex-1 flex-col px-0 py-8 sm:px-2 md:px-6 lg:px-12 xl:px-20">
+		<main className="flex flex-1 flex-col px-0 py-8 sm:px-4 md:px-10 lg:px-20 xl:px-32">
 			<Editor />
 		</main>
 
-		<footer className="mt-auto text-center text-gray-500 text-xs transition-colors duration-300 dark:text-gray-600">
-			<p>Thank you so much for using Speednote! Made with ♥ in Tokyo, Japan</p>
-			<p className="mt-1.5 text-[0.5rem] opacity-60">
+		<footer className="mt-auto text-center text-[0.5rem] text-gray-400 opacity-60 transition-colors duration-300 dark:text-gray-600">
+			<p>
 				{import.meta.env.VITE_APP_VERSION} (
 				{import.meta.env.VITE_GIT_SHORT_SHA ?? "local"})
 			</p>
diff --git a/app/editor/note-editor.tsx b/app/editor/note-editor.tsx
index 3c5bc9d..857a464 100644
--- a/app/editor/note-editor.tsx
+++ b/app/editor/note-editor.tsx
@@ -21,26 +21,19 @@ const Metadata = () => {
 	}
 
 	const formattedTimestamp = Intl.DateTimeFormat(undefined, {
-		dateStyle: "full",
+		dateStyle: "long",
 		hourCycle: "h23",
-		timeStyle: "full",
+		timeStyle: "medium",
 	}).format(lastUpdated);
 
 	return (
 		<section>
 			<time
-				className="font-semibold text-gray-400 text-xs transition-colors duration-300 sm:text-sm dark:text-gray-600"
+				className="text-gray-400 text-xs transition-colors duration-300 sm:text-sm dark:text-gray-600"
 				role="note"
 			>
-				Last updated at {formattedTimestamp}.
+				{save === "saving" ? "Saving..." : formattedTimestamp}
 			</time>
-
-			{save !== "idle" && (
-				<output className="font-semibold text-gray-400 text-xs transition-colors duration-300 before:content-['_'] sm:text-sm dark:text-gray-600">
-					{save === "saving" && "Saving..."}
-					{save === "saved" && "Saved."}
-				</output>
-			)}
 		</section>
 	);
 };
@@ -74,7 +67,7 @@ const ContentEditor = () => {
 				onChange={({ currentTarget: { value } }) =>
 					setContent(value, Date.now())
 				}
-				placeholder="Start writing, your progress will be automatically stored in your machine's local storage"
+				placeholder="Start writing. Progress saves automatically."
 				readOnly={isFrozen}
 				type="content"
 				value={content}
diff --git a/index.html b/index.html
index 62e7a57..0c32614 100644
--- a/index.html
+++ b/index.html
@@ -57,7 +57,7 @@
     <noscript>Please enable JavaScript to use Speednote.</noscript>
     <div
       id="root"
-      class="selection:bg-selection selection:text-black dark:bg-linear-to-b bg-gray-50 text-gray-800 transition-colors duration-300 dark:bg-gray-950 dark:text-gray-200"
+      class="selection:bg-selection selection:text-black bg-gray-50 text-gray-800 transition-colors duration-300 dark:bg-stone-900 dark:text-gray-200"
     ></div>
     <script src="/app/index.tsx" type="module"></script>
   </body>

From 4cb2fe31c0411b407242da9a7fae56973738b715 Mon Sep 17 00:00:00 2001
From: lauslim12 <31909304+lauslim12@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:42:34 +0900
Subject: [PATCH 4/6] Test adjustments

---
 __tests__/Speednote.test.tsx | 41 ++++++++++++++++++++----------------
 e2e/Speednote.test.tsx       | 17 ++++++---------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/__tests__/Speednote.test.tsx b/__tests__/Speednote.test.tsx
index 7717adf..81c8c10 100644
--- a/__tests__/Speednote.test.tsx
+++ b/__tests__/Speednote.test.tsx
@@ -120,13 +120,8 @@ test("renders properly", async () => {
 	await assertEditor();
 	assertHeader();
 
-	// Sanity checks for markups, check footer and header.
+	// Sanity checks for header.
 	expect(screen.getByText(/About/i)).toBeInTheDocument();
-	expect(
-		screen.getByText(
-			"Thank you so much for using Speednote! Made with ♥ in Tokyo, Japan",
-		),
-	).toBeInTheDocument();
 
 	// Should also render a link to GitHub.
 	const linkToSource = screen.getByRole("link", { name: /About/ });
@@ -178,8 +173,8 @@ test("able to edit title and content", async () => {
 		"Today I spent 1000 JPY for lunch at a fish shop",
 	);
 
-	// There should be a date that shows the last updated date as well.
-	expect(screen.getByText(/Last updated at/i)).toBeInTheDocument();
+	// There should be a timestamp showing when the note was last updated.
+	expect(screen.getByRole("note")).toBeInTheDocument();
 });
 
 test("able to clear content and undo clear", async () => {
@@ -195,14 +190,21 @@ test("able to clear content and undo clear", async () => {
 	});
 	expect(clearContentButton).toBeEnabled();
 	await user.click(clearContentButton);
-	expect(content).toHaveValue("");
 
-	// Query the `undoClearButton` again here.
-	const undoClearButton = screen.getByRole("button", { name: "Undo clear" });
-	expect(undoClearButton).toBeInTheDocument();
+	// findByRole waits for the re-render — both the empty content and the "Undo clear"
+	// button appearing are results of the same async click handler (handleClear).
+	const undoClearButton = await screen.findByRole("button", {
+		name: "Undo clear",
+	});
+	expect(content).toHaveValue("");
 	expect(undoClearButton).toBeEnabled();
+
 	await user.click(undoClearButton);
-	expect(content).toHaveValue("Tears Don't Fall, Enchanted, Beautiful Trauma");
+
+	// findByDisplayValue retries until handleUndo's state update has re-rendered the content.
+	await screen.findByDisplayValue(
+		"Tears Don't Fall, Enchanted, Beautiful Trauma",
+	);
 });
 
 test("able to switch color mode", async () => {
@@ -228,8 +230,11 @@ test("able to freeze notes and unfreeze them", async () => {
 	expect(freezeNoteButton).toBeEnabled();
 	await user.click(freezeNoteButton);
 
-	// Should have `readOnly` attribute.
-	expect(freezeNoteButton).toHaveAccessibleName("Unfreeze note");
+	// findByRole waits for the re-render, preventing a flake where the assertion
+	// runs before React processes the state update from the async click handler.
+	const unfreezeButton = await screen.findByRole("button", {
+		name: "Unfreeze note",
+	});
 	expect(title).toHaveAttribute("readOnly");
 	expect(content).toHaveAttribute("readOnly");
 
@@ -247,9 +252,9 @@ test("able to freeze notes and unfreeze them", async () => {
 	expect(clearContentButton).toBeDisabled();
 
 	// Unfreeze the note.
-	expect(freezeNoteButton).toBeEnabled();
-	await user.click(freezeNoteButton);
-	expect(freezeNoteButton).toHaveAccessibleName("Freeze note");
+	expect(unfreezeButton).toBeEnabled();
+	await user.click(unfreezeButton);
+	await screen.findByRole("button", { name: "Freeze note" });
 
 	// `Clear content` should not be disabled.
 	expect(clearContentButton).toBeEnabled();
diff --git a/e2e/Speednote.test.tsx b/e2e/Speednote.test.tsx
index ef27c3e..486e6f4 100644
--- a/e2e/Speednote.test.tsx
+++ b/e2e/Speednote.test.tsx
@@ -92,11 +92,6 @@ test("renders properly", async ({ page }) => {
 
 	// Sanity checks for markups, check footer and header.
 	await expect(page.getByText("About")).toBeVisible();
-	await expect(
-		page.getByText(
-			"Thank you so much for using Speednote! Made with ♥ in Tokyo, Japan",
-		),
-	).toBeVisible();
 
 	// Should also render a link to GitHub.
 	const linkToSource = page.getByRole("link", { name: "About" });
@@ -176,8 +171,8 @@ test("able to edit title and content", async ({ page }) => {
 		"Today I spent 1000 JPY for lunch at a fish shop",
 	);
 
-	// There should be a date that shows the last updated date as well.
-	await expect(page.getByText(/Last updated at/i)).toBeVisible();
+	// There should be a timestamp showing when the note was last updated.
+	await expect(page.getByRole("note")).toBeVisible();
 });
 
 test("able to clear content and undo clear", async ({ page }) => {
@@ -640,8 +635,8 @@ test("able to restore autosave after hiding the app", async ({ page }) => {
 		document.dispatchEvent(new Event("visibilitychange"));
 	});
 
-	// Verify that the state is still `Saved.`
-	await expect(page.getByRole("status")).toContainText("Saved.");
+	// Verify that the save indicator is no longer in saving state.
+	await expect(page.getByRole("note")).not.toContainText("Saving...");
 
 	// Make the page visible again, and then try again.
 	await page.evaluate(() => {
@@ -656,8 +651,8 @@ test("able to restore autosave after hiding the app", async ({ page }) => {
 	// Fill it out again, and then check if the Autosave still works.
 	await title.fill("Autosave");
 	await content.fill("Autosave");
-	await expect(page.getByRole("status")).toContainText("Saving...");
-	await expect(page.getByRole("status")).toContainText("Saved.");
+	await expect(page.getByRole("note")).toContainText("Saving...");
+	await expect(page.getByRole("note")).not.toContainText("Saving...");
 
 	// Reload the page.
 	await page.reload();

From 804d3d9edf25a1fb619a3ec0801352cb12a7107d Mon Sep 17 00:00:00 2001
From: lauslim12 <31909304+lauslim12@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:43:14 +0900
Subject: [PATCH 5/6] Add Dark Mode support for the toast component, fix
 Fontsource font loading

---
 app/index.tsx   | 14 +++-----------
 app/toaster.tsx | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 app/toaster.tsx

diff --git a/app/index.tsx b/app/index.tsx
index 478ff6d..0b8d215 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,9 +1,9 @@
-import "@fontsource-variable/inter";
+import "@fontsource-variable/inter/wght.css";
 
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { Toaster } from "sonner";
 import { App } from "~/app";
+import { ThemedToaster } from "~/toaster";
 
 const root = document.getElementById("root");
 if (!root) {
@@ -12,15 +12,7 @@ if (!root) {
 
 createRoot(root).render(
 	<StrictMode>
-		<Toaster
-			closeButton
-			position="bottom-right"
-			toastOptions={{
-				className:
-					"bg-stone-50 dark:bg-stone-900 border-stone-200 dark:border-stone-800 text-stone-900 dark:text-stone-100",
-				duration: 2000,
-			}}
-		/>
+		<ThemedToaster />
 		<App />
 	</StrictMode>,
 );
diff --git a/app/toaster.tsx b/app/toaster.tsx
new file mode 100644
index 0000000..6f58783
--- /dev/null
+++ b/app/toaster.tsx
@@ -0,0 +1,19 @@
+import { Toaster } from "sonner";
+import { useDarkTheme } from "./use-dark-mode.ts";
+
+export const ThemedToaster = () => {
+	const { isDark } = useDarkTheme();
+
+	return (
+		<Toaster
+			closeButton
+			position="bottom-right"
+			theme={isDark ? "dark" : "light"}
+			toastOptions={{
+				className:
+					"bg-stone-50 dark:bg-stone-900 border-stone-200 dark:border-stone-800 text-stone-900 dark:text-stone-100",
+				duration: 2000,
+			}}
+		/>
+	);
+};

From 97890134782dd1c42861b6cd85ac58cb5710e01f Mon Sep 17 00:00:00 2001
From: lauslim12 <31909304+lauslim12@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:57:18 +0900
Subject: [PATCH 6/6] Utilize `useIsDark` to call dark theme safely

---
 app/toaster.tsx      | 4 ++--
 app/use-dark-mode.ts | 9 ++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/toaster.tsx b/app/toaster.tsx
index 6f58783..ec49076 100644
--- a/app/toaster.tsx
+++ b/app/toaster.tsx
@@ -1,8 +1,8 @@
 import { Toaster } from "sonner";
-import { useDarkTheme } from "./use-dark-mode.ts";
+import { useIsDark } from "./use-dark-mode.ts";
 
 export const ThemedToaster = () => {
-	const { isDark } = useDarkTheme();
+	const isDark = useIsDark();
 
 	return (
 		<Toaster
diff --git a/app/use-dark-mode.ts b/app/use-dark-mode.ts
index d17eb43..8750b82 100644
--- a/app/use-dark-mode.ts
+++ b/app/use-dark-mode.ts
@@ -23,12 +23,19 @@ DarkThemeStore.subscribe((isDark) => {
 	document.documentElement.classList.remove("dark");
 });
 
+/**
+ * Lightweight hook that only reads the dark theme state.
+ * Does not register any effects — safe to call from multiple components
+ * without duplicating listeners.
+ */
+export const useIsDark = () => useStore(DarkThemeStore, (state) => state);
+
 /**
  * Hook to use the dark theme. May be upgraded to include other
  * themes in the future.
  */
 export const useDarkTheme = () => {
-	const isDark = useStore(DarkThemeStore, (isDark) => isDark);
+	const isDark = useIsDark();
 
 	// Sync the theme with system preference.
 	useEffect(() => {