Combine tabs, detail routes and a modal

import {
  Link,
  Route,
  Router,
  Tab,
  Tabs,
  Text,
  goBack,
  navigate,
  routes,
  signal,
  type RouteTo,
  type ScreenProps,
} from 'kuito';

declare module 'kuito' {
  interface Routes {
    podcasts: RouteTo;
    podcast: RouteTo<{ id: number }>;
    upNext: RouteTo;
    addPodcast: RouteTo;
  }
}

const followed = signal(['Hardcore History', 'Song Exploder']);

function Podcasts() {
  return <Link to={routes.podcast({ id: 0 })}>Hardcore History</Link>;
}

function Podcast({ id }: ScreenProps<{ id: number }>) {
  return <Text>{followed.value[id] ?? 'Unknown podcast'}</Text>;
}

function UpNext() {
  return <Text>Nothing queued</Text>;
}

function AddPodcast() {
  return <Text>Add one</Text>;
}

export default function App() {
  return (
    <Router linking>
      <Tabs>
        <Tab name="listen" title="Listen" icon={{ ios: 'headphones', android: 'headphones' }}>
          <Route
            name="podcasts"
            path="/"
            screen={Podcasts}
            title="Podcasts"
            header={{
              largeTitle: true,
              trailing: [
                {
                  label: 'Add',
                  icon: { ios: 'plus', android: 'add' },
                  onPress: () => navigate(routes.addPodcast()),
                },
              ],
            }}
          />
          <Route
            name="podcast"
            path="/podcast/:id"
            params={{ id: Number }}
            screen={Podcast}
            title="Podcast"
          />
        </Tab>
        <Tab name="up-next" title="Up Next" icon={{ ios: 'list.bullet', android: 'queue_music' }}>
          <Route name="upNext" path="/up-next" screen={UpNext} title="Up Next" />
        </Tab>
      </Tabs>
      <Route
        name="addPodcast"
        path="/add"
        screen={AddPodcast}
        title="Add a podcast"
        presentation="modal"
        header={{ leading: [{ label: 'Cancel', onPress: goBack }] }}
      />
    </Router>
  );
}