feat: implement sticky collapsed and expanded groups on side menu (#2901

)
amir20 · Apr 16, 2024 · 81705c8 · 81705c8
1 parent 2882961
commit 81705c8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
@@ -21,7 +21,7 @@
       </ul>
       <ul class="containers menu p-0 [&_li.menu-title]:px-0" v-else>
         <li v-for="{ label, containers, icon } in menuItems" :key="label">
-          <details open>
+          <details :open="!collapsedGroups.has(label)" @toggle="updateCollapsedGroups($event, label)">
             <summary class="font-light text-base-content/80">
               <component :is="icon" />
               {{ label.startsWith("label.") ? $t(label) : label }}
@@ -81,9 +81,17 @@ const store = useContainerStore();
 const { activeContainers, visibleContainers, ready } = storeToRefs(store);
 const { hosts } = useHosts();
 
-function setHost(host: string | null) {
-  sessionHost.value = host;
-}
+const setHost = (host: string | null) => (sessionHost.value = host);
+
+const collapsedGroups = useProfileStorage("collapsedGroups", new Set<string>());
+const updateCollapsedGroups = (event: Event, label: string) => {
+  const details = event.target as HTMLDetailsElement;
+  if (details.open) {
+    collapsedGroups.value.delete(label);
+  } else {
+    collapsedGroups.value.add(label);
+  }
+};
 
 const debouncedPinnedContainers = debouncedRef(pinnedContainers, 200);
 const sortedContainers = computed(() =>

diff --git a/assets/stores/config.ts b/assets/stores/config.ts
@@ -23,6 +23,7 @@ export interface Profile {
   pinned?: Set<string>;
   visibleKeys?: { [key: string]: string[][] };
   releaseSeen?: string;
+  collapsedGroups?: Set<string>;
 }
 
 const pageConfig = JSON.parse(text);

diff --git a/internal/profile/disk.go b/internal/profile/disk.go
@@ -38,10 +38,11 @@ type Settings struct {
 }
 
 type Profile struct {
-	Settings    *Settings             `json:"settings,omitempty"`
-	Pinned      []string              `json:"pinned"`
-	VisibleKeys map[string][][]string `json:"visibleKeys,omitempty"`
-	ReleaseSeen string                `json:"releaseSeen,omitempty"`
+	Settings        *Settings             `json:"settings,omitempty"`
+	Pinned          []string              `json:"pinned"`
+	VisibleKeys     map[string][][]string `json:"visibleKeys,omitempty"`
+	ReleaseSeen     string                `json:"releaseSeen,omitempty"`
+	CollapsedGroups []string              `json:"collapsedGroups"`
 }
 
 var dataPath string