Add AppBar

build.sh

@@ -19,8 +19,7 @@ bun install
 bun run build
 
 echo "Building Go backend..."
-cd "$BACKEND_DIR"
+go build -C "$BACKEND_DIR" -v -o "$OUTPUT_DIR" $BACKEND_PKG
-go build -v -o "$OUTPUT_DIR" $BACKEND_PKG
 
 cd "$ROOT_DIR"
 echo "Build completed. Output located in: $OUTPUT_DIR"

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>

src/web/src/plugins/vuetify.ts

@@ -16,9 +16,21 @@ import { createVuetify } from 'vuetify'
 import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
 
+// Detect system theme preferences
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+// Get saved theme or fallback to system
+const savedTheme = localStorage.getItem('theme')
+const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light')
+
+// Save if no theme was already saved
+if (!savedTheme) {
+  localStorage.setItem('theme', initialTheme)
+}
+
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: 'system',
+    defaultTheme: initialTheme,
   },
 })