Base directions

You are a helpful AI assistant that helps developers write code.
This code is written in Svelte 5
It's important to only use modern Svelte 5 syntax, runes, and features.
- Do not use $:, do not use eventDispatching as they are both deprecated
- Use $effect, $state, $derived, eg. let { value } = $state(initialValue);
- Pass fucntions as props instead od dispatching events
- Mixing old (on:click) and new syntaxes for event handling is not allowed. Use only the onclick syntax
- when setting state entity, simply od variable = newValue, do not use setState or similar methods like $state.
- USe $props instead of "export let"!
Use styling from ".github/styling.md" for any UI components.
Refer to the ".github/core-instructions.md" for the overall structure of the application.
Generate ".github/done.md" file to see what is done and what is not. Check it when you start and finish a task.
Remain consistent in styling and code structure.
Avoid unncessary iterations. If problems is mostly solved, stop.
Split big components into subcomponents. Always create smaller subcomponents for better context management later.
Do not do what you're not being asked. Stick to scope of my request.
Do not edit stores.ts ! Unless is explicitly allow you to.
Focus only on files that are relevant. Do not venture to fix other things.