Series of small fixes (#346)

* migrate bufbuild config to v2

* fix localdir lookup

* fix old oidc redirect path

* rework twemoji path stuff

* fix torrential cmd

* fix broken lock file

* align dev server port with nginx

* bump pnpm

* bump nuxt

* make translations lazy loaded

* format numbers via i18n

* fix prisma breaking if extension already exists

buf.gen.yaml

@@ -1,5 +1,5 @@
-version: v1
+version: v2
 plugins:
-  - plugin: es
+  - local: protoc-gen-es
     out: server/internal/proto
     opt: target=ts

components/PieChart/PieChart.vue

@@ -25,7 +25,7 @@
           {{
             $t("common.labelValueColon", {
               label: slice.label,
-              value: slice.value,
+              value: $n(slice.value),
             })
           }}
         </li>

components/ProgressBar.vue

@@ -12,7 +12,8 @@
     <span
       class="absolute inset-0 flex items-center justify-center text-blue-200 text-sm font-bold font-display"
     >
-      {{ $t("tasks.admin.progress", [Math.round(percentage * 10) / 10]) }}
+      <!-- {{ $t("tasks.admin.progress", [Math.round(percentage * 10) / 10]) }} -->
+      {{ $n(Math.round(percentage) / 100, "percent") }}
     </span>
   </div>
 </template>

i18n/i18n.config.ts

@@ -15,6 +15,13 @@ export default defineI18nConfig(() => {
     },
   } as const;
 
+  const defaultNumberFormat = {
+    percent: {
+      style: "percent",
+      useGrouping: false,
+    },
+  } as const;
+
   return {
     // https://i18n.nuxtjs.org/docs/guide/locale-fallback
     fallbackLocale: "en-us",
@@ -31,5 +38,17 @@ export default defineI18nConfig(() => {
       zh: defaultDateTimeFormat,
       "zh-tw": defaultDateTimeFormat,
     },
+    numberFormats: {
+      "en-us": defaultNumberFormat,
+      "en-gb": defaultNumberFormat,
+      "en-au": defaultNumberFormat,
+      "en-pirate": defaultNumberFormat,
+      fr: defaultNumberFormat,
+      de: defaultNumberFormat,
+      it: defaultNumberFormat,
+      es: defaultNumberFormat,
+      zh: defaultNumberFormat,
+      "zh-tw": defaultNumberFormat,
+    },
   };
 });

nuxt.config.ts

@@ -11,13 +11,18 @@ const packageJsonSchema = type({
   version: "string",
 });
 
-const twemojiJson = module.findPackageJSON(
+const twemojiPackage = module.findPackageJSON(
   "@discordapp/twemoji",
   import.meta.url,
 );
-if (!twemojiJson) {
+if (!twemojiPackage) {
   throw new Error("Could not find @discordapp/twemoji package.");
 }
+const twemojiAssetsPath = path.join(
+  path.dirname(twemojiPackage),
+  "dist",
+  "svg",
+);
 
 // get drop version
 const dropVersion = getDropVersion();
@@ -96,10 +101,14 @@ export default defineNuxtConfig({
 
     // redirect old OIDC callback route
     "/auth/callback/oidc": {
-      redirect: "/api/v1/auth/odic/callback",
+      redirect: "/api/v1/auth/oidc/callback",
     },
   },
 
+  devServer: {
+    port: 4000,
+  },
+
   nitro: {
     minify: true,
     compressPublicAssets: true,
@@ -143,7 +152,7 @@ export default defineNuxtConfig({
       {
         baseName: "twemoji",
         // get path to twemoji svg assets
-        dir: path.join(path.dirname(twemojiJson), "dist", "svg"),
+        dir: twemojiAssetsPath,
       },
     ],
   },
@@ -169,6 +178,7 @@ export default defineNuxtConfig({
       optimizeTranslationDirective: false,
     },
     defaultLocale: "en-us",
+    lazy: true,
     strategy: "no_prefix",
     experimental: {
       localeDetector: "localeDetector.ts",

package.json

@@ -27,7 +27,7 @@
     "@lobomfz/prismark": "0.0.3",
     "@nuxt/fonts": "^0.11.0",
     "@nuxt/image": "^1.10.0",
-    "@nuxt/kit": "3.20.1",
+    "@nuxt/kit": "^3.20.1",
     "@nuxtjs/i18n": "^9.5.5",
     "@prisma/client": "^6.11.1",
     "@simplewebauthn/browser": "^13.2.2",
@@ -50,7 +50,7 @@
     "luxon": "^3.6.1",
     "micromark": "^4.0.1",
     "normalize-url": "^8.0.2",
-    "nuxt": "^3.17.4",
+    "nuxt": "^3.20.1",
     "nuxt-security": "2.2.0",
     "otp-io": "^1.2.7",
     "parse-cosekey": "^1.0.2",
@@ -100,5 +100,5 @@
       "vue3-carousel": "^0.16.0"
     }
   },
-  "packageManager": "pnpm@10.27.0+sha512.72d699da16b1179c14ba9e64dc71c9a40988cbdc65c264cb0e489db7de917f20dcf4d64d8723625f2969ba52d4b7e2a1170682d9ac2a5dcaeaab732b7e16f04a"
+  "packageManager": "pnpm@10.29.1+sha512.48dae233635a645768a3028d19545cacc1688639eeb1f3734e42d6d6b971afbf22aa1ac9af52a173d9c3a20c15857cfa400f19994d79a2f626fcc73fccda9bbc"
 }

pages/admin/index.vue

@@ -23,7 +23,7 @@
         </div>
 
         <div class="col-span-6 lg:col-span-1 md:col-span-3">
-          <MiniTile :label="t('home.admin.games')" :value="gameCount">
+          <MiniTile :label="t('home.admin.games')" :value="$n(gameCount)">
             <template #icon>
               <GamepadIcon />
             </template>
@@ -33,24 +33,45 @@
         <div
           class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-1 lg:row-start-2"
         >
-          <MiniTile
-            :value="sources.length"
-            :label="t('home.admin.librarySources')"
-          >
-            <template #icon>
-              <ServerStackIcon />
-            </template>
-          </MiniTile>
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <ServerStackIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">
+                  {{ $n(sources.length) }}
+                </div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.librarySources") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
         </div>
 
         <div
           class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-2 lg:row-start-2"
         >
-          <MiniTile :value="userStats.userCount" :label="t('home.admin.users')">
-            <template #icon>
-              <UserGroupIcon />
-            </template>
-          </MiniTile>
+          <TileWithLink>
+            <div class="h-full flex">
+              <div class="flex-1 my-auto">
+                <UserGroupIcon />
+              </div>
+              <div
+                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+              >
+                <div class="text-3xl flex-1 font-bold">
+                  {{ $n(userStats.userCount) }}
+                </div>
+                <div class="text-xs flex-1 text-left lg:text-center">
+                  {{ t("home.admin.users") }}
+                </div>
+              </div>
+            </div>
+          </TileWithLink>
         </div>
 
         <div class="col-span-6 row-span-1 lg:col-span-2 lg:row-span-2">

pages/store/[id]/index.vue

@@ -141,7 +141,7 @@
                     ]"
                   />
                   <span class="text-zinc-600">{{
-                    $t("store.reviews", [rating._sum.mReviewCount ?? 0])
+                    $t("store.reviews", [$n(rating._sum.mReviewCount ?? 0)])
                   }}</span>
                 </td>
               </tr>

prisma/migrations/20250721062509_add_pg_trgm/migration.sql

@@ -1,5 +1,5 @@
 -- Add pg_trgm
-CREATE EXTENSION pg_trgm;
+CREATE EXTENSION IF NOT EXISTS pg_trgm;
 
 -- Create index for tag names
--- CREATE INDEX trgm_tag_name ON "Tag" USING GIST (name gist_trgm_ops(siglen=32));
+-- CREATE INDEX trgm_tag_name ON "Tag" USING GIST (name gist_trgm_ops(siglen=32));

server/internal/services/torrential/index.ts

@@ -50,7 +50,7 @@ export class TorrentialService extends Service<unknown> {
       "torrential",
       () => {
         const localDir = fs.readdirSync(".");
-        if ("torrential" in localDir) {
+        if (localDir.includes("torrential")) {
           const stat = fs.statSync("./torrential");
           if (stat.isDirectory()) {
             // in dev and we have the submodule
@@ -58,8 +58,8 @@ export class TorrentialService extends Service<unknown> {
               "torrential detected in development mode - building from source",
             );
             return spawn(
-              "cargo run --manifest-path ./torrential/Cargo.toml",
-              [],
+              "cargo",
+              ["run", "--manifest-path", "./torrential/Cargo.toml"],
               {},
             );
           } else {

server/internal/utils/files.ts

@@ -31,6 +31,8 @@ export function getFolderSize(folderPath: string): number {
 }
 
 export function formatBytes(bytes: number): string {
+  // TODO: use i18n formatting https://vue-i18n.intlify.dev/guide/essentials/number.html
+
   if (bytes < 1024) {
     return `${bytes} B`;
   }