From 9085154e3d12976ea4678610e0d24116ec839ad0 Mon Sep 17 00:00:00 2001
From: Luc Mcgrady <lucmcgrady@gmail.com>
Date: Wed, 22 Oct 2025 18:15:16 +0100
Subject: [PATCH] Added: Placeholder more menu Until I can access
 ContextMenu.svelte from the other pr.

---
 .../reviewer/reviewer-bottom/More.svelte      | 59 +++++++++++++++++++
 .../reviewer/reviewer-bottom/MoreItem.svelte  | 14 +++++
 .../reviewer-bottom/MoreSubmenu.svelte        | 22 +++++++
 .../reviewer-bottom/ReviewerBottom.svelte     |  8 +--
 4 files changed, 97 insertions(+), 6 deletions(-)
 create mode 100644 ts/routes/reviewer/reviewer-bottom/More.svelte
 create mode 100644 ts/routes/reviewer/reviewer-bottom/MoreItem.svelte
 create mode 100644 ts/routes/reviewer/reviewer-bottom/MoreSubmenu.svelte

diff --git a/ts/routes/reviewer/reviewer-bottom/More.svelte b/ts/routes/reviewer/reviewer-bottom/More.svelte
new file mode 100644
index 000000000..a1a72611f
--- /dev/null
+++ b/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>
diff --git a/ts/routes/reviewer/reviewer-bottom/MoreItem.svelte b/ts/routes/reviewer/reviewer-bottom/MoreItem.svelte
new file mode 100644
index 000000000..88a0f4b09
--- /dev/null
+++ b/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>
diff --git a/ts/routes/reviewer/reviewer-bottom/MoreSubmenu.svelte b/ts/routes/reviewer/reviewer-bottom/MoreSubmenu.svelte
new file mode 100644
index 000000000..f017bfa15
--- /dev/null
+++ b/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>
diff --git a/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte b/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte
index 8f978a5cd..6537df95f 100644
--- a/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte
+++ b/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
-                on:click={() => bridgeCommand("more")}
-                title={tr.actionsShortcutKey({ val: "M" })}
-            >
-                {tr.studyingMore()}&#8615
-            </button>
+            <More></More>
         </div>
     </div>
 </div>