Big ol' state rejig

frederickobrien · frederickobrien · commit f91cf5720b83 · 2025-10-23T00:38:22.000+01:00
A step towards where I want to be but still more to do. This separates global state from props enough to make track tables far more reusable, as they should be, but the data model needs to be tidier
diff --git a/app/src/lib/components/releases/ReleaseTrackButton.svelte b/app/src/lib/components/releases/ReleaseTrackButton.svelte
@@ -1,21 +1,16 @@
 <script lang="ts">
 	import { setActiveSong, userState } from '$lib/global/state.svelte';
-	import type { ReleaseHydrated, UserProfile, TrackRaw } from '../../../../../shared/types';
-	import type { Session } from '@supabase/supabase-js';
+	import type { ReleaseHydrated, TrackRaw } from '../../../../../shared/types';
 	import Pause from '../icons/Pause.svelte';
 	import Play from '../icons/Play.svelte';
 	import ButtonWrapper from '../layout/ButtonWrapper.svelte';
 
 	let {
 		track,
-		release,
-		profileData,
-		session
+		release
 	}: {
 		track: TrackRaw;
 		release: ReleaseHydrated;
-		profileData: UserProfile;
-		session: Session;
 	} = $props();
 </script>
 
@@ -25,13 +20,7 @@
 			if (track.ipfs_cid == userState.activeSong?.ipfs_cid) {
 				userState.activeSongIsPaused = !userState.activeSongIsPaused;
 			} else {
-				setActiveSong(
-					track,
-					release,
-					session.user.id,
-					userState.liveBalance ?? profileData.tokens_balance,
-					profileData.pay_per_stream
-				);
+				setActiveSong(track, release, userState.id, userState.liveBalance, userState.payPerStream);
 				userState.autoPlay = false;
 			}
 		}}
diff --git a/app/src/lib/components/releases/TracksTable.svelte b/app/src/lib/components/releases/TracksTable.svelte
@@ -1,26 +1,12 @@
 <script lang="ts">
-	import type {
-		LikedTrackObject,
-		Mixtape,
-		ReleaseHydrated,
-		UserProfile
-	} from '../../../../../shared/types';
-	import type { Session } from '@supabase/supabase-js';
+	import type { ReleaseHydrated, TrackRaw } from '../../../../../shared/types';
 	import TrackTableRow from './TracksTableRow.svelte';
 
 	const {
-		release,
-		profileData,
-		likedTracks,
-		mixtapes,
-		session,
+		tracksAndTheirReleases,
 		showReleaseAndArtist = false
 	}: {
-		release: ReleaseHydrated;
-		profileData: UserProfile;
-		likedTracks: LikedTrackObject[];
-		mixtapes: Mixtape[];
-		session: Session;
+		tracksAndTheirReleases: { track: TrackRaw; release: ReleaseHydrated }[];
 		showReleaseAndArtist?: boolean;
 	} = $props();
 </script>
@@ -41,17 +27,8 @@
 		</tr>
 	</thead>
 	<tbody>
-		{#each release.tracks as track, i}
-			<TrackTableRow
-				i={i + 1}
-				{track}
-				{release}
-				{profileData}
-				{session}
-				{likedTracks}
-				{mixtapes}
-				{showReleaseAndArtist}
-			/>
+		{#each tracksAndTheirReleases as { track, release }, i}
+			<TrackTableRow i={i + 1} {track} {release} {showReleaseAndArtist} />
 		{/each}
 	</tbody>
 </table>
diff --git a/app/src/lib/components/releases/TracksTableRow.svelte b/app/src/lib/components/releases/TracksTableRow.svelte
@@ -1,36 +1,22 @@
 <script lang="ts">
-	import type {
-		LikedTrackObject,
-		Mixtape,
-		ReleaseHydrated,
-		TrackRaw,
-		UserProfile
-	} from '../../../../../shared/types';
+	import type { ReleaseHydrated, TrackRaw } from '../../../../../shared/types';
 	import { prettifyDuration } from '../../../../../shared/utils';
-	import type { Session } from '@supabase/supabase-js';
 	import ReleaseTrackButton from './ReleaseTrackButton.svelte';
 	import TrackLikeButton from './TrackLikeButton.svelte';
 	import ThreeDots from '../icons/ThreeDots.svelte';
 	import PopupWrapper from '../layout/PopupWrapper.svelte';
 	import { addTrackToMixtape } from '$lib/remote-functions/mixtapes.remote';
+	import { userState } from '$lib/global/state.svelte';
 
 	const {
 		i = undefined,
 		track,
 		release,
-		profileData,
-		session,
-		likedTracks,
-		mixtapes,
 		showReleaseAndArtist = false
 	}: {
 		i?: number;
 		track: TrackRaw;
 		release: ReleaseHydrated;
-		profileData: UserProfile;
-		session: Session;
-		likedTracks: LikedTrackObject[];
-		mixtapes: Mixtape[];
 		showReleaseAndArtist: boolean;
 	} = $props();
 
@@ -46,10 +32,14 @@
 	{/if}
 	<td>{prettifyDuration(track.duration_seconds)}</td>
 	<td class="play-button-container">
-		<ReleaseTrackButton {track} {release} {profileData} {session} />
+		<ReleaseTrackButton {track} {release} />
 	</td>
 	<td>
-		<TrackLikeButton trackID={track.id} {likedTracks} lightOrDark={'light'} />
+		<TrackLikeButton
+			trackID={track.id}
+			likedTracks={userState.music.likedTracks}
+			lightOrDark={'light'}
+		/>
 	</td>
 	<td>
 		<div onclick={() => (popupMenuOpen = !popupMenuOpen)}><ThreeDots /></div>
@@ -65,7 +55,7 @@
 					>Add to mixtape:
 					<select {...addTrackToMixtape.fields.mixtapeId.as('select')}>
 						<option value="" disabled selected>Select a mixtape</option>
-						{#each mixtapes as mixtape}
+						{#each userState.music.mixtapes as mixtape}
 							<option value={mixtape.id}>{mixtape.name}</option>
 						{/each}
 					</select>
diff --git a/app/src/lib/global/state.svelte.ts b/app/src/lib/global/state.svelte.ts
@@ -1,24 +1,39 @@
-import type { ReleaseHydrated, TrackRaw } from '../../../../shared/types';
+import type {
+	LikedTrackObject,
+	Mixtape,
+	ReleaseHydrated,
+	TrackRaw
+} from '../../../../shared/types';
 import { API_BASE } from './config';
 
 interface UserState {
+	id: string;
 	activeSong: TrackRaw | null;
 	activeSongRelease: ReleaseHydrated | null;
 	activeSongUrl: string | null;
 	activeSongIsPaused: boolean;
 	autoPlay: boolean;
-	liveBalance: number | null;
+	liveBalance: number;
 	payPerStream: number;
+	music: {
+		likedTracks: LikedTrackObject[];
+		mixtapes: Mixtape[];
+	};
 }
 
 export const userState: UserState = $state({
+	id: '',
 	activeSong: null,
 	activeSongRelease: null,
 	activeSongUrl: null,
 	activeSongIsPaused: false,
 	autoPlay: false,
 	liveBalance: 0,
-	payPerStream: 3
+	payPerStream: 3,
+	music: {
+		likedTracks: [],
+		mixtapes: []
+	}
 });
 
 const logStream = async (userId: string, artistId: string, trackId: string, tokensUsed: number) => {
diff --git a/app/src/routes/+layout.ts b/app/src/routes/+layout.ts
@@ -39,6 +39,8 @@ export const load: LayoutLoad = async ({ fetch, data, depends }) => {
 	if (data.profileData) {
 		userState.liveBalance = data.profileData.tokens_balance;
 		userState.payPerStream = data.profileData.pay_per_stream;
+		userState.music.likedTracks = data.likedTracks;
+		userState.music.mixtapes = data.mixtapes;
 	}
 
 	return {
diff --git a/app/src/routes/me/liked-tracks/+page.svelte b/app/src/routes/me/liked-tracks/+page.svelte
@@ -26,15 +26,7 @@
 		</thead>
 		<tbody>
 			{#each data.likedTracks as { track, release }}
-				<TracksTableRow
-					{track}
-					{release}
-					session={data.session}
-					profileData={data.profileData}
-					likedTracks={data.likedTracks}
-					mixtapes={data.mixtapes}
-					showReleaseAndArtist={true}
-				/>
+				<TracksTableRow {track} {release} showReleaseAndArtist={true} />
 			{/each}
 		</tbody>
 	</table>
diff --git a/app/src/routes/me/mixtapes/+page.svelte b/app/src/routes/me/mixtapes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import TracksTable from '$lib/components/releases/TracksTable.svelte';
 	import { makeMixtape } from '$lib/remote-functions/mixtapes.remote';
 
 	let { data } = $props();
@@ -7,8 +8,8 @@
 </script>
 
 <svelte:head>
-    <title>Your mixtapes · Soli</title>
-    <meta name="description" content="Browse your mixtapes on Soli." />
+	<title>Your mixtapes · Soli</title>
+	<meta name="description" content="Browse your mixtapes on Soli." />
 </svelte:head>
 
 <h2>Your mixtapes</h2>
@@ -20,15 +21,13 @@
 			{#if mixtape.description}
 				<div>{mixtape.description}</div>
 			{/if}
-			{#if mixtape.tracks.length > 0}
-				{#each mixtape.tracks as track, i}
-					<div>
-						{i + 1}. {track.title} by <a href="/artists/{track.artist.id}">{track.artist.name}</a>
-					</div>
-				{/each}
-			{:else}
-				<div>This mixtape has no tracks yet.</div>
-			{/if}
+			<TracksTable
+				tracksAndTheirReleases={mixtape.tracks.map((track) => ({
+					track,
+					release: { ...track.release, artist_id: track.artist.id, artist_name: track.artist.name }
+				}))}
+				showReleaseAndArtist={true}
+			/>
 		</div>
 	</div>
 {/each}
diff --git a/app/src/routes/releases/[slug]/+page.svelte b/app/src/routes/releases/[slug]/+page.svelte
@@ -8,7 +8,7 @@
 	} from '../../../../../shared/types';
 	import { makeImageLink } from '$lib/utils';
 	import type { Session } from '@supabase/supabase-js';
-	import ReleaseTracks from '$lib/components/releases/TracksTable.svelte';
+	import TracksTable from '$lib/components/releases/TracksTable.svelte';
 	import { setActiveSong, userState } from '$lib/global/state.svelte';
 	import ButtonWrapper from '$lib/components/layout/ButtonWrapper.svelte';
 	import { formatReleaseType } from '../../../../../shared/utils';
@@ -88,12 +88,11 @@
 		</div>
 	</ButtonWrapper>
 
-	<ReleaseTracks
-		{release}
-		profileData={data.profileData}
-		likedTracks={data.likedTracks}
-		mixtapes={data.mixtapes}
-		session={data.session}
+	<TracksTable
+		tracksAndTheirReleases={release.tracks.map((track) => ({
+			track,
+			release
+		}))}
 	/>
 
 	<hr />
diff --git a/shared/types/index.ts b/shared/types/index.ts
@@ -84,22 +84,32 @@ export interface Collection {
 
 export interface Mixtape {
   id: string;
-  user_id: string;
+  user_id: string | null;
   name: string;
-  description?: string;
+  description: string | null;
   is_public: boolean;
   created_at: string;
   updated_at: string;
-  tracks?: {
+  tracks: HydratedTrack[];
+}
+
+export interface HydratedTrack {
+  id: string;
+  title: string;
+  ipfs_cid: string;
+  duration_seconds: number | null;
+  added_at: string;
+  artist: {
     id: string;
-    title: string;
-    ipfs_cid: string;
-    duration_seconds: number;
-    artist: {
-      id: string;
-      name: string;
-      image_ipfs_cid?: string;
-    };
-    added_at: string;
-  }[];
-}
+    name: string;
+    image_ipfs_cid: string | null;
+  } | null;
+  release: ParentRelease | null;
+}
+
+export interface ParentRelease {
+  id: string;
+  title: string;
+  artwork_ipfs_cid: string | null;
+  release_date: string | null;
+}

Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,8 @@ export const load: LayoutLoad = async ({ fetch, data, depends }) => {`
`39`	`39`	`if (data.profileData) {`
`40`	`40`	`userState.liveBalance = data.profileData.tokens_balance;`
`41`	`41`	`userState.payPerStream = data.profileData.pay_per_stream;`
	`42`	`+ userState.music.likedTracks = data.likedTracks;`
	`43`	`+ userState.music.mixtapes = data.mixtapes;`
`42`	`44`	`}`
`43`	`45`
`44`	`46`	`return {`