Added: Placeholder more menu

Until I can access ContextMenu.svelte from the other pr.

ts/routes/reviewer/reviewer-bottom/More.svelte

@@ -0,0 +1,59 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import DropdownItem from "$lib/components/DropdownItem.svelte";
+    import * as tr from "@generated/ftl";
+    import MoreSubmenu from "./MoreSubmenu.svelte";
+    import MoreItem from "./MoreItem.svelte";
+
+    let showFloating = false;
+    let showFlags = false;
+
+    let flags = [
+        { colour: tr.actionsFlagRed(), shortcut: "Ctrl+1" },
+        { colour: tr.actionsFlagOrange(), shortcut: "Ctrl+2" },
+        { colour: tr.actionsFlagGreen(), shortcut: "Ctrl+3" },
+        { colour: tr.actionsFlagBlue(), shortcut: "Ctrl+4" },
+        { colour: tr.actionsFlagPink(), shortcut: "Ctrl+5" },
+        { colour: tr.actionsFlagTurquoise(), shortcut: "Ctrl+6" },
+        { colour: tr.actionsFlagPurple(), shortcut: "Ctrl+7" },
+    ];
+</script>
+
+<MoreSubmenu bind:showFloating>
+    <button
+        slot="button"
+        on:click={() => {
+            showFloating = !showFloating;
+        }}
+        title={tr.actionsShortcutKey({ val: "M" })}
+    >
+        {tr.studyingMore()}&#8615
+    </button>
+
+    <div slot="items">
+        <MoreSubmenu bind:showFloating={showFlags}>
+            <DropdownItem
+                slot="button"
+                on:click={() => {
+                    showFlags = !showFlags;
+                }}
+            >
+                {tr.studyingFlagCard()}
+            </DropdownItem>
+            <div slot="items">
+                {#each flags as flag}
+                    <MoreItem shortcut={flag.shortcut}>{flag.colour}</MoreItem>
+                {/each}
+            </div>
+        </MoreSubmenu>
+    </div>
+</MoreSubmenu>
+
+<style>
+    div :global(button) {
+        width: fit-content;
+    }
+</style>

ts/routes/reviewer/reviewer-bottom/MoreItem.svelte

@@ -0,0 +1,14 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import DropdownItem from "$lib/components/DropdownItem.svelte";
+    import Shortcut from "$lib/components/Shortcut.svelte";
+
+    export let shortcut: string = "";
+    export let onClick = () => {};
+</script>
+
+<Shortcut keyCombination={shortcut} on:keydown={onClick}></Shortcut>
+<DropdownItem on:click={onClick}><slot /></DropdownItem>

ts/routes/reviewer/reviewer-bottom/MoreSubmenu.svelte

@@ -0,0 +1,22 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import DropdownItem from "$lib/components/DropdownItem.svelte";
+    import Popover from "$lib/components/Popover.svelte";
+    import WithFloating from "$lib/components/WithFloating.svelte";
+    import * as tr from "@generated/ftl";
+
+    export let showFloating = false;
+</script>
+
+<div>
+    <WithFloating show={showFloating} inline on:close={() => (showFloating = false)}>
+        <slot slot="reference" name="button"></slot>
+
+        <Popover slot="floating">
+            <slot name="items" />
+        </Popover>
+    </WithFloating>
+</div>

ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte

@@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@generated/ftl";
     import type { ReviewerState } from "../reviewer";
     import Remaining from "./Remaining.svelte";
+    import More from "./More.svelte";
 
     export let state: ReviewerState;
 
@@ -42,12 +43,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {/if}
         <span class="disappearing"></span>
         <div class="disappearing more">
-            <button
+            <More></More>
-                on:click={() => bridgeCommand("more")}
-                title={tr.actionsShortcutKey({ val: "M" })}
-            >
-                {tr.studyingMore()}&#8615
-            </button>
         </div>
     </div>
 </div>