Common components shouldn't rely on global stores

[eyeseast]

I want to limit the footprint of the router and other global-ish stores so we can move components into SvelteKit.

These ones import the router:

Logo.svelte
2:  import Link from "@/router/Link.svelte";
5:  import { getPath } from "@/router/router.js";

HtmlField.svelte
3:  import { router } from "@/router/router.js";
26:      const route = router.resolvedRoute;

Dropdown.svelte
3:  import { router } from "@/router/router.js";
69:    router.writables.resolvedRoute.subscribe(async () => {

ErrorData.svelte
5:  import { nav } from "@/router/router.js";

dialog/SearchTipsDialog.svelte
3:  import Link from "@/router/Link.svelte";

These use the orgsAndUsers store (or other related imports):

Logo.svelte
3:  import { orgsAndUsers } from "@/manager/orgsAndUsers.js";
16:    : $orgsAndUsers.me != null
17:      ? userUrl($orgsAndUsers.me)
21:{#if $orgsAndUsers.me !== null}

UploadOptions.svelte
7:  import { orgsAndUsers, initOrgsAndUsers } from "@/manager/orgsAndUsers.js";
16:  const hasTextract = $orgsAndUsers.me.feature_level > 0;
81:            organization: $orgsAndUsers.me.organization.name,
82:            n: $orgsAndUsers.me.organization.monthly_credits,

dialog/OwnerDialog.svelte
12:  import { orgsAndUsers } from "@/manager/orgsAndUsers.js";
51:<Loader active={$orgsAndUsers.selfOrgs == null}>
72:                  autocompleteUsers(prefix, $orgsAndUsers.orgIdList)}
84:                allData={$orgsAndUsers.selfOrgs || []}

dialog/AccessDialog.svelte
4:  import { orgsAndUsers } from "@/manager/orgsAndUsers.js";
70:  $: notVerified = isViewer ? !$viewer.isVerified : !$orgsAndUsers.isVerified;

dialog/ReprocessDialog.svelte
9:  import { orgsAndUsers } from "@/manager/orgsAndUsers.js";
33:<Loader active={$orgsAndUsers.selfOrgs == null}>

dialog/CollaboratorDialog.svelte
19:  import { orgsAndUsers } from "@/manager/orgsAndUsers.js";
155:                {#if $orgsAndUsers.me != null && userAccess.user.id == $orgsAndUsers.me.id}
171:              {#if $orgsAndUsers.me == null || userAccess.user.id != $orgsAndUsers.me.id}

These use the layout store:

Modal.svelte
5:  import { layout } from "@/manager/layout.js";

dialog/DocumentInformationDialog.svelte
14:  import { layout } from "@/manager/layout.js";
15:  import { layout as viewerLayout } from "@/viewer/layout.js";

dialog/OwnerDialog.svelte
9:  import { layout } from "@/manager/layout.js";

dialog/AccessDialog.svelte
3:  import { layout } from "@/manager/layout.js";
5:  import { layout as viewerLayout } from "@/viewer/layout.js";

dialog/DiagnosticDialog.svelte
4:  import { layout } from "@/manager/layout.js";

dialog/ReprocessDialog.svelte
8:  import { layout } from "@/manager/layout.js";

dialog/ProjectEmbedDialog.svelte
8:  import { layout } from "@/manager/layout.js";

dialog/NoteEmbedDialog.svelte
6:  import { layout } from "@/viewer/layout.js";

dialog/PageEmbedDialog.svelte
4:  import { layout } from "@/viewer/layout.js";

dialog/EmbedDialog.svelte
15:  import { layout } from "@/viewer/layout.js";

dialog/ProjectDialog.svelte
5:  import { layout, showCollaborators, embedProject } from "@/manager/layout.js";

dialog/DocumentEmbedDialog.svelte
4:  import { layout } from "@/viewer/layout.js";

dialog/DataDialog.svelte
10:  import { layout } from "@/manager/layout.js";
11:  import { layout as viewerLayout } from "@/viewer/layout.js";

dialog/ProjectAccessDialog.svelte
8:  import { layout, updateProjectEdit } from "@/manager/layout.js";

dialog/MetaDialog.svelte
3:  import { layout } from "@/manager/layout.js";

dialog/EditSectionsDialog.svelte
4:  import { hideEditSections } from "@/viewer/layout.js";
6:  import { layout } from "@/viewer/layout.js";

dialog/MetaFieldDialog.svelte
12:  import { layout } from "@/manager/layout.js";

Image.svelte
8:  import { layout } from "@/viewer/layout.js";

AccessIcon.svelte
6:  import { openAccess as managerOpenAccess } from "@/manager/layout.js";
7:  import { openAccess as viewerOpenAccess } from "@/viewer/layout.js";

[eyeseast]

After merging #394, here's where we are:

src/common/dialog/SearchTipsDialog.svelte had one Link component, which is now an a tag. I removed the orgsAndUsers store, which was used in order to check if the current user is logged in and write an example search. Now it's stateless.

src/common/ErrorData.svelte uses the nav helper to turn route names into URLs. This could get consolidated, since it's always wrapped in other components.

src/common/Logo.svelte has a surprising amount of logic in it. This should really just be an icon that gets wrapped in a link, and that logic should be outside the component.

src/common/HtmlField.svelte gets used in the viewer, as text entry. Will probably make a new version in SvelteKit when we have more form handling options.

src/common/Dropdown.svelte should just get replaced with src/common/Dropdown2.svelte.

[eyeseast]

I think this will ultimately get resolved by refactoring a lot of these to fit more specific needs. Going to close this but write it down as a guiding principle.