From 13255d984681e1a8dda3d0c9b226433b6cd62af5 Mon Sep 17 00:00:00 2001
From: zervo <marco@zervo.org>
Date: Thu, 24 Jul 2025 00:27:31 +0200
Subject: [PATCH] Add AppBar

---
 src/web/src/components.d.ts           |  1 +
 src/web/src/components/AppBar.vue     | 45 +++++++++++++++++++++++++++
 src/web/src/components/HelloWorld.vue |  6 ----
 src/web/src/layouts/DefaultLayout.vue |  1 +
 4 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 src/web/src/components/AppBar.vue

diff --git a/src/web/src/components.d.ts b/src/web/src/components.d.ts
index 6bc6d9d..26513a3 100644
--- a/src/web/src/components.d.ts
+++ b/src/web/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AppBar: typeof import('./components/AppBar.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/web/src/components/AppBar.vue b/src/web/src/components/AppBar.vue
new file mode 100644
index 0000000..122aaca
--- /dev/null
+++ b/src/web/src/components/AppBar.vue
@@ -0,0 +1,45 @@
+<!--
+Alpacca: The modern package repository hosting platform.
+Copyright (C) 2025, Zervó Zadachin
+
+DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+
+The full copyright notice can be found at https://git.zervo.org/zervo/Alpacca/src/branch/main/COPYRIGHT.
+-->
+
+<template>
+  <v-app-bar :elevation="5">
+    <template #prepend>
+      <v-img
+        :src="logoSrc"
+        :width="200"
+      />
+    </template>
+
+    <template #append>
+      <v-btn :icon="themeIsDark ? 'mdi-weather-sunny' : 'mdi-weather-night'" @click="toggleTheme" />
+    </template>
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { useTheme } from 'vuetify'
+
+  import darkLogo from '@/assets/icon_darkmode.png'
+  import lightLogo from '@/assets/icon_lightmode.png'
+
+  const theme = useTheme()
+
+  const themeIsDark = computed(() => theme.global.current.value.dark)
+
+  const logoSrc = computed(() => {
+    return themeIsDark.value ? darkLogo : lightLogo
+  })
+
+  function toggleTheme () {
+    const newTheme = themeIsDark.value ? 'light' : 'dark'
+    theme.global.name.value = newTheme
+    localStorage.setItem('theme', newTheme)
+  }
+</script>
diff --git a/src/web/src/components/HelloWorld.vue b/src/web/src/components/HelloWorld.vue
index 8cbcc53..810e3ee 100644
--- a/src/web/src/components/HelloWorld.vue
+++ b/src/web/src/components/HelloWorld.vue
@@ -10,12 +10,6 @@ The full copyright notice can be found at https://git.zervo.org/zervo/Alpacca/sr
 <template>
   <v-container class="fill-height" max-width="900">
     <div>
-      <v-img
-        class="mb-4"
-        height="150"
-        src="@/assets/icon_darkmode.png"
-      />
-
       <div class="mb-8 text-center">
         <div class="text-body-1 font-weight-light mb-n1">Welcome to</div>
         <h1 class="text-h2 font-weight-bold">Alpacca</h1>
diff --git a/src/web/src/layouts/DefaultLayout.vue b/src/web/src/layouts/DefaultLayout.vue
index c9d2462..5d6de07 100644
--- a/src/web/src/layouts/DefaultLayout.vue
+++ b/src/web/src/layouts/DefaultLayout.vue
@@ -10,6 +10,7 @@ The full copyright notice can be found at https://git.zervo.org/zervo/Alpacca/sr
 <template>
   <v-app>
     <v-main>
+      <AppBar />
       <slot />
     </v-main>
   </v-app>