web: very early proof-of-concept of on-device image background removal

web/src/components/sidebar/Sidebar.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import settings from "$lib/state/settings";
+
+    import { device } from "$lib/device";
     import { t } from "$lib/i18n/translations";
     import { defaultNavPage } from "$lib/subnav";
 
@@ -14,6 +17,8 @@
     import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
     import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
 
+    import IconCut from "@tabler/icons-svelte/IconCut.svelte";
+
     let screenWidth: number;
     let settingsLink = defaultNavPage("settings");
     let aboutLink = defaultNavPage("about");
@@ -30,6 +35,9 @@
     <div id="sidebar-tabs" role="tablist">
         <div id="sidebar-actions" class="sidebar-inner-container">
             <SidebarTab name="save" path="/" icon={IconDownload} />
+            {#if $settings.advanced.duck && !device.is.mobile && $settings.advanced.debug}
+                <SidebarTab name="cutout" path="/cutout" icon={IconCut} beta />
+            {/if}
             <SidebarTab name="remux" path="/remux" icon={IconRepeat} beta />
         </div>
         <div id="sidebar-info" class="sidebar-inner-container">

web/src/components/sidebar/SidebarTab.svelte

@@ -9,7 +9,7 @@
 
     export let beta = false;
 
-    const firstTabPage = ["save", "remux", "settings"];
+    const firstTabPage = ["save", "cutout", "remux", "settings"];
 
     let tab: HTMLElement;