Added the image UI

src/frontend/src/components/ImageCard.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {Image} from "@/store/images";
+
+defineProps<{
+    image: Image
+}>()
+
+let expand = ref()
+</script>
+
+<template>
+  <v-card class="pa-2 ma-2">
+    <template v-slot:title>{{ image.name }}</template>
+    <template v-slot:subtitle>{{ image.image_id }}</template>
+    <v-expand-transition>
+      <div v-if="expand">
+        <v-list class="bg-transparent" density="compact">
+          <v-list-item title="MAC"><template v-slot:append>{{ instance.mac }}</template></v-list-item>
+        </v-list>
+      </div>
+    </v-expand-transition>
+    <v-divider/>
+    <v-card-actions>
+      <v-btn @click="expand = !expand">
+        {{ !expand ? 'Details' : 'Close' }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>

src/frontend/src/layouts/default/AppNav.vue

@@ -9,6 +9,7 @@
       <v-list-item :to="{ name: 'Identities' }">Identities</v-list-item>
       <v-list-item :to="{ name: 'Networks' }">Networks</v-list-item>
       <v-list-item :to="{ name: 'Images' }">Images</v-list-item>
+      <v-list-item :to="{ name: 'Images-Grid'}">Images (Grid)</v-list-item>
     </v-list>
   </v-navigation-drawer>
 </template>

src/frontend/src/router/index.ts

@@ -33,6 +33,11 @@ const routes = [
         path: '/images',
         name: 'Images',
         component: () => import('@/views/Images.vue')
+      },
+      {
+        path: '/images-grid',
+        name: 'Images-Grid',
+        component: () => import('@/views/Images-Grid.vue')
       }
     ],
   },

src/frontend/src/views/Images-Grid.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+import {useImagesStore} from "@/store/images";
+
+const imagesStore = useImagesStore()
+</script>
+
+<template>
+  <v-container class="fill-height">
+    <v-responsive class="fill-height">
+      <v-row>
+        <v-col v-for="instance in instanceStore.instances">
+          <InstanceCard :instance="instance"/>
+        </v-col>
+      </v-row>
+    </v-responsive>
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>