feat(NoteManager): Add ability to show all available notes

CHANGELOG.md

@@ -39,6 +39,7 @@ tech changes will usually be stripped from release notes for the public
 -   AssetManager:
     -   Changed UI of renaming assets, allowing inline editing rather than opening a popup
 -   Notes:
+    -   Add filtering option 'All' to note manager to show both global and local notes
     -   Note popouts for clients without edit access now show 'view source' instead of 'edit'
 
 ### Removed

client/src/game/ui/notes/NoteList.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { type DeepReadonly, computed, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 
-import { arrToToggleGroup } from "../../../core/components/toggleGroup";
-import ToggleGroup from "../../../core/components/ToggleGroup.vue";
 import { filter, map } from "../../../core/iter";
 import { mostReadable } from "../../../core/utils";
 import { coreStore } from "../../../store/core";
@@ -15,8 +13,12 @@ import { locationSettingsState } from "../../systems/settings/location/state";
 
 const emit = defineEmits<(e: "mode", mode: NoteManagerMode) => void>();
 
-const noteTypes = ["global", "local"] as const;
-const selectedNoteTypes = ref<(typeof noteTypes)[number]>("local");
+const noteTypes = ["global", "local", "all"] as const;
+const selectedNoteTypes = ref<(typeof noteTypes)[number]>((localStorage.getItem("note-display-type") as (typeof noteTypes)[number]) ?? "local");
+watch(selectedNoteTypes, () => {
+    localStorage.setItem("note-display-type", selectedNoteTypes.value);
+});
+
 const searchFilters = reactive({
     title: true,
     tags: true,
@@ -75,7 +77,8 @@ const noteArray = computed(() => {
 });
 const filteredNotes = computed(() => {
     const sf = searchFilter.value.trim().toLowerCase();
-    const searchLocal = selectedNoteTypes.value === "local";
+    const searchLocal = selectedNoteTypes.value !== "global";
+    const searchGlobal = selectedNoteTypes.value !== "local";
     const locationId = locationSettingsState.reactive.activeLocation;
     const notes: typeof noteArray.value = [];
     for (const note of noteArray.value) {
@@ -85,15 +88,16 @@ const filteredNotes = computed(() => {
             }
         } else {
             if (!searchFilters.notesWithShapes && note.shapes.length > 0) continue;
-            if (searchLocal) {
-                if (!note.isRoomNote) {
-                    // Global Notes can appear in the Local search _if_ there is a shape linked to them
-                    if (!searchFilters.globalIfLocalShape || note.shapes.length === 0) continue;
-                } else if (searchFilters.activeLocation && locationId !== note.location) {
+            if (!note.isRoomNote) {
+                if (!searchGlobal) {
+                    if (!searchFilters.globalIfLocalShape || note.shapes.length === 0) {
+                        continue;
+                    }
+                }
+            } else {
+                if (!searchLocal || (searchFilters.activeLocation && locationId !== note.location)) {
                     continue;
                 }
-            } else if (note.isRoomNote) {
-                continue;
             }
         }
 
@@ -149,14 +153,15 @@ function clearSearchBar(): void {
     </header>
     <div id="notes-search" :class="shapeFiltered ? 'disabled' : ''">
         <div>
-            <ToggleGroup
+            <select
                 v-show="!shapeFiltered"
                 id="kind-selector"
                 v-model="selectedNoteTypes"
-                :options="arrToToggleGroup(noteTypes)"
-                :multi-select="false"
-                active-color="rgba(173, 216, 230, 0.5)"
-            />
+            >
+                <option v-for="type in noteTypes" :key="type" :value="type">
+                    {{ type }}
+                </option>
+            </select>
             <font-awesome-icon icon="magnifying-glass" @click="searchBar?.focus()" />
             <div v-if="shapeName" class="shape-name" @click="clearShapeFilter">{{ shapeName }}</div>
             <div id="search-field">
@@ -335,7 +340,17 @@ header {
             flex-shrink: 0;
             height: calc(100% + 4px); // 2px border on top and bottom
             margin-left: -2px; // 2px border on left
-            border-color: black;
+            border-radius: 1rem;
+            border: solid 2px black;
+            outline: none;
+            text-transform: capitalize;
+            font-size: 1.25em;
+            text-align-last: center;
+            padding: 0 0.5em;
+            background-color: rgba(238, 244, 255, 1);
+            > option {
+                background-color: rgba(245, 245, 245, 1);
+            }
         }
 
         > svg:first-of-type {