Adding a feature

Walk-through for building a new side-panel feature. We'll use a hypothetical "NOTAMs" panel (no-fly-zone overlays) as the example.

1. Pick a feature folder

src/lib/features/notams/
├── index.ts
├── store.ts
├── types.ts
├── NotamsPanel.svelte
└── NotamRenderer.svelte    # if you draw on the map

Re-export the public surface from index.ts.

2. Define the domain

If the feature introduces a durable type (something saved to a server or localStorage), put the type in src/lib/domain/notam.ts and re-export from src/lib/domain/index.ts. Ephemeral state types can live in the feature's types.ts.

// src/lib/domain/notam.ts
export interface Notam {
  id: string;
  code: string;
  polygon: LatLngTuple[];
  validFrom: string;
  validTo: string;
}

3. Add state

Feature-scoped stores go in the feature folder. Use persisted() if the user should not lose the state on reload, plain writable() otherwise.

// src/lib/features/notams/store.ts
import { persisted } from '$state';
import type { Notam } from '$domain';

export const notamsStore = persisted<Notam[]>('notams', []);

4. Add API (if needed)

// src/lib/api/notams.ts
import { api } from './client';
import type { Notam } from '$domain';
export const notamsApi = { list: () => api.get<Notam[]>('/notams/') };

And export from src/lib/api/index.ts.

5. Build the panel

Re-use UI primitives. Wrap everything in CollapsibleCard so it lands in the side panel.

<!-- src/lib/features/notams/NotamsPanel.svelte -->
<script lang="ts">
  import { CollapsibleCard } from '$ui';
  import { t } from '$i18n';
  import { notamsStore } from './store';
</script>

<CollapsibleCard title={$t('notams.title')}>
  {#each $notamsStore as notam (notam.id)}
    <div>{notam.code}</div>
  {/each}
</CollapsibleCard>

6. Add i18n keys

Append to src/lib/i18n/locales/ru.json and en.json. The lookup is dot-separated:

{
  "notams": {
    "title": "NOTAMs",
    "empty": "Нет активных NOTAMs"
  }
}

7. Draw on the map (optional)

Every on-map drawing goes through a Scene. One scene per feature, or per sub- entity if the feature manages many independent overlays (like workspaces).

<!-- src/lib/features/notams/NotamRenderer.svelte -->
<script lang="ts">
  import { getMap } from '$map';
  import { notamsStore } from './store';

  const map = getMap();
  if (!map) throw new Error('NotamRenderer requires a <Map /> ancestor');

  $effect(() => {
    const scene = map.scene('notams');
    scene.clear();
    for (const n of $notamsStore) {
      // scene.addLine/addCircle/etc.
    }
  });
</script>

Add <NotamRenderer /> as a child of <MapView /> in the predict route.

8. Wire into the route

<!-- src/routes/predict/+page.svelte -->
<MapView>
  <WorkspaceRenderer />
  <NotamRenderer />
  <PanelContainer position="right">
    <TabBar tabs={[...] } bind:active={rightTab} />
    {#if rightTab === 'notams'}
      <NotamsPanel />
    {/if}
  </PanelContainer>
</MapView>

9. Add a settings entry (optional)

If the feature should be toggleable, extend src/lib/features/settings/store.ts and schema.ts. Keep the field declarative (kind + labelKey + path) — the SettingsPanel renders it automatically.

10. Checklist before you open a PR

npm run check passes
npm run build passes
All user-visible strings routed through $t
Feature only depends on shared modules ($domain, $state, $api, $ui, $map) — not on other features' internals
index.ts exports only what the outside world needs
Panel matches existing visual language (CollapsibleCard, Bootstrap sm form controls, same spacing)

3.7 KiB Raw Blame History