src/app/api/file/route.ts

@@ -23,18 +23,34 @@ const MIME_TYPES: Record<string, string> = {
   '.zip': 'application/zip',
   '.dmg': 'application/x-apple-diskimage',
   '.gz': 'application/gzip',
+  '.tgz': 'application/gzip',
+  '.bz2': 'application/x-bzip2',
+  '.xz': 'application/x-xz',
+  '.zst': 'application/zstd',
 }
 
 function getMimeType(filePath: string): string {
-  // Special-case .tar.gz before checking the last extension
+  // Special-case multi-part extensions before checking the last extension
-  if (filePath.toLowerCase().endsWith('.tar.gz')) return 'application/gzip'
+  const lower = filePath.toLowerCase()
+  if (lower.endsWith('.tar.gz')) return 'application/gzip'
+  if (lower.endsWith('.tar.bz2')) return 'application/x-bzip2'
+  if (lower.endsWith('.tar.xz')) return 'application/x-xz'
+  if (lower.endsWith('.tar.zst')) return 'application/zstd'
   const ext = path.extname(filePath).toLowerCase()
   return MIME_TYPES[ext] ?? 'application/octet-stream'
 }
 
 function isDownloadAttachment(filePath: string): boolean {
   const lower = filePath.toLowerCase()
-  return lower.endsWith('.zip') || lower.endsWith('.tar.gz') || lower.endsWith('.dmg')
+  return (
+    lower.endsWith('.zip') ||
+    lower.endsWith('.tar.gz') ||
+    lower.endsWith('.tar.bz2') ||
+    lower.endsWith('.tar.xz') ||
+    lower.endsWith('.tar.zst') ||
+    lower.endsWith('.tgz') ||
+    lower.endsWith('.dmg')
+  )
 }
 
 export async function GET(request: NextRequest) {

src/app/icons/android.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="-5.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<title>android</title>
+<path d="M14.563 4.344l-1.219 1.719c1.906 0.906 3.281 2.594 3.438 4.563h-13c0.156-1.969 1.5-3.656 3.406-4.563l-1.219-1.719c-0.063-0.125-0.031-0.25 0.063-0.313s0.219-0.031 0.313 0.063l1.25 1.813c0.813-0.313 1.719-0.5 2.688-0.5s1.844 0.188 2.688 0.5l1.25-1.813c0.063-0.094 0.188-0.125 0.281-0.063s0.125 0.188 0.063 0.313zM7.531 8.813c0.406 0 0.719-0.313 0.719-0.719 0-0.375-0.313-0.719-0.719-0.719-0.375 0-0.719 0.344-0.719 0.719 0 0.406 0.344 0.719 0.719 0.719zM13.094 8.813c0.406 0 0.719-0.313 0.719-0.719 0-0.375-0.313-0.719-0.719-0.719-0.375 0-0.719 0.344-0.719 0.719 0 0.406 0.344 0.719 0.719 0.719zM0 18.781v-5.781c0-0.813 0.625-1.5 1.469-1.5 0.813 0 1.438 0.688 1.438 1.5v5.781c0 0.844-0.625 1.5-1.438 1.5-0.844 0-1.469-0.656-1.469-1.5zM17.594 18.781v-5.781c0-0.813 0.656-1.5 1.469-1.5s1.469 0.688 1.469 1.5v5.781c0 0.844-0.656 1.5-1.469 1.5s-1.469-0.656-1.469-1.5zM3.813 22.125v-10.594h13v10.594c0 0.625-0.531 1.156-1.156 1.156h-1.281v3.281c0 0.813-0.656 1.469-1.469 1.469s-1.469-0.656-1.469-1.469v-3.281h-2.281v3.281c0 0.813-0.625 1.469-1.438 1.469-0.844 0-1.469-0.656-1.469-1.469v-3.281h-1.313c-0.594 0-1.125-0.531-1.125-1.156z"></path>
+</svg>

src/app/icons/linux.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 76 76" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 35.625,29.6875C 36.4995,29.6875 37.2083,30.3964 37.2083,31.2708C 37.2083,32.1453 36.4994,32.8542 35.625,32.8542C 34.7505,32.8542 34.0417,32.1453 34.0417,31.2708C 34.0417,30.3964 34.7505,29.6875 35.625,29.6875 Z M 40.7708,29.6875C 41.6453,29.6875 42.3542,30.3964 42.3542,31.2708C 42.3542,32.1453 41.6453,32.8542 40.7708,32.8542C 39.8964,32.8542 39.1875,32.1453 39.1875,31.2708C 39.1875,30.3964 39.8964,29.6875 40.7708,29.6875 Z M 25.6695,50.3757C 24.9442,48.0415 24.5417,45.4621 24.5417,42.75L 24.5568,41.8418C 22.3238,43.0668 19.8176,44.3333 19,44.3333C 16.8873,44.3333 20.8257,39.4499 25.9794,34.1962C 26.4655,32.8374 27.0638,31.5722 27.7572,30.4249C 28.2641,24.0121 32.6565,19 38,19C 43.3435,19 47.7358,24.0121 48.2428,30.4249C 48.9362,31.5722 49.5345,32.8374 50.0206,34.1962C 55.1743,39.4499 59.1127,44.3333 57,44.3333C 56.1824,44.3333 53.6762,43.0669 51.4432,41.8418L 51.4583,42.75C 51.4583,45.4621 51.0558,48.0415 50.3305,50.3757L 48.2917,49.875C 48.2917,43.7841 45.5317,38.5857 41.649,36.5467L 38,42.75L 34.3514,36.5475C 30.4685,38.59 27.7084,43.8045 27.7085,49.9664L 25.6695,50.3757 Z M 34.0416,26.125C 31.8555,26.125 30.0833,28.2517 30.0833,30.875C 30.0833,33.4984 31.8555,35.625 34.0416,35.625C 36.2278,35.625 38,33.4984 38,30.875C 38,28.2517 36.2278,26.125 34.0416,26.125 Z M 38,30.875C 38,32.6239 39.7722,34.4375 41.9583,34.4375C 44.1444,34.4375 45.9166,32.6239 45.9166,30.875C 45.9166,29.1261 44.1444,27.3125 41.9583,27.3125C 39.7722,27.3125 38,29.1261 38,30.875 Z M 30.0833,50.6667C 33.1473,50.6667 35.7032,52.0266 36.29,53.8333L 36.8125,53.8333L 36.8125,55.4167L 36.29,55.4167C 35.7032,57.2234 33.1473,58.5833 30.0833,58.5833C 26.5855,58.5833 23.75,56.8111 23.75,54.625C 23.75,52.4389 26.5855,50.6667 30.0833,50.6667 Z M 45.9166,50.6667C 49.4144,50.6667 52.25,52.4389 52.25,54.625C 52.25,56.8111 49.4144,58.5833 45.9166,58.5833C 42.8526,58.5833 40.2968,57.2234 39.71,55.4167L 39.1875,55.4167L 39.1875,53.8333L 39.71,53.8333C 40.2968,52.0266 42.8526,50.6667 45.9166,50.6667 Z "/>
+</svg>

src/app/icons/mac.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-1.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>apple [#173]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-102.000000, -7439.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M57.5708873,7282.19296 C58.2999598,7281.34797 58.7914012,7280.17098 58.6569121,7279 C57.6062792,7279.04 56.3352055,7279.67099 55.5818643,7280.51498 C54.905374,7281.26397 54.3148354,7282.46095 54.4735932,7283.60894 C55.6455696,7283.69593 56.8418148,7283.03894 57.5708873,7282.19296 M60.1989864,7289.62485 C60.2283111,7292.65181 62.9696641,7293.65879 63,7293.67179 C62.9777537,7293.74279 62.562152,7295.10677 61.5560117,7296.51675 C60.6853718,7297.73474 59.7823735,7298.94772 58.3596204,7298.97372 C56.9621472,7298.99872 56.5121648,7298.17973 54.9134635,7298.17973 C53.3157735,7298.17973 52.8162425,7298.94772 51.4935978,7298.99872 C50.1203933,7299.04772 49.0738052,7297.68074 48.197098,7296.46676 C46.4032359,7293.98379 45.0330649,7289.44985 46.8734421,7286.3899 C47.7875635,7284.87092 49.4206455,7283.90793 51.1942837,7283.88393 C52.5422083,7283.85893 53.8153044,7284.75292 54.6394294,7284.75292 C55.4635543,7284.75292 57.0106846,7283.67793 58.6366882,7283.83593 C59.3172232,7283.86293 61.2283842,7284.09893 62.4549652,7285.8199 C62.355868,7285.8789 60.1747177,7287.09489 60.1989864,7289.62485" id="apple-[#173]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>

src/app/icons/windows.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>windows [#174]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-60.000000, -7439.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M13.1458647,7289.43426 C13.1508772,7291.43316 13.1568922,7294.82929 13.1619048,7297.46884 C16.7759398,7297.95757 20.3899749,7298.4613 23.997995,7299 C23.997995,7295.84873 24.002005,7292.71146 23.997995,7289.71311 C20.3809524,7289.71311 16.7649123,7289.43426 13.1458647,7289.43426 M4,7289.43526 L4,7296.22153 C6.72581454,7296.58933 9.45162907,7296.94113 12.1724311,7297.34291 C12.1774436,7294.71736 12.1704261,7292.0908 12.1704261,7289.46524 C9.44661654,7289.47024 6.72380952,7289.42627 4,7289.43526 M4,7281.84344 L4,7288.61071 C6.72581454,7288.61771 9.45162907,7288.57673 12.1774436,7288.57973 C12.1754386,7285.96017 12.1754386,7283.34361 12.1724311,7280.72405 C9.44461153,7281.06486 6.71679198,7281.42567 4,7281.84344 M24,7288.47179 C20.3879699,7288.48578 16.7759398,7288.54075 13.1619048,7288.55175 C13.1598997,7285.88921 13.1598997,7283.22967 13.1619048,7280.56914 C16.7689223,7280.01844 20.3839599,7279.50072 23.997995,7279 C24,7282.15826 23.997995,7285.31353 24,7288.47179" id="windows-[#174]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/games/GameDetailModal.tsx

@@ -4,15 +4,25 @@ import { useEffect, useRef, useState, useCallback } from 'react'
 import type { Game, GameFile, GamePlatform } from '@/types'
 import TagSelector from '@/components/tags/TagSelector'
 
+// Import SVG icons
+import WindowsIcon from '@/app/icons/windows.svg'
+import LinuxIcon from '@/app/icons/linux.svg'
+import MacosIcon from '@/app/icons/mac.svg'
+import AndroidIcon from '@/app/icons/android.svg'
+
+// Update the PLATFORM_LABELS to include android
 const PLATFORM_LABELS: Record<GamePlatform, string> = {
   windows: 'WIN',
   linux: 'LIN',
   macos: 'MAC',
+  android: 'AND',
 }
+
 const PLATFORM_COLORS: Record<GamePlatform, string> = {
-  windows: '#0078d4',
+  windows: '#85c0ec',
-  linux: '#e95420',
+  linux: '#efd27b',
-  macos: '#6e6e73',
+  macos: '#b0b0b7',
+  android: '#9ee0ca',
 }
 
 interface Props {
@@ -516,13 +526,24 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
 
 // ─── Download Button ──────────────────────────────────────────────────────────
 
+const PLATFORM_ICONS: Record<GamePlatform, string> = {
+  windows: (typeof WindowsIcon === 'string' ? WindowsIcon : (WindowsIcon as { src: string }).src),
+  linux: (typeof LinuxIcon === 'string' ? LinuxIcon : (LinuxIcon as { src: string }).src),
+  macos: (typeof MacosIcon === 'string' ? MacosIcon : (MacosIcon as { src: string }).src),
+  android: (typeof AndroidIcon === 'string' ? AndroidIcon : (AndroidIcon as { src: string }).src),
+}
+
 function PlatformPill({ platform }: { platform: GamePlatform }) {
+  const src = PLATFORM_ICONS[platform]
+
   return (
     <span
-      className="px-1.5 py-0.5 rounded text-xs font-bold leading-none flex-shrink-0"
+      className="px-1.5 py-0.5 rounded text-xs font-bold leading-none flex-shrink-0 flex items-center gap-1"
       style={{ backgroundColor: PLATFORM_COLORS[platform], color: '#fff' }}
     >
-      {PLATFORM_LABELS[platform]}
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      {src && <img src={src} alt="" width={14} height={14} aria-hidden="true" />}
+      <span className="sr-only">{PLATFORM_LABELS[platform]}</span>
     </span>
   )
 }
@@ -568,8 +589,9 @@ function DownloadButton({
         onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent)')}
       >
         <span>↓</span>
-        <PlatformPill platform={primary.platform} />
+        <span className="truncate">{primary.filename}</span>
-        Download {primary.filename}
+        <span className="justify-right flex-shrink-0"><PlatformPill platform={primary.platform} /></span>
+        
       </a>
     )
   }
@@ -587,8 +609,8 @@ function DownloadButton({
           onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
         >
           <span className="flex-shrink-0">↓</span>
-          <PlatformPill platform={primary.platform} />
           <span className="truncate">{primary.filename}</span>
+          <span className="justify-right flex-shrink-0"><PlatformPill platform={primary.platform} /></span>
         </a>
 
         {/* Divider */}
@@ -624,8 +646,8 @@ function DownloadButton({
               onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
             >
               <span style={{ color: 'var(--text-secondary)' }} className="flex-shrink-0">↓</span>
-              <PlatformPill platform={file.platform} />
               <span className="truncate">{file.filename}</span>
+              <PlatformPill platform={file.platform} />
             </a>
           ))}
         </div>

src/components/games/GamesView.tsx

@@ -5,15 +5,37 @@ import type { Game, GamePlatform, GameSeries } from '@/types'
 import GameDetailModal from './GameDetailModal'
 import FilterPanel from '@/components/FilterPanel'
 
+// Import SVG icons
+import WindowsIcon from '@/app/icons/windows.svg'
+import LinuxIcon from '@/app/icons/linux.svg'
+import MacosIcon from '@/app/icons/mac.svg'
+import AndroidIcon from '@/app/icons/android.svg'
+
 const PLATFORM_LABELS: Record<GamePlatform, string> = {
   windows: 'WIN',
   linux: 'LIN',
   macos: 'MAC',
+  android: 'AND',
 }
 const PLATFORM_COLORS: Record<GamePlatform, string> = {
-  windows: '#0078d4',
+  windows: '#85c0ec',
-  linux: '#e95420',
+  linux: '#efd27b',
-  macos: '#6e6e73',
+  macos: '#b0b0b7',
+  android: '#9ee0ca',
+}
+
+const PLATFORM_ICONS: Record<GamePlatform, string> = {
+  windows: (typeof WindowsIcon === 'string' ? WindowsIcon : (WindowsIcon as { src: string }).src),
+  linux: (typeof LinuxIcon === 'string' ? LinuxIcon : (LinuxIcon as { src: string }).src),
+  macos: (typeof MacosIcon === 'string' ? MacosIcon : (MacosIcon as { src: string }).src),
+  android: (typeof AndroidIcon === 'string' ? AndroidIcon : (AndroidIcon as { src: string }).src),
+}
+
+function getPlatformIcon(platform: GamePlatform) {
+  const src = PLATFORM_ICONS[platform]
+  if (!src) return null
+  // eslint-disable-next-line @next/next/no-img-element
+  return <img src={src} alt="" width={14} height={14} aria-hidden="true" />
 }
 
 function PlatformBadges({ platforms }: { platforms: GamePlatform[] }) {
@@ -23,10 +45,11 @@ function PlatformBadges({ platforms }: { platforms: GamePlatform[] }) {
       {platforms.map((p) => (
         <span
           key={p}
-          className="px-1.5 py-0.5 rounded text-xs font-bold leading-none"
+          className="px-1.5 py-0.5 rounded text-xs font-bold leading-none flex items-center gap-1"
           style={{ backgroundColor: PLATFORM_COLORS[p], color: '#fff' }}
         >
-          {PLATFORM_LABELS[p]}
+          {getPlatformIcon(p)}
+          <span className="sr-only">{PLATFORM_LABELS[p]}</span>
         </span>
       ))}
     </div>

src/lib/games.ts

@@ -11,7 +11,12 @@ function platformForFile(name: string): GamePlatform | null {
   const lower = name.toLowerCase()
   if (lower.endsWith('.zip')) return 'windows'
   if (lower.endsWith('.tar.gz')) return 'linux'
+  if (lower.endsWith('.tar.bz2')) return 'linux'
+  if (lower.endsWith('.tar.xz')) return 'linux'
+  if (lower.endsWith('.tar.zst')) return 'linux'
+  if (lower.endsWith('.tgz')) return 'linux'
   if (lower.endsWith('.dmg')) return 'macos'
+  if (lower.endsWith('.apk')) return 'android'
   return null
 }
 

src/types/index.ts

@@ -8,7 +8,7 @@ export interface Library {
   coverExt: string | null
 }
 
-export type GamePlatform = 'windows' | 'linux' | 'macos'
+export type GamePlatform = 'windows' | 'linux' | 'macos' | 'android'
 
 export interface GameFile {
   path: string