From 2aaaf2ba1f4ba5f19e809ff6157a82cf84b6658f Mon Sep 17 00:00:00 2001
From: codeman1o1 <70335544+codeman1o1@users.noreply.github.com>
Date: Fri, 25 Aug 2023 18:58:02 +0200
Subject: [PATCH] Improve page title handling (#2365)

I tried my best with the translations.
Google Translate gives me the right English translation back for each language
---
 assets/composables/title.ts     |  2 +-
 assets/layouts/default.vue      |  6 +-----
 assets/pages/container/[id].vue |  9 +++------
 assets/pages/index.vue          | 10 +++++++++-
 locales/de.yml                  |  1 +
 locales/en.yml                  |  1 +
 locales/es.yml                  |  1 +
 locales/pr.yml                  |  1 +
 locales/ru.yml                  |  1 +
 locales/zh.yml                  |  1 +
 10 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/assets/composables/title.ts b/assets/composables/title.ts
index 7ca71728..acd4c903 100644
--- a/assets/composables/title.ts
+++ b/assets/composables/title.ts
@@ -1,6 +1,6 @@
 const { hostname } = config;
 let subtitle = $ref("");
-const title = $computed(() => `${subtitle} - Dozzle` + (hostname ? ` @ ${hostname}` : ""));
+const title = $computed(() => (subtitle ? `${subtitle} - ` : "") + "Dozzle" + (hostname ? ` @ ${hostname}` : ""));
 
 useTitle($$(title));
 
diff --git a/assets/layouts/default.vue b/assets/layouts/default.vue
index d5d384a3..aa37aa34 100644
--- a/assets/layouts/default.vue
+++ b/assets/layouts/default.vue
@@ -51,11 +51,7 @@ const { oruga } = useProgrammatic();
 const { authorizationNeeded } = config;
 
 const containerStore = useContainerStore();
-const { activeContainers, visibleContainers } = storeToRefs(containerStore);
-
-watchEffect(() => {
-  setTitle(`${visibleContainers.value.length} containers`);
-});
+const { activeContainers } = storeToRefs(containerStore);
 
 onKeyStroke("k", (e) => {
   if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
diff --git a/assets/pages/container/[id].vue b/assets/pages/container/[id].vue
index b8127274..53cff48f 100644
--- a/assets/pages/container/[id].vue
+++ b/assets/pages/container/[id].vue
@@ -16,11 +16,8 @@ const { id } = defineProps<{ id: string }>();
 const currentContainer = store.currentContainer($$(id));
 const { activeContainers, ready } = storeToRefs(store);
 
-setTitle("loading");
-
-onMounted(() => {
-  setTitle(currentContainer.value?.name);
+watchEffect(() => {
+  if (ready.value === true)
+    currentContainer.value !== undefined ? setTitle(currentContainer.value.name) : setTitle("Not Found");
 });
-
-watchEffect(() => setTitle(currentContainer.value?.name));
 </script>
diff --git a/assets/pages/index.vue b/assets/pages/index.vue
index 3416707f..070a0562 100644
--- a/assets/pages/index.vue
+++ b/assets/pages/index.vue
@@ -52,9 +52,13 @@
 <script lang="ts" setup>
 import { Container } from "@/models/Container";
 
+const { t } = useI18n();
 const { version } = config;
 const containerStore = useContainerStore();
-const { containers } = storeToRefs(containerStore) as { containers: unknown } as { containers: Ref<Container[]> };
+const { containers, ready } = storeToRefs(containerStore) as unknown as {
+  containers: Ref<Container[]>;
+  ready: Ref<boolean>;
+};
 
 const mostRecentContainers = $computed(() => [...containers.value].sort((a, b) => +b.created - +a.created));
 const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
@@ -76,6 +80,10 @@ useIntervalFn(
   1000,
   { immediate: true },
 );
+
+watchEffect(() => {
+  if (ready.value === true) setTitle(t("title.dashboard", { count: runningContainers.length }));
+});
 </script>
 <style lang="scss" scoped>
 .panel {
diff --git a/locales/de.yml b/locales/de.yml
index d23aac7b..c2014ea4 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -30,6 +30,7 @@ error:
 title:
   page-not-found: Seite nicht gefunden
   login: Authentifizierung erforderlich
+  dashboard: 1 Container | {count} Container
   settings: Einstellungen
 button:
   logout: Ausloggen
diff --git a/locales/en.yml b/locales/en.yml
index 326af7de..383cfac3 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -31,6 +31,7 @@ error:
 title:
   page-not-found: Page not found
   login: Authentication Required
+  dashboard: 1 container | {count} containers
   settings: Settings
 button:
   logout: Logout
diff --git a/locales/es.yml b/locales/es.yml
index bf7c7d75..0ce7c4fc 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -30,6 +30,7 @@ error:
 title:
   page-not-found: Página no encontrada
   login: Autenticación requerida
+  dashboard: 1 contenedor | {count} contenedores
   settings: Configuración
 button:
   logout: Cerrar la sesión
diff --git a/locales/pr.yml b/locales/pr.yml
index cf8c4122..fa4c66ef 100644
--- a/locales/pr.yml
+++ b/locales/pr.yml
@@ -30,6 +30,7 @@ error:
 title:
   page-not-found: Página não encontrada
   login: Autenticação Requerida
+  dashboard: 1 contentor | {count} contentores
   settings: Configurações
 button:
   logout: Terminar sessão
diff --git a/locales/ru.yml b/locales/ru.yml
index 17510c3e..38168b60 100644
--- a/locales/ru.yml
+++ b/locales/ru.yml
@@ -30,6 +30,7 @@ error:
 title:
   page-not-found: Страница не найдена
   login: Требуется авторизация
+  dashboard: 1 контейнер | {count} контейнеров
   settings: Настройки
 button:
   logout: Выйти
diff --git a/locales/zh.yml b/locales/zh.yml
index c07f7fe5..18202be2 100644
--- a/locales/zh.yml
+++ b/locales/zh.yml
@@ -30,6 +30,7 @@ error:
 title:
   page-not-found: 页面未找到
   login: 需要身份验证
+  dashboard: 1 容器 | {count} 容器
   settings: 设置
 button:
   logout: 退出