Add Tabs component for daily limits

ts/deck-options/DailyLimits.svelte

@@ -8,6 +8,7 @@
     import * as tr from "../lib/ftl";
     import type { DeckOptionsState } from "./lib";
     import SpinBoxRow from "./SpinBoxRow.svelte";
+    import Tabs from "./Tabs.svelte";
     import TitledContainer from "./TitledContainer.svelte";
     import Warning from "./Warning.svelte";
 
@@ -39,10 +40,15 @@
                   expected: Math.min(9999, $config.newPerDay * 10),
               })
             : "";
+
+    const tabs = ["Shared Preset", "Deck only", "Today only"];
+    const activeReviewTab = 0;
+    const activeNewTab = 0;
 </script>
 
 <TitledContainer title={tr.deckConfigDailyLimits()}>
     <DynamicallySlottable slotHost={Item} {api}>
+        <Tabs {tabs} activeTab={activeReviewTab} />
         <Item>
             <SpinBoxRow
                 bind:value={$config.newPerDay}
@@ -57,6 +63,7 @@
             <Warning warning={newCardsGreaterThanParent} />
         </Item>
 
+        <Tabs {tabs} activeTab={activeNewTab} />
         <Item>
             <SpinBoxRow
                 bind:value={$config.reviewsPerDay}

ts/deck-options/Tabs.svelte

@@ -0,0 +1,50 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    export let tabs: string[];
+    export let activeTab: number;
+
+    const handleClick = (tabValue: number) => () => (activeTab = tabValue);
+</script>
+
+<ul>
+    {#each tabs as tab, idx}
+        <li class={activeTab === idx ? "active" : ""}>
+            <span on:click={handleClick(idx)}>{tab}</span>
+        </li>
+    {/each}
+</ul>
+
+<style lang="scss">
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        padding-left: 0;
+        margin-top: 1rem;
+        margin-bottom: 0.5rem;
+        list-style: none;
+        border-bottom: 1px solid var(--border);
+    }
+
+    span {
+        border: 1px solid transparent;
+        border-top-left-radius: 0.25rem;
+        border-top-right-radius: 0.25rem;
+        display: block;
+        padding: 0.25rem 1rem;
+        cursor: pointer;
+        margin: 0 8px -1px 0;
+        color: var(--disabled);
+    }
+
+    li.active > span {
+        border-color: var(--border) var(--border) var(--window-bg);
+        color: var(--text-fg);
+    }
+
+    span:hover {
+        color: var(--text-fg);
+    }
+</style>