fix: trigger warning toast when localstorage is full #329

mcendon · 2025-07-15T22:35:13Z

Closes #318

Added the warning toast with "Failed to save to localStorage" and error message when localStorage quota is full
Playwright test added

fmaclen

Thanks for submitting the PR, left you some minor notes.

fmaclen · 2025-07-17T02:12:18Z

tests/session-interaction.test.ts

+		// Remove the filler key to clean up localStorage
+		await page.waitForFunction(() => {
+			localStorage.removeItem('hollama-localStorage-full-test');
+			return localStorage.getItem('hollama-localStorage-full-test') === null;
+		});


We don't need to do the cleanup, Playwright will reset the session at the end of the test.

I've removed that cleanup and improved the test (locator is warning toast specific, only 1 toast and containing user-friendly message)

src/lib/localStorage.ts

…iendly message (fmaclen#318)

fmaclen

I think we are more or less there. Found a styling bug with the toast, it's rendered in a semi-transparent blue color:

Probably because we are triggering it from a non-svelte file but I don't have time to really investigate.

So for now let's rely on a hack by adding !important to CSS classes to override inline styles:

// src/routes/+layout.svelte
<Toaster
	toastOptions={{
		unstyled: true,
		classes: {
			toast:
-				'shadow-xl px-4 py-3 flex items-center gap-x-3 max-w-full w-full rounded mx-auto text-xs mx-0',
+				'shadow-xl px-4 py-3 flex items-center gap-x-3 max-w-full w-full rounded mx-auto text-xs mx-0 !outline-none',
			loading: 'bg-shade-0',
			error: 'text-red-50 bg-red-700',
			success: 'text-emerald-50 bg-emerald-700',
-			warning: 'text-yellow-50 bg-yellow-700',
+			warning: 'text-yellow-50 !bg-yellow-700',
			info: 'bg-shade-1 text-neutral-500'
		}
	}}
	position="top-center"
/>

Added !outline-none to remove blue border
Added !bg-yellow-700 to ensure yellow background

src/lib/localStorage.ts

mcendon · 2025-07-19T19:51:47Z

I think we are more or less there. Found a styling bug with the toast, it's rendered in a semi-transparent blue color:
Probably because we are triggering it from a non-svelte file but I don't have time to really investigate.
So for now let's rely on a hack by adding !important to CSS classes to override inline styles:
// src/routes/+layout.svelte
<Toaster
	toastOptions={{
		unstyled: true,
		classes: {
			toast:
-				'shadow-xl px-4 py-3 flex items-center gap-x-3 max-w-full w-full rounded mx-auto text-xs mx-0',
+				'shadow-xl px-4 py-3 flex items-center gap-x-3 max-w-full w-full rounded mx-auto text-xs mx-0 !outline-none',
			loading: 'bg-shade-0',
			error: 'text-red-50 bg-red-700',
			success: 'text-emerald-50 bg-emerald-700',
-			warning: 'text-yellow-50 bg-yellow-700',
+			warning: 'text-yellow-50 !bg-yellow-700',
			info: 'bg-shade-1 text-neutral-500'
		}
	}}
	position="top-center"
/>
Added !outline-none to remove blue border

Added !bg-yellow-700 to ensure yellow background

Mmm it's pretty weird... I haven't checked with --ui parameter the last time, but before my last commit changes ( b2e3286#diff-2ee3676f914b574f502300b378adbd28b876202fd3769466dda03777209deb70) I executed it with --ui and the toast was OK (yellow color / no transparency)

I guess the problem is with the playwright test itself, because when running a local server and manually executes the test in the browser (I am using Chrome 138.0.7204.157 (Official Build) (64-bit) under Pop OS!) the toast styles are fine.

Anyway, I'll check the test code again because i think is related with the test code and not with the actual toast...

EDIT:
I just did a quick test by dispatching an event from localStorage.ts, then listening for the event and creating the toast on layout.svelte onMount() hook and the style problem persists when running the test. So, i don't think that the problem is related with creating the toast from a non-svelte file... i notice that playwright is executing the test using chromium-1169 binary that is a version from 2021, it could maybe related with that (i dont have enough time now to investigate it also :D)

EDIT 2:
Workaround for toast styles added

- Added !outline-none to remove blue border - Added !bg-yellow-700 to ensure yellow background

fmaclen

Thanks for looking into the Playwright issue. Your earlier implementation appears to be working fine without the hacks.

Also left you 2 minor typo changes.

Other than that, we are good to go!

fmaclen · 2025-07-20T14:50:01Z

src/routes/+layout.svelte

+				'shadow-xl px-4 py-3 flex items-center gap-x-3 max-w-full w-full rounded mx-auto text-xs mx-0 !outline-none',
 			loading: 'bg-shade-0',
 			error: 'text-red-50 bg-red-700',
 			success: 'text-emerald-50 bg-emerald-700',
-			warning: 'text-yellow-50 bg-yellow-700',
+			warning: 'text-yellow-50 bg-yellow-700 !bg-yellow-700',


I guess the problem is with the playwright test itself, because when running a local server and manually executes the test in the browser (I am using Chrome 138.0.7204.157 (Official Build) (64-bit) under Pop OS!) the toast styles are fine.

Oh, great catch! I think you are right, I just re-ran the test but took a screenshot instead of using the Trace Viewer and the colors are correct!

We can undo the hacks 👍

fmaclen · 2025-07-20T14:50:25Z

src/lib/localStorage.ts

+			} catch (error) {
+				// Handle localStorage quota exceeded error
+				if (error instanceof DOMException && error.name === 'QuotaExceededError') {
+					toast.warning('Localstorage is full', {


Suggested change

toast.warning('Localstorage is full', {

toast.warning('Local storage is full', {

fmaclen · 2025-07-20T14:50:47Z

tests/session-interaction.test.ts

+		const toastLocator = page.locator('ol[data-sonner-toaster] li[data-type="warning"]');
+		await expect(toastLocator).toBeVisible();
+		await expect(toastLocator).toHaveCount(1);
+		await expect(toastLocator).toContainText('Localstorage is full');


Suggested change

await expect(toastLocator).toContainText('Localstorage is full');

await expect(toastLocator).toContainText('Local storage is full');

…maclen

…maclen suggestion (fmaclen#318).

mcendon · 2025-07-20T15:43:38Z

Perfect Fernando, typo resolved and styling hack was reverted! Great, we are ready to go!

fmaclen · 2025-07-20T20:28:56Z

Thanks for the contribution @mcendon!

## [0.35.1](0.35.0...0.35.1) (2025-07-20) ### Bug Fixes * trigger warning toast when localstorage is full ([#329](#329)) ([15cc272](15cc272)), closes [#318](#318)

github-actions · 2025-07-20T20:30:06Z

🎉 This PR is included in version 0.35.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

mcendon · 2025-07-20T20:38:42Z

Thanks for the contribution @mcendon!

You're welcome, Fernando. Count on me for other contributions—I'm short on time, but I'll help however I can! Cheers.

mcendon added 2 commits July 14, 2025 21:28

fix: trigger warning toast when the localStorage is full (fmaclen#318)

19c5d18

test: warning toast should be shown when localStorage is full fmaclen…

9f23a5f

…#318

fmaclen requested changes Jul 17, 2025

View reviewed changes

fmaclen changed the title ~~Fix/trigger warning toast when localstorage is full #318~~ fix: trigger warning toast when localstorage is full Jul 17, 2025

test,fix: improve localStorage is full test and enhance toast user-fr…

b2e3286

…iendly message (fmaclen#318)

mcendon requested a review from fmaclen July 17, 2025 18:01

fmaclen requested changes Jul 18, 2025

View reviewed changes

src/lib/localStorage.ts Show resolved Hide resolved

style: workaround for warning toast styling (fmaclen#318)

e92de0d

- Added !outline-none to remove blue border - Added !bg-yellow-700 to ensure yellow background

mcendon requested a review from fmaclen July 19, 2025 21:56

fmaclen requested changes Jul 20, 2025

View reviewed changes

style,test: revert hack on toast styling. improve toast title with @f…

7380061

…maclen suggestion (fmaclen#318).

mcendon requested a review from fmaclen July 20, 2025 15:44

fmaclen merged commit 15cc272 into fmaclen:main Jul 20, 2025
2 checks passed

github-actions bot pushed a commit that referenced this pull request Jul 20, 2025

chore(release): 0.35.1

776e500

## [0.35.1](0.35.0...0.35.1) (2025-07-20) ### Bug Fixes * trigger warning toast when localstorage is full ([#329](#329)) ([15cc272](15cc272)), closes [#318](#318)

github-actions bot added the released label Jul 20, 2025

	toast.warning('Localstorage is full', {
	toast.warning('Local storage is full', {

	await expect(toastLocator).toContainText('Localstorage is full');
	await expect(toastLocator).toContainText('Local storage is full');

fix: trigger warning toast when localstorage is full #329

fix: trigger warning toast when localstorage is full #329

Uh oh!

Conversation

mcendon commented Jul 15, 2025 • edited by fmaclen Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fmaclen left a comment

Choose a reason for hiding this comment

Uh oh!

fmaclen Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

mcendon Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

fmaclen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcendon commented Jul 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fmaclen left a comment

Choose a reason for hiding this comment

Uh oh!

fmaclen Jul 20, 2025

Choose a reason for hiding this comment

Uh oh!

fmaclen Jul 20, 2025

Choose a reason for hiding this comment

Uh oh!

mcendon Jul 20, 2025

Choose a reason for hiding this comment

Uh oh!

fmaclen Jul 20, 2025

Choose a reason for hiding this comment

Uh oh!

mcendon Jul 20, 2025

Choose a reason for hiding this comment

Uh oh!

mcendon commented Jul 20, 2025

Uh oh!

Uh oh!

fmaclen commented Jul 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 20, 2025

Uh oh!

mcendon commented Jul 20, 2025

Uh oh!

Uh oh!

mcendon commented Jul 15, 2025 •

edited by fmaclen

Loading

mcendon commented Jul 19, 2025 •

edited

Loading

fmaclen commented Jul 20, 2025 •

edited

Loading