Make UI more responsive

next.config.js

@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "i.scdn.co",
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;

src/app/form.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import * as Spotify from "spotify-api.js";
 import { pushTrack, searchTracks } from "./actions";
-import Track from "./track";
+import { TrackHeader, TrackItem } from "./track_list";
 import { useRouter } from "next/navigation";
 
 export default function Form() {
@@ -38,13 +38,25 @@ export default function Form() {
         value={query}
         onChange={(e) => setQuery(e.target.value)}
       />
-      {results.map((track) => (
-        <Track
-          key={track.id}
-          track={track}
-          onClick={() => onTrackClick(track)}
-        />
-      ))}
+      {results.length > 0 && (
+        <>
+          <table>
+            <thead>
+              <TrackHeader />
+            </thead>
+            <tbody>
+              {results.map((track, index) => (
+                <TrackItem
+                  index={index}
+                  key={track.id}
+                  track={track}
+                  onClick={() => onTrackClick(track)}
+                />
+              ))}
+            </tbody>
+          </table>
+        </>
+      )}
     </form>
   );
 }

src/app/track.module.css

@@ -1,36 +1,44 @@
-.container {
-  height: 150px;
-  display: grid;
-  grid-template-columns: 25px 150px 1fr 1fr auto;
-  grid-gap: 20px;
-  margin: 5px;
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  text-align: left;
+}
+
+.table td {
+  padding: 5px;
+}
+
+.table th {
+  padding: 5px;
+}
+
+table .absorbing_column {
+  width: 100%;
+}
+
+table .cover_column {
+  width: 120px;
+}
+
+.index {
+  text-align: center;
+  font-size: 1.5em;
 }
 
 .cover {
-  width: 150px;
-  height: 150px;
+  width: 120px;
+  height: 120px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.index {
-  height: 150px;
-  line-height: 150px;
-  text-align: center;
-}
-
 .title {
-  margin-top: 50px;
   color: black;
-  height: 25px;
-  line-height: 25px;
 }
 
 .artist {
   color: #777777;
-  height: 25px;
-  line-height: 25px;
-  margin-bottom: 50px;
 }

src/app/track.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import * as Spotify from "spotify-api.js";
 import { DispatchWithoutAction } from "react";
 import styles from "./track.module.css";
@@ -9,20 +10,28 @@ interface Props {
 
 export default function TrackCover({ track, onClick }: Props) {
   return (
-    <div className={styles.container} role={"gridcell"} onClick={onClick}>
-      <div className={styles.index}>{"▸"}</div>
-      <img
-        alt="album cover"
-        className={styles.cover}
-        draggable={false}
-        src={track.album?.images[0].url}
-      ></img>
-      <div>
-        <div className={styles.title}>{track.name}</div>
-        <div className={styles.artist}>
-          {track.artists.map((artist) => artist.name).join(", ")}
-        </div>
-      </div>
-    </div>
+    <table className={styles.table}>
+      <tbody>
+        <tr>
+          <td className={styles.index}>{"▸"}</td>
+          <td className={styles.cover_column}>
+            <Image
+              alt="album cover"
+              className={styles.cover}
+              draggable={false}
+              src={track.album?.images[0].url ?? ""}
+              width={200}
+              height={200}
+            ></Image>
+          </td>
+          <td className={styles.absorbing_column}>
+            <div className={styles.title}>{track.name}</div>
+            <div className={styles.artist}>
+              {track.artists.map((artist) => artist.name).join(", ")}
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   );
 }

src/app/track_list.module.css

@@ -1,26 +1,25 @@
-.row {
-  height: 50px;
-  display: grid;
-  grid-template-columns: 25px 50px 1fr 1fr 100px;
-  grid-gap: 20px;
-  margin: 5px;
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  text-align: left;
 }
 
-.header {
-  color: #999999;
-  padding-bottom: 10px;
+.table td {
+  padding: 5px;
 }
 
-.header .row {
-  height: 25px;
+.table th {
+  padding: 5px;
 }
 
-.header hr {
-  height: 1px;
-  border-width: 0;
-  border-color: transparent;
+table .cover_column {
+  width: 50px;
+}
+
+.header {
   color: #999999;
-  background-color: #999999;
+  border-bottom: 1px solid #999999;
 }
 
 .track {
@@ -48,12 +47,8 @@
 
 .title {
   color: black;
-  height: 25px;
-  line-height: 25px;
 }
 
 .artist {
   color: #777777;
-  height: 25px;
-  line-height: 25px;
 }

src/app/track_list.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { DispatchWithoutAction } from "react";
 import * as Spotify from "spotify-api.js";
 import styles from "./track_list.module.css";
@@ -21,59 +22,70 @@ const formatDuration = (milliseconds: number) => {
 
 export function TrackHeader() {
   return (
-    <div className={styles.header}>
-      <div className={styles.row} role={"gridcell"}>
-        <div>{"#"}</div>
-        <div>Titre</div>
-        <div></div>
-        <div>Album</div>
-        <div>Durée</div>
-      </div>
-      <hr />
-    </div>
+    <tr className={styles.header}>
+      <th>{"#"}</th>
+      <th className={styles.cover_column}>Title</th>
+      <th></th>
+      <th>Album</th>
+      <th>Duration</th>
+    </tr>
   );
 }
 
 export function TrackItem({ index, track, onClick }: ItemProps) {
   return (
-    <div
+    <tr
       onClick={onClick}
       className={[
         styles.row,
         onClick == undefined ? styles.queue_track : styles.track,
       ].join(" ")}
       role={"gridcell"}
     >
-      <div className={styles.index}>{`${index + 1}.`}</div>
-      <img
-        alt="album cover"
-        className={styles.cover}
-        draggable={false}
-        src={track.album?.images[0].url}
-      ></img>
-      <div>
+      <td className={styles.index}>{`${index + 1}.`}</td>
+      <td>
+        <Image
+          alt="album cover"
+          className={styles.cover}
+          draggable={false}
+          src={track.album?.images[0].url ?? ""}
+          width={200}
+          height={200}
+        ></Image>
+      </td>
+      <td>
         <div className={styles.title}>{track.name}</div>
         <div className={styles.artist}>
           {track.artists.map((artist) => artist.name).join(", ")}
         </div>
-      </div>
-      <div className={styles.album}>{track.album?.name}</div>
-      <div className={styles.duration}>{formatDuration(track.duration)}</div>
-    </div>
+      </td>
+      <td className={styles.album}>{track.album?.name ?? "-"}</td>
+      <td className={styles.duration}>{formatDuration(track.duration)}</td>
+    </tr>
   );
 }
 
 interface ListProps {
   items: Spotify.Track[];
+  onClick?: DispatchWithoutAction;
 }
 
-export default function TrackList({ items }: ListProps) {
+export default function TrackList({ items, onClick }: ListProps) {
   return (
-    <div>
-      <TrackHeader />
-      {items.map((track, index) => (
-        <TrackItem index={index} key={track.id} track={track} />
-      ))}
-    </div>
+    <table className={styles.table}>
+      <thead>
+        <TrackHeader />
+      </thead>
+      <tbody>
+        {items.map((track, index) => (
+          <TrackItem
+            index={index}
+            key={track.id}
+            track={track}
+            onClick={onClick}
+          />
+        ))}
+      </tbody>
+    </table>
   );
 }