Merge in changes from dev

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

@@ -15,6 +15,14 @@ import TagAutoCompleteSearch from "./TagAutoCompleteSearch.vue";
 
 const emit = defineEmits<(e: "mode", mode: NoteManagerMode) => void>();
 
+onMounted(() => {
+    document.addEventListener('pointerdown', handleClickOutsideDialog);
+});
+
+onUnmounted(() => {
+    document.removeEventListener('pointerdown', handleClickOutsideDialog);
+});
+
 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, () => {
@@ -33,6 +41,7 @@ const searchFilters = reactive({
 });
 
 const searchBar = ref<HTMLInputElement | null>(null);
+const searchOptionsDialog = ref<HTMLDivElement | null>(null);
 const searchTags = ref<NoteTag[]>([]);
 const searchFilter = ref("");
 const showSearchFilters = ref(false);
@@ -51,7 +60,6 @@ const shapeName = computed(() => {
 //     searchBar.value?.focus();
 // });
 
-
 const availableTags = computed(() => {
     const tagList = new Map<string, NoteTag>();
     for (const [_, note] of noteState.reactive.notes) {
@@ -143,6 +151,14 @@ const visibleNotes = computed(() => {
     };
 });
 
+function handleClickOutsideDialog(event: MouseEvent): void {
+    if (searchOptionsDialog.value) {
+        if (showSearchFilters.value && !searchOptionsDialog.value.contains(event.target as Node)) {
+            showSearchFilters.value = false;
+        }
+    }
+}
+
 function toggleTagInSearch(tag: NoteTag): void {
     const tempArray = searchTags.value.filter((x) => x.name !== tag.name);
     if (tempArray.length === searchTags.value.length) {
@@ -174,7 +190,7 @@ function clearSearchBar(): void {
     </header>
     <div id="notes-search" :class="shapeFiltered ? 'disabled' : ''">
         <div id="search-bar">
-            <ToggleGroup
+            <select
                 v-show="!shapeFiltered"
                 id="kind-selector"
                 v-model="selectedNoteTypes"
@@ -184,8 +200,22 @@ function clearSearchBar(): void {
                 </option>
             </select>
             <font-awesome-icon icon="magnifying-glass" @click="searchBar?.focus()" />
-            <input ref="searchBar" v-model="searchFilter" type="text" placeholder="search through your notes.." />
-            <div v-show="showSearchFilters" id="search-filter">
+            <div id="search-field">
+                <input ref="searchBar" v-model="searchFilter" type="text" placeholder="search through your notes.." />
+                <font-awesome-icon v-show="searchFilter.length > 0" id="clear-button" icon="circle-xmark" title="Clear Search" @click.stop="clearSearchBar" />
+            </div>
+            <font-awesome-icon
+                id="search-options-icon"
+                icon="sliders"
+                style="opacity: 0.5"
+                @click="showSearchFilters = true"
+            />
+            <div v-show="showSearchFilters" id="search-filter" ref="searchOptionsDialog">
+                <font-awesome-icon
+                    id="search-options-close-icon"
+                    icon="sliders"
+                    @click="showSearchFilters = false"
+                />
                 <fieldset>
                     <legend>Where to search</legend>
                     <div>
@@ -381,8 +411,18 @@ header {
             margin-left: 1rem;
         }
 
-        > input {
-            padding: 0.5rem 1rem;
+        > .shape-name {
+            flex-shrink: 0;
+            margin-left: 0.5rem;
+            font-weight: bold;
+
+            &:hover {
+                text-decoration: line-through;
+                cursor: pointer;
+            }
+        }
+
+        > #search-field {
             flex-grow: 1;
             flex-shrink: 1;
 
@@ -530,6 +570,12 @@ header {
 
     .note-tags {
         display: flex;
+
+        > div {
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.5rem;
+            margin-right: 0.5rem;
+        }
     }
 
     .note-actions {