Added: bury more option

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

@@ -24,6 +24,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         { colour: tr.actionsFlagPurple(), shortcut: "Ctrl+7" },
     ];
 
+    const shortcuts = [
+        { onClick: state.buryCurrentCard.bind(state), name: "bury", shortcut: "~" },
+    ];
+
     function changeFlag(index: number) {
         setFlag({ cardIds: [state.currentCard!.card!.id], flag: index });
         state.cardData.update(($cardData) => {
@@ -44,7 +48,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {tr.studyingMore()}{"▾"}
     </button>
 
-    <div slot="items">
+    <div slot="items" class="dropdown">
+        <div class="row">
             <MoreSubmenu bind:showFloating={showFlags}>
                 <DropdownItem
                     slot="button"
@@ -54,23 +59,58 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     {tr.studyingFlagCard()}
                 </DropdownItem>
-            <div slot="items">
+                <div slot="items" class="dropdown">
                     {#each flags as flag, i}
+                        <div class="row">
                             <MoreItem
                                 shortcut={flag.shortcut}
                                 onClick={() => changeFlag(i + 1)}
                             >
                                 {flag.colour}
                             </MoreItem>
+                            <span>{flag.shortcut}</span>
+                        </div>
                     {/each}
                 </div>
             </MoreSubmenu>
         </div>
+        <span></span>
+        {#each shortcuts as shortcut}
+            <div class="row">
+                <div>
+                    <MoreItem shortcut={shortcut.shortcut} onClick={shortcut.onClick}>
+                        {shortcut.name}
+                    </MoreItem>
+                </div>
+                <span>
+                    {shortcut.shortcut}
+                </span>
+            </div>
+        {/each}
+    </div>
 </MoreSubmenu>
 
-<style>
+<style lang="scss">
-    div :global(button) {
+    div.dropdown {
-        width: fit-content;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: baseline;
+
+        :global(button) {
+            border-radius: 0;
+            padding: 0.5em;
+            margin: 0;
+
+            // TODO: Hover effects
+            &:hover {
+                background: inherit;
+                color: inherit;
+            }
+        }
+    }
+
+    div.row {
+        display: contents;
     }
 
     button {