Move alert up and make it collapsible

ftl/core/change-notetype.ftl

@@ -2,6 +2,8 @@ change-notetype-current = Current
 change-notetype-new = New
 change-notetype-will-discard-content = Will discard content on the following fields:
 change-notetype-will-discard-cards = Will remove the following cards:
+change-notetype-collapse = Collapse
+change-notetype-expand = Expand
 change-notetype-fields = Fields
 change-notetype-templates = Templates
 change-notetype-to-from-cloze =

ts/change-notetype/Mapper.svelte

@@ -6,9 +6,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Container from "../components/Container.svelte";
     import Row from "../components/Row.svelte";
     import Col from "../components/Col.svelte";
+    import Badge from "../components/Badge.svelte";
     import MapperRow from "./MapperRow.svelte";
     import * as tr from "../lib/ftl";
     import { ChangeNotetypeState, MapContext } from "./lib";
+    import { plusIcon, minusIcon } from "./icons";
     import { slide } from "svelte/transition";
 
     export let state: ChangeNotetypeState;
@@ -21,8 +23,45 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         ctx === MapContext.Field
             ? tr.changeNotetypeWillDiscardContent()
             : tr.changeNotetypeWillDiscardCards();
+
+    let maxItems: number = 4;
+    let collapsed: boolean = true;
+    $: collapseMsg = collapsed
+        ? tr.changeNotetypeExpand()
+        : tr.changeNotetypeCollapse();
+    $: icon = collapsed ? plusIcon : minusIcon;
 </script>
 
+{#if unused.length > 0}
+    <div class="alert alert-warning" in:slide out:slide>
+        {#if unused.length > maxItems}
+            <div class="clickable" on:click={() => collapsed = !collapsed}>
+                <Badge iconSize={80}>
+                    {@html icon}
+                </Badge>
+                {collapseMsg}
+            </div>
+        {/if}
+        {unusedMsg}
+        <ul>
+            {#if collapsed}
+                {#each unused.slice(0, maxItems) as entry}
+                    <li>{entry}</li>
+                {/each}
+                {#if unused.length > maxItems}
+                    <div class="clickable" on:click={() => collapsed = !collapsed}>
+                        +{unused.length - maxItems}
+                    </div>
+                {/if}
+            {:else}
+                {#each unused as entry}
+                    <li>{entry}</li>
+                {/each}
+            {/if}
+        </ul>
+    </div>
+{/if}
+
 <Container --gutter-inline="0.5rem" --gutter-block="0.1rem">
     <Row --cols={2}>
         <Col --col-size={1}><b>{tr.changeNotetypeCurrent()}</b></Col>
@@ -34,13 +73,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {/each}
 </Container>
 
-{#if unused.length > 0}
-    <div class="alert alert-warning" in:slide out:slide>
-        {unusedMsg}
-        <ul>
-            {#each unused as entry}
-                <li>{entry}</li>
-            {/each}
-        </ul>
-    </div>
-{/if}
+<style lang="scss">
+    .clickable {
+        font-weight: bold;
+        cursor: pointer;
+    }
+</style>