Make application and logo configurable (#336)

* Adds settings for server name and logo

* Implements ApplicationLogo and replaces site name based on settings

* Refactors component for changing the company logo

* Removes unused variable

* Uses message instead of statusMessage

* Replaces favicon with logo if set

server/components/ApplicationLogo.vue

@@ -0,0 +1,12 @@
+<template>
+  <template v-if="!mLogoObjectId">
+    <DropLogo />
+  </template>
+  <template v-else>
+    <img :src="useObject(mLogoObjectId)" :alt="`${serverName} logo`" />
+  </template>
+</template>
+
+<script setup lang="ts">
+const { serverName, mLogoObjectId } = await $dropFetch("/api/v1");
+</script>

server/components/DropWordmark.vue

@@ -10,9 +10,18 @@
         d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"
       />
     </svg>
-    <DropLogo aria-hidden="true" class="h-6" />
+    <ApplicationLogo aria-hidden="true" class="h-6" />
     <span class="text-blue-400 font-display font-bold text-xl uppercase">
-      {{ $t("drop.drop") }}
+      <template v-if="serverName">
+        {{ serverName }}
+      </template>
+      <template v-else>
+        {{ $t("drop.drop") }}
+      </template>
     </span>
   </div>
 </template>
+
+<script setup lang="ts">
+const { serverName } = await $dropFetch("/api/v1");
+</script>

server/components/GameCarousel.vue

@@ -44,7 +44,9 @@ const props = defineProps<{
   width?: number;
 }>();
 
-const { showGamePanelTextDecoration } = await $dropFetch(`/api/v1/settings`);
+const {
+  store: { showGamePanelTextDecoration },
+} = await $dropFetch(`/api/v1/settings`);
 
 const currentComponent = ref<HTMLDivElement>();
 

server/components/ImageUpload.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="relative group/iconupload rounded-xl overflow-hidden w-20 mx-auto"
+  >
+    <img v-if="objectId" :src="useObject(objectId)" :alt="imageAlt" />
+    <ArrowUpTrayIcon v-else />
+    <button
+      type="button"
+      class="rounded-xl transition duration-200 absolute inset-0 opacity-0 group-hover/iconupload:opacity-100 focus-visible/iconupload:opacity-100 cursor-pointer bg-zinc-900/80 text-zinc-100 flex flex-col items-center justify-center text-center text-xs font-semibold ring-1 ring-inset ring-zinc-800 px-2"
+      @click="openModal"
+    >
+      <ArrowUpTrayIcon class="size-5" />
+      <span>{{ hoverText }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ArrowUpTrayIcon } from "@heroicons/vue/24/solid";
+
+const { objectId, openModal, hoverText, imageAlt } = defineProps<{
+  objectId: string | null;
+  openModal: () => void;
+  hoverText: string;
+  imageAlt: string;
+}>();
+</script>

server/components/StoreView.vue

@@ -377,7 +377,9 @@ import {
 import type { SerializeObject } from "nitropack";
 import type { GameModel, GameTagModel } from "~/prisma/client/models";
 import { Platform } from "~/prisma/client/enums";
-const { showGamePanelTextDecoration } = await $dropFetch(`/api/v1/settings`);
+const {
+  store: { showGamePanelTextDecoration },
+} = await $dropFetch(`/api/v1/settings`);
 
 const mobileFiltersOpen = ref(false);
 

server/components/UserHeader.vue

@@ -138,7 +138,7 @@
             >
               <div class="flex shrink-0 h-16 items-center justify-between">
                 <NuxtLink :to="homepageURL">
-                  <DropLogo class="h-8 w-auto" />
+                  <ApplicationLogo class="h-8 w-auto" />
                 </NuxtLink>
 
                 <UserHeaderUserWidget />