Using next version of kit, remove media query store and implementing myself with their code, and using small screen breakpoint.

package.json

@@ -16,8 +16,8 @@
     "@playwright/test": "^1.27.1",
     "@rgossiaux/svelte-headlessui": "1.0.2",
     "@rgossiaux/svelte-heroicons": "^0.1.2",
-    "@sveltejs/adapter-auto": "1.0.0-next.72",
-    "@sveltejs/kit": "1.0.0-next.480",
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
     "@types/cookie": "^0.5.1",
     "@types/node": "^18.11.9",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
@@ -46,7 +46,6 @@
     "cookie": "^0.5.0",
     "feather-icons": "^4.29.0",
     "svelte-lazy-loader": "^1.0.0",
-    "svelte-media-query-store": "^1.0.0",
     "zod": "^3.19.1",
     "zod-to-json-schema": "^3.18.1"
   }

src/app.d.ts

@@ -8,7 +8,7 @@ declare namespace App {
 
 	// interface PageData {}
 
-	// interface PageError {}
+	// interface Error {}
 
 	// interface Platform {}
 }

src/lib/components/search/textSearch/index.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { tick } from 'svelte';
 	import type { ActionData, PageData } from './$types';
+	import { applyAction, enhance } from '$app/forms';
 	import { fade } from 'svelte/transition';
 	import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
 	import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
-	import { xl, md } from '$lib/stores/mediaQueryStore';
 	import { boredState } from '$lib/stores/boredState';
 	import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
-	import { applyAction, enhance } from '$app/forms';
+	import { xl, md, sm } from '$lib/stores/mediaQueryStore';
 	import { gameStore } from '$root/lib/stores/gameSearchStore';
 	import { toast } from '../../toast/toast';
 	import Pagination from '$lib/components/pagination/index.svelte';
@@ -44,10 +44,16 @@
 	$: showPagination = $gameStore?.length > 1;
 
 	if ($xl) {
+		console.log('Was xl');
 		numberOfGameSkeleton = 8;
 	} else if ($md) {
+		console.log('Was md');
 		numberOfGameSkeleton = 3;
+	} else if ($sm) {
+		console.log('Was sm');
+		numberOfGameSkeleton = 2;
 	} else {
+		console.log('Was none');
 		numberOfGameSkeleton = 1;
 	}
 

src/lib/stores/mediaQueryStore.ts

@@ -1,4 +1,32 @@
-import { mediaQueryStore } from 'svelte-media-query-store';
+import { readable } from 'svelte/store';
+
+export function mediaQueryStore(query: string) {
+	if (typeof window === 'undefined') {
+		// check if it's rendered in the dom so window is not undefined
+		return readable('');
+	}
+	const mediaQueryList = window.matchMedia(query);
+
+	const mediaStore = readable(mediaQueryList.matches, (set) => {
+		const handleChange = () => set(mediaQueryList.matches);
+
+		try {
+			mediaQueryList.addEventListener('change', handleChange);
+		} catch (_) {
+			mediaQueryList.addListener(handleChange);
+		}
+
+		return () => {
+			try {
+				mediaQueryList.removeEventListener('change', handleChange);
+			} catch (_) {
+				mediaQueryList.removeListener(handleChange);
+			}
+		};
+	});
+
+	return mediaStore;
+}
 
 export const xs = mediaQueryStore('(min-width: 480px');