Add footer and improvements to navigation

app/app.vue

@@ -11,6 +11,8 @@ useHead({
   }
 })
 
+import { version as VERSION } from '../package.json';
+
 useSeoMeta({
   title: 'Dashboard OS',
   description: 'Your personal folder browser dashboard.',
@@ -19,8 +21,13 @@ useSeoMeta({
 
 <template>
   <UApp>
-    <div class="h-screen w-screen overflow-hidden bg-gradient-to-br from-neutral-900 to-black text-white selection:bg-primary-500 selection:text-white">
+    <div class="h-screen w-screen flex flex-col overflow-hidden bg-gradient-to-br from-neutral-900 to-black text-white selection:bg-primary-500 selection:text-white">
+      <main class="flex-1 overflow-hidden">
         <NuxtPage />
+      </main>
+      <footer class="py-4 text-center text-sm text-white/50 border-t border-white/5">
+        Made with ♥ by Daryn van Vreden • Dashlio • v{{ VERSION }}
+      </footer>
     </div>
   </UApp>
 </template>

app/dashboard.yml

@@ -1,14 +1,28 @@
-- id: 1111-2222-3333-4444
+- id: media-folder
   type: folder
   parentId: null
-  name: Example Folder
+  name: Media
-  slug: example-folder
+  slug: media
   order: 0
-- id: 5555-6666-7777-8888
+- id: jellyfin
   type: link
-  parentId: null
+  parentId: media-folder
-  title: Example Link
+  title: Jellyfin
-  url: https://example.com
+  url: https://jellyfin.example.com
-  icon: i-lucide-globe
+  icon: i-simple-icons-jellyfin
+  color: "#34d399"
+  order: 1
+- id: projects-folder
+  type: folder
+  parentId: null
+  name: Projects
+  slug: projects
+  order: 1
+- id: gitea
+  type: link
+  parentId: projects-folder
+  title: Gitea
+  url: https://gitea.example.com
+  icon: i-simple-icons-gitea
   color: "#34d399"
   order: 1

app/pages/[...slug].vue

@@ -40,6 +40,10 @@ const breadcrumbs = computed(() => {
   
   return crumbs;
 });
+const backUrl = computed(() => {
+  if (slugPath.length <= 1) return '/';
+  return '/' + slugPath.slice(0, -1).join('/');
+});
 </script>
 
 <template>
@@ -51,10 +55,26 @@ const breadcrumbs = computed(() => {
     <!-- Grid -->
     <div class="flex-1 overflow-auto">
       <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-6">
+        <!-- Back Button -->
+        <NuxtLink
+          v-if="slugPath.length > 0"
+          :to="backUrl"
+          class="flex flex-col items-center justify-center p-5 rounded-2xl bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/10 transition-all cursor-pointer group select-none shadow-lg hover:shadow-xl"
+        >
+          <UIcon 
+            name="i-lucide-arrow-left" 
+            class="w-20 h-20 mb-3 drop-shadow-lg transition-transform group-hover:-translate-x-1 text-white/80" 
+          />
+          <span class="text-sm font-medium text-center text-white break-words line-clamp-2 w-full text-shadow">
+            Back
+          </span>
+        </NuxtLink>
+
+        <!-- Folder Items -->
         <DesktopItem v-for="item in items" :key="item.id" :item="item" />
       </div>
       
-      <div v-if="items.length === 0" class="text-white/50 flex items-center justify-center h-64 text-lg">
+      <div v-if="items.length === 0 && slugPath.length === 0" class="text-white/50 flex items-center justify-center h-64 text-lg">
         This folder is empty.
       </div>
     </div>

package.json

@@ -1,5 +1,6 @@
 {
   "name": "dashlio",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {