From a9cfa977048b0f2b30fbc95086271007ffc10134 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 2 Dec 2025 09:50:50 -0800
Subject: [PATCH] feat: supports grouping containers always (#4272)

---
 assets/auto-imports.d.ts       |  2 ++
 assets/components/HostMenu.vue | 11 ++++++++---
 assets/pages/settings.vue      | 16 ++++++++++++++++
 assets/stores/settings.ts      |  3 +++
 internal/profile/disk.go       |  1 +
 locales/da.yml                 |  1 +
 locales/de.yml                 |  1 +
 locales/en.yml                 |  1 +
 locales/es.yml                 |  1 +
 locales/fr.yml                 |  1 +
 locales/id.yml                 |  1 +
 locales/it.yml                 |  1 +
 locales/ko.yml                 |  1 +
 locales/nl.yml                 |  1 +
 locales/pl.yml                 |  1 +
 locales/pr.yml                 |  1 +
 locales/pt.yml                 |  1 +
 locales/ru.yml                 |  1 +
 locales/sl.yml                 |  1 +
 locales/tr.yml                 |  1 +
 locales/zh-tw.yml              |  1 +
 locales/zh.yml                 |  1 +
 22 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts
index 085a49ea..a3409ddf 100644
--- a/assets/auto-imports.d.ts
+++ b/assets/auto-imports.d.ts
@@ -56,6 +56,7 @@ declare global {
   const getCurrentWatcher: typeof import('vue').getCurrentWatcher
   const getDeep: typeof import('./utils/index').getDeep
   const globalShowPopup: typeof import('./composable/popup').globalShowPopup
+  const groupContainers: typeof import('./stores/settings').groupContainers
   const h: typeof import('vue').h
   const hashCode: typeof import('./utils/index').hashCode
   const hourStyle: typeof import('./stores/settings').hourStyle
@@ -456,6 +457,7 @@ declare module 'vue' {
     readonly getCurrentWatcher: UnwrapRef<typeof import('vue')['getCurrentWatcher']>
     readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
     readonly globalShowPopup: UnwrapRef<typeof import('./composable/popup')['globalShowPopup']>
+    readonly groupContainers: UnwrapRef<typeof import('./stores/settings')['groupContainers']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly hashCode: UnwrapRef<typeof import('./utils/index')['hashCode']>
     readonly hourStyle: UnwrapRef<typeof import('./stores/settings')['hourStyle']>
diff --git a/assets/components/HostMenu.vue b/assets/components/HostMenu.vue
index 46ff5819..7321a04b 100644
--- a/assets/components/HostMenu.vue
+++ b/assets/components/HostMenu.vue
@@ -121,7 +121,7 @@
 <script lang="ts" setup>
 import { Container } from "@/models/Container";
 import { sessionHost } from "@/composable/storage";
-import { showAllContainers } from "@/stores/settings";
+import { showAllContainers, groupContainers } from "@/stores/settings";
 
 // @ts-ignore
 import Pin from "~icons/ph/map-pin-simple";
@@ -198,10 +198,15 @@ const menuItems = computed(() => {
     items.push({ label: "label.pinned", containers: pinned, icon: Pin });
   }
   for (const [label, containers] of Object.entries(namespaced).sort(([a], [b]) => a.localeCompare(b))) {
-    if (containers.length > 1) {
+    const shouldGroup =
+      groupContainers.value === "always" || (groupContainers.value === "at-least-2" && containers.length > 1);
+
+    if (shouldGroup) {
       items.push({ label, containers, icon: Stack });
     } else {
-      singular.push(containers[0]);
+      for (const container of containers) {
+        singular.push(container);
+      }
     }
   }
 
diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue
index 366733c9..4f23e4c0 100644
--- a/assets/pages/settings.vue
+++ b/assets/pages/settings.vue
@@ -158,6 +158,21 @@
           />
         </template>
       </LabeledInput>
+      <LabeledInput>
+        <template #label>
+          {{ $t("settings.group-containers") }}
+        </template>
+        <template #input>
+          <DropdownMenu
+            v-model="groupContainers"
+            :options="[
+              { label: 'Always', value: 'always' },
+              { label: 'At least 2', value: 'at-least-2' },
+              { label: 'Never', value: 'never' },
+            ]"
+          />
+        </template>
+      </LabeledInput>
 
       <Toggle v-model="search">
         {{ $t("settings.search") }} <key-shortcut char="f" class="align-top"></key-shortcut>
@@ -185,6 +200,7 @@ import {
   smallerScrollbars,
   softWrap,
   locale,
+  groupContainers,
 } from "@/stores/settings";
 
 import { availableLocales, i18n } from "@/modules/i18n";
diff --git a/assets/stores/settings.ts b/assets/stores/settings.ts
index 6f150208..4a3acec1 100644
--- a/assets/stores/settings.ts
+++ b/assets/stores/settings.ts
@@ -16,6 +16,7 @@ export type Settings = {
   collapseNav: boolean;
   automaticRedirect: "instant" | "delayed" | "none";
   locale: string;
+  groupContainers: "always" | "at-least-2" | "never";
 };
 export const DEFAULT_SETTINGS: Settings = {
   search: true,
@@ -33,6 +34,7 @@ export const DEFAULT_SETTINGS: Settings = {
   collapseNav: false,
   automaticRedirect: "delayed",
   locale: "",
+  groupContainers: "at-least-2",
 };
 
 export const settings = useProfileStorage("settings", DEFAULT_SETTINGS);
@@ -61,4 +63,5 @@ export const {
   search,
   locale,
   automaticRedirect,
+  groupContainers,
 } = toRefs(settings.value);
diff --git a/internal/profile/disk.go b/internal/profile/disk.go
index 6d1853a0..64b55331 100644
--- a/internal/profile/disk.go
+++ b/internal/profile/disk.go
@@ -35,6 +35,7 @@ type Settings struct {
 	HourStyle         string  `json:"hourStyle,omitempty"`
 	DateLocale        string  `json:"dateLocale,omitempty"`
 	Locale            string  `json:"locale"`
+	GroupContainers   string  `json:"groupContainers,omitempty"`
 }
 
 type Profile struct {
diff --git a/locales/da.yml b/locales/da.yml
index 2aa368eb..335580dc 100644
--- a/locales/da.yml
+++ b/locales/da.yml
@@ -95,6 +95,7 @@ settings:
   color-scheme: Farve skema
   options: Muligheder
   show-stopped-containers: Vis stoppet containere
+  group-containers: Gruppér containere efter namespace
   about: Omkring
   search: Aktiver søgning med Dozzle ved brug af
   using-version: Du bruger <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/de.yml b/locales/de.yml
index 0830c938..90625067 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -95,6 +95,7 @@ settings:
   color-scheme: Farbschema
   options: Optionen
   show-stopped-containers: Zeige gestoppte Container
+  group-containers: Container nach Namespace gruppieren
   about: Über
   search: Aktiviere die Suche mit Dozzle mit
   using-version: Du verwendest <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/en.yml b/locales/en.yml
index 67a9ef80..1dceafbe 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -100,6 +100,7 @@ settings:
   color-scheme: Color scheme
   options: Options
   show-stopped-containers: Show stopped containers
+  group-containers: Group containers by namespace
   about: About
   search: Enable searching with Dozzle using
   using-version: You are using <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/es.yml b/locales/es.yml
index aa4ab32b..d5382792 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -95,6 +95,7 @@ settings:
   color-scheme: Esquema de colores
   options: Opciones
   show-stopped-containers: Mostrar contenedores parados
+  group-containers: Agrupar contenedores por namespace
   about: Acerca de
   search: Activar la búsqueda con Dozzle mediante
   using-version: Estás usando <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/fr.yml b/locales/fr.yml
index bbe037f3..9d22f3f4 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -95,6 +95,7 @@ settings:
   color-scheme: Schéma de couleurs
   options: Options
   show-stopped-containers: Afficher les conteneurs arrêtés
+  group-containers: Regrouper les conteneurs par namespace
   about: A propos de
   search: Activer la recherche avec Dozzle en utilisant
   using-version: Vous utilisez <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/id.yml b/locales/id.yml
index 3554b79d..039487e8 100644
--- a/locales/id.yml
+++ b/locales/id.yml
@@ -103,6 +103,7 @@ settings:
   color-scheme: Skema warna
   options: Opsi
   show-stopped-containers: Tampilkan kontainer yang dihentikan
+  group-containers: Kelompokkan kontainer berdasarkan namespace
   about: Tentang
   search: Aktifkan pencarian dengan Dozzle menggunakan
   using-version: Anda menggunakan <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/it.yml b/locales/it.yml
index a296c5b2..bc23a626 100644
--- a/locales/it.yml
+++ b/locales/it.yml
@@ -95,6 +95,7 @@ settings:
   color-scheme: Tema colori
   options: Opzioni
   show-stopped-containers: Visualizza i container arrestati
+  group-containers: Raggruppa i container per namespace
   about: Circa
   search: Abilita la ricerca attraverso Dozzle
   using-version: Stai utilizzando <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/ko.yml b/locales/ko.yml
index 36e8b637..72eb7615 100644
--- a/locales/ko.yml
+++ b/locales/ko.yml
@@ -98,6 +98,7 @@ settings:
   color-scheme: 색상 테마
   options: 옵션
   show-stopped-containers: 중지된 컨테이너 보기
+  group-containers: 네임스페이스별로 컨테이너 그룹화
   about: 정보
   search: Dozzle 검색 기능 사용
   using-version: <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}을 사용하고 있습니다.
diff --git a/locales/nl.yml b/locales/nl.yml
index 01cdd425..ed75d5f8 100644
--- a/locales/nl.yml
+++ b/locales/nl.yml
@@ -96,6 +96,7 @@ settings:
   color-scheme: Kleurmodus
   options: Opties
   show-stopped-containers: Gestopte containers tonen
+  group-containers: Groepeer containers op namespace
   about: Over
   search: Doorzoeken inschakelen via Dozzle
   using-version: Je gebruikt <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/pl.yml b/locales/pl.yml
index 11afa532..fb77d619 100644
--- a/locales/pl.yml
+++ b/locales/pl.yml
@@ -101,6 +101,7 @@ settings:
   color-scheme: Motyw
   options: Opcje
   show-stopped-containers: Pokaż zatrzymane kontenery
+  group-containers: Grupuj kontenery według przestrzeni nazw
   about: Informacje
   search: Włącz szukanie z dozzle
   using-version: Używasz <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> w wersji {version}.
diff --git a/locales/pr.yml b/locales/pr.yml
index a1c31ec4..1ad0dda7 100644
--- a/locales/pr.yml
+++ b/locales/pr.yml
@@ -103,6 +103,7 @@ settings:
   options: Opções
   datetime-format: Formato de data e hora
   show-stopped-containers: Mostrar contentores parados
+  group-containers: Agrupar contentores por namespace
   about: Acerca de
   search: Habilitar a pesquisa com Dozzle usando
   using-version: Está a usar <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/pt.yml b/locales/pt.yml
index c37e9516..09dcae05 100644
--- a/locales/pt.yml
+++ b/locales/pt.yml
@@ -95,6 +95,7 @@ settings:
   color-scheme: Esquema de cores
   options: Opções
   show-stopped-containers: Mostrar containers parados
+  group-containers: Agrupar containers por namespace
   about: Sobre
   search: Habilitar pesquisa com Dozzle usando
   using-version: Você está usando <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/ru.yml b/locales/ru.yml
index 36f92d7e..775fc9e4 100644
--- a/locales/ru.yml
+++ b/locales/ru.yml
@@ -95,6 +95,7 @@ settings:
   color-scheme: Цветовая схема
   options: Опции
   show-stopped-containers: Показывать остановленные контейнеры
+  group-containers: Группировать контейнеры по пространству имён
   about: Информация
   search: Включить поиск с помощью Dozzle, используя
   using-version: Вы используете <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.
diff --git a/locales/sl.yml b/locales/sl.yml
index 185fb094..2bf08cb5 100644
--- a/locales/sl.yml
+++ b/locales/sl.yml
@@ -95,6 +95,7 @@ settings:
   color-scheme: Barvna shema
   options: Možnosti
   show-stopped-containers: Prikaži ustavljene zabojnike
+  group-containers: Združi zabojnike po imenskem prostoru
   about: O programu
   search: Omogočite iskanje z Dozzle z uporabo
   update-available: Nova različica je na voljo! Posodobi na <a href="{href}"
diff --git a/locales/tr.yml b/locales/tr.yml
index 3d03f839..b758937e 100644
--- a/locales/tr.yml
+++ b/locales/tr.yml
@@ -104,6 +104,7 @@ settings:
   color-scheme: Renk düzeni
   options: Seçenekler
   show-stopped-containers: Durdurulan konteynerleri göster
+  group-containers: Konteynerleri ad alanına göre grupla
   about: Hakkında
   search: Dozzle kullanarak aramayı etkinleştir
   using-version: <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version} kullanıyorsunuz.
diff --git a/locales/zh-tw.yml b/locales/zh-tw.yml
index e378a699..f99b847e 100644
--- a/locales/zh-tw.yml
+++ b/locales/zh-tw.yml
@@ -97,6 +97,7 @@ settings:
   color-scheme: 顏色設定
   options: 選項
   show-stopped-containers: 顯示已停止的容器
+  group-containers: 依命名空間分組容器
   about: 關於
   search: 啟用 Dozzle 搜尋功能
   using-version: 您目前使用的是 <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}。
diff --git a/locales/zh.yml b/locales/zh.yml
index 69546ced..134a7ea1 100644
--- a/locales/zh.yml
+++ b/locales/zh.yml
@@ -95,6 +95,7 @@ settings:
   color-scheme: 颜色方案
   options: 选项
   show-stopped-containers: 显示已停止的容器
+  group-containers: 按命名空间分组容器
   about: 关于
   search: 使用Dozzle启用搜索
   using-version: 您正在使用<a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}。