feat: enhance query status display with color coding

Author: peterbud

client/app/components/QueryListItem.vue

@@ -8,7 +8,21 @@ defineProps<{
 </script>
 
 <template>
-  <div class="grid grid-cols-[1fr_auto_auto_auto] gap-2 px-2 text-secondary hover:n-bg-hover truncate">
+  <div
+    class="grid gap-2 px-2 text-secondary hover:n-bg-hover truncate"
+    :style="{
+      'grid-template-columns': '1em 1fr auto auto auto',
+    }"
+  >
+    <div
+      :style="{
+        'width': '1em',
+        'height': '1em',
+        'border-radius': '10%',
+        'align-self': 'center',
+        'background-color': getBackgroundColor(item),
+      }"
+    />
     <div>
       {{ item.queryKey }}
     </div>

client/app/pages/vue-query.vue

@@ -119,6 +119,19 @@ function selectQuery(query: Query) {
               <div>
                 {{ selectedQuery?.queryHash }}
               </div>
+              <div>
+                <strong>Overall status:</strong>
+              </div>
+              <div>
+                <span
+                  class="rounded whitespace-nowrap select-none mx-0.5 px-1.5 py-0.5"
+                  :style="{
+                    'background-color': `${getBackgroundColor(selectedQuery as Query)}`,
+                  }"
+                >
+                  {{ getQueryStatusLabel(selectedQuery as Query) }}
+                </span>
+              </div>
               <div>
                 <strong>Last Updated:</strong>
               </div>

client/app/utils/utils.ts

@@ -0,0 +1,25 @@
+import type { Query } from '@tanstack/query-core'
+
+export function getQueryStatusLabel(query: Query) {
+  return query.state.fetchStatus === 'fetching'
+    ? 'fetching'
+    : query.observers.length < 1
+      ? 'inactive'
+      : query.state.fetchStatus === 'paused'
+        ? 'paused'
+        : toRaw(query)?.isStale()
+          ? 'stale'
+          : 'fresh'
+}
+
+export function getBackgroundColor(query: Query) {
+  return query.state.fetchStatus === 'fetching'
+    ? 'blue'
+    : query.observers.length < 1
+      ? 'gray'
+      : query.state.fetchStatus === 'paused'
+        ? 'purple'
+        : toRaw(query)?.isStale()
+          ? 'orange'
+          : 'green'
+}

playground/app/app.vue

@@ -55,7 +55,7 @@ function addNewPost() {
   <div
     :style="{
       display: 'grid',
-      gridTemplateColumns: 'auto auto',
+      gridTemplateColumns: '1fr 1fr',
       gap: '2rem',
     }"
   >
@@ -80,6 +80,7 @@ function addNewPost() {
             backgroundColor: selectedUserId === user.id ? 'blue' : 'white',
             color: selectedUserId === user.id ? 'white' : 'black',
             paddingTop: '0.25rem',
+            borderRadius: '0.125rem',
           }"
           @click="selectUser(user)"
         >