From 88b856ee770741f8949a7735dfc1beab5e957948 Mon Sep 17 00:00:00 2001
From: Andreas Dinauer <andreas.j.dinauer@gmail.com>
Date: Sat, 25 Apr 2026 22:20:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20UI=20Improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/VersionComponent.vue      | 52 +++++++++++++++---------
 app/components/artifact/ArtifactList.vue |  7 +++-
 app/components/events/EventComponent.vue |  1 +
 app/components/group/GroupList.vue       |  7 +++-
 app/components/ui/table/Table.vue        |  9 ++++
 app/pages/artifacts/[id]/index.vue       | 23 ++++++-----
 6 files changed, 66 insertions(+), 33 deletions(-)

diff --git a/app/components/VersionComponent.vue b/app/components/VersionComponent.vue
index 86757ba..d6f2fb3 100644
--- a/app/components/VersionComponent.vue
+++ b/app/components/VersionComponent.vue
@@ -1,19 +1,15 @@
 <template>
     <div class="content-l">
         <h2>Dependency</h2>
-        <div class="tile-m" v-for="dependency in [formatDependency(version)]">
+        <div class="tile-m" v-for="dependency in [formatDependency(artifact, version)]">
             <Codebox :content="dependency"></Codebox>
         </div>
-        <div class="col-2">
+        <div>
             <div class="content-m">
                 <h2>Files</h2>
-                <p class="tile-m pointer" v-if="version.jars" v-for="jar in version.jars" @click="Download.download(jar.url)">{{ jar.filename }}</p>
-                <a class="tile-m" v-if="version.pom" :href="'/api/maven2/' + version.pom.url" target="_blank">{{ version.pom.filename }}</a>
-            </div>
-            <div class="content-m danger-zone" style="align-self: start">
-                <h2>Danger Zone</h2>
-                <div>
-                    <UiButton class="delete">Delete Version</UiButton>
+                <div class="file-container">
+                    <p class="tile-m pointer file" v-if="version.jars" v-for="jar in version.jars" @click="Download.download(jar.url)">{{ jar.filename }} <span class="jar">JAR</span></p>
+                    <a class="tile-m file" v-if="version.pom" :href="'/api/maven2/' + version.pom.url" target="_blank">{{ version.pom.filename }} <span class="pom">POM</span></a>
                 </div>
             </div>
         </div>
@@ -23,17 +19,18 @@
 <script setup lang="ts">
 import {Download} from "~/utils/Download";
 import Codebox from "~/components/artifact/Codebox.vue";
-import type {Version} from "~/components/artifact/Artifact";
+import {Artifact, type Version} from "~/components/artifact/Artifact";
 
 defineProps<{
+    artifact: Artifact,
     version: Version
 }>();
 
-const formatDependency = (version: Version) => {
+const formatDependency = (artifact: Artifact, version: Version) => {
     const template = [
         "<dependency>",
-        "\t<groupId>" + version.groupId + "</groupId>",
-        "\t<artifactId>" + version.artifactId + "</artifactId>",
+        "\t<groupId>" + artifact.groupId + "</groupId>",
+        "\t<artifactId>" + artifact.artifactId + "</artifactId>",
         "\t<version>" + version.version + "</version>",
         "</dependency>"
     ]
@@ -42,13 +39,28 @@ const formatDependency = (version: Version) => {
 </script>
 
 <style scoped>
-.delete {
-    background-color: var(--danger-color);
+.file {
+    border-radius: 2rem;
+    padding: 0.5rem 0.75rem;
+    padding-right: 0.5rem;
+    width: auto;
 }
-.danger-zone {
-    background-color: #ffeae7;
-    padding: 1rem;
-    border-radius: 0.25rem;
-    border: 1px solid #ffb5b5;
+.file-container
+{
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+.jar {
+    background-color: #ac088a;
+    color: white;
+    padding: 0.125rem 0.45rem;
+    border-radius: 2rem;
+}
+.pom {
+    background-color: #049c00;
+    color: white;
+    padding: 0.125rem 0.45rem;
+    border-radius: 2rem;
 }
 </style>
\ No newline at end of file
diff --git a/app/components/artifact/ArtifactList.vue b/app/components/artifact/ArtifactList.vue
index 47a6386..08c569f 100644
--- a/app/components/artifact/ArtifactList.vue
+++ b/app/components/artifact/ArtifactList.vue
@@ -1,5 +1,5 @@
 <template>
-    <Table v-if="artifacts" columns="auto auto auto 1fr auto">
+    <Table v-if="artifacts" columns="auto auto auto 1fr auto" :show-footer="artifacts.length === 0">
         <HeaderRow>
             <HeaderCell>Group ID</HeaderCell>
             <HeaderCell>Artifact ID</HeaderCell>
@@ -8,6 +8,11 @@
             <HeaderCell>Updated At</HeaderCell>
         </HeaderRow>
         <ArtifactComponent :artifact="artifact"  v-for="artifact in artifacts"></ArtifactComponent>
+        <template #footer>
+            <div class="center">
+                <p>No Artifacts found.</p>
+            </div>
+        </template>
     </Table>
 </template>
 
diff --git a/app/components/events/EventComponent.vue b/app/components/events/EventComponent.vue
index 6c467f1..3d3627d 100644
--- a/app/components/events/EventComponent.vue
+++ b/app/components/events/EventComponent.vue
@@ -2,6 +2,7 @@
     <ContentRow>
         <ContentCell>
             <UiIcon v-if="event.type === EventType.UPLOAD">upload</UiIcon>
+            <UiIcon v-if="event.type === EventType.DELETE">delete</UiIcon>
         </ContentCell>
         <ContentCell> {{ event.resource.groupId }}</ContentCell>
         <ContentCell>{{ event.resource.artifactId }}</ContentCell>
diff --git a/app/components/group/GroupList.vue b/app/components/group/GroupList.vue
index 0991810..be04b29 100644
--- a/app/components/group/GroupList.vue
+++ b/app/components/group/GroupList.vue
@@ -1,11 +1,16 @@
 <template>
-    <Table columns="1fr">
+    <Table v-if="groups != null" columns="1fr" :show-footer="groups.length === 0">
         <HeaderRow>
             <HeaderCell>Group ID</HeaderCell>
         </HeaderRow>
         <ContentRow style="cursor: pointer" v-for="group in groups" @click="useRouter().push('/groups/' + group.id)">
             <ContentCell>{{group.groupId}}</ContentCell>
         </ContentRow>
+        <template #footer>
+            <div class="center">
+                <p>No Groups found.</p>
+            </div>
+        </template>
     </Table>
 </template>
 
diff --git a/app/components/ui/table/Table.vue b/app/components/ui/table/Table.vue
index 898d7bf..30422c3 100644
--- a/app/components/ui/table/Table.vue
+++ b/app/components/ui/table/Table.vue
@@ -1,12 +1,16 @@
 <template>
     <div class="table">
         <slot></slot>
+        <div class="footer center" v-if="showFooter">
+            <slot name="footer"></slot>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
 defineProps<{
     columns: string
+    showFooter?: boolean
 }>()
 </script>
 
@@ -27,4 +31,9 @@ defineProps<{
 .artifact-list .artifact:last-of-type * {
     border-bottom: 0;
 }
+.footer {
+    width: 100%;
+    grid-column: 1 / -1;
+    padding: 0.5rem;
+}
 </style>
\ No newline at end of file
diff --git a/app/pages/artifacts/[id]/index.vue b/app/pages/artifacts/[id]/index.vue
index 1c2ac7b..37ebc98 100644
--- a/app/pages/artifacts/[id]/index.vue
+++ b/app/pages/artifacts/[id]/index.vue
@@ -2,20 +2,27 @@
     <div v-if="artifact" class="content-xl">
         <h1>Artifact</h1>
         <div class="col-2">
-            <p class="tile-m">{{ artifact.groupId }}</p>
-            <p class="tile-m">{{ artifact.artifactId }}</p>
+            <div class="tile-m content-s">
+                <h3>Group</h3>
+                <p>{{ artifact.groupId }}</p>
+            </div>
+            <div class="tile-m content-s">
+                <h3>Artifact</h3>
+                <p>{{ artifact.artifactId }}</p>
+            </div>
         </div>
         <div class="artifact-page">
-            <VersionComponent :version="selectedVersion" v-if="selectedVersion"></VersionComponent>
+            <VersionComponent :artifact="artifact" :version="selectedVersion" v-if="selectedVersion"></VersionComponent>
             <div class="content-m">
                 <h2>Versions</h2>
                 <p class="tile-m pointer" v-for="version in artifact.versions" :class="{ active: (selectedVersion != null && version.id === selectedVersion.id) }" @click="() => { selectedVersion = version }">{{ version.version }}</p>
             </div>
         </div>
-        <div class="content-m danger-zone">
+        <div class="content-m">
             <h2>Danger Zone</h2>
-            <div>
+            <div class="left-center">
                 <UiButton @click="del" class="delete">Delete Artifact</UiButton>
+                <UiButton class="delete" v-if="selectedVersion">Delete Version ({{selectedVersion.version}})</UiButton>
             </div>
         </div>
     </div>
@@ -59,10 +66,4 @@ function del()
 .delete {
     background-color: var(--danger-color);
 }
-.danger-zone {
-    background-color: #ffeae7;
-    padding: 1rem;
-    border-radius: 0.25rem;
-    border: 1px solid #ffb5b5;
-}
 </style>
\ No newline at end of file