Add AppBar

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']

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>

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>

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>