webui: add PlayQueue Component

webui/rockbox/src/Assets/rockbox-icon.svg

···
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Creator: CorelDRAW -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xml:space="preserve"
+   width="195.40291"
+   height="193.33"
+   shape-rendering="geometricPrecision"
+   text-rendering="geometricPrecision"
+   image-rendering="optimizeQuality"
+   viewBox="0 0 5514.7044 5456.2021"
+   id="svg2918"
+   version="1.1"
+   inkscape:version="0.47 r22583"
+   sodipodi:docname="rockboxlogo.svg"
+   style="fill-rule:evenodd"><metadata
+     id="metadata2956"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs2954"><inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 109.84252 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="708.66144 : 109.84252 : 1"
+       inkscape:persp3d-origin="354.33072 : 73.228348 : 1"
+       id="perspective2958" /></defs><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1571"
+     inkscape:window-height="859"
+     id="namedview2952"
+     showgrid="false"
+     showguides="true"
+     inkscape:showpageshadow="true"
+     showborder="true"
+     inkscape:zoom="2.49387"
+     inkscape:cx="157.54221"
+     inkscape:cy="88.164195"
+     inkscape:window-x="158"
+     inkscape:window-y="36"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Ebene_x0020_1"><inkscape:grid
+       type="xygrid"
+       id="grid2986"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" /></sodipodi:namedview><g
+     id="Ebene_x0020_1"
+     transform="translate(-169.74957,-49.383066)"><defs
+       id="defs2921"><linearGradient
+         id="id0"
+         gradientUnits="userSpaceOnUse"
+         x1="17608"
+         y1="4190.54"
+         x2="17715.699"
+         y2="4801.2798"><stop
+           offset="0"
+           stop-color="#FFC100"
+           id="stop2924" /><stop
+           offset="0.6"
+           stop-color="#997200"
+           id="stop2926" /><stop
+           offset="1"
+           stop-color="#332201"
+           id="stop2928" /></linearGradient></defs><path
+       d="m 169.74957,5505.5851 5514.70423,0 0,-5456.21855 -5514.70423,0 0,5456.21855 z"
+       id="path2930"
+       style="fill:#000000" /><path
+       d="m 265.51629,148.81 5314.78741,0 0,5259.14 -5314.78741,0 0,-5259.14"
+       id="path2936"
+       style="fill:#ffc000" /><path
+       d="m 2092.78,651 -1041.74,0 0,2579 c 6.74,18.03 13.42,36.06 20.05,54.13 46.78,-12.8 95.31,-17.99 143.72,-15.41 94.74,5.08 180.1,58.83 225.6,142.07 41.13,75.24 60.7,160.36 56.57,245.99 -1.73,35.79 -11.15,70.79 -27.63,102.61 -40.47,78.17 -102.93,142.77 -179.67,185.85 25.96,88.13 50.77,176.58 74.44,265.35 45.27,169.84 66.54,345.17 63.14,520.92 -0.88,45.32 -10.71,90.04 -28.94,131.55 -18.69,42.53 -51.42,77.36 -92.74,98.65 -29.98,15.44 -64.95,17.98 -96.84,7.06 -31.9,-10.92 -57.97,-34.37 -72.2,-64.94 -16.55,-35.6 -24.66,-74.53 -23.67,-113.79 0.55,-22.08 11.22,-42.69 28.94,-55.9 22.34,-16.66 49.78,-25.02 77.61,-23.69 18.27,0.9 34.64,11.56 42.83,27.93 8.18,16.35 6.88,35.86 -3.37,51.01 -12.63,18.66 -31.16,32.56 -52.62,39.46 l 7.35,16.01 c 3.46,9.08 11.14,15.91 20.59,18.24 9.44,2.34 19.43,-0.09 26.73,-6.51 35.94,-30.62 58.33,-74.2 62.27,-121.25 5.2,-81.09 3.49,-162.46 -5.13,-243.25 -25.27,-172.56 -62.87,-343.11 -112.53,-510.3 -12.75,4.05 -25.68,7.52 -38.74,10.44 -38.23,8.5 -76.87,15.12 -115.76,19.84 l 0,1079.87 697.19,0 0,144.42 69.17,0 0,-144.42 148.54,0 0,-69.17 -148.54,0 0,-1557.18 66.8,0 608.45,1626.35 668.19,0 60.39,154.11 64.4,-25.24 -60.04,-153.21 208.48,0 0,-69.17 -235.58,0 -719.55,-1836.41 C 2743.8,2888.85 2895.75,2477.67 2895.75,1955.48 2895.75,1255.6 2706.28,651 2092.78,651 z m -917.66,3233.37 c -39.71,16.35 -81.45,27.32 -124.08,32.59 l 0,-393.54 c 42.92,119.28 84.14,239.17 123.65,359.62 0.15,0.45 0.29,0.88 0.43,1.33 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 m -65.29,-493.05 c 13.58,-3.73 27.34,-6.89 41.19,-9.47 43.45,-8.08 88.31,2.42 123.65,28.94 32.18,24.15 55.33,58.38 65.82,97.23 23.35,86.59 18.26,178.4 -14.52,261.89 -6.87,17.52 -18.21,32.94 -32.88,44.73 -11.26,9.05 -22.92,17.58 -34.94,25.58 -46.11,-150.72 -95.57,-300.4 -148.32,-448.9 m -58.79,525.64 c -10.92,1.34 -21.89,2.32 -32.88,2.91 -119.79,6.51 -231.2,-61.49 -280.19,-171 -86.95,-194.38 -99.58,-413.88 -35.52,-616.95 22.5,-71.28 45.73,-142.32 69.72,-213.11 6.63,-19.58 13.34,-39.15 20.12,-58.71 64.3,152.74 125.78,306.66 184.38,461.68 -83.5,44.73 -150.88,114.51 -192.66,199.51 -6.9,14.05 -4.2,30.93 6.76,42.11 10.95,11.18 27.77,14.23 41.96,7.62 12.33,-8.89 23.76,-18.93 34.16,-30 42.21,-46.84 92.8,-85.4 149.16,-113.72 11.79,32 23.44,64.03 34.99,96.12 l 0,-293.42 c -55.46,-148.43 -114.22,-295.6 -176.26,-441.4 -10.28,-24.15 -20.77,-48.21 -31.47,-72.15 12.91,-35.44 26.03,-70.82 39.35,-106.1 19.03,-50.37 33.55,-102.3 43.42,-155.23 11.14,-59.85 6.15,-121.6 -14.48,-178.89 -47,-130.55 -137.6,-240.9 -256.51,-312.42 -52.31,-31.47 -112.63,-47 -173.63,-44.73 -51.11,1.91 -92.39,42.35 -95.37,93.4 -2.71,46.33 8.04,92.47 30.91,132.86 21.18,37.38 44,73.81 68.4,109.17 75.28,109.11 140.33,224.93 194.34,345.97 10.61,23.82 21.17,47.67 31.66,71.53 -16.48,45.32 -32.62,90.75 -48.42,136.32 -73.28,211.39 -120.56,430.94 -140.75,653.77 -9.53,105.17 -0.18,211.19 27.63,313.08 38.14,139.76 162.4,238.75 307.16,244.67 64.78,2.65 129.66,0.05 194.02,-7.78 l 0,-95.11 m 947.33,-3450.88 -1077,0 0,-167.8 -69.17,0 0,167.8 -161.09,0 0,69.17 161.09,0 0,770.49 69.17,0 0,-770.49 1077,0 0,-69.17"
+       id="path2940"
+       sodipodi:nodetypes="ccccsssscsssssssssssccsscccsccccccccccccccccccccsccccscccccssssscccssssccsscccccscssssssssscssssccccccccccccccc"
+       style="fill:#000000" /><path
+       d="m 1622.93,5022.77 125.3,0 0,-1557.18 -125.3,0 0,1557.18 m 258.74,-2538.71 c 211.32,0 244.43,-267.93 244.23,-451.8 -0.21,-183.87 -26.91,-383.4 -211.32,-383.4 l -291.65,0 0,1016.08 125.3,0 0,-180.88 133.44,0 z m 0,69.16 -64.27,0 0,111.72 4.44,0 c 470.96,0 470.96,-421.72 470.96,-568.25 l 0,-94.59 c 0,-142.05 -0.96,-534.11 -397.53,-534.11 l -272.34,0 0,111.7 258.74,0 c 134.59,0 315.12,19.14 315.12,470.44 0,451.3 -181.46,499.33 -315.12,503.09 z M 760.15,2540.89 C 705.94,2432.7 647.29,2326.77 584.34,2223.43 c -20.02,-32.86 -38.12,-66.83 -54.21,-101.78 -10.51,-22.78 -16.74,-47.3 -18.42,-72.33 -0.35,-5.4 1.58,-10.7 5.35,-14.58 3.74,-3.89 8.98,-6 14.38,-5.81 26.01,0.88 51.34,8.34 73.67,21.7 95.97,57.41 164.37,151.47 189.42,260.45 7.3,31.79 7.53,64.8 0.66,96.68 -9.68,44.89 -21.37,89.3 -35.04,133.13 l 0,0"
+       id="path2946"
+       sodipodi:nodetypes="ccccccsccccccccccccccccsccsssssssscc"
+       style="fill:#ffc000" /><path
+       sodipodi:nodetypes="ccccccccc"
+       id="path2988"
+       d="m 2753.6812,1681.0201 531.7824,-10.5701 320.38,0 0,855.77 c 599.6612,-295.14 1317.1164,-78.6 1678.7288,499.17 278.7411,549.2036 214.2735,1092.4325 1.25,1497.56 -361.1224,579.18 -1079.5176,791.1 -1679.9788,495.58 l -221.9725,73.41 C 2463.4517,4766.9855 2744.9669,2612.0821 2753.6812,1681.0201 z"
+       style="fill:#000000" /><path
+       d="m 4509.5968,2549.61 c -341.2024,-101.6 -707.9132,-43.84 -1005.0632,158.37 l 0,-952.03 -674.17,0 0,3218.89 674.17,0 0,-129.83 c 297.68,202.55 665.1108,260.16 1006.7632,157.86 1204.1258,-492.1126 1074.3015,-2083.1205 -1.7,-2453.26 z"
+       id="path2942"
+       sodipodi:nodetypes="ccccccccc"
+       style="fill:#b4c3d3" /><path
+       d="m 4815.7872,3773.21 c 0,-330.93 -268.262,-599.2 -599.1844,-599.2 -330.9104,0 -599.1804,268.27 -599.1804,599.2 0,330.92 268.27,599.18 599.1804,599.18 330.9224,0 599.1844,-268.26 599.1844,-599.18 z"
+       id="path2944"
+       sodipodi:nodetypes="csssc"
+       style="fill:#000000" /><path
+       style="fill:#ffc000"
+       sodipodi:nodetypes="ccsssc"
+       id="path3001"
+       d="m 4200.2428,4270.81 32.67,0 c 271.642,-8.92 485.9436,-234.03 481.4736,-505.78 -4.45,-271.75 -226.0216,-489.71 -497.8136,-489.71 -271.7904,0 -493.3504,217.96 -497.8004,489.71 -4.47,271.75 209.82,496.86 481.4704,505.78 z" /><path
+       d="m 4216.6228,4146.9 c -9.03,0 -16.33,-7.32 -16.33,-16.33 0,-9.04 7.3,-16.36 16.33,-16.36 188.3412,0 341.0224,-152.67 341.0224,-341 0,-188.35 -152.6812,-341.02 -341.0224,-341.02 -9.03,0 -16.33,-7.32 -16.33,-16.34 0,-9.03 7.3,-16.35 16.33,-16.35 206.3916,0 373.6928,167.31 373.6928,373.71 0,206.38 -167.3012,373.69 -373.6928,373.69 z m -16.33,123.91 c 10.87,0.53 21.76,0.4 32.67,0 l 0,-45.77 c 246.422,-8.92 440.2332,-213.64 435.7132,-460.16 -4.53,-246.53 -205.7916,-443.98 -452.3732,-443.8 -5.91,-0.12 -10.79,2.99 -13.77,8.07 -2.98,5.11 -3,11.43 -0.02,16.52 2.98,5.1 7.9,8.19 13.81,8.09 151.8412,-0.11 291.892,81.84 366.1528,214.28 74.2704,132.43 71.1504,294.69 -8.1104,424.16 -79.2504,129.49 -222.3616,206.05 -374.0724,200.14 l 0,78.47 z"
+       id="path2948"
+       sodipodi:nodetypes="csssssssccccscsscsscc"
+       style="fill:#000000" /></g></svg>

webui/rockbox/src/Components/ControlBar/CurrentTrack/CurrentTrack.tsx

···
 import Track from "../../Icons/Track";
 import { useTimeFormat } from "../../../Hooks/useFormat";
 import { CurrentTrack as NowPlaying } from "../../../Types/track";
+import _ from "lodash";
 
 export type CurrentTrackProps = {
   nowPlaying?: NowPlaying;
···
             >
               <Time>{formatTime(nowPlaying.progress)}</Time>
               <ArtistAlbum>
-                {nowPlaying.artist}
+                {_.get(nowPlaying, "artist.length", 0) > 75
+                  ? `${nowPlaying.artist?.substring(0, 54)}...`
+                  : nowPlaying.artist}
                 <Separator>-</Separator>
                 <Album to={`/albums/${nowPlaying.albumId}`}>
                   {album.length > 75

webui/rockbox/src/Components/ControlBar/PlayQueue/PlayQueue.stories.tsx

···
+import type { Meta, StoryObj } from "@storybook/react";
+
+import PlayQueue from "./PlayQueue";
+import { fn } from "@storybook/test";
+import { nextTracks, previousTracks } from "./mocks";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Components/PlayQueue",
+  component: PlayQueue,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof PlayQueue>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    previousTracks,
+    nextTracks,
+    onPlayTrackAt: fn(),
+    onRemoveTrackAt: fn(),
+  },
+};

webui/rockbox/src/Components/ControlBar/PlayQueue/PlayQueue.test.tsx

···
+import { render } from "@testing-library/react";
+import { vi } from "vitest";
+import PlayQueue from "./PlayQueue";
+import Providers from "../../../Providers";
+import { MockedProvider } from "@apollo/client/testing";
+import { mocks } from "../../../mocks";
+import { MemoryRouter } from "react-router-dom";
+import { nextTracks, previousTracks } from "./mocks";
+
+describe("PlayQueue", () => {
+  it("should render", () => {
+    const { container } = render(
+      <Providers>
+        <MemoryRouter initialEntries={["/"]}>
+          <MockedProvider mocks={mocks}>
+            <PlayQueue
+              previousTracks={previousTracks}
+              nextTracks={nextTracks}
+              currentTrack={undefined}
+              onPlayTrackAt={vi.fn()}
+              onRemoveTrackAt={vi.fn()}
+            />
+          </MockedProvider>
+        </MemoryRouter>
+      </Providers>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

webui/rockbox/src/Components/ControlBar/PlayQueue/PlayQueue.tsx

···
+import { FC, useState } from "react";
+import { Track } from "../../../Types/track";
+import { Link } from "react-router-dom";
+import { useTheme } from "@emotion/react";
+import TrackIcon from "../../Icons/Track";
+import { CloseOutline } from "@styled-icons/evaicons-outline";
+import { Play } from "@styled-icons/ionicons-sharp";
+import {
+  AlbumCover,
+  AlbumCoverAlt,
+  Artist,
+  Container,
+  Header,
+  List,
+  ListItem,
+  Placeholder,
+  Remove,
+  Switch,
+  Title,
+  TrackDetails,
+  TrackTitle,
+} from "./styles";
+
+export type PlayQueueProps = {
+  previousTracks?: Track[];
+  nextTracks?: Track[];
+  currentTrack?: Track;
+  onPlayTrackAt: (index: number) => void;
+  onRemoveTrackAt: (index: number) => void;
+};
+
+const PlayQueue: FC<PlayQueueProps> = ({
+  previousTracks = [],
+  nextTracks = [],
+  onPlayTrackAt,
+  onRemoveTrackAt,
+}) => {
+  const theme = useTheme();
+  const [active, setActive] = useState("playqueue");
+
+  const onSwitch = () => {
+    if (active === "playqueue") {
+      setActive("history");
+      return;
+    }
+    setActive("playqueue");
+  };
+
+  const _onPlayTrackAt = (index: number) => {
+    if (active === "playqueue") {
+      onPlayTrackAt((previousTracks?.length || 0) + index);
+      return;
+    }
+    onPlayTrackAt(index);
+  };
+
+  const _onRemoveTrack = (index: number) => {
+    if (active === "playqueue") {
+      onRemoveTrackAt((previousTracks?.length || 0) + index);
+      return;
+    }
+    onRemoveTrackAt(index);
+  };
+
+  const tracks = active === "playqueue" ? nextTracks! : previousTracks!;
+  return (
+    <Container>
+      <Header>
+        <Title>{active === "playqueue" ? "Play Queue" : "History"}</Title>
+        <Switch onClick={onSwitch}>
+          {active === "playqueue" ? "History" : "Play Queue"}
+        </Switch>
+      </Header>
+      <List>
+        {tracks.map((track, index) => (
+          <ListItem key={track.id}>
+            {track.cover && (
+              <div className="album-cover-container">
+                <AlbumCover src={track.cover} />
+                <div
+                  onClick={() => _onPlayTrackAt(index)}
+                  className="floating-play"
+                >
+                  <Play size={16} color={track.cover ? "#fff" : "#000"} />
+                </div>
+              </div>
+            )}
+            {!track.cover && (
+              <div className="album-cover-container">
+                <AlbumCoverAlt>
+                  <TrackIcon width={28} height={28} color="#a4a3a3" />
+                </AlbumCoverAlt>
+                <div
+                  onClick={() => _onPlayTrackAt(index)}
+                  className="floating-play"
+                >
+                  <Play size={16} color={track.cover ? "#fff" : "#000"} />
+                </div>
+              </div>
+            )}
+            <TrackDetails>
+              <TrackTitle>{track.title}</TrackTitle>
+              <Link
+                to={`/artists/${track.artistId}`}
+                style={{ textDecoration: "none" }}
+              >
+                <Artist>{track.artist}</Artist>
+              </Link>
+            </TrackDetails>
+            <Remove onClick={() => _onRemoveTrack(index)}>
+              <CloseOutline size={24} color={theme.colors.text} />
+            </Remove>
+          </ListItem>
+        ))}
+        {tracks.length === 0 && active === "playqueue" && (
+          <Placeholder>
+            No upcoming tracks. Add some to your play queue.
+          </Placeholder>
+        )}
+        {tracks.length === 0 && active === "history" && (
+          <Placeholder>
+            No history. Play some tracks to see them here.
+          </Placeholder>
+        )}
+      </List>
+    </Container>
+  );
+};
+
+export default PlayQueue;

webui/rockbox/src/Components/ControlBar/PlayQueue/PlayQueueWithData.tsx

···
+import { FC } from "react";
+import PlayQueue from "./PlayQueue";
+
+const PlayQueueWithData: FC = () => {
+  return (
+    <PlayQueue
+      previousTracks={[]}
+      nextTracks={[]}
+      currentTrack={undefined}
+      onPlayTrackAt={() => {}}
+      onRemoveTrackAt={() => {}}
+    />
+  );
+};
+
+export default PlayQueueWithData;

webui/rockbox/src/Components/ControlBar/PlayQueue/index.tsx

···
+import PlayQueueWithData from "./PlayQueueWithData";
+
+export default PlayQueueWithData;

webui/rockbox/src/Components/ControlBar/PlayQueue/mocks.tsx

···
+/* eslint-disable no-loss-of-precision */
+
+export const nextTracks = [
+  {
+    id: "5ce25a3dadabc01f94130d806294a296",
+    title: "Can I",
+    artist: "Kodak Black",
+    album: "Lil Big Pac",
+    cover:
+      "https://resources.tidal.com/images/f36fa0ef/fe50/4c54/8b97/3c9f4f72f8e8/320x320.jpg",
+    duration: 216083.99963378906,
+    artistId: "c38e31502394622bbdfd3d82f6911eb3",
+    albumId: "229251493",
+  },
+  {
+    id: "c2754b1edfcb8fb4dd34d94f4e42b622",
+    title: "Too Many Years",
+    artist: "Kodak Black, PnB Rock",
+    album: "Lil Big Pac",
+    cover:
+      "https://resources.tidal.com/images/f36fa0ef/fe50/4c54/8b97/3c9f4f72f8e8/320x320.jpg",
+    duration: 196486.99951171875,
+    artistId: "a01003e6ac321328ad1e208bf41206f0",
+    albumId: "229251493",
+  },
+  {
+    id: "89ab06746b363d3295a2bc297339c5be",
+    title: "ALL THE TIME HIGH",
+    artist: "Juicy J featuring Kaash Paige",
+    album: "THE HUSTLE STILL CONTINUES (Deluxe)",
+    cover:
+      "https://resources.tidal.com/images/aeb814c6/7767/421f/a121/46fdc0895c53/320x320.jpg",
+    duration: 120141.99829101562,
+    artistId: "c96c630a2fd2edd0eec175c4f65e0329",
+    albumId: "229251493",
+  },
+];
+
+export const previousTracks = [
+  {
+    id: "93b7e61e27b4e5cab4c6ac4d45a4dc9f",
+    title: "Sobriety Sucks",
+    artist: "Yelawolf",
+    album: "Trunk Muzic Returns (Deluxe Edition)",
+    cover:
+      "https://resources.tidal.com/images/3b8d6b45/b3e4/4f0c/a69d/2f31a1fceadf/320x320.jpg",
+    duration: 255001.00708007812,
+    artistId: "052dcb0741a91da6d26a35600ec46cd9",
+  },
+];

webui/rockbox/src/Components/ControlBar/PlayQueue/styles.tsx

···
+import styled from "@emotion/styled";
+
+export const Container = styled.div`
+  height: calc(100vh - 113px);
+  width: 370px;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const Title = styled.div`
+  font-size: 14px;
+  margin-left: 16px;
+  margin-right: 16px;
+  padding-top: 20px;
+  margin-bottom: 20px;
+  flex: 1;
+`;
+
+export const Switch = styled(Title)`
+  color: #fe099c;
+  flex: initial;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
+
+export const List = styled.div`
+  height: calc(100% - 59.5px);
+  overflow-y: scroll;
+`;
+
+export const ListItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 64px;
+  align-items: center;
+  padding-left: 16px;
+  padding-right: 16px;
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.hover};
+  }
+`;
+
+export const TrackTitle = styled.div`
+  font-size: 14px;
+  font-family: RockfordSansMedium;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+export const Artist = styled.div`
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.secondaryText};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+export const TrackDetails = styled.div`
+  display: flex;
+  min-width: 222px;
+  flex-direction: column;
+  flex: 1;
+`;
+
+export const AlbumCover = styled.img<{ current?: boolean }>`
+  height: 48px;
+  width: 48px;
+  border-radius: 4px;
+  margin-right: 18px;
+  cursor: pointer;
+  ${({ current }) => `opacity: ${current ? 0.4 : 1};`}
+`;
+
+export const AlbumCoverAlt = styled.div<{ current?: boolean }>`
+  height: 48px;
+  width: 48px;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: ${(props) => props.theme.colors.cover};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 18px;
+  ${({ current }) => `opacity: ${current ? 0 : 1};`}
+`;
+
+export const Remove = styled.button`
+  background-color: transparent;
+  cursor: pointer;
+  border: none;
+`;
+
+export const Placeholder = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-size: 14px;
+`;

webui/rockbox/src/Components/Sidebar/Sidebar.tsx

···
 import { HardDrive } from "@styled-icons/feather";
 import Artist from "../Icons/Artist";
 import Track from "../Icons/Track";
+import RockboxLogo from "../../Assets/rockbox-icon.svg";
 
 export type SidebarProps = {
   active: string;
···
 const Sidebar: FC<SidebarProps> = ({ active }) => {
   return (
     <SidebarContainer>
+      <img
+        src={RockboxLogo}
+        alt="Rockbox"
+        style={{ width: 40, marginBottom: 20, marginLeft: 12 }}
+      />
       <MenuItem
         color={active === "albums" ? "#fe099c" : "initial"}
         to="/albums"

webui/rockbox/src/Types/track.ts

···
   title: string;
   artist: string;
   album?: string;
-  time: string;
+  time?: string;
+  duration?: number;
   albumArt?: string;
   cover?: string;
   albumId?: string;