diff --git a/src/app/icons/android.svg b/src/app/icons/android.svg
new file mode 100644
index 0000000..b413770
--- /dev/null
+++ b/src/app/icons/android.svg
@@ -0,0 +1,6 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/icons/linux.svg b/src/app/icons/linux.svg
new file mode 100644
index 0000000..2172e59
--- /dev/null
+++ b/src/app/icons/linux.svg
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/app/icons/mac.svg b/src/app/icons/mac.svg
new file mode 100644
index 0000000..381f84a
--- /dev/null
+++ b/src/app/icons/mac.svg
@@ -0,0 +1,19 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/icons/windows.svg b/src/app/icons/windows.svg
new file mode 100644
index 0000000..81dcb9d
--- /dev/null
+++ b/src/app/icons/windows.svg
@@ -0,0 +1,19 @@
+
+
+
\ No newline at end of file
diff --git a/src/components/games/GameDetailModal.tsx b/src/components/games/GameDetailModal.tsx
index 8d29e7e..5d857c0 100644
--- a/src/components/games/GameDetailModal.tsx
+++ b/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 = {
windows: 'WIN',
linux: 'LIN',
macos: 'MAC',
+ android: 'AND',
}
+
const PLATFORM_COLORS: Record = {
windows: '#0078d4',
linux: '#e95420',
macos: '#6e6e73',
+ android: '#10b981',
}
interface Props {
@@ -516,13 +526,24 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
// ─── Download Button ──────────────────────────────────────────────────────────
+const PLATFORM_ICONS: Record = {
+ 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 (
- {PLATFORM_LABELS[platform]}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ {src && 
}
+ {PLATFORM_LABELS[platform]}
)
}
diff --git a/src/components/games/GamesView.tsx b/src/components/games/GamesView.tsx
index 66dc217..0aadb07 100644
--- a/src/components/games/GamesView.tsx
+++ b/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 = {
windows: 'WIN',
linux: 'LIN',
macos: 'MAC',
+ android: 'AND',
}
const PLATFORM_COLORS: Record = {
windows: '#0078d4',
linux: '#e95420',
macos: '#6e6e73',
+ android: '#10b981',
+}
+
+const PLATFORM_ICONS: Record = {
+ 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
}
function PlatformBadges({ platforms }: { platforms: GamePlatform[] }) {
@@ -23,10 +45,11 @@ function PlatformBadges({ platforms }: { platforms: GamePlatform[] }) {
{platforms.map((p) => (
- {PLATFORM_LABELS[p]}
+ {getPlatformIcon(p)}
+ {PLATFORM_LABELS[p]}
))}
diff --git a/src/lib/games.ts b/src/lib/games.ts
index 8f4c151..cc7ada8 100644
--- a/src/lib/games.ts
+++ b/src/lib/games.ts
@@ -12,6 +12,7 @@ function platformForFile(name: string): GamePlatform | null {
if (lower.endsWith('.zip')) return 'windows'
if (lower.endsWith('.tar.gz')) return 'linux'
if (lower.endsWith('.dmg')) return 'macos'
+ if (lower.endsWith('.apk')) return 'android'
return null
}
diff --git a/src/types/index.ts b/src/types/index.ts
index 411375a..19d014c 100644
--- a/src/types/index.ts
+++ b/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