src/lib/components/tiles/music/MusicTile.svelte

@@ -0,0 +1,40 @@
+<!--
+@component
+Music tile.
+-->
+
+<script lang="ts">
+    import type { RecentTrack } from "$lib/server/clients/last-fm";
+
+    import Tile from "../common/Tile.svelte";
+    import TileImagePage from "../pages/TileImagePage.svelte";
+    import TileTextPage from "../pages/TileTextPage.svelte";
+
+    import iconLastFm from "$lib/assets/icons/last-fm.webp";
+    import TileIconPage from "../pages/TileIconPage.svelte";
+
+    const {
+        row,
+        column,
+        size,
+        track,
+    }: {
+        row: number;
+        column: number;
+        size: "small" | "medium" | "wide" | "large";
+        track?: RecentTrack;
+    } = $props();
+</script>
+
+<Tile {row} {column} {size} icon={iconLastFm} link={track.url}>
+    {#if track}
+        <TileImagePage image={track.cover} />
+        <TileTextPage
+            title={track.title}
+            subtitle={track.artist}
+            text={track.album}
+        />
+    {:else}
+        <TileIconPage name="Last.FM" />
+    {/if}
+</Tile>

src/lib/components/tiles/pages/TileTextPage.svelte

@@ -20,14 +20,14 @@ Text page for a tile. Must be in a tile to display correctly.
 
 <div class="w-full flex flex-col" style="height: var(--tile-page-height);">
     <div class="w-full flex flex-col gap-1 p-2 select-none text-white">
-        <h1 class="font-bold text-md">{title}</h1>
+        <h1 class="font-bold text-md truncate">{title}</h1>
 
         {#if subtitle}
-            <h2 class="text-md">{subtitle}</h2>
+            <h2 class="text-md truncate">{subtitle}</h2>
         {/if}
 
         {#if text}
-            <p class="text-sm">{text}</p>
+            <p class="text-sm truncate">{text}</p>
         {/if}
     </div>
 

src/routes/(tiles)/+page.server.ts

@@ -0,0 +1,7 @@
+import type { PageServerLoad } from './$types';
+
+import { getRecentTrack } from '$lib/server/clients/last-fm';
+
+export const load = (async () => {
+    return { track: await getRecentTrack() };
+}) satisfies PageServerLoad;

src/routes/(tiles)/+page.svelte

@@ -1,4 +1,6 @@
-<script>
+<script lang="ts">
+    import type { PageProps } from "./$types";
+
     import iconSynzr from "$lib/assets/icons/synzr.webp";
 
     import imageTestRectangle from "$lib/assets/images/test-rectangle.webp";
@@ -6,9 +8,12 @@
 
     import Tile from "$lib/components/tiles/common/Tile.svelte";
     import TileGroup from "$lib/components/tiles/common/TileGroup.svelte";
+    import MusicTile from "$lib/components/tiles/music/MusicTile.svelte";
     import TileIconPage from "$lib/components/tiles/pages/TileIconPage.svelte";
     import TileImagePage from "$lib/components/tiles/pages/TileImagePage.svelte";
     import TileTextPage from "$lib/components/tiles/pages/TileTextPage.svelte";
+
+    const { data }: PageProps = $props();
 </script>
 
 <TileGroup title="a lot of mikhails" rows={3} columns={3}>
@@ -23,16 +28,7 @@
         <TileTextPage title="Title" subtitle="Subtitle" text="Text" />
     </Tile>
 
-    <Tile
-        size="medium"
-        row={3}
-        column={5}
-        icon={iconSynzr}
-        link="https://example.com"
-    >
-        <TileImagePage image={imageTestSquare} />
-        <TileTextPage title="Title" subtitle="Subtitle" text="Text" />
-    </Tile>
+    <MusicTile row={3} column={5} size="medium" track={data.track} />
 
     <Tile
         size="wide"