init

src/App.css

@@ -0,0 +1,7 @@
+.logo.vite:hover {
+  filter: drop-shadow(0 0 2em #747bff);
+}
+
+.logo.preact:hover {
+  filter: drop-shadow(0 0 2em #673ab8);
+}

src/App.tsx

@@ -0,0 +1,19 @@
+import Sidebar from "./components/sidebar";
+
+import { cn } from "./lib/utils";
+
+import { dragging } from "./store";
+
+export default function App() {
+	return (
+		<div
+			className={cn("select-none", {
+				"cursor-col-resize": dragging.value.isDragging,
+			})}
+		>
+			<div className="grid grid-cols-[max-content,1fr]">
+				<Sidebar />
+			</div>
+		</div>
+	);
+}

src/assets/preact.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"/><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"/><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"/><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"/></svg>

src/components/sidebar.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useEffect } from "preact/hooks";
+
+import { cn } from "@/lib/utils";
+import { dragging } from "@/store";
+
+const { isDragging } = dragging.value;
+
+export default function Sidebar() {
+	return (
+		<aside
+			className="relative flex h-[100dvh] w-full bg-secondary px-2 py-8"
+			style={{ width: dragging.value.width }}
+		>
+			<div className=""></div>
+			<nav className="">
+				<a href="#">Lol</a>
+			</nav>
+			<Divider />
+		</aside>
+	);
+}
+
+function Divider() {
+	function onMouseDown() {
+		dragging.value = {
+			...dragging.value,
+			isDragging: true,
+		};
+	}
+
+	function onMouseUp() {
+		dragging.value = {
+			...dragging.value,
+			isDragging: false,
+		};
+	}
+
+	const handler = useCallback(
+		(event: MouseEvent) => {
+			if (dragging.value.isDragging) {
+				const width = Math.min(Math.max(200, event.clientX), 320);
+				dragging.value = {
+					...dragging.value,
+					width,
+				};
+				localStorage.setItem("sidebar-width", width.toString());
+			}
+		},
+		[dragging.value.isDragging],
+	);
+
+	useEffect(() => {
+		window.addEventListener("mousemove", handler);
+		window.addEventListener("mouseup", onMouseUp);
+
+		return () => {
+			window.removeEventListener("mousemove", handler);
+			window.removeEventListener("mouseup", onMouseUp);
+		};
+	}, [isDragging]);
+
+	return (
+		<div
+			className={cn(
+				"group absolute -right-2 bottom-0 top-0 px-2 hover:cursor-col-resize",
+				{},
+			)}
+			onMouseDown={onMouseDown}
+			onMouseUp={onMouseUp}
+		>
+			<div className="h-full w-[1px] bg-border transition-colors group-hover:scale-x-[2] group-hover:bg-accent/50"></div>
+		</div>
+	);
+}

src/lib/playlists.ts

@@ -0,0 +1,8 @@
+interface Playlist {
+	id: string;
+	name: string;
+}
+
+export function getPlaylists(): Playlist[] {
+	return [];
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

src/main.tsx

@@ -0,0 +1,13 @@
+import { invoke } from "@tauri-apps/api/tauri";
+import { render } from "preact";
+
+import App from "./App";
+
+import "./styles.css";
+
+render(<App />, document.getElementById("root")!);
+
+// Hide splashscreen when loaded.
+document.addEventListener("DOMContentLoaded", () =>
+	invoke("close_splashscreen"),
+);

src/store/index.ts

@@ -0,0 +1,6 @@
+import { signal } from "@preact/signals";
+
+export const dragging = signal({
+	isDragging: false,
+	width: Number(localStorage.getItem("sidebar-width") ?? 256),
+});

src/styles.css

@@ -0,0 +1,35 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Rubik";
+  font-weight: 400;
+  src: url("./assets/fonts/Rubik-Regular.woff2");
+}
+@font-face {
+  font-family: "Rubik";
+  font-weight: 700;
+  src: url("./assets/fonts/Rubik-Bold.woff2");
+}
+@font-face {
+  font-family: "Rubik";
+  font-weight: 900;
+  src: url("./assets/fonts/Rubik-Black.woff2");
+}
+
+body {
+  font-family: "Rubik";
+  background-color: #131317;
+  color: #eeeeff;
+  overflow: hidden;
+  border-radius: 10px;
+}
+
+* {
+  @apply border-border;
+}
+
+body {
+  @apply select-none bg-primary text-primary;
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />