feat: add MutationCache base

Author: peterbud

client/app/components/MutationListItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Mutation } from '@tanstack/vue-query'
+
+defineProps<{
+  item: Mutation
+}>()
+
+defineEmits(['click'])
+</script>
+
+<template>
+  <div
+    class="flex flex-col p-2 overflow-hidden hover-bg-active cursor-pointer border-b border-gray-100 dark:border-gray-800"
+    @click="$emit('click')"
+  >
+    <div class="flex items-center gap-2">
+      <span
+        class="rounded whitespace-nowrap select-none mx-0.5 px-1.5 py-0.5"
+        :style="{
+          'background-color': `${getMutationBackgroundColor(item)}`,
+        }"
+      >
+        {{ getMutationStatusLabel(item) }}
+      </span>
+      <div class="truncate font-mono text-sm opacity-75">
+        {{ item.options.mutationKey || 'Anonymous' }}
+      </div>
+    </div>
+  </div>
+</template>

client/app/components/QueryListItem.vue

@@ -20,7 +20,7 @@ defineProps<{
         'height': '1em',
         'border-radius': '10%',
         'align-self': 'center',
-        'background-color': getBackgroundColor(item),
+        'background-color': getQueryBackgroundColor(item),
       }"
     />
     <div