Merge pull request 'Configurable sidebar destinations, Downloads gated on a client, Autotag off by default' (#145) from feat/25-configurable-sidebar-tabs into main

.pi/skills/yellowjacket-dev/SKILL.md

@@ -195,6 +195,12 @@ Two rules about climbing:
 - **Do not write an e2e spec first.** Drive the flow by hand, then
   promote it with `/e2e`. Specs written blind assert on selectors that
   do not exist.
+- **Not every view has a nav item.** Since #25 the destinations are
+  configurable, Autotag is hidden by default and Downloads is absent
+  until a download client exists — so `getByTestId('nav-<view>')` waits
+  30 s for a locator that will never resolve. `navigateTo(page, view)`
+  (`e2e/support/fixtures.ts`) dispatches the app's own `navigate` event.
+  Click the nav item when the *nav* is what the spec is about.
 
 Before a commit, the gate is `make lint`, `make test`, `make ui-test`,
 `make bindings-check`, `make css-check` and — from `frontend/` —

.planning/NOTES.md

@@ -3696,3 +3696,39 @@ as a tidy-up, a change nothing on a desktop renders differently.
 Related: a width-gated decision **is** testable at both tiers, which is
 why #61's phone mini player is a `matchMedia` stub in the component test
 and needs nothing special.
+
+## A default that is an *absent* key survives an existing seed (2026-08-19)
+
+The skill warns that a seed freezes every default it has already
+persisted, so changing one in `backend/config` is invisible against an
+existing `YJ_HOME` while CI, which seeds by running the app, tests the
+new one. That warning is about defaults stored as *values*.
+
+#25's Autotag-hidden default is stored as the **absence of a key**:
+`GeneralConfig.ViewVisibility` is a map, an id it does not mention takes
+`backend/config.Views`' answer, and only what the user changed is ever
+written. So a seed built before the feature existed showed the new
+default immediately — verified against `.dev/seeds/default.tar`, whose
+`config.toml` has no `[General.ViewVisibility]` table at all, and whose
+sidebar came up without Autotag on the first launch of the new binary.
+After toggling it on and off again the file carries exactly one line,
+`autotag = false`.
+
+The general form is worth keeping: **a default expressed as a zero value
+needs a re-seed to observe; a default expressed as an absent key does
+not**, and it needs no migration for existing installs either. It is the
+same property that makes removing a view later free (an unknown key is
+dropped on load), which is what the `#25 → #27` ordering on #73 rests on.
+
+## A spec cannot assume a destination has a nav item (2026-08-19)
+
+Since #25, `getByTestId('nav-<view>')` is not a reliable way to reach a
+view: Autotag is hidden by default and Downloads is absent without a
+download client, so four existing specs failed on a 30 s timeout waiting
+for a locator that will never resolve. `navigateTo(page, view)` in
+`e2e/support/fixtures.ts` dispatches the app's own `navigate` event
+instead, which is what every nav item, card and detail view dispatches —
+so it is the mechanism and not a test-only door.
+
+Use the nav item when the *nav* is the subject, and `navigateTo` when
+the view is.

CLAUDE.md

@@ -1032,6 +1032,71 @@ whole way through — so it was green on the broken build. Same trap as
 `layout-overflow.spec.ts` and `page-header`: a spec named for the
 behaviour, measuring the plumbing.
 
+**Which destinations exist is configuration, and hiding one takes away
+the nav item and nothing else.** Eleven sidebar entries is more than
+most libraries need (#25), so each is toggleable from Settings →
+Navigation, Autotag is off until asked for, and Downloads is absent
+until there is a client to download with — a destination for a feature
+that cannot work is worse than none. `navigate` still resolves a hidden
+view, which is not a nicety: detail views navigate into these and the
+launch page is one of them. Nothing needed a special case for the
+highlight either, because the paragraph above moved that onto
+`active-view-store`: the sidebar asks `isActive(id)` per *rendered*
+item, so a hidden view lights nothing exactly as a detail view does.
+
+Five things about it are load-bearing.
+
+**The stored shape is a map keyed by view id, and an absent key means
+that view's own default** (`backend/config.Views`). That is what makes
+this need no migration in either direction, and it is the polarity rule
+`AllowMeteredCatalogDownload` states: the zero value is the intended
+answer. A `HiddenViews []string` cannot express "Autotag off by
+default" at all — its zero value is *hide nothing* — and a struct with
+a boolean per view turns a view that later stops existing into stored
+garbage. Here an unknown key is dropped on load and a view added later
+gets its own default rather than being invisible or forcibly visible.
+It is also what makes #73's `#25 → #27` order safe rather than
+backwards: when Jobs folds into Settings, `jobs = true` in somebody's
+config is a key nothing asks about.
+
+**Two states the user could not get out of are refused, in the config
+and not in the checkbox.** Settings is never hideable and the launch
+page is not hideable while it is the launch page. `config.toml` is
+hand-editable, so a disabled checkbox is the affordance and
+`SetViewVisible` is the rule — an app that can be locked out of its own
+Settings by a typo in TOML is a support problem nobody can debug
+remotely. On *load* the launch page is instead un-hidden rather than
+refused: there is nobody to tell, and the honest reading of "my launch
+page is Autotag" is that this user wants Autotag, not that their launch
+page should be silently reset to something they did not choose.
+
+**Downloads is gated at the nav and not in the config**, on
+`downloadStore.available`, so switching it on in Settings still means
+what it says once a client exists and the tab appears without a restart
+(#37's rule). `available` is false until the providers have loaded,
+which makes the item *appear* on a fresh launch rather than appearing
+and then vanishing.
+
+**The tab bar honours the toggles too, and the reason is local rather
+than a general rule about phones.** `PHONE_COLUMN_IDS` is the precedent
+for "what a phone shows is a different question", and it would apply —
+except that `bottom-nav`'s "More" opens the *same* `<app-sidebar>`,
+which filters, so an unfiltered bar would contradict its own drawer one
+tap away. Which four tabs is still plan 016's committed subset; this
+only removes from it, and "More" is never filtered because it is how
+everything else stays reachable.
+
+**The list of destinations is `services/view-meta.ts`**, on
+`shortcut-meta.ts`'s pattern, because #25 gave it a second reader:
+Settings renders a toggle per view and needs the same labels in the
+same order. Which views exist and what an unconfigured install shows is
+Go's (`backend/config.Views`, which `DefaultPage`'s validation reads
+too, so the launchable set is not a second list); how they are *drawn*
+is the frontend's, beside the rest of the icon vocabulary. The binding
+returns the **resolved** map for every view, so the frontend holds no
+copy of the defaults — which would be the copy that shipped in the
+binary rather than the one being edited.
+
 **A primary view is cached, not unmounted.** `index.ts` keeps every
 primary view in the DOM and toggles a `.view-hidden` class, because that
 is what preserves `scrollTop` across navigation — so

backend/config/config.go

@@ -544,7 +544,7 @@ func (c *Config) SetDefaultPage(page string) error {
 		c.General.ApplyDefaults()
 	}
 
-	c.General.DefaultPage = DefaultPage(page)
+	c.General.DefaultPage = View(page)
 
 	if err := c.General.Validate(); err != nil {
 		return fmt.Errorf(
@@ -666,6 +666,81 @@ func (c *Config) SetAllowMeteredCatalogDownload(allow bool) error {
 	return nil
 }
 
+// GetViewVisibility reports which primary views the sidebar should
+// show, answered for every known view rather than only the ones the
+// config mentions -- so the frontend filters on a value and never has
+// to hold a second copy of the defaults.
+func (c *Config) GetViewVisibility() map[string]bool {
+	if c.General == nil {
+		general := &GeneralConfig{}
+		general.ApplyDefaults()
+
+		return general.ResolvedViewVisibility()
+	}
+
+	return c.General.ResolvedViewVisibility()
+}
+
+// SetViewVisible shows or hides one primary view.
+//
+// Two refusals, both about a state the user cannot get out of from the
+// UI they would be left with: Settings is never hideable, and the
+// launch page is never hideable while it is the launch page (change it
+// first). Hiding a view does not make it unreachable -- `navigate`
+// still resolves it, which detail views depend on -- it only takes the
+// nav item away.
+func (c *Config) SetViewVisible(view string, visible bool) error {
+	spec, known := LookupView(view)
+	if !known {
+		return fmt.Errorf("%w: %q", errUnknownView, view)
+	}
+
+	if c.General == nil {
+		c.General = &GeneralConfig{}
+		c.General.ApplyDefaults()
+	}
+
+	if !visible {
+		if !spec.Hideable {
+			return fmt.Errorf("%w: %q", errViewNotHideable, view)
+		}
+
+		if spec.ID == c.General.DefaultPage {
+			return fmt.Errorf("%w: %q", errViewIsLaunchPage, view)
+		}
+	}
+
+	if c.General.ViewVisibility == nil {
+		c.General.ViewVisibility = make(map[string]bool, len(Views))
+	}
+
+	c.General.ViewVisibility[view] = visible
+
+	if err := c.General.Validate(); err != nil {
+		return fmt.Errorf("invalid view visibility: %w", err)
+	}
+
+	if err := c.Save(); err != nil {
+		return fmt.Errorf("could not save config: %w", err)
+	}
+
+	events.Emit(
+		c.ctx,
+		events.GeneralConfigChanged,
+		map[string]any{
+			"ViewVisibility": c.General.ResolvedViewVisibility(),
+		},
+	)
+
+	c.logger.Info(
+		"view visibility updated",
+		"view", view,
+		"visible", visible,
+	)
+
+	return nil
+}
+
 // GetTrackListColumns returns the configured track-list columns.
 func (c *Config) GetTrackListColumns() []tracklist.Column {
 	if c.TrackList == nil {

backend/config/general.go

@@ -5,27 +5,13 @@ import (
 	"fmt"
 )
 
-// DefaultPage identifies which view the app opens to on launch.
-type DefaultPage string
-
-// Valid DefaultPage values, matching the frontend's top-level route ids.
-const (
-	DefaultPageHome      DefaultPage = "home"
-	DefaultPageTracks    DefaultPage = "tracks"
-	DefaultPageAlbums    DefaultPage = "albums"
-	DefaultPageArtists   DefaultPage = "artists"
-	DefaultPageGenres    DefaultPage = "genres"
-	DefaultPagePlaylists DefaultPage = "playlists"
-	DefaultPageExplore   DefaultPage = "explore"
-	DefaultPageDownloads DefaultPage = "downloads"
-	DefaultPageAutotag   DefaultPage = "autotag"
-	DefaultPageJobs      DefaultPage = "jobs"
-)
-
 // DefaultDefaultPage is the launch page for a fresh install.
-const DefaultDefaultPage = DefaultPageHome
+const DefaultDefaultPage = ViewHome
 
-var errUnknownDefaultPage = errors.New("unknown default page")
+var (
+	errUnknownDefaultPage = errors.New("unknown default page")
+	errViewCannotLaunch   = errors.New("view cannot be the launch page")
+)
 
 // QueueFallback identifies what plays, if anything, once the queue
 // runs out with nothing left to auto-advance to.
@@ -46,8 +32,22 @@ var errUnknownQueueFallback = errors.New("unknown queue fallback")
 // GeneralConfig holds general application preferences that don't
 // belong to a more specific subsystem.
 type GeneralConfig struct {
-	DefaultPage   DefaultPage   `toml:"DefaultPage"`
+	DefaultPage   View          `toml:"DefaultPage"`
 	QueueFallback QueueFallback `toml:"QueueFallback"`
+	// ViewVisibility says which sidebar destinations are shown, keyed by
+	// view id.
+	//
+	// **An absent key means that view's own default** (`Views`), and that
+	// is the whole reason this is a map rather than a `HiddenViews
+	// []string` or a struct of booleans. A list's zero value is "hide
+	// nothing", which cannot express Autotag being off by default without
+	// a migration; a struct field for a view that later stops existing is
+	// stored garbage somebody has to deprecate. Here a view added later
+	// gets its own default rather than being invisible or forcibly
+	// visible, an unknown key is dropped on load, and no install needs
+	// migrating in either direction. Same polarity rule as
+	// AllowMeteredCatalogDownload: the zero value is the intended answer.
+	ViewVisibility map[string]bool `toml:"ViewVisibility"`
 	// AllowMeteredCatalogDownload permits the ~0.6 GB Explore catalog to
 	// be fetched on a connection the platform calls cellular. It defaults
 	// to false, which is the whole point: the zero value is the safe one,
@@ -71,15 +71,17 @@ func (c *GeneralConfig) ApplyDefaults() {
 func (c *GeneralConfig) Validate() error {
 	c.ApplyDefaults()
 
-	switch c.DefaultPage {
-	case DefaultPageHome, DefaultPageTracks, DefaultPageAlbums, DefaultPageArtists,
-		DefaultPageGenres, DefaultPagePlaylists, DefaultPageExplore, DefaultPageDownloads,
-		DefaultPageAutotag, DefaultPageJobs:
-		// Valid.
-	default:
+	spec, known := LookupView(string(c.DefaultPage))
+	if !known {
 		return fmt.Errorf("%w: %q", errUnknownDefaultPage, c.DefaultPage)
 	}
 
+	if !spec.CanLaunch {
+		return fmt.Errorf("%w: %q", errViewCannotLaunch, c.DefaultPage)
+	}
+
+	c.normalizeViewVisibility()
+
 	switch c.QueueFallback {
 	case QueueFallbackStop, QueueFallbackFavorites, QueueFallbackDynamicMix:
 		// Valid.
@@ -89,3 +91,51 @@ func (c *GeneralConfig) Validate() error {
 
 	return nil
 }
+
+// normalizeViewVisibility drops what the stored map may not say, and
+// repairs the one invariant the shell depends on.
+//
+// Three things are dropped or forced, and all three are reachable only
+// from a hand-edited config or from a version that knew different
+// views: an unknown id (a view removed since, e.g. when #27 folds Jobs
+// into Settings) says nothing to anybody; a view that is not Hideable
+// cannot be false; and **the launch page is always visible**, because
+// otherwise an install lands on a page with no nav item pointing at it.
+//
+// That last one is a *repair* here and an *error* at the setter
+// (SetViewVisible), deliberately. On load there is nobody to tell and
+// the honest reading of "my launch page is Autotag" is that this user
+// wants Autotag, so it is un-hidden rather than the launch page being
+// silently reset to something they did not choose. At the setter the
+// user is right there and can act, so it refuses and says why.
+func (c *GeneralConfig) normalizeViewVisibility() {
+	for id := range c.ViewVisibility {
+		spec, known := LookupView(id)
+		if !known || !spec.Hideable {
+			delete(c.ViewVisibility, id)
+		}
+	}
+
+	if visible, ok := c.ViewVisibility[string(c.DefaultPage)]; ok && !visible {
+		c.ViewVisibility[string(c.DefaultPage)] = true
+	}
+}
+
+// ResolvedViewVisibility answers for every known view, so no caller has
+// to know the defaults -- the frontend included, which is why the
+// binding returns this rather than the stored map.
+func (c *GeneralConfig) ResolvedViewVisibility() map[string]bool {
+	resolved := make(map[string]bool, len(Views))
+
+	for _, v := range Views {
+		visible := v.VisibleByDefault
+
+		if stored, ok := c.ViewVisibility[string(v.ID)]; ok && v.Hideable {
+			visible = stored
+		}
+
+		resolved[string(v.ID)] = visible
+	}
+
+	return resolved
+}

backend/config/views.go

@@ -0,0 +1,89 @@
+package config
+
+import "errors"
+
+var (
+	errUnknownView      = errors.New("unknown view")
+	errViewNotHideable  = errors.New("view cannot be hidden")
+	errViewIsLaunchPage = errors.New("view is the launch page")
+)
+
+// View identifies one of the shell's primary destinations -- the
+// things the sidebar lists and `index.ts` knows as `VIEW_TAGS`.
+type View string
+
+// The primary views, in no particular order: the sidebar owns the order
+// it draws them in, because that is presentation.
+const (
+	ViewHome      View = "home"
+	ViewPlaylists View = "playlists"
+	ViewArtists   View = "artists"
+	ViewGenres    View = "genres"
+	ViewAlbums    View = "albums"
+	ViewTracks    View = "tracks"
+	ViewExplore   View = "explore"
+	ViewDownloads View = "downloads"
+	ViewAutotag   View = "autotag"
+	ViewJobs      View = "jobs"
+	ViewSettings  View = "settings"
+)
+
+// ViewSpec is what the backend knows about a destination. The label and
+// the icon are deliberately absent: those are presentation, they live
+// beside the rest of the app's icon vocabulary in
+// `frontend/src/utils/icon-language.ts`, and a Go copy of them would be
+// a second thing to keep in step for nothing.
+type ViewSpec struct {
+	// ID is the view name the frontend navigates by.
+	ID View
+	// VisibleByDefault is what an install gets when the config says
+	// nothing about this view -- which is every install until somebody
+	// changes it, and every view added after this one shipped.
+	VisibleByDefault bool
+	// Hideable is false for Settings alone. It is a property of the
+	// view rather than a check in the setter because `config.toml` is
+	// hand-editable, and an app that can be locked out of its own
+	// Settings by a typo is a support problem nobody can debug
+	// remotely.
+	Hideable bool
+	// CanLaunch reports whether the view may be the launch page.
+	// Settings is the only one that may not, which is the shape the
+	// DefaultPage enum already had.
+	CanLaunch bool
+}
+
+// Views is the one list of primary destinations, in the order Settings
+// offers them.
+//
+// It is the single source for three things that used to be written down
+// separately: which views exist, which of them may be the launch page
+// (`DefaultPage`'s validation reads it), and what an unconfigured
+// install shows.
+//
+// Autotag is the one view hidden by default: it rewrites tags on disk,
+// which is not what most libraries want on day one, and #25 asks for it
+// to be turned on deliberately.
+var Views = []ViewSpec{
+	{ID: ViewHome, VisibleByDefault: true, Hideable: true, CanLaunch: true},
+	{ID: ViewPlaylists, VisibleByDefault: true, Hideable: true, CanLaunch: true},
+	{ID: ViewArtists, VisibleByDefault: true, Hideable: true, CanLaunch: true},
+	{ID: ViewGenres, VisibleByDefault: true, Hideable: true, CanLaunch: true},
+	{ID: ViewAlbums, VisibleByDefault: true, Hideable: true, CanLaunch: true},
+	{ID: ViewTracks, VisibleByDefault: true, Hideable: true, CanLaunch: true},
+	{ID: ViewExplore, VisibleByDefault: true, Hideable: true, CanLaunch: true},
+	{ID: ViewDownloads, VisibleByDefault: true, Hideable: true, CanLaunch: true},
+	{ID: ViewAutotag, VisibleByDefault: false, Hideable: true, CanLaunch: true},
+	{ID: ViewJobs, VisibleByDefault: true, Hideable: true, CanLaunch: true},
+	{ID: ViewSettings, VisibleByDefault: true, Hideable: false, CanLaunch: false},
+}
+
+// LookupView returns the spec for a view id.
+func LookupView(id string) (ViewSpec, bool) {
+	for _, v := range Views {
+		if string(v.ID) == id {
+			return v, true
+		}
+	}
+
+	return ViewSpec{}, false
+}

backend/config/views_test.go

@@ -0,0 +1,255 @@
+package config
+
+import (
+	"errors"
+	"log/slog"
+	"path/filepath"
+	"testing"
+)
+
+// newViewTestConfig builds a Config backed by a temp file, which is all
+// SetViewVisible needs: it saves and emits, and the emit is a no-op
+// without a running app.
+func newViewTestConfig(t *testing.T) *Config {
+	t.Helper()
+
+	c := &Config{
+		logger:   slog.Default(),
+		filePath: filepath.Join(t.TempDir(), "config.toml"),
+	}
+
+	// Load a file that is not there: that is what marks the config
+	// loaded, without which Save refuses on the *second* write.
+	if err := c.Load(); err != nil {
+		t.Fatalf("Load() error: %v", err)
+	}
+
+	return c
+}
+
+// A view the config says nothing about takes its own default, which is
+// what makes this need no migration in either direction: an existing
+// install gets Autotag hidden without a key, and a view added later
+// gets its own answer rather than the list's.
+func TestViewVisibilityDefaults(t *testing.T) {
+	t.Parallel()
+
+	general := &GeneralConfig{}
+	general.ApplyDefaults()
+
+	resolved := general.ResolvedViewVisibility()
+
+	if len(resolved) != len(Views) {
+		t.Fatalf("resolved %d views, want %d", len(resolved), len(Views))
+	}
+
+	if resolved[string(ViewAutotag)] {
+		t.Error("autotag should be hidden by default")
+	}
+
+	for _, v := range Views {
+		if v.ID == ViewAutotag {
+			continue
+		}
+
+		if !resolved[string(v.ID)] {
+			t.Errorf("%s should be visible by default", v.ID)
+		}
+	}
+}
+
+// A stored answer wins over the default, in both directions -- turning
+// Autotag on is the whole user-facing point.
+func TestViewVisibilityStoredWins(t *testing.T) {
+	t.Parallel()
+
+	general := &GeneralConfig{
+		ViewVisibility: map[string]bool{
+			string(ViewAutotag): true,
+			string(ViewJobs):    false,
+		},
+	}
+	general.ApplyDefaults()
+
+	resolved := general.ResolvedViewVisibility()
+
+	if !resolved[string(ViewAutotag)] {
+		t.Error("autotag was switched on and should be visible")
+	}
+
+	if resolved[string(ViewJobs)] {
+		t.Error("jobs was switched off and should be hidden")
+	}
+}
+
+// A key for a view that no longer exists is discarded rather than
+// migrated. This is the property the #25-before-#27 ordering rests on:
+// when Jobs folds into Settings, `jobs = true` in somebody's config is
+// a key nothing asks about, not a cleanup task.
+func TestValidateDropsUnknownAndUnhideableViews(t *testing.T) {
+	t.Parallel()
+
+	general := &GeneralConfig{
+		ViewVisibility: map[string]bool{
+			"a-view-that-was-removed": true,
+			string(ViewSettings):      false,
+			string(ViewAutotag):       true,
+		},
+	}
+
+	if err := general.Validate(); err != nil {
+		t.Fatalf("Validate() error: %v", err)
+	}
+
+	if _, ok := general.ViewVisibility["a-view-that-was-removed"]; ok {
+		t.Error("an unknown view id should be dropped on load")
+	}
+
+	if _, ok := general.ViewVisibility[string(ViewSettings)]; ok {
+		t.Error("settings is not hideable and should not be stored")
+	}
+
+	if !general.ResolvedViewVisibility()[string(ViewSettings)] {
+		t.Error("settings must resolve visible whatever the file said")
+	}
+}
+
+// On load there is nobody to tell, so a launch page hidden by a
+// hand-edited file is un-hidden rather than the launch page being
+// reset to something the user did not choose.
+func TestValidateRevealsAHiddenLaunchPage(t *testing.T) {
+	t.Parallel()
+
+	general := &GeneralConfig{
+		DefaultPage: ViewAutotag,
+		ViewVisibility: map[string]bool{
+			string(ViewAutotag): false,
+		},
+	}
+
+	if err := general.Validate(); err != nil {
+		t.Fatalf("Validate() error: %v", err)
+	}
+
+	if !general.ResolvedViewVisibility()[string(ViewAutotag)] {
+		t.Error("the launch page must be visible")
+	}
+}
+
+// Settings may not be the launch page, which is the shape the old
+// DefaultPage enum had and is now read off the same table.
+func TestValidateRejectsAnUnlaunchablePage(t *testing.T) {
+	t.Parallel()
+
+	general := &GeneralConfig{DefaultPage: ViewSettings}
+
+	err := general.Validate()
+	if !errors.Is(err, errViewCannotLaunch) {
+		t.Fatalf("Validate() error = %v, want errViewCannotLaunch", err)
+	}
+}
+
+// At the setter the user is present and can act, so the two states
+// they could not get out of are refused rather than repaired.
+func TestSetViewVisibleRefusals(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name    string
+		view    string
+		visible bool
+		want    error
+	}{
+		{"settings is never hideable", string(ViewSettings), false, errViewNotHideable},
+		{"the launch page is not hideable", string(ViewHome), false, errViewIsLaunchPage},
+		{"an unknown view is not a setting", "nonsense", false, errUnknownView},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			t.Parallel()
+
+			c := newViewTestConfig(t)
+
+			err := c.SetViewVisible(tt.view, tt.visible)
+			if !errors.Is(err, tt.want) {
+				t.Fatalf("SetViewVisible() error = %v, want %v", err, tt.want)
+			}
+		})
+	}
+}
+
+// Showing a view is never refused, including Settings and the launch
+// page -- there is no state to be stuck in.
+func TestSetViewVisibleShowsAnything(t *testing.T) {
+	t.Parallel()
+
+	c := newViewTestConfig(t)
+
+	for _, v := range Views {
+		if err := c.SetViewVisible(string(v.ID), true); err != nil {
+			t.Fatalf("SetViewVisible(%q, true) error: %v", v.ID, err)
+		}
+	}
+
+	if !c.GetViewVisibility()[string(ViewAutotag)] {
+		t.Error("autotag was switched on and should be visible")
+	}
+}
+
+// The stored map survives a save/load round trip, which is what a
+// map-valued TOML key is worth checking for.
+func TestViewVisibilityRoundTrips(t *testing.T) {
+	t.Parallel()
+
+	path := filepath.Join(t.TempDir(), "config.toml")
+
+	original := &Config{logger: slog.Default(), filePath: path}
+	if err := original.Load(); err != nil {
+		t.Fatalf("Load() error: %v", err)
+	}
+
+	if err := original.SetViewVisible(string(ViewAutotag), true); err != nil {
+		t.Fatalf("SetViewVisible() error: %v", err)
+	}
+
+	if err := original.SetViewVisible(string(ViewJobs), false); err != nil {
+		t.Fatalf("SetViewVisible() error: %v", err)
+	}
+
+	loaded := &Config{logger: slog.Default(), filePath: path}
+	if err := loaded.Load(); err != nil {
+		t.Fatalf("Load() error: %v", err)
+	}
+
+	resolved := loaded.GetViewVisibility()
+
+	if !resolved[string(ViewAutotag)] {
+		t.Error("autotag should have loaded as visible")
+	}
+
+	if resolved[string(ViewJobs)] {
+		t.Error("jobs should have loaded as hidden")
+	}
+}
+
+// Every view the shell can launch into is a view the sidebar can show,
+// or an install could land on a page with no nav item and no setting
+// pointing at it.
+func TestEveryLaunchableViewIsAView(t *testing.T) {
+	t.Parallel()
+
+	for _, v := range Views {
+		if !v.CanLaunch {
+			continue
+		}
+
+		if !v.Hideable {
+			continue
+		}
+
+		if _, ok := LookupView(string(v.ID)); !ok {
+			t.Errorf("%s is launchable but not a known view", v.ID)
+		}
+	}
+}

e2e/specs/page-header.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '../support/fixtures.js';
+import { test, expect, navigateTo } from '../support/fixtures.js';
 
 /**
  * H-19: Playlists, Downloads, Jobs, Settings and Home had a page
@@ -58,8 +58,12 @@ const TAGS: Record<string, string> = {
 
 test.describe('every primary view says what it is', () => {
   test('each one has the shared header, with a heading', async ({ app }) => {
+    // By event rather than by nav item: a destination is not
+    // guaranteed to have one any more (#25 — Downloads is absent
+    // without a download client), and every one of these is still a
+    // primary view with a header, which is what this spec is about.
     for (const [view, heading, hasCount] of VIEWS) {
-      await app.getByTestId(`nav-${view}`).click();
+      await navigateTo(app, view);
       await expect(app.getByTestId('main-content')).toHaveAttribute(
         'data-active-view',
         view,

e2e/specs/settings-reach.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '../support/fixtures.js';
+import { test, expect, navigateTo } from '../support/fixtures.js';
 
 /**
  * Plan 007 phase 5: a11y.1 and a11y.2, frozen against the real app.
@@ -56,7 +56,9 @@ test.describe('Settings is reachable without a mouse', () => {
 
 test.describe("Downloads' tabs are tabs", () => {
   test('arrow keys move the selection and swap the panel', async ({ app }) => {
-    await app.getByTestId('nav-downloads').click();
+    // By event, not by nav item: with no download client configured
+    // there is no Downloads destination to click (#25).
+    await navigateTo(app, 'downloads');
 
     const view = app.locator('downloads-view');
     const requests = view.getByRole('tab', { name: 'Requests' });

e2e/specs/view-lifecycle.spec.ts

@@ -4,6 +4,7 @@ import {
   eventNames,
   resetEvents,
   waitForEvent,
+  navigateTo,
 } from '../support/fixtures.js';
 
 /**
@@ -39,7 +40,9 @@ test.describe('view lifecycle', () => {
   test('a keypress on Settings does not reach the Autotag queue', async ({
     app,
   }) => {
-    await app.getByTestId('nav-autotag').click();
+    // By event, not by nav item: Autotag is hidden by default (#25)
+    // and a hidden view is still reachable.
+    await navigateTo(app, 'autotag');
     await expect(app.getByTestId('main-content')).toHaveAttribute(
       'data-active-view',
       'autotag',
@@ -83,7 +86,9 @@ test.describe('view lifecycle', () => {
     // The other half of the same bug (H-2): two document keydown handlers
     // with no arbitration meant `s` on this page skipped the album *and*
     // toggled shuffle.  As a panel binding it can only mean one thing.
-    await app.getByTestId('nav-autotag').click();
+    // By event, not by nav item: Autotag is hidden by default (#25)
+    // and a hidden view is still reachable.
+    await navigateTo(app, 'autotag');
     await expect
       .poll(() => pendingCount(app))
       .toMatch(/^Pending \(\d+\)$/);

e2e/specs/view-visibility.spec.ts

@@ -0,0 +1,116 @@
+import { test, expect, navigateTo } from '../support/fixtures.js';
+
+/**
+ * Which destinations the navigation offers (#25).
+ *
+ * Eleven sidebar entries is more than most libraries need, so they are
+ * individually toggleable from Settings, Autotag is off until asked for
+ * and Downloads is absent until there is a client to download with.
+ *
+ * **The assertions are about the navigation, not about the setting.**
+ * "The config was saved" is the plumbing, and the two most recent bugs
+ * in this area — #69 and #72 — both shipped green under specs that
+ * measured exactly that. What a person sees is whether the item is in
+ * the accessibility tree, and whether the view is still reachable when
+ * it is not.
+ *
+ * This runs against the seeded app, whose config is defaults and whose
+ * download client list is empty, so the initial state below is what a
+ * fresh install looks like.
+ */
+type Page = import('@playwright/test').Page;
+
+const navItem = (page: Page, label: string) =>
+  page.getByRole('button', { name: label, exact: true });
+
+/** The Navigation section's checkbox for a destination. */
+const viewToggle = (page: Page, label: string) =>
+  page.getByRole('checkbox', { name: `Show ${label} in the navigation` });
+
+async function openNavigationSettings(page: Page): Promise<void> {
+  await page.getByTestId('nav-settings').click();
+
+  const section = page.locator(
+    'config-page config-section[heading="Navigation"] .header',
+  );
+
+  await expect(section).toBeVisible();
+
+  if ((await section.getAttribute('aria-expanded')) === 'false') {
+    await section.click();
+  }
+
+  await expect(section).toHaveAttribute('aria-expanded', 'true');
+}
+
+test.describe('configurable destinations', () => {
+  test('Autotag is off by default and Downloads needs a client', async ({
+    app,
+  }) => {
+    await expect(app.getByTestId('nav-home')).toBeVisible();
+
+    await expect(app.getByTestId('nav-autotag')).toHaveCount(0);
+    await expect(app.getByTestId('nav-downloads')).toHaveCount(0);
+  });
+
+  /**
+   * Hiding takes the item away and nothing else. Detail views navigate
+   * into these and the launch page is one of them, so a destination
+   * with no nav item still has to open.
+   */
+  test('a hidden destination is still reachable', async ({ app }) => {
+    await navigateTo(app, 'autotag');
+
+    await expect(app.getByTestId('main-content')).toHaveAttribute(
+      'data-active-view',
+      'autotag',
+    );
+
+    // And nothing is falsely lit while standing on it -- the same rule
+    // a detail view follows, with no special case for either.
+    await expect(navItem(app, 'Home')).toHaveAttribute('aria-current', 'false');
+  });
+
+  test('switching Autotag on adds it to the sidebar', async ({ app }) => {
+    await openNavigationSettings(app);
+
+    await viewToggle(app, 'Autotag').check();
+
+    await expect(app.getByTestId('nav-autotag')).toBeVisible();
+
+    // Clicking it is the point of having it.
+    await app.getByTestId('nav-autotag').click();
+    await expect(app.getByTestId('main-content')).toHaveAttribute(
+      'data-active-view',
+      'autotag',
+    );
+
+    // Put it back, or the next spec against this app sees a library
+    // this one changed.
+    await openNavigationSettings(app);
+    await viewToggle(app, 'Autotag').uncheck();
+    await expect(app.getByTestId('nav-autotag')).toHaveCount(0);
+  });
+
+  /**
+   * Settings has no toggle at all, rather than a toggle that refuses:
+   * a user who hides it cannot get back to unhide it. The backend
+   * refuses it too, because `config.toml` is hand-editable.
+   */
+  test('Settings cannot be switched off', async ({ app }) => {
+    await openNavigationSettings(app);
+
+    await expect(viewToggle(app, 'Settings')).toBeDisabled();
+    await expect(app.getByTestId('nav-settings')).toBeVisible();
+  });
+
+  /**
+   * The launch page is refused while it is the launch page, which is a
+   * state the user can leave by changing the launch page above it.
+   */
+  test('the launch page cannot be switched off', async ({ app }) => {
+    await openNavigationSettings(app);
+
+    await expect(viewToggle(app, 'Home')).toBeDisabled();
+  });
+});

e2e/support/fixtures.ts

@@ -111,6 +111,35 @@ export async function bindingCalls(page: Page): Promise<string[]> {
   return calls.map(nameOf);
 }
 
+/**
+ * Go to a view without going through the navigation.
+ *
+ * `navigate` is the event the shell listens for and every nav item, card
+ * and detail view dispatches, so this is the app's own mechanism rather
+ * than a test-only door. It exists because a destination is not
+ * guaranteed to have a nav item any more (#25): Autotag is hidden until
+ * the user asks for it and Downloads until a client exists, and a spec
+ * about what a *view* does should not also be asserting that the
+ * sidebar offers it.
+ */
+export async function navigateTo(page: Page, view: string): Promise<void> {
+  await page.evaluate(
+    (v) =>
+      void document.dispatchEvent(
+        new CustomEvent('navigate', {
+          detail: { view: v },
+          bubbles: true,
+          composed: true,
+        }),
+      ),
+    view,
+  );
+
+  await page
+    .getByTestId('main-content')
+    .waitFor({ state: 'attached' });
+}
+
 /** Thin client for the dev-only /__test/ surface (backend/testctl). */
 export class TestCtl {
   constructor(private readonly baseURL: string) {}

frontend/bindings/yellowjacket/backend/config/config.ts

@@ -112,6 +112,16 @@ export function GetTrackListColumns(): $CancellablePromise<tracklist$0.Column[]
     return $Call.ByID(3426289065);
 }
 
+/**
+ * GetViewVisibility reports which primary views the sidebar should
+ * show, answered for every known view rather than only the ones the
+ * config mentions -- so the frontend filters on a value and never has
+ * to hold a second copy of the defaults.
+ */
+export function GetViewVisibility(): $CancellablePromise<{ [_ in string]?: boolean } | null> {
+    return $Call.ByID(2798108026);
+}
+
 /**
  * Load reads and parses the config file from disk.
  */
@@ -247,6 +257,20 @@ export function SetTrackListColumns(columns: tracklist$0.Column[] | null): $Canc
     return $Call.ByID(4226159685, columns);
 }
 
+/**
+ * SetViewVisible shows or hides one primary view.
+ * 
+ * Two refusals, both about a state the user cannot get out of from the
+ * UI they would be left with: Settings is never hideable, and the
+ * launch page is never hideable while it is the launch page (change it
+ * first). Hiding a view does not make it unreachable -- `navigate`
+ * still resolves it, which detail views depend on -- it only takes the
+ * nav item away.
+ */
+export function SetViewVisible(view: string, visible: boolean): $CancellablePromise<void> {
+    return $Call.ByID(1751982648, view, visible);
+}
+
 /**
  * Validate returns errors if there is a breaking issue with the config.
  */

frontend/src/components/bottom-nav/bottom-nav.ts

@@ -8,6 +8,7 @@ import '../sidebar/app-sidebar.js';
 import { nameDialog } from '@utils/name-dialog';
 import { ICON_PLAYLIST } from '@utils/icon-language';
 import { ActiveViewController } from '@store/controllers/active-view-controller';
+import { ViewVisibilityController } from '@store/controllers/view-visibility-controller';
 
 type View = 'home' | 'albums' | 'tracks' | 'playlists';
 
@@ -129,6 +130,22 @@ export class BottomNav extends LitElement {
      */
     private activeCtrl = new ActiveViewController(this);
 
+    /**
+     * The tab bar honours the sidebar's toggles (#25), and the reason is
+     * inside this component rather than a general rule about phones.
+     * `PHONE_COLUMN_IDS` is the precedent for "what a phone shows is a
+     * different question", and it would apply here too -- except that
+     * "More" opens the *same* `<app-sidebar>`, which filters. An
+     * unfiltered bar would therefore contradict its own drawer, one tap
+     * apart, and a destination the user switched off is off wherever it
+     * is offered.
+     *
+     * Which four tabs remains plan 016's committed subset; this only
+     * removes from it. Hiding all four leaves "More", which is always
+     * present and reaches everything.
+     */
+    private visibilityCtrl = new ViewVisibilityController(this);
+
     /**
      * Whether the drawer has been asked for.
      *
@@ -211,7 +228,9 @@ export class BottomNav extends LitElement {
         return html`
             <nav aria-label="Primary">
                 <ul>
-                    ${BottomNav.TABS.map((tab) => html`
+                    ${BottomNav.TABS
+                        .filter((tab) => this.visibilityCtrl.visible(tab.id))
+                        .map((tab) => html`
                         <li>
                             <button
                                 type="button"

frontend/src/components/config-page/config-page.ts

@@ -27,6 +27,9 @@ import type * as library from '@go/library/models.js';
 import { ThemeController } from '@store/controllers/theme-controller';
 import { TrackListController } from '@store/controllers/tracklist-controller';
 import { FavoritesController } from '@store/controllers/favorites-controller';
+import { ViewVisibilityController } from '@store/controllers/view-visibility-controller';
+import { VIEW_META } from '../../services/view-meta';
+import { downloadStore } from '@store/download-store';
 import { GetAllPlaylists } from '@go/playlist/service.js';
 import type * as playlist from '@go/playlist/models.js';
 import { Events } from '../../events';
@@ -71,6 +74,9 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
     // --- Favorites controller ---
     private favCtrl = new FavoritesController(this);
 
+    /** Which destinations the navigation offers (#25). */
+    private viewsCtrl = new ViewVisibilityController(this);
+
     // --- Shortcuts controller ---
     private shortcutsCtrl = new ShortcutsController(this);
 
@@ -469,6 +475,12 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
             flex: 1;
         }
 
+        .view-note {
+            color: var(--yj-text-tertiary, #888);
+            font-size: var(--yj-font-size-sm, 0.85rem);
+            margin-left: auto;
+        }
+
         .column-arrows {
             display: flex;
             gap: 0.15em;
@@ -1084,6 +1096,25 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
         }
     }
 
+    private handleViewToggle = (
+        view: string,
+        visible: boolean,
+    ): void => {
+        this.viewsCtrl
+            .setVisible(view, visible)
+            .catch((err: unknown) => {
+                console.error('Failed to save view visibility:', err);
+                notificationStore.transient({
+                    key: 'view-visibility',
+                    text: `Could not change which views are shown. ${describeError(err)}`,
+                    detail: String(err),
+                });
+                // The checkbox has already flipped itself; the store is
+                // the truth, so redraw from it.
+                this.requestUpdate();
+            });
+    };
+
     private handleDefaultPageChange = (
         e: CustomEvent<ConfigFieldChangeEvent>,
     ): void => {
@@ -1428,6 +1459,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
             -->
             ${this.renderLibrarySection()}
             ${this.renderGeneralSection()}
+            ${this.renderNavigationSection()}
             ${this.renderNowPlayingSection()}
             ${this.renderThemeSection()}
             ${this.renderTrackListSection()}
@@ -1678,6 +1710,79 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
         `;
     }
 
+    // --- Navigation section ---
+
+    /**
+     * Which destinations the sidebar and the phone's tab bar offer.
+     *
+     * Two items are drawn but not editable, and both say why in place
+     * rather than being silently inert. Settings is never hideable --
+     * the backend refuses it too, because `config.toml` is
+     * hand-editable. The launch page is not hideable *while it is the
+     * launch page*, which is a state the user can leave by changing the
+     * launch page above; refusing is preferable to the alternatives,
+     * since resetting their launch page silently changes a second thing
+     * they chose and allowing it lands the app on a page nothing points
+     * at.
+     */
+    private renderNavigationSection() {
+        return html`
+            <config-section
+                heading="Navigation"
+                description="Choose which destinations the sidebar and the phone's tab bar offer. Hiding one does not remove it — links and the launch page still open it."
+            >
+                <ul class="column-list">
+                    ${repeat(VIEW_META, (v) => v.id, (v) => {
+            const checked = this.viewsCtrl.enabled(v.id);
+            const isLaunchPage = this.defaultPage === v.id;
+            const locked = v.alwaysShown === true || isLaunchPage;
+
+            let note = '';
+
+            if (v.alwaysShown === true) {
+                note = 'Always shown.';
+            } else if (isLaunchPage) {
+                note = 'This is the launch page.';
+            } else if (
+                v.id === 'downloads' &&
+                checked &&
+                !downloadStore.available
+            ) {
+                // The config says show it and the nav does not, which
+                // would otherwise read as the checkbox not working.
+                note = 'Hidden until a download client is configured.';
+            }
+
+            return html`
+                            <li
+                                class="column-item ${checked ? 'enabled' : 'disabled'}"
+                            >
+                                <input
+                                    type="checkbox"
+                                    class="column-toggle"
+                                    aria-label="Show ${v.label} in the navigation"
+                                    .checked=${checked}
+                                    ?disabled=${locked}
+                                    @change=${(e: Event) =>
+                    this.handleViewToggle(
+                        v.id,
+                        (e.target as HTMLInputElement).checked,
+                    )}
+                                />
+                                <span class="column-label">
+                                    ${v.label}
+                                </span>
+                                ${note
+                    ? html`<span class="view-note">${note}</span>`
+                    : nothing}
+                            </li>
+                        `;
+        })}
+                </ul>
+            </config-section>
+        `;
+    }
+
     // --- Theme section ---
 
     private renderThemeSection() {

frontend/src/components/sidebar/app-sidebar.ts

@@ -5,19 +5,9 @@ import { designTokens } from '../../styles/tokens.css';
 
 import type { DragActiveDetail } from '@utils/drag-controller';
 import { ActiveViewController } from '@store/controllers/active-view-controller';
-import {
-    ICON_PLAYLIST,
-    ICON_AUTOTAG,
-    ICON_REQUESTED,
-} from '@utils/icon-language';
-
-type View = 'home' | 'playlists' | 'artists' | 'genres' | 'albums' | 'tracks' | 'explore' | 'downloads' | 'autotag' | 'jobs' | 'settings';
-
-interface NavItem {
-    id: View;
-    label: string;
-    icon: string;
-}
+import { ViewVisibilityController } from '@store/controllers/view-visibility-controller';
+import { VIEW_META } from '../../services/view-meta';
+import type { View } from '../../services/view-meta';
 
 const MIN_WIDTH = 56;
 const MAX_WIDTH = 400;
@@ -210,19 +200,15 @@ export class AppSidebar extends LitElement {
         typeof setTimeout
     > | null = null;
 
-    private navItems: NavItem[] = [
-        { id: 'home', label: 'Home', icon: 'house' },
-        { id: 'playlists', label: 'Playlists', icon: ICON_PLAYLIST },
-        { id: 'artists', label: 'Artists', icon: 'user-group' },
-        { id: 'genres', label: 'Genres', icon: 'masks-theater' },
-        { id: 'albums', label: 'Albums', icon: 'compact-disc' },
-        { id: 'tracks', label: 'Tracks', icon: 'music' },
-        { id: 'explore', label: 'Explore', icon: 'globe' },
-        { id: 'downloads', label: 'Downloads', icon: ICON_REQUESTED },
-        { id: 'autotag', label: 'Autotag', icon: ICON_AUTOTAG },
-        { id: 'jobs', label: 'Jobs', icon: 'list-check' },
-        { id: 'settings', label: 'Settings', icon: 'gear' },
-    ];
+    /**
+     * Which destinations the user has kept (#25). The list below is
+     * still the whole set and its order -- this only filters it, and
+     * only for drawing: a hidden view is still reachable by `navigate`,
+     * which is what detail views and the launch page depend on.
+     */
+    private visibilityCtrl = new ViewVisibilityController(this);
+
+    private navItems = VIEW_META;
 
     override connectedCallback() {
         super.connectedCallback();
@@ -283,7 +269,9 @@ export class AppSidebar extends LitElement {
             ></div>
             <nav aria-label="Main">
             <ul>
-                ${this.navItems.map((item) => {
+                ${this.navItems
+            .filter((item) => this.visibilityCtrl.visible(item.id))
+            .map((item) => {
             const active = this.activeCtrl.isActive(item.id);
             const classes = [
                 active

frontend/src/services/view-meta.ts

@@ -0,0 +1,66 @@
+import {
+    ICON_PLAYLIST,
+    ICON_AUTOTAG,
+    ICON_REQUESTED,
+} from '@utils/icon-language';
+
+/** A primary destination. Mirrors `backend/config.View`. */
+export type View =
+    | 'home'
+    | 'playlists'
+    | 'artists'
+    | 'genres'
+    | 'albums'
+    | 'tracks'
+    | 'explore'
+    | 'downloads'
+    | 'autotag'
+    | 'jobs'
+    | 'settings';
+
+export interface ViewMeta {
+    id: View;
+    label: string;
+    icon: string;
+    /**
+     * Views that are never offered as a toggle. Settings alone, because
+     * a user who hides it cannot get back to unhide it.
+     *
+     * This is the *affordance*; the rule is `backend/config.ViewSpec`'s
+     * `Hideable`, which refuses at the setter and drops the key on load.
+     * `config.toml` is hand-editable, so the checkbox being absent is
+     * not what makes this safe — it is only what stops the question
+     * being asked.
+     */
+    alwaysShown?: boolean;
+}
+
+/**
+ * The app's primary destinations, in the order the navigation draws
+ * them and Settings lists them.
+ *
+ * It is here rather than inside `app-sidebar` because #25 gave it a
+ * second reader: Settings renders a toggle per view and needs the same
+ * labels in the same order. Same shape as `services/shortcut-meta.ts`,
+ * which moved out of `config-page` for the same reason -- a private
+ * static that two surfaces need is a private static that is about to be
+ * copied.
+ *
+ * The labels and icons deliberately do not exist in Go. Which views
+ * exist and what an unconfigured install shows is `backend/config.Views`
+ * and is asked for over the binding; how they are *drawn* is the
+ * frontend's, and lives beside the rest of the icon vocabulary.
+ */
+export const VIEW_META: ViewMeta[] = [
+    { id: 'home', label: 'Home', icon: 'house' },
+    { id: 'playlists', label: 'Playlists', icon: ICON_PLAYLIST },
+    { id: 'artists', label: 'Artists', icon: 'user-group' },
+    { id: 'genres', label: 'Genres', icon: 'masks-theater' },
+    { id: 'albums', label: 'Albums', icon: 'compact-disc' },
+    { id: 'tracks', label: 'Tracks', icon: 'music' },
+    { id: 'explore', label: 'Explore', icon: 'globe' },
+    { id: 'downloads', label: 'Downloads', icon: ICON_REQUESTED },
+    { id: 'autotag', label: 'Autotag', icon: ICON_AUTOTAG },
+    { id: 'jobs', label: 'Jobs', icon: 'list-check' },
+    { id: 'settings', label: 'Settings', icon: 'gear', alwaysShown: true },
+];

frontend/src/store/controllers/view-visibility-controller.ts

@@ -0,0 +1,54 @@
+import type {
+    ReactiveController,
+    ReactiveControllerHost,
+} from 'lit';
+import { viewVisibilityStore } from '../view-visibility-store';
+
+/**
+ * ViewVisibilityController connects a Lit component to the
+ * ViewVisibilityStore.
+ *
+ * It reads through to the store rather than copying the map into a
+ * `@state()` field, for the reason `ActiveViewController` does: there
+ * are two live `<app-sidebar>` instances the moment `bottom-nav`'s
+ * "More" drawer opens, and two components holding their own idea of
+ * which destinations exist is how they come to disagree.
+ */
+export class ViewVisibilityController implements ReactiveController {
+    private host: ReactiveControllerHost;
+    private unsubscribe?: () => void;
+
+    constructor(host: ReactiveControllerHost) {
+        this.host = host;
+        host.addController(this);
+    }
+
+    hostConnected(): void {
+        this.unsubscribe = viewVisibilityStore.subscribe(() => {
+            this.host.requestUpdate();
+        });
+
+        void viewVisibilityStore.init();
+    }
+
+    hostDisconnected(): void {
+        this.unsubscribe?.();
+    }
+
+    /** Whether the navigation should offer this destination. */
+    visible(view: string): boolean {
+        return viewVisibilityStore.visible(view);
+    }
+
+    /**
+     * What the config says, ignoring the download-client gate — the
+     * state Settings' own checkbox shows.
+     */
+    enabled(view: string): boolean {
+        return viewVisibilityStore.enabled(view);
+    }
+
+    setVisible(view: string, visible: boolean): Promise<void> {
+        return viewVisibilityStore.setVisible(view, visible);
+    }
+}

frontend/src/store/download-store.ts

@@ -189,6 +189,8 @@ class DownloadStore {
 
     private initialized = false;
 
+    private providersLoaded = false;
+
     constructor() {
         EventsOn(Events.DownloadProvidersChanged, () => {
             void this.refreshProviders();
@@ -285,6 +287,25 @@ class DownloadStore {
         }
     }
 
+    /**
+     * Loads the providers, and only those, once.
+     *
+     * `init()` additionally fetches the descriptors, the downloads and
+     * the request list, which is right for a page about downloading and
+     * wrong for the sidebar: it only needs `available`, to decide
+     * whether the Downloads destination exists at all (#25), and that
+     * is one query. `DownloadProvidersChanged` keeps it current
+     * afterwards, so configuring a client makes the tab appear without
+     * a restart.
+     */
+    async ensureProviders(): Promise<void> {
+        if (this.providersLoaded) return;
+
+        this.providersLoaded = true;
+
+        await this.refreshProviders();
+    }
+
     async refreshProviders(): Promise<void> {
         try {
             this.providersValue = (await ListProviders()) ?? [];

frontend/src/store/view-visibility-store.ts

@@ -0,0 +1,119 @@
+import { EventsOn } from '@runtime/runtime';
+import { GetViewVisibility, SetViewVisible } from '@go/config/config.js';
+import { dictByName } from '@utils/binding';
+import { downloadStore } from './download-store';
+import { Events } from '../events';
+
+type Subscriber = () => void;
+
+/**
+ * Which primary destinations the navigation offers.
+ *
+ * Eleven sidebar entries is more than most libraries need, so #25 makes
+ * them individually toggleable. Three rules about this are load-bearing.
+ *
+ * **Hidden is not unreachable.** This decides what the *nav* draws and
+ * nothing else: `navigate` still resolves a hidden view, which is not a
+ * nicety — detail views navigate into these, and the shell's launch
+ * page is one of them. Nothing here needs a special case for the
+ * highlight either, because #72 moved that onto `active-view-store`:
+ * `app-sidebar` asks `isActive(id)` per *rendered* item, so a hidden
+ * view lights nothing exactly as a detail view does.
+ *
+ * **The defaults live in Go**, in `backend/config.Views`, and this asks
+ * for the *resolved* answer rather than the stored map. A config that
+ * says nothing about a view means "that view's own default", so a copy
+ * of the defaults here would be a second thing to keep in step — and
+ * the one that shipped in the artifact, not the one being edited.
+ *
+ * **Downloads is a second question**, answered by the download client
+ * rather than by the config: a destination for a feature that cannot
+ * work is worse than an absent one. It is gated at `visible()` and not
+ * in the config, so switching it on in Settings still means what it
+ * says once a client exists. `available` is false until the providers
+ * have loaded, which makes the tab *appear* on a fresh launch rather
+ * than appearing and then vanishing — the less jarring half of a race
+ * that resolves in one query.
+ */
+class ViewVisibilityStore {
+    /** The backend's resolved answer, empty until the first load. */
+    private configured: Record<string, boolean> = {};
+
+    private loaded = false;
+
+    private subscribers = new Set<Subscriber>();
+
+    constructor() {
+        EventsOn(Events.GeneralConfigChanged, () => {
+            void this.refresh();
+        });
+
+        // A client configured later has to add the destination without a
+        // restart -- #37's rule, one surface over.
+        downloadStore.subscribe(() => this.notify());
+    }
+
+    /** Loads the visibility map once. Safe to call from every mount. */
+    async init(): Promise<void> {
+        if (this.loaded) return;
+
+        this.loaded = true;
+
+        await Promise.all([
+            this.refresh(),
+            downloadStore.ensureProviders(),
+        ]);
+    }
+
+    /**
+     * Whether the navigation should offer this destination.
+     *
+     * An unknown id is visible: the caller is drawing it from its own
+     * list, and a view this store has not heard of (or has not loaded
+     * yet) is better shown than silently dropped.
+     */
+    visible(view: string): boolean {
+        if (view === 'downloads' && !downloadStore.available) return false;
+
+        return this.configured[view] ?? true;
+    }
+
+    /**
+     * What the *config* says, ignoring the download-client gate — which
+     * is what Settings' own checkbox has to show, or a user with no
+     * client would see Downloads switched off and be unable to switch
+     * it on.
+     */
+    enabled(view: string): boolean {
+        return this.configured[view] ?? true;
+    }
+
+    async setVisible(view: string, visible: boolean): Promise<void> {
+        await SetViewVisible(view, visible);
+
+        // The backend emits GeneralConfigChanged, but the caller is
+        // owed the new state by the time this resolves.
+        await this.refresh();
+    }
+
+    subscribe(fn: Subscriber): () => void {
+        this.subscribers.add(fn);
+
+        return () => this.subscribers.delete(fn);
+    }
+
+    private async refresh(): Promise<void> {
+        try {
+            this.configured = await dictByName(GetViewVisibility());
+            this.notify();
+        } catch (err) {
+            console.error('Failed to load view visibility:', err);
+        }
+    }
+
+    private notify(): void {
+        this.subscribers.forEach((fn) => fn());
+    }
+}
+
+export const viewVisibilityStore = new ViewVisibilityStore();

frontend/test/components/chrome.test.ts

@@ -26,7 +26,26 @@ import {
   ICON_REQUESTED,
 } from '@utils/icon-language';
 
+/** A configured, enabled download client. */
+const PROVIDER = {
+  id: 1,
+  kind: 'slskd',
+  name: 'Sound',
+  enabled: true,
+  priority: 50,
+};
+
 describe('<app-sidebar>', () => {
+  // Downloads is offered only where there is a client to download with
+  // (#25), so "all eleven destinations" is a statement about a
+  // configured install. `view-visibility.test.ts` owns the rule itself;
+  // this states the world these cases are describing.
+  beforeEach(async () => {
+    stub('download.Service.ListProviders', [PROVIDER]);
+    emit(Events.DownloadProvidersChanged);
+    await flush();
+  });
+
   it('renders a testid per destination, which is how e2e navigates', async () => {
     const el = await fixture('app-sidebar');
 

frontend/test/components/keyboard-reach.test.ts

@@ -11,7 +11,8 @@ import { describe, expect, it, beforeEach } from 'vitest';
 import '@components/sidebar/app-sidebar';
 import '@components/queue-panel/queue-panel';
 import '@components/track-list/track-list';
-import { stub } from '@test/support/harness';
+import { stub, emit, flush } from '@test/support/harness';
+import { Events } from '../../src/events';
 import { fixture, shadow, shadowAll, update } from '@test/support/render';
 
 /** Two fixture tracks, enough to move a focus ring between. */
@@ -33,6 +34,16 @@ const TRACKS = [
 ] as never[];
 
 describe('<app-sidebar> is reachable', () => {
+  // Eleven destinations assumes a configured download client, since
+  // Downloads is not offered without one (#25).
+  beforeEach(async () => {
+    stub('download.Service.ListProviders', [
+      { id: 1, kind: 'slskd', name: 'Sound', enabled: true, priority: 50 },
+    ]);
+    emit(Events.DownloadProvidersChanged);
+    await flush();
+  });
+
   it('renders every destination as a button, not a bare list item', async () => {
     const el = await fixture('app-sidebar');
 

frontend/test/components/view-visibility.test.ts

@@ -0,0 +1,191 @@
+/**
+ * Which destinations the navigation offers (#25).
+ *
+ * Eleven sidebar entries is more than most libraries need, so they are
+ * individually toggleable. The assertions here are about the **nav**
+ * and not about the setting being saved: "the config was written" is
+ * the plumbing, and a spec that measures the plumbing is how #69 and
+ * #72 both shipped green on a broken build.
+ *
+ * Two singletons make ordering matter, and both are driven the way the
+ * app drives them rather than reset: `GeneralConfigChanged` is what the
+ * backend emits when a toggle is saved, and `DownloadProvidersChanged`
+ * is what it emits when a client is configured. So each case states the
+ * world it wants and is independent of which one ran first.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+
+import '@components/sidebar/app-sidebar';
+import '@components/bottom-nav/bottom-nav';
+import { activeViewStore } from '@store/active-view-store';
+import { stub, emit, flush, resetHarness } from '@test/support/harness';
+import { Events } from '../../src/events';
+import { fixture, shadowAll } from '@test/support/render';
+import type { LitElement } from 'lit';
+
+const PROVIDER = {
+  id: 1,
+  kind: 'slskd',
+  name: 'Sound',
+  enabled: true,
+  priority: 50,
+};
+
+/** Every view id the sidebar is currently drawing, in order. */
+const navIDs = (el: HTMLElement) =>
+  shadowAll<HTMLButtonElement>(el, 'nav button')
+    .map((b) => b.dataset.testid?.replace(/^nav-/, ''))
+    .filter((id): id is string => id !== undefined);
+
+const tabIDs = (el: HTMLElement) =>
+  shadowAll<HTMLButtonElement>(el, 'nav button')
+    .map((b) => b.dataset.testid?.replace(/^tab-/, ''))
+    .filter((id): id is string => id !== undefined);
+
+/**
+ * State the backend's resolved answer and push the event that says it
+ * changed. The map is *resolved* — every known view, defaults already
+ * applied — because that is what the binding returns and the whole
+ * reason the frontend holds no copy of the defaults.
+ */
+async function setViews(views: Record<string, boolean>): Promise<void> {
+  stub('config.Config.GetViewVisibility', views);
+  emit(Events.GeneralConfigChanged, {});
+  await flush();
+  await flush();
+}
+
+async function setClientConfigured(configured: boolean): Promise<void> {
+  stub('download.Service.ListProviders', configured ? [PROVIDER] : []);
+  emit(Events.DownloadProvidersChanged);
+  await flush();
+  await flush();
+}
+
+const ALL_VISIBLE = {
+  home: true,
+  playlists: true,
+  artists: true,
+  genres: true,
+  albums: true,
+  tracks: true,
+  explore: true,
+  downloads: true,
+  autotag: true,
+  jobs: true,
+  settings: true,
+};
+
+describe('view visibility', () => {
+  beforeEach(async () => {
+    resetHarness();
+    await setViews(ALL_VISIBLE);
+    await setClientConfigured(true);
+  });
+
+  it('draws every destination the config keeps', async () => {
+    const el = await fixture<LitElement>('app-sidebar');
+
+    expect(navIDs(el)).toEqual([
+      'home',
+      'playlists',
+      'artists',
+      'genres',
+      'albums',
+      'tracks',
+      'explore',
+      'downloads',
+      'autotag',
+      'jobs',
+      'settings',
+    ]);
+  });
+
+  it('drops the ones the user switched off', async () => {
+    const el = await fixture<LitElement>('app-sidebar');
+
+    await setViews({ ...ALL_VISIBLE, autotag: false, jobs: false });
+    await el.updateComplete;
+
+    expect(navIDs(el)).not.toContain('autotag');
+    expect(navIDs(el)).not.toContain('jobs');
+    expect(navIDs(el)).toContain('settings');
+  });
+
+  /**
+   * Hiding is about the nav item, not about the view. Detail views
+   * navigate into these and the launch page is one of them, so the
+   * shell's own statement of where the user is has to survive a
+   * destination that draws no item — and it does so with no special
+   * case here, because #72 moved the highlight onto `active-view-store`
+   * and this only filters what is rendered.
+   */
+  it('lights nothing when the active view is a hidden one', async () => {
+    const el = await fixture<LitElement>('app-sidebar');
+
+    await setViews({ ...ALL_VISIBLE, autotag: false });
+    activeViewStore.setView('autotag', true);
+    await el.updateComplete;
+
+    const lit = shadowAll<HTMLButtonElement>(el, 'nav button')
+      .filter((b) => b.getAttribute('aria-current') === 'page');
+
+    expect(lit).toHaveLength(0);
+    expect(navIDs(el)).not.toContain('autotag');
+
+    activeViewStore.setView('albums', true);
+  });
+
+  /**
+   * A destination for a feature that cannot work is worse than an
+   * absent one, so Downloads asks the download client rather than the
+   * config — and it appears when one is configured, without a restart
+   * (#37's rule, one surface over).
+   */
+  it('hides Downloads until a client is configured', async () => {
+    const el = await fixture<LitElement>('app-sidebar');
+
+    await setClientConfigured(false);
+    await el.updateComplete;
+
+    expect(navIDs(el)).not.toContain('downloads');
+
+    await setClientConfigured(true);
+    await el.updateComplete;
+
+    expect(navIDs(el)).toContain('downloads');
+  });
+
+  /**
+   * The tab bar honours the toggles too, and the reason is local: its
+   * "More" drawer opens the same `<app-sidebar>`, which filters. An
+   * unfiltered bar would contradict its own drawer one tap away.
+   */
+  it('drops a hidden destination from the phone tab bar', async () => {
+    const el = await fixture<LitElement>('bottom-nav');
+
+    expect(tabIDs(el)).toEqual(['home', 'albums', 'tracks', 'playlists', 'more']);
+
+    await setViews({ ...ALL_VISIBLE, albums: false });
+    await el.updateComplete;
+
+    expect(tabIDs(el)).toEqual(['home', 'tracks', 'playlists', 'more']);
+  });
+
+  /** "More" is not a destination and is never filtered away: it is how
+   *  everything else is still reachable. */
+  it('keeps More when every tab is hidden', async () => {
+    const el = await fixture<LitElement>('bottom-nav');
+
+    await setViews({
+      ...ALL_VISIBLE,
+      home: false,
+      albums: false,
+      tracks: false,
+      playlists: false,
+    });
+    await el.updateComplete;
+
+    expect(tabIDs(el)).toEqual(['more']);
+  });
+});