fix: adds keyboard short component to settings page (#2353)

assets/components/KeyShortcut.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="tag">
-    <span v-if="modifiers.includes('shift')"><carbon:mac-shift /></span>
-    <span v-if="modifiers.includes('meta')">
+  <span class="icon-text">
+    <span class="icon mx-0" v-if="modifiers.includes('shift')">
+      <carbon:mac-shift />
+    </span>
+    <span class="icon mx-0" v-if="modifiers.includes('meta')">
       <ph:command v-if="isMac" />
       <ph:control-bold v-else />
     </span>
-    <kbd class="is-uppercase is-family-sans-serif">{{ char }}</kbd>
-  </div>
+    <kbd class="is-uppercase is-family-sans-serif ml-1">{{ char }}</kbd>
+  </span>
 </template>
 
 <script lang="ts">
@@ -17,9 +19,7 @@ const { modifiers = ["meta"], char } = defineProps<{ char: string; modifiers?: (
 </script>
 
 <style scoped lang="scss">
-div.tag {
-  gap: 0.1em;
-  line-height: 0.5;
-  background-color: var(--scheme-main-ter);
+.icon {
+  width: unset;
 }
 </style>

assets/components/LogViewer/LogActionsToolbar.vue

@@ -114,7 +114,6 @@
 <script lang="ts" setup>
 import { type ComputedRef } from "vue";
 import { Container } from "@/models/Container";
-import KeyShortcut from "../KeyShortcut.vue";
 
 const { showSearch } = useSearchFilter();
 const { base } = config;

assets/pages/settings.vue

@@ -122,7 +122,7 @@
 
       <div class="item">
         <o-switch v-model="search">
-          <span v-html="$t('settings.search')"></span>
+          <span>{{ $t("settings.search") }} <key-shortcut char="f"></key-shortcut></span>
         </o-switch>
       </div>
 

locales/de.yml

@@ -49,9 +49,7 @@ settings:
   options: Optionen
   show-stopped-containers: Zeige gestoppte Container
   about: Über
-  search: >-
-    Aktiviere die Suche mit Dozzle mit <code>command+f</code> oder
-    <code>ctrl+f</code>
+  search: Aktiviere die Suche mit Dozzle mit
   using-version: Du verwendest Dozzle {version}.
   update-available: >-
     Eine neue Version ist verfügbar! Aktualisiere auf <a :href="{href}" class="next-release"

locales/en.yml

@@ -50,9 +50,7 @@ settings:
   options: Options
   show-stopped-containers: Show stopped containers
   about: About
-  search: >-
-    Enable searching with Dozzle using <code>command+f</code> or
-    <code>ctrl+f</code>
+  search: Enable searching with Dozzle using
   using-version: You are using Dozzle {version}.
   update-available: >-
     New version is available! Update to <a :href="{href}" class="next-release"

locales/es.yml

@@ -49,9 +49,7 @@ settings:
   options: Opciones
   show-stopped-containers: Mostrar contenedores parados
   about: Acerca de
-  search: >-
-    Activar la búsqueda con Dozzle mediante <code>comando+f</code> o
-    <code>ctrl+f</code>
+  search: Activar la búsqueda con Dozzle mediante
   using-version: Estás usando Dozzle {version}.
   update-available: >-
     ¡La nueva versión está disponible! Actualizar a la

locales/pr.yml

@@ -49,9 +49,7 @@ settings:
   options: Opções
   show-stopped-containers: Mostrar contentores parados
   about: Acerca de
-  search: >-
-    Habilitar a pesquisa com Dozzle usando <code>comando+f</code> ou
-    <code>ctrl+f</code>
+  search: Habilitar a pesquisa com Dozzle usando
   using-version: Está a usar o Dozzle {version}.
   update-available: >-
     Está disponível uma nova versão! Actualização para

locales/ru.yml

@@ -48,9 +48,7 @@ settings:
   options: Опции
   show-stopped-containers: Показывать остановленные контейнеры
   about: Информация
-  search: >-
-    Включить поиск с помощью Dozzle, используя <code>command+f</code> или
-    <code>ctrl+f</code>
+  search: Включить поиск с помощью Dozzle, используя
   using-version: Вы используете версию Dozzle {version}.
   update-available: >-
     Доступна новая версия! Обновить до <a :href="{href}" class="next-release"

locales/zh.yml

@@ -48,9 +48,7 @@ settings:
   options: 选项
   show-stopped-containers: 显示已停止的容器
   about: 关于
-  search: >-
-    使用Dozzle启用搜索 <code>command+f</code> 或
-    <code>ctrl+f</code>
+  search: 使用Dozzle启用搜索
   using-version: 您正在使用Dozzle {version}。
   update-available: >-
     新版本可用！更新到 <a :href="{href}" class="next-release"