add queue tracks on drawer

src/apps/app/components/now-playing-controller/now-playing-controller.component.tsx

@@ -17,7 +17,7 @@ export const NowPlayingController: Component = () => {
 	const navigate = useNavigate();
 
 	return (
-		<div class="flex justify-center h-full w-full">
+		<div class="relative flex justify-center w-full h-full">
 			<Show when={queue.data.nowPlaying} keyed>
 				{(track) => (
 					<img
@@ -107,7 +107,7 @@ export const NowPlayingController: Component = () => {
 					/>
 				</div>
 
-				<div class="h-full min-h-4 max-h-8 shrink-[3]" />
+				<div class="h-full min-h-4 max-h-8 shrink-[2]" />
 
 				<QueueActions iconSize="lg" extraClass="flex-items-center justify-between" extraButtonClass="p-4" />
 

src/apps/app/layout/main-md/components/now-playing-drawer/now-playing-drawer.component.tsx

@@ -1,4 +1,6 @@
-import { Button, Container, resizable } from "@common";
+import { QueueTrackList } from "@app/views/queue/components/queue-tabs/components";
+import { Button, Container, Divider, Text, resizable } from "@common";
+import { useQueue } from "@queue";
 import { useSettings } from "@settings";
 import { Show, type Component } from "solid-js";
 import { MinimizedNowPlayingController, NowPlayingController } from "../../../../components";
@@ -9,6 +11,7 @@ export const NowPlayingDrawer: Component = () => {
 	let dragHandler!: HTMLDivElement;
 	const breakpoint = 128;
 	const { settings, setSettings } = useSettings();
+	const queue = useQueue();
 
 	return (
 		<div
@@ -28,9 +31,8 @@ export const NowPlayingDrawer: Component = () => {
 				size="full"
 				padless
 				centered
-				extraClass="w-full relative flex-row-center shrink-0 h-full"
+				extraClass="w-full h-full relative shrink-0"
 				extraClassList={{
-					"p-8 pt-4": settings["app.player.size"] > breakpoint,
 					"pb-2 px-1.5 bg-black": settings["app.player.size"] <= breakpoint,
 				}}
 			>
@@ -42,18 +44,29 @@ export const NowPlayingDrawer: Component = () => {
 					}}
 				/>
 
-				<Show when={settings["app.player.size"] <= breakpoint} fallback={<NowPlayingController />}>
-					<MinimizedNowPlayingController />
-				</Show>
+				<div class="flex flex-col h-full w-full">
+					<Show when={settings["app.player.size"] > breakpoint} fallback={<MinimizedNowPlayingController />}>
+						<div class="grow w-full px-8 pt-4 overflow-y-auto thin-scrollbar">
+							<NowPlayingController />
+							<Show when={!queue.data.empty && queue.data.tracks.length}>
+								<Divider extraClass="my-8" dark />
+								<div class="mx-auto max-w-lg space-y-2 h-full min-h-full">
+									<Text.H2 class="text-center">Queue</Text.H2>
+									<QueueTrackList />
+								</div>
+							</Show>
+						</div>
+					</Show>
 
-				<Button
-					flat
-					title="Minimize"
-					icon="chevronDown"
-					iconSize="sm"
-					onClick={() => setSettings("app.player.minimized", true)}
-					class="justify-center py-1 absolute bottom-0 left-0 w-full text-neutral-500 border-t border-t-neutral-850"
-				/>
+					<Button
+						flat
+						title="Minimize"
+						icon="chevronDown"
+						iconSize="sm"
+						onClick={() => setSettings("app.player.minimized", true)}
+						class="justify-center py-1 w-full text-neutral-500 border-t border-t-neutral-850"
+					/>
+				</div>
 			</Container>
 		</div>
 	);

src/index.css

@@ -74,6 +74,10 @@ input:focus {
 	@apply bg-neutral-700;
 }
 
+.thin-scrollbar::-webkit-scrollbar {
+	@apply w-1 h-1;
+}
+
 .flex-row-center {
 	@apply flex flex-row items-center;
 }