Simplify 'is-mobile.svelte.ts|js' hook

[developedbyant]

Prerequisites

• This feature already exists in shadcn/ui - if not, it won't be considered here so don't continue with your issue.

Describe the feature

Why not make is-mobile.svelte.ts file smaller using MediaQuery from svelte/reactivity.

import { MediaQuery } from "svelte/reactivity";
const MOBILE_BREAKPOINT = 768;

export class IsMobile {
	/** Indicate if we are on mobile screen size (700px) or less */
	current = $derived(new MediaQuery(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).current);
}

current way

import { untrack } from "svelte";

const MOBILE_BREAKPOINT = 768;

export class IsMobile {
	#current = $state<boolean>(false);

	constructor() {
		$effect(() => {
			return untrack(() => {
				const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
				const onChange = () => {
					this.#current = window.innerWidth < MOBILE_BREAKPOINT;
				};
				mql.addEventListener("change", onChange);
				onChange();
				return () => {
					mql.removeEventListener("change", onChange);
				};
			});
		});
	}

	get current() {
		return this.#current;
	}
}

[shyakadavis]

Hi;

Pretty sure this was already done. See: https://github.com/huntabyte/shadcn-svelte/pull/1616/files