scrabble-game/ui/src/screens/SettingsHub.svelte

<script lang="ts">
  import Screen from '../components/Screen.svelte';
  import TabBar from '../components/TabBar.svelte';
  import Settings from './Settings.svelte';
  import Profile from './Profile.svelte';
  import Friends from './Friends.svelte';
  import Wallet from './Wallet.svelte';
  import About from './About.svelte';
  import { app } from '../lib/app.svelte';
  import { offlineMode } from '../lib/offline.svelte';
  import { t, type MessageKey } from '../lib/i18n/index.svelte';

  // The Settings hub: a single nav bar + bottom tab bar hosting the Settings / Profile /
  // Friends / Wallet / About bodies. Tabs switch in place (no navigation), so the back control
  // always returns to the lobby. Guests have no social surface and no wallet, so the Friends and
  // Wallet tabs hide for them.
  type SettingsTab = 'settings' | 'profile' | 'friends' | 'wallet' | 'about';
  let { initialTab = 'settings' }: { initialTab?: SettingsTab } = $props();

  const guest = $derived(app.profile?.isGuest ?? true);
  // The active tab is seeded once from the entry route's tab and then owned locally;
  // the hub is keyed by route in App.svelte, so initialTab is constant for its lifetime.
  // svelte-ignore state_referenced_locally
  let tab = $state<SettingsTab>(initialTab);
  // A guest who deep-links to the Friends or Wallet tab (durable-only surfaces) falls back to Settings.
  $effect(() => {
    if (guest && (tab === 'friends' || tab === 'wallet')) tab = 'settings';
  });
  // Offline mode has no network, so the Profile and Friends surfaces (which read/save over the
  // network) are disabled — fall back to Settings if the hub is on one (a deep-link or a live flip).
  // Settings stays reachable: it holds the online/offline toggle.
  $effect(() => {
    if (offlineMode.active && (tab === 'profile' || tab === 'friends' || tab === 'wallet')) tab = 'settings';
  });

  const titleKey: Record<SettingsTab, MessageKey> = {
    settings: 'settings.title',
    profile: 'profile.title',
    friends: 'friends.title',
    wallet: 'wallet.title',
    about: 'about.title',
  };
</script>

<Screen title={t(titleKey[tab])} back="/">
  {#if tab === 'settings'}
    <Settings />
  {:else if tab === 'profile'}
    <Profile />
  {:else if tab === 'friends'}
    <Friends />
  {:else if tab === 'wallet'}
    <Wallet />
  {:else}
    <About />
  {/if}

  {#snippet tabbar()}
    <TabBar>
      <button class="tab" class:active={tab === 'settings'} onclick={() => (tab = 'settings')}>
        <span class="face"><span class="sq" aria-hidden="true">⚙️</span><span class="lbl">{t('settings.title')}</span></span>
      </button>
      <button class="tab" class:active={tab === 'profile'} disabled={offlineMode.active} onclick={() => (tab = 'profile')}>
        <span class="face"><span class="sq" aria-hidden="true">👤</span><span class="lbl">{t('profile.title')}</span></span>
      </button>
      {#if !guest}
        <button class="tab" class:active={tab === 'friends'} disabled={offlineMode.active} onclick={() => (tab = 'friends')}>
          <span class="face"><span class="sq" aria-hidden="true">🤝{#if app.notifications > 0}<span class="badge">{app.notifications}</span>{/if}</span><span class="lbl">{t('friends.title')}</span></span>
        </button>
      {/if}
      {#if !guest}
        <button class="tab" class:active={tab === 'wallet'} disabled={offlineMode.active} onclick={() => (tab = 'wallet')}>
          <span class="face"><span class="sq" aria-hidden="true">👛</span><span class="lbl">{t('wallet.tab')}</span></span>
        </button>
      {/if}
      <button class="tab" class:active={tab === 'about'} onclick={() => (tab = 'about')}>
        <span class="face"><span class="sq" aria-hidden="true">ℹ️{#if app.feedbackReplyUnread}<span class="badge">1</span>{/if}</span><span class="lbl">{t('about.tab')}</span></span>
      </button>
    </TabBar>
  {/snippet}
</Screen>