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

@@ -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));
 

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) {

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>

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 {

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

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

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

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

locales/ru.yml

@@ -30,6 +30,7 @@ error:
 title:
   page-not-found: Страница не найдена
   login: Требуется авторизация
+  dashboard: 1 контейнер | {count} контейнеров
   settings: Настройки
 button:
   logout: Выйти

locales/zh.yml

@@ -30,6 +30,7 @@ error:
 title:
   page-not-found: 页面未找到
   login: 需要身份验证
+  dashboard: 1 容器 | {count} 容器
   settings: 设置
 button:
   logout: 退出