feat(tiles): let users arrange the dashboard and profile tiles

src/components/CurrentlyPlayingCard.jsx

@@ -4,10 +4,14 @@ import {ArrowRight, Gamepad2} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
+import {cn} from '@/lib/utils';
 import GameCover from './GameCover.jsx';
 import {formatPlaytime} from '../utils/games.js';
 
-export default function CurrentlyPlayingCard({games, syncing}) {
+/**
+ * @param wide four games per row instead of two, for the large tile
+ */
+export default function CurrentlyPlayingCard({games, syncing, wide}) {
     const {t} = useTranslation();
     return (
         <Card className="gap-0 py-0">
@@ -26,7 +30,7 @@ export default function CurrentlyPlayingCard({games, syncing}) {
                     {syncing ? t('LIBRARY.SYNCING_FIRST_TIME') : t('DASHBOARD.NOTHING_PLAYING')}
                 </p>
             ) : (
-                <ul className="grid grid-cols-2 gap-3 p-4">
+                <ul className={cn('grid grid-cols-2 gap-3 p-4', wide && 'sm:grid-cols-4')}>
                     {games.map((g) => (
                         <li key={g.appid}>
                             <Link to={`/library/${g.appid}`} className="group block space-y-1.5">