From 974a2bd761cbf83679ba2748b646c8cb8ccbc086 Mon Sep 17 00:00:00 2001
From: zaelgohary <zainabelgohary19@gmail.com>
Date: Sun, 12 Oct 2025 10:52:52 +0300
Subject: [PATCH] Add version to footer, replace css w vuetify style

---
 frontend/kubecloud/package.json               |   2 +-
 .../kubecloud/src/components/AppFooter.vue    | 201 ++++--------------
 frontend/kubecloud/src/env.d.ts               |   3 +
 frontend/kubecloud/vite.config.ts             |   4 +
 4 files changed, 49 insertions(+), 161 deletions(-)

diff --git a/frontend/kubecloud/package.json b/frontend/kubecloud/package.json
index afe71a55..0e068de8 100644
--- a/frontend/kubecloud/package.json
+++ b/frontend/kubecloud/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mycelium-cloud",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/frontend/kubecloud/src/components/AppFooter.vue b/frontend/kubecloud/src/components/AppFooter.vue
index 81ae7f31..5d307430 100644
--- a/frontend/kubecloud/src/components/AppFooter.vue
+++ b/frontend/kubecloud/src/components/AppFooter.vue
@@ -1,171 +1,52 @@
 <template>
-  <footer class="app-footer">
-    <div class="footer-content">
-      <div class="footer-brand">
-        <router-link to="/" class="footer-logo" aria-label="Mycelium Cloud logo">
-          <img :src="logo" alt="Mycelium Cloud Logo" class="logo" width="110">
-        </router-link>
-      </div>
-      <nav class="footer-links">
-        <router-link to="/docs" class="footer-link">Docs</router-link>
-        <a href="https://github.com/codescalers/kubecloud" target="_blank" rel="noopener" class="footer-link">GitHub</a>
-      </nav>
-    </div>
-    <div class="footer-bottom">
-      <span class="footer-copyright">© {{ new Date().getFullYear() }} Mycelium Cloud. All rights reserved.</span>
-    </div>
-  </footer>
+  <v-footer class="app-footer mt-auto">
+    <v-container>
+      <v-row class="py-3">
+        <v-col cols="12" md="6" class="d-flex align-center">
+          <router-link to="/" class="text-decoration-none">
+            <img :src="logo" alt="Mycelium Cloud Logo" width="110">
+          </router-link>
+        </v-col>
+        <v-col cols="12" md="6" class="d-flex align-center justify-md-end">
+          <v-btn
+            to="/docs"
+            variant="text"
+            class="text-blue-lighten-3 mx-1"
+          >
+            Docs
+          </v-btn>
+          <v-btn
+            href="https://github.com/codescalers/kubecloud"
+            target="_blank"
+            variant="text"
+            class="text-blue-lighten-3 mx-1"
+          >
+            GitHub
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row class="pb-2">
+        <v-col cols="12" class="text-center">
+          <span class="text-blue-lighten-3 text-body-2 opacity-80">
+            © {{ new Date().getFullYear() }} Mycelium Cloud. All rights reserved.
+          </span>
+          <span class="text-blue-lighten-3 text-caption opacity-60 ml-4">
+            v{{ version }}
+          </span>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-footer>
 </template>
 
 <script setup lang="ts">
   import logo from '@/assets/logo.png'
+  const version = __APP_VERSION__
 </script>
 
 <style scoped>
 .app-footer {
-  width: 100%;
-  background: rgba(10, 25, 47, 0.65); /* semi-transparent, matches nav */
-  color: #e0e7ef;
-  border: none;
-  box-shadow: 0 2px 16px 0 rgba(33, 150, 243, 0.10); /* soft shadow for readability */
-  padding: 2.5rem 0 1.2rem 0;
-  margin-top: auto;
-  backdrop-filter: blur(8px);
-  transition: background 0.3s;
-}
-
-.footer-content {
-  max-width: 1300px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 2rem;
-  padding: 0 2.5rem;
-}
-
-.footer-brand {
-  display: flex;
-  align-items: center;
-}
-
-.footer-logo {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: #60a5fa;
-  font-size: 1.2rem;
-  font-weight: 500;
-  letter-spacing: 0.01em;
-  transition: color 0.2s;
-}
-
-.footer-logo:hover {
-  color: #38bdf8;
-}
-
-.footer-title {
-  color: white;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  margin-left: 0.5rem;
-  font-size: inherit;
-  transition: color 0.2s;
-}
-
-.footer-links {
-  display: flex;
-  gap: 1.2rem;
-  align-items: center;
-}
-
-.footer-link {
-  color: #e0e7ef;
-  text-decoration: none;
-  font-size: 1.05rem;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  transition: color 0.2s;
-  position: relative;
-  padding: 0.2rem 0;
-  min-width: 0;
-}
-
-.footer-link:hover {
-  color: #60a5fa;
-}
-
-.footer-link::after {
-  content: '';
-  display: block;
-  height: 2px;
-  width: 0;
-  background: linear-gradient(90deg, #60a5fa 0%, #38bdf8 100%);
-  transition: width 0.3s;
-  position: absolute;
-  left: 0;
-  bottom: -2px;
-}
-
-.footer-link:hover::after {
-  width: 100%;
-}
-
-.footer-bottom {
-  width: 100%;
-  text-align: center;
-  margin-top: 2rem;
-  color: #60a5fa;
-  font-size: 0.95rem;
-  opacity: 0.85;
-}
-
-.footer-copyright {
-  opacity: 0.8;
-}
-
-/* Responsive Design */
-@media (max-width: 900px) {
-  .footer-content {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1.5rem;
-    padding: 0 1.2rem;
-  }
-
-  .footer-links {
-    gap: 0.7rem;
-  }
-
-  .footer-title {
-    font-size: 1rem;
-  }
-}
-
-@media (max-width: 600px) {
-  .app-footer {
-    padding: 1.5rem 0 0.7rem 0;
-  }
-
-  .footer-content {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-    padding: 0 0.5rem;
-  }
-
-  .footer-links {
-    gap: 0.7rem;
-    flex-wrap: wrap;
-  }
-
-  .footer-title {
-    font-size: 1rem;
-  }
-
-  .footer-bottom {
-    margin-top: 1.5rem;
-  }
+  background: rgba(10, 25, 47, 0.65);
 }
 </style>
diff --git a/frontend/kubecloud/src/env.d.ts b/frontend/kubecloud/src/env.d.ts
index 8d3d6127..f34a214e 100644
--- a/frontend/kubecloud/src/env.d.ts
+++ b/frontend/kubecloud/src/env.d.ts
@@ -9,3 +9,6 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
+
+// Global constants injected via Vite's define option
+declare const __APP_VERSION__: string
diff --git a/frontend/kubecloud/vite.config.ts b/frontend/kubecloud/vite.config.ts
index 2f81529a..6131b111 100644
--- a/frontend/kubecloud/vite.config.ts
+++ b/frontend/kubecloud/vite.config.ts
@@ -4,6 +4,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vuetify from 'vite-plugin-vuetify'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import pkg from './package.json'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -13,4 +14,7 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  define: {
+    __APP_VERSION__: JSON.stringify(pkg.version),
+  },
 })