frontend: hide/show ServerCreate Form

frontend/app/pages/servers/index.vue

@@ -177,13 +177,13 @@ onMounted(() => {
                                 @click="saveEdit(server.id)"
                                 class="bg-green-600 text-white px-2 py-1 rounded mr-2"
                                 >
-                                Speichern
+                                <Icon name="heroicons:check" class="w-5 h-5" />
                                 </button>
                                 <button
                                 @click="cancelEdit"
                                 class="bg-gray-400 text-white px-2 py-1 rounded"
                                 >
-                                Abbrechen
+                                <Icon name="heroicons:x-mark" class="w-5 h-5" />
                                 </button>
                             </template>
 
@@ -192,7 +192,7 @@ onMounted(() => {
                                 @click="startEdit(server)"
                                 class="bg-blue-600 text-white px-2 py-1 rounded"
                                 >
-                                Bearbeiten
+                                <Icon name="heroicons:pencil-square" class="w-5 h-5" />
                                 </button>
                             </template>
                         </td>
@@ -202,11 +202,21 @@ onMounted(() => {
         </div>
         <button
             @click="showCreateForm = !showCreateForm"
-            class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+            class="flex items-center gap-2 text-blue-600 hover:text-blue-800"
             >
-            {{ showCreateForm ? "Formular ausblenden" : "Neuen Server anlegen" }}
+            <Icon
+                v-if="showCreateForm"
+                name="heroicons:eye-slash"
+                class="w-5 h-5"
+            />
+            <Icon
+                v-else
+                name="heroicons:document-plus"
+                class="w-5 h-5"
+            />
         </button>
 
+
         <!-- Neues Server-Formular -->
         <Transition name="fade">
         <div v-if="showCreateForm" class="p-4 bg-white shadow rounded space-y-4">

frontend/nuxt.config.ts

@@ -1,6 +1,9 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-    modules: [ "@nuxtjs/tailwindcss" ],
+    modules: [
+        "@nuxtjs/tailwindcss",
+        "@nuxt/icon"
+    ],
     srr: true,
     nitro: {
         preset: "static"

frontend/package-lock.json

@@ -7,6 +7,7 @@
       "name": "frontend",
       "hasInstallScript": true,
       "dependencies": {
+        "@nuxt/icon": "^2.2.1",
         "nuxt": "^4.3.0",
         "vue": "^3.5.27",
         "vue-router": "^4.6.4"
@@ -28,6 +29,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
@@ -992,6 +1006,47 @@
         "node": ">=18"
       }
     },
+    "node_modules/@iconify/collections": {
+      "version": "1.0.642",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.642.tgz",
+      "integrity": "sha512-SjQpWEQDG8votqjmF/G0CCmFFYaQfm+GECNjAEhzyIGB/RpzOUWcGCIBnFQA/YCg3I+wC5sZpWF/Mko6KWeMwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.0.tgz",
+      "integrity": "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "mlly": "^1.8.0"
+      }
+    },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.5.0.tgz",
@@ -1421,6 +1476,28 @@
         "devtools-wizard": "cli.mjs"
       }
     },
+    "node_modules/@nuxt/icon": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.2.1.tgz",
+      "integrity": "sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/collections": "^1.0.641",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^3.1.0",
+        "@iconify/vue": "^5.0.0",
+        "@nuxt/devtools-kit": "^3.1.1",
+        "@nuxt/kit": "^4.2.2",
+        "consola": "^3.4.2",
+        "local-pkg": "^1.1.2",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinyglobby": "^0.2.15"
+      }
+    },
     "node_modules/@nuxt/kit": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.3.0.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@nuxt/icon": "^2.2.1",
     "nuxt": "^4.3.0",
     "vue": "^3.5.27",
     "vue-router": "^4.6.4"