Some more overall improvements

src/app.css

@@ -11,16 +11,16 @@
 
 @layer components {
 	h1 {
-		@apply text-4xl font-bold leading-tight tracking-tight text-gray-900 md:text-3xl dark:text-white mb-6;
+		@apply text-4xl font-bold leading-tight tracking-tight text-gray-900 md:text-3xl dark:text-white mb-6 max-w-max;
 	}
 	h2 {
-		@apply text-2xl font-bold;
+		@apply text-2xl font-bold leading-tight tracking-tight text-gray-900 md:text-3xl dark:text-white mb-6 max-w-max;
 	}
 	h3 {
-		@apply text-2xl font-bold;
+		@apply text-2xl font-bold leading-tight tracking-tight text-gray-900 md:text-3xl dark:text-white mb-6 max-w-max;
 	}
 	h4 {
-		@apply text-xl font-bold;
+		@apply text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-3xl dark:text-white mb-6 max-w-max;
 	}
 	ul {
 		@apply list-inside list-disc;

src/lib/Song.ts

-import fs from 'node:fs/promises';
+// import fs from 'node:fs/promises';
 import OriginalSong from 'plaintext-song-parser';
 
 export class Song extends OriginalSong {
+	/*
 	static async loadFromFile(filepath: string): Promise<Song> {
 		const content = await fs.readText(filepath, { encoding: 'utf8' });
 		return new Song(content);
 	}
+	*/
 }
 
 export default Song;
\ No newline at end of file

src/lib/locales/en.json

@@ -110,6 +110,10 @@
       }
     },
     "musicsheet": {
+      "song": {
+        "placeholder": "Select Linked Song",
+        "label": "Music Sheet Linked Song"
+      },
       "name": {
         "placeholder": "Enter Sheet Name",
         "label": "Music Sheet Name"

src/routes/(admin)/users/+page.svelte

@@ -39,7 +39,7 @@
 		<tbody>
 			{#each users as user}
 				<tr on:click={() => goto(resolveRoute('/users/[id]', { id: String(user.id) }), { replaceState: false })}>
-					<td scope="row">{user.id}</td>
+					<td>{user.id}</td>
 					<td><a href="mailto:{user.email}">{user.email}</a></td>
 					<td>{user?.name ?? ''}</td>
 					<td>{user.role?.name ?? Roles[user.role?.id ?? user.roleId]}</td>

src/routes/(user)/playlists/+page.svelte

@@ -21,13 +21,14 @@
 	{#if authUser.roleId <= Roles.Leader}
 		<button class="btn-action" on:click={() => goto(resolveRoute('/playlists/create'), { replaceState: false })}>{$_('page.playlists.create.title')}</button>
 	{/if}
-	<p>{$_('page.playlists.list.description')}</p>
-	<ul>
-		{#each playlists as playlist}
-			<li><a href={resolveRoute('/playlists/[id]/', { id: String(playlist.id) })}>[{playlist.team.name}] {playlist.date.toLocaleDateString()} - {playlist.name}</a></li>
-		{/each}
-		{#if playlists.length === 0}
-			<i>{$_('page.playlists.no_playlists')}</i>
-		{/if}
-	</ul>
+	<p>{$_('page.playlists.list.description')}:</p>
+	{#if playlists.length === 0}
+		<i>{$_('page.playlists.list.no_playlists')}</i>
+	{:else}
+		<ul>
+			{#each playlists as playlist}
+				<li><a href={resolveRoute('/playlists/[id]/', { id: String(playlist.id) })}>[{playlist.team.name}] {playlist.date.toLocaleDateString()} - {playlist.name}</a></li>
+			{/each}
+		</ul>
+	{/if}
 </div>

src/routes/(user)/playlists/[id=integer]/+page.svelte

@@ -25,7 +25,7 @@
 	<br><hr /><br>
 	<h2 class="text-2xl font-bold">{$_('page.songs.list.title')}:</h2>
 	{#if playlist?.songs.length === 0}
-		<i>{$_('page.songs.no_songs')}</i>
+		<i>{$_('page.songs.list.no_songs')}</i>
 	{:else}
 		<ul>
 			{#each playlist?.songs as song}

src/routes/(user)/songs/[id=integer]/+page.svelte

@@ -27,6 +27,8 @@
 		<p><strong>{$_('fields.song.artist.label')}:</strong> {song.artist}</p>
 	{/if}
 	<br><hr /><br>
+	<p><a href={resolveRoute('/musicsheets/[song]', { song: String(song.id) })}>Go to MusicSheets</a></p>
+	<br><hr /><br>
 	<h3>{$_('fields.song.lyrics.label')}:</h3><br>
 	<div class="song_container">
 		{#each songObject.couplets as couplet, i}

src/routes/(user)/teams/+page.svelte

@@ -18,15 +18,15 @@
 </script>
 <div transition:slide>
 	<h1>{$_('page.teams.list.title')}</h1>
-	<p>{$_('page.teams.list.description')}</p>
 	{#if authUser.roleId <= Roles.Admin}
 		<button class="btn-action" on:click={() => goto(resolveRoute('/teams/create'), { replaceState: false })}>{$_('page.teams.create.title')}</button>
 	{/if}
+	<p>{$_('page.teams.list.description')}:</p>
 	<div class='mx-auto rounded-xl shadow-md overflow-hidden bg-gray-100 dark:bg-opacity-10 dark:bg-gray-200'>
 		<div class="md:flex md:flex-wrap">
 			{#each teams as team}
 				<div class="TeamItem flex-auto bg-gray-200 dark:bg-opacity-10 dark:bg-gray-200">
-					<h1 class="title text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white mb-6">
+					<h1 class="title">
 						<a href={resolveRoute('/teams/[id]', { id: String(team.id) })}>{team.name}</a>
 						{#if authUser && team.users.find(usr => usr.id === authUser.id)}
 							{$_('page.teams.yours')}
@@ -45,6 +45,7 @@
 }
 .title, .description {
 	text-align: center;
+	max-width: none;
 	--size-header-1: initial;
 	--size-content-3: initial;
 }

static/manifest.json

@@ -16,17 +16,17 @@
     "theme_color": "#3367D6",
     "shortcuts": [
       {
-        "name": "How's weather today?",
-        "short_name": "Today",
-        "description": "View weather information for today",
-        "url": "/today?source=pwa",
+        "name": "View Playlists",
+        "short_name": "Playlists",
+        "description": "View the existing playlists",
+        "url": "/playlists?source=pwa",
         "icons": [{ "src": "/favicon.png", "sizes": "128x128" }]
       },
       {
-        "name": "How's weather tomorrow?",
-        "short_name": "Tomorrow",
-        "description": "View weather information for tomorrow",
-        "url": "/tomorrow?source=pwa",
+        "name": "View Songs",
+        "short_name": "Songs",
+        "description": "View the existing songs",
+        "url": "/songs?source=pwa",
         "icons": [{ "src": "/favicon.png", "sizes": "128x128" }]
       }
     ]

svelte.config.js

@@ -4,7 +4,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
-		adapter: adapter()
+		adapter: adapter(),
 	},
 	preprocess: vitePreprocess(),
 };