Updates snapshots and fixes bugs

assets/App.vue

@@ -27,7 +27,7 @@
     </splitpanes>
     <button
       @click="collapseNav = !collapseNav"
-      class="button is-rounded is-settings-control"
+      class="button is-rounded"
       :class="{ collapsed: collapseNav }"
       id="hide-nav"
       v-if="!isMobile && !authorizationNeeded"
@@ -53,6 +53,7 @@ import { setTitle } from "@/composables/title";
 import { isMobile } from "@/composables/media";
 import { smallerScrollbars, lightTheme, menuWidth } from "@/composables/settings";
 import { useContainerStore } from "@/stores/container";
+import config from "@/stores/config";
 
 import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
 import LogContainer from "@/components/LogContainer.vue";
@@ -61,8 +62,7 @@ import MobileMenu from "@/components/MobileMenu.vue";
 
 const collapseNav = ref(false);
 const { oruga } = useProgrammatic();
-
-const authorizationNeeded = false;
+const { authorizationNeeded } = config;
 
 const containerStore = useContainerStore();
 

assets/components/LogActionsToolbar.vue

@@ -13,7 +13,7 @@
           <div class="level is-justify-content-start">
             <div class="level-left">
               <div class="level-item">
-                <octicon-trash-24 style="margin-right: 1em" />
+                <octicon-trash-24 class="mr-4" />
               </div>
             </div>
             <div class="level-right">
@@ -25,7 +25,7 @@
           <div class="level is-justify-content-start">
             <div class="level-left">
               <div class="level-item">
-                <octicon-download-24 style="margin-right: 1em" />
+                <octicon-download-24 class="mr-4" />
               </div>
             </div>
             <div class="level-right">
@@ -33,16 +33,34 @@
             </div>
           </div>
         </a>
+        <hr class="dropdown-divider" />
+        <a class="dropdown-item" @click="showSearch = true">
+          <div class="level is-justify-content-start">
+            <div class="level-left">
+              <div class="level-item">
+                <mdi-light-magnify class="mr-4" />
+              </div>
+            </div>
+            <div class="level-right">
+              <div class="level-item">Search</div>
+            </div>
+          </div>
+        </a>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { onMounted, onUnmounted, PropType } from "vue";
+import hotkeys from "hotkeys-js";
 import config from "@/stores/config";
 import { Container } from "@/types/Container";
-import hotkeys from "hotkeys-js";
-import { onMounted, onUnmounted, PropType, ref } from "vue";
+import { useSearchFilter } from "@/composables/search";
+
+const { showSearch } = useSearchFilter();
+
+const { base } = config;
 
 const props = defineProps({
   onClearClicked: {
@@ -55,8 +73,6 @@ const props = defineProps({
   },
 });
 
-const { base } = config;
-
 const onHotkey = (event: Event) => {
   props.onClearClicked(event);
   event.preventDefault();

assets/components/Search.vue

@@ -28,9 +28,8 @@ import { search } from "@/composables/settings";
 import { useSearchFilter } from "@/composables/search";
 import { ref, nextTick, onMounted, onUnmounted } from "vue";
 
-const showSearch = ref(false);
 const input = ref<HTMLInputElement>();
-const { searchFilter } = useSearchFilter();
+const { searchFilter, showSearch } = useSearchFilter();
 
 onMounted(() => {
   hotkeys("command+f, ctrl+f", (event, handler) => {
@@ -43,11 +42,13 @@ onMounted(() => {
 
 onUnmounted(() => {
   searchFilter.value = "";
+  showSearch.value = false;
   hotkeys.unbind("command+f, ctrl+f");
   hotkeys.unbind("esc");
 });
 
 function resetSearch() {
+  searchFilter.value = "";
   showSearch.value = false;
 }
 </script>

assets/components/SideMenu.vue

@@ -9,18 +9,14 @@
         </router-link>
       </div>
       <div class="column is-narrow has-text-right px-1">
-        <button
-          class="button is-rounded is-settings-control"
-          @click="$emit('search')"
-          title="Search containers (⌘ + k, ⌃k)"
-        >
+        <button class="button is-rounded" @click="$emit('search')" title="Search containers (⌘ + k, ⌃k)">
           <span class="icon">
             <mdi-light-magnify />
           </span>
         </button>
       </div>
       <div class="column is-narrow has-text-right px-0">
-        <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded is-settings-control">
+        <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded">
           <span class="icon">
             <mdi-light-cog />
           </span>

assets/composables/search.ts

@@ -1,6 +1,7 @@
 import { ref, computed, Ref } from "vue";
 
 const searchFilter = ref<string>();
+const showSearch = ref(false);
 
 import type { LogEntry } from "@/types/LogEntry";
 
@@ -33,5 +34,6 @@ export function useSearchFilter() {
   return {
     filteredMessages,
     searchFilter,
+    showSearch
   };
 }

assets/styles.scss

@@ -127,22 +127,6 @@ html.has-custom-scrollbars {
   }
 }
 
-.is-settings-control {
-  background: rgba(0, 0, 0, 0.4);
-  color: #fff;
-  border-color: transparent;
-  &:hover {
-    border-color: var(--border-hover-color) !important;
-    background: rgba(0, 0, 0, 0.8) !important;
-    color: #fff !important;
-  }
-
-  &:focus {
-    box-shadow: none !important;
-    color: unset;
-    border-color: transparent;
-  }
-}
 @media screen and (min-width: 770px) {
   .splitpanes__pane {
     overflow: unset;