[docs] Make toast.ts store arrangement more specific in first setup example

[Elliott-Green]

Link to the Page

https://www.skeleton.dev/docs/svelte/framework-components/toast

Describe this issue. Screenshots are encouraged.

The setup the toast store still feels a bit convoluted, being a bit more explicit about what files to setup and where would be more user-intuitive. I honestly keep tripping up and trying to define the store in the layout whenever I start a new project.

My recommened change to make this quicker to understand would be:

The first example has a +page.svelte file which has the variable const toaster = createToaster(); but in the second and later examples, it's referenced as import { toaster } from '/some/path/toaster.ts';

We want the user to create one singleton store, but we don't want them to define this in a +page.svelte? The stackblitz link works well when we have just one route/page, but becomes a bit harder to reference a +page.svelte variable from another +page.svelte.

I would just break the first example into two files/blocks, the /some/path/toaster.ts and then the already defined +page.svelte - the top of the code block has the type of file this code is for and having this as .ts and svelte would make it visually easier to know what lives where.

Some examples of user confusion for V3.
https://discord.com/channels/1003691521280856084/1003699523522142399/1426580910991478815
https://discord.com/channels/1003691521280856084/1425559992609800283/1425559992609800283
https://discord.com/channels/1003691521280856084/1151213014721241128/1419057650246746122 (toast store being defined in +page.svelte)

[endigo9740]

The first example has a +page.svelte file which has the variable const toaster = createToaster(); but in the second and later examples, it's referenced as import { toaster } from '/some/path/toaster.ts';

These are not related. The first demo showcases the feature in a minimal fashion (scaffolded in in a single file). Everything under the "Usage" section is unrelated. So let's make sure that's a clear distinction first off.

it's referenced as import { toaster } from '/some/path/toaster.ts';

I do agree the toaster.ts is confusing, since we don't show the contents of this. It should just be:

import { createToaster } from '@skeletonlabs/skeleton-svelte';

export const toaster = createToaster();

And of course we need this for the React version as well. So that change I would welcome.

I'd welcome a PR with this doc update from any and all.