matrix header tweaks

apps/frontend/src/i18n/locales/en.ts

@@ -150,8 +150,9 @@ export default {
     assetDownload: 'Download',
     assetOpen: 'Open',
     assetKind: {
-      cartridge: 'Game file',
+      cartridge: 'Cartridge',
       source: 'Source code',
+      html: 'Web',
       docs: 'Documentation',
       win_x86: 'Windows (32-bit)',
       win_x64: 'Windows (64-bit)',

apps/frontend/src/i18n/locales/hu.ts

@@ -150,8 +150,9 @@ export default {
     assetDownload: 'Letöltés',
     assetOpen: 'Megnyitás',
     assetKind: {
-      cartridge: 'Játékfájl',
+      cartridge: 'Cartridge',
       source: 'Forráskód',
+      html: 'Web',
       docs: 'Dokumentáció',
       win_x86: 'Windows (32 bit)',
       win_x64: 'Windows (64 bit)',

apps/frontend/src/page/builds/BuildsIndexPage.vue

@@ -14,21 +14,32 @@
     <div v-else class="builds-table-wrap">
       <table class="builds-table">
         <thead>
+          <!-- Group row -->
           <tr>
-            <th class="builds-th-engine">Engine</th>
-            <th v-for="kind in data.allKinds" :key="kind" class="builds-th-kind">
-              <i :class="kindIcon(kind)" class="builds-kind-icon"></i>
-              <span class="builds-kind-label">{{ t('catalogShow.assetKind.' + kind) }}</span>
+            <th rowspan="2" class="builds-th-engine">Engine</th>
+            <th v-for="group in columnGroups" :key="group.label" :colspan="group.kinds.length" class="builds-th-group">
+              <i :class="group.icon" class="builds-group-icon"></i>
+              <span class="builds-group-label">{{ group.label }}</span>
             </th>
           </tr>
+          <!-- Sub-column row -->
+          <tr>
+            <template v-for="group in columnGroups" :key="group.label">
+              <th v-for="col in group.kinds" :key="col.kind" class="builds-th-sub">
+                {{ col.sub }}
+              </th>
+            </template>
+          </tr>
         </thead>
         <tbody>
           <tr v-for="(info, platform) in data.platforms" :key="platform" class="builds-row">
             <td class="builds-td-engine">{{ info.label }}</td>
-            <td v-for="kind in data.allKinds" :key="kind" class="builds-td-kind">
-              <i v-if="info.kinds.includes(kind)" class="fa-solid fa-check builds-check"></i>
-              <i v-else class="fa-solid fa-xmark builds-xmark"></i>
-            </td>
+            <template v-for="group in columnGroups" :key="group.label">
+              <td v-for="col in group.kinds" :key="col.kind" class="builds-td-kind">
+                <i v-if="info.kinds.includes(col.kind)" class="fa-solid fa-check builds-check"></i>
+                <i v-else class="fa-solid fa-xmark builds-xmark"></i>
+              </td>
+            </template>
           </tr>
         </tbody>
       </table>
@@ -54,15 +65,54 @@ const { t } = useI18n()
 const store = useBuildsStore()
 const { data, error } = storeToRefs(store)
 
-const kindIcon = (kind: string) =>
-  kind.startsWith('win_') ? 'fa-brands fa-windows'
-    : kind.startsWith('linux_') ? 'fa-brands fa-linux'
-      : kind.startsWith('mac_') ? 'fa-brands fa-apple'
-        : kind === 'cartridge' ? 'fa-solid fa-gamepad'
-          : kind === 'source' ? 'fa-solid fa-code'
-            : kind === 'docs' ? 'fa-solid fa-book'
-              : kind === 'html' ? 'fa-solid fa-globe'
-                : 'fa-solid fa-cube'
+const columnGroups = [
+  {
+    label: 'Windows',
+    icon: 'fa-brands fa-windows',
+    kinds: [
+      { kind: 'win_x64', sub: '64 bit' },
+      { kind: 'win_x86', sub: '32 bit' },
+    ],
+  },
+  {
+    label: 'Linux',
+    icon: 'fa-brands fa-linux',
+    kinds: [
+      { kind: 'linux_x64', sub: '64 bit' },
+    ],
+  },
+  {
+    label: 'Mac',
+    icon: 'fa-brands fa-apple',
+    kinds: [
+      { kind: 'mac_x64', sub: 'Intel' },
+      { kind: 'mac_arm64', sub: 'ARM' },
+      { kind: 'mac_universal', sub: 'Universal' },
+    ],
+  },
+  {
+    label: 'Web',
+    icon: 'fa-solid fa-globe',
+    kinds: [
+      { kind: 'html', sub: 'HTML5' },
+    ],
+  },
+  {
+    label: 'Cartridge',
+    icon: 'fa-solid fa-gamepad',
+    kinds: [
+      { kind: 'cartridge', sub: 'Native' },
+    ],
+  },
+  {
+    label: 'Others',
+    icon: 'fa-solid fa-folder-open',
+    kinds: [
+      { kind: 'source', sub: 'Source' },
+      { kind: 'docs', sub: 'Docs' },
+    ],
+  },
+]
 
 onMounted(() => store.fetch())
 </script>
@@ -81,16 +131,19 @@ onMounted(() => store.fetch())
   @apply w-full text-sm;
 }
 .builds-th-engine {
-  @apply px-6 py-4 text-left text-xs font-bold text-gray-400 uppercase tracking-widest bg-gray-50;
+  @apply px-6 py-4 text-left text-xs font-bold text-gray-400 uppercase tracking-widest bg-gray-50 border-b border-gray-200;
 }
-.builds-th-kind {
-  @apply px-3 py-4 text-center bg-gray-50;
+.builds-th-group {
+  @apply px-2 py-3 text-center bg-gray-50 border-b border-gray-200 border-l border-gray-200;
 }
-.builds-kind-icon {
-  @apply block text-gray-500 text-base mb-1;
+.builds-group-icon {
+  @apply text-gray-500 text-base;
 }
-.builds-kind-label {
-  @apply block text-[10px] font-bold text-gray-400 uppercase tracking-wider leading-tight;
+.builds-group-label {
+  @apply ml-1.5 text-xs font-bold text-gray-500 uppercase tracking-wider;
+}
+.builds-th-sub {
+  @apply px-3 py-2 text-center text-[10px] font-bold text-gray-400 uppercase tracking-wider bg-gray-50/50;
 }
 .builds-row {
   @apply border-t border-gray-100 hover:bg-gray-50/50 transition-colors;