Make application and logo configurable

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>

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>

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>();
 

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>

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);
 

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 />

error.vue

@@ -38,7 +38,7 @@ if (import.meta.client) {
     <header
       class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
     >
-      <DropLogo class="h-10 w-auto sm:h-12" />
+      <ApplicationLogo class="h-10 w-auto sm:h-12" />
     </header>
     <main
       class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"

i18n/locales/en_us.json

@@ -47,8 +47,8 @@
   },
   "actions": "Actions",
   "add": "Add",
-  "adminTitle": "Admin Dashboard - Drop",
-  "adminTitleTemplate": "{0} - Admin - Drop",
+  "adminTitle": "Admin Dashboard - {0}",
+  "adminTitleTemplate": "{0} - Admin - {1}",
   "auth": {
     "callback": {
       "authClient": "Authorize client?",
@@ -264,6 +264,7 @@
       "library": "Library",
       "metadata": "Meta",
       "settings": {
+        "general": "General Settings",
         "store": "Store",
         "title": "Settings",
         "tokens": "API tokens"
@@ -515,6 +516,17 @@
   },
   "settings": {
     "admin": {
+      "general": {
+        "applicationLogo": "Application logo",
+        "customLogo": "Custom logo",
+        "defaultLogo": "Default logo",
+        "logo": "Logo",
+        "serverName": "Server name",
+        "serverNameDescription": "The name of the server",
+        "serverNamePlaceholder": "My Drop Instance",
+        "title": "General settings",
+        "uploadLogo": "Upload logo"
+      },
       "store": {
         "dropGameAltPlaceholder": "Example Game icon",
         "dropGameDescriptionPlaceholder": "This is an example game. It will be replaced if you import a game.",

layouts/admin.vue

@@ -95,7 +95,7 @@
       class="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-zinc-950 lg:pb-4"
     >
       <div class="flex flex-col h-24 shrink-0 items-center justify-center">
-        <DropLogo class="h-8 w-auto" />
+        <ApplicationLogo class="h-8 w-auto" />
         <span
           class="mt-1 bg-blue-400 px-1 py-0.5 rounded-md text-xs font-bold font-display"
           >{{ $t("header.admin.admin") }}</span
@@ -170,6 +170,7 @@ import type { NavigationItem } from "~/composables/types";
 import { useCurrentNavigationIndex } from "~/composables/current-page-engine";
 import { ArrowLeftIcon } from "@heroicons/vue/16/solid";
 import { XMarkIcon } from "@heroicons/vue/24/solid";
+import type { Settings } from "~/server/internal/utils/types";
 
 const i18nHead = useLocaleHead();
 
@@ -231,14 +232,25 @@ router.afterEach(() => {
   sidebarOpen.value = false;
 });
 
+const {
+  generalSettings: { serverName, mLogoObjectId },
+} = await $dropFetch<Settings>("/api/v1/settings");
+
+const favicon = mLogoObjectId ? useObject(mLogoObjectId) : "/favicon.ico";
+useFavicon(favicon, { rel: "icon" });
+
+const applicationName = serverName || $t("drop.drop");
+
 useHead({
   htmlAttrs: {
     lang: i18nHead.value.htmlAttrs.lang,
     // @ts-expect-error head.value.htmlAttrs.dir is not typed as strictly as it should be
     dir: i18nHead.value.htmlAttrs.dir,
   },
   titleTemplate(title) {
-    return title ? $t("adminTitleTemplate", [title]) : $t("adminTitle");
+    return title
+      ? $t("adminTitleTemplate", [title, applicationName])
+      : $t("adminTitle", [applicationName]);
   },
 });
 </script>

layouts/default.vue

@@ -33,4 +33,7 @@ useHead({
     return title ? t("titleTemplate", [title]) : t("title");
   },
 });
+const { mLogoObjectId } = await $dropFetch("/api/v1");
+const favicon = mLogoObjectId ? useObject(mLogoObjectId) : "/favicon.ico";
+useFavicon(favicon, { rel: "icon" });
 </script>

pages/admin/index.vue

@@ -18,7 +18,7 @@
           <TileWithLink>
             <div class="h-full flex">
               <div class="flex-1 my-auto">
-                <DropLogo />
+                <ApplicationLogo />
               </div>
               <div
                 class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
@@ -192,7 +192,6 @@
 <script setup lang="ts">
 import { formatBytes } from "~/server/internal/utils/files";
 import GamepadIcon from "~/components/Icons/GamepadIcon.vue";
-import DropLogo from "~/components/DropLogo.vue";
 import { ServerStackIcon, UserGroupIcon } from "@heroicons/vue/24/outline";
 import { getPercentage } from "~/utils/utils";
 import { getBarColor } from "~/utils/colors";

pages/admin/metadata/companies/[id]/index.vue

@@ -11,18 +11,12 @@
 
       <div class="relative inline-flex items-center gap-4">
         <!-- icon image -->
-        <div class="relative group/iconupload rounded-xl overflow-hidden">
-          <img :src="useObject(company.mLogoObjectId)" class="size-20" />
-          <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="() => (uploadLogoOpen = true)"
-          >
-            <ArrowUpTrayIcon class="size-5" />
-            <span>{{
-              $t("library.admin.metadata.companies.editor.uploadIcon")
-            }}</span>
-          </button>
-        </div>
+        <ImageUpload
+          :object-id="company.mLogoObjectId"
+          :open-modal="() => (uploadLogoOpen = true)"
+          :hover-text="$t('library.admin.metadata.companies.editor.uploadIcon')"
+          :image-alt="`${company.mName} logo`"
+        />
         <div class="flex flex-col">
           <h1
             class="group/name inline-flex items-center gap-x-3 text-5xl font-bold font-display text-zinc-100"

pages/admin/settings.vue

@@ -43,13 +43,20 @@ import {
   BuildingStorefrontIcon,
   CodeBracketIcon,
   ServerIcon,
+  ServerStackIcon,
 } from "@heroicons/vue/24/outline";
 
 const navigation: Array<NavigationItem & { icon: Component }> = [
   {
-    label: $t("header.admin.settings.store"),
+    label: $t("header.admin.settings.general"),
     route: "/admin/settings",
     prefix: "/admin/settings",
+    icon: ServerIcon,
+  },
+  {
+    label: $t("header.admin.settings.store"),
+    route: "/admin/settings/store",
+    prefix: "/admin/settings/store",
     icon: BuildingStorefrontIcon,
   },
   {
@@ -62,7 +69,7 @@ const navigation: Array<NavigationItem & { icon: Component }> = [
     label: "Services",
     route: "/admin/settings/services",
     prefix: "/admin/settings/services",
-    icon: ServerIcon,
+    icon: ServerStackIcon,
   },
 ];