From 3c8f8546cc407988c7cc7a9234c57d5911202f11 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Mon, 7 Apr 2025 18:53:42 +0200
Subject: [PATCH] Refactor "Currently Building" component for improved clarity

Simplified template structure and improved readability by consolidating conditional rendering logic. Added an expandable queue view and a message for empty queues, enhancing the UI/UX. Introduced reusable styles for circular indicators.
---
 frontend/src/components/CurrentlyBuilding.vue | 114 +++++++++++++-----
 1 file changed, 82 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/CurrentlyBuilding.vue b/frontend/src/components/CurrentlyBuilding.vue
index f02cb4a..c5993c3 100644
--- a/frontend/src/components/CurrentlyBuilding.vue
+++ b/frontend/src/components/CurrentlyBuilding.vue
@@ -7,21 +7,20 @@
     variant="elevated">
     <v-card-title>
       <v-row align="center" class="w-100" style="margin-top: 1px">
-        <v-col class="v-col-12 v-col-md-1">
-          <v-row
-            v-if="packageCount.building > 0"
-            :class="mobile ? 'mt-1' : ''"
-            class="flex-nowrap ms-1">
-            <div class="pulsating-circle-amber me-2" style="transform: translateY(10px)" />
-            <span>Building</span>
-          </v-row>
-          <v-row v-else class="flex-nowrap" no-gutters>
-            <div class="pulsating-circle-green me-3" style="transform: translateY(10px)" />
-            <span>Idle</span>
+        <v-col class="v-col-12 v-col-lg-1">
+          <v-row :class="mobile ? 'mt-1' : ''" class="flex-nowrap ms-1 d-flex align-items-center">
+            <div
+              :class="
+                packageCount.building > 0 ? 'pulsating-circle-amber' : 'pulsating-circle-green'
+              "
+              class="circle-offset flex-circle" />
+            <span class="ms-2">
+              {{ packageCount.building > 0 ? 'Building' : 'Idle' }}
+            </span>
           </v-row>
         </v-col>
 
-        <v-col v-if="packageCount.building > 0" class="v-col-12 v-col-md-8">
+        <v-col v-if="packageCount.building > 0" class="v-col-12 v-col-lg-8">
           <v-progress-linear
             :max="packageCount.built + packageCount.building + packageCount.queued"
             :model-value="packageCount.built"
@@ -33,7 +32,7 @@
 
         <v-col
           :class="mobile ? 'mt-n3' : 'text-end ms-auto'"
-          class="text-grey v-col-12 v-col-md-2"
+          class="text-grey v-col-12 v-col-lg-2"
           cols="auto"
           style="font-size: 13px">
           Last updated
@@ -48,7 +47,7 @@
 
     <v-card-text
       v-if="packageCount.building > 0 || packageCount.queued > 0"
-      class="d-flex flex-column flex-sm-row">
+      class="d-flex flex-column">
       <v-list width="100%">
         <v-list-subheader>Building</v-list-subheader>
         <v-list-item v-for="(pkg, index) in packages.building" :key="index">
@@ -64,24 +63,63 @@
 
       <v-list width="100%">
         <v-list-subheader>Queued</v-list-subheader>
-        <v-list-item
-          v-for="(pkg, index) in packages.queued.slice(0, packageCount.building)"
-          :key="index"
-          prepend-icon="mdi-chevron-right">
-          <v-list-item-title>
-            {{ pkg.pkgbase }} <span class="text-grey">({{ pkg.repo }})</span>
-          </v-list-item-title>
-          <v-list-item-subtitle>{{ pkg.arch_version }}</v-list-item-subtitle>
-        </v-list-item>
-        <v-list-item
-          v-if="packageCount.queued > packageCount.building"
-          prepend-icon="mdi-dots-horizontal">
-          <v-list-item-title>
-            <span v-if="packageCount.building > 0">+</span>
-            {{ packageCount.queued - packageCount.building }}
-            <span v-if="packageCount.building > 0">more</span><span v-else>in queue</span>
-          </v-list-item-title>
-        </v-list-item>
+
+        <!-- SHOW MESSAGE IF NO QUEUED PACKAGES -->
+        <template v-if="packages.queued.length === 0">
+          <v-list-item>
+            <v-list-item-title class="text-grey"> No packages queued.</v-list-item-title>
+          </v-list-item>
+        </template>
+
+        <!-- ELSE SHOW SUMMARY VIEW AND EXPANSION PANEL -->
+        <template v-else>
+          <!-- SUMMARY VIEW: First few queued items -->
+          <v-list-item
+            v-for="(pkg, index) in packages.queued.slice(0, packageCount.building)"
+            :key="index"
+            prepend-icon="mdi-chevron-right">
+            <v-list-item-title>
+              {{ pkg.pkgbase }} <span class="text-grey">({{ pkg.repo }})</span>
+            </v-list-item-title>
+            <v-list-item-subtitle>{{ pkg.arch_version }}</v-list-item-subtitle>
+          </v-list-item>
+
+          <!-- SUMMARY VIEW: Remaining count -->
+          <v-list-item
+            v-if="packageCount.queued > packageCount.building"
+            prepend-icon="mdi-dots-horizontal">
+            <v-list-item-title>
+              <span v-if="packageCount.building > 0">+</span>
+              {{ packageCount.queued - packageCount.building }}
+              <span v-if="packageCount.building > 0">more</span><span v-else>in queue</span>
+            </v-list-item-title>
+          </v-list-item>
+
+          <!-- FULL LIST EXPANSION PANEL -->
+          <v-expansion-panels>
+            <v-expansion-panel>
+              <v-expansion-panel-title>
+                Show all queued packages
+                <span class="text-grey">({{ packages.queued.length }})</span>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
+                <v-list outlined rounded>
+                  <v-list-item
+                    v-for="(pkg, index) in packages.queued"
+                    :key="index"
+                    class="d-flex justify-space-between">
+                    <v-list-item-title>
+                      {{ pkg.pkgbase }} <span class="text-grey">({{ pkg.repo }})</span>
+                    </v-list-item-title>
+                    <v-list-item-subtitle>
+                      {{ pkg.arch_version }}
+                    </v-list-item-subtitle>
+                  </v-list-item>
+                </v-list>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+        </template>
       </v-list>
     </v-card-text>
   </v-card>
@@ -259,6 +297,18 @@ onMounted(() => {
   animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
 }
 
+.circle-offset {
+  transform: translateY(10px); /* Preserves vertical shift as needed */
+}
+
+.flex-circle {
+  flex-shrink: 0; /* Prevents shrinking */
+  flex-grow: 0; /* Prevents growing */
+  width: 12px; /* Ensures consistent dimensions */
+  height: 12px;
+  border-radius: 50%; /* Maintains circular appearance */
+}
+
 @-webkit-keyframes pulse-ring {
   0% {
     transform: scale(0.33);