Migrate to Svelte 5 and Adopt Runes for Enhanced Reactivity​

### Describe the feature

I propose migrating the haptic project to Svelte 5 and adopting the new runes-based reactivity system.​

Svelte 5 introduces runes like $state, $derived, and $effect, which offer a more explicit and flexible approach to managing reactive state and computations. This change aims to enhance code clarity, maintainability, and performance.​

Given the size and complexity of the project, a gradual migration approach is advisable. Svelte 5 supports mixing components using the new runes syntax with those using the legacy syntax, allowing for incremental updates. The official migration script (npx sv migrate svelte-5) can assist in automating many of the necessary changes.

### It should be implemented because

Transitioning to runes provides several advantages:​

- Explicit Reactivity: Runes make reactive declarations clear, reducing ambiguity in code behavior. ​
- Improved Performance: Fine-grained reactivity ensures only necessary components update, enhancing efficiency. ​
- Simplified State Management: Runes unify state handling across components and modules, reducing the need for separate store implementations. ​
- Better TypeScript Integration: Enhanced compatibility with TypeScript improves type safety and developer experience. ​
- Unified Reactivity Model: Runes allow for consistent reactive patterns throughout the application, including in .svelte.js and .svelte.ts files. ​

### Additional context

The migration can be approached incrementally, as Svelte 5 maintains backward compatibility with previous versions. This allows for a gradual transition without disrupting existing functionality. ​

### Would you like to work on this issue?

Yes