Add interface package. Start adding auth stuff for refreshing tokens.

app/src/app.scss

@@ -0,0 +1,24 @@
+:root {
+    font-family: sans-serif;
+}
+
+.app-wrapper {
+    width: 100vw;
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+}
+
+.playlist-list {
+
+}
+
+.playlist {
+    font-size: 1.125rem;
+    margin: 8px 0;
+    padding: 4px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: black;
+    border-radius: 8px;
+}

app/src/index.tsx

@@ -0,0 +1,75 @@
+import { render } from "preact";
+import { Route } from "wouter-preact";
+import "./app.scss";
+
+export const App = () => {
+    return (
+        <section class={"app-wrapper"}>
+            <div class={"app"}>
+                <h1>Playlists</h1>
+                <Route path={"/playlists"} component={ActivePlaylists} />
+                <Route path={"/playlists/:id"} component={ViewPlaylist} />
+            </div>
+        </section>
+    );
+};
+
+type TrackedPlaylist = {
+    rule_id: number;
+    playlist_id: string | null;
+    playlist_name: string | null;
+    playlist_size: number;
+    tracking_user: string | null;
+    tracking_type: string | null;
+    reduce_duplication_on: string | null;
+};
+
+const ActivePlaylists = () => {
+    const playlists: TrackedPlaylist[] = [
+        {
+            rule_id: 1,
+            playlist_id: "aaaaaaaa-bbbbbbbbbbbbbbbb-cccccccc",
+            playlist_name: "Playlist 1",
+            playlist_size: 25,
+            tracking_user: "jellywx",
+            tracking_type: "week",
+            reduce_duplication_on: null,
+        },
+        {
+            rule_id: 2,
+            playlist_id: "aaaaaaaa-bbbbbbbbbbbbbbbb-cccccccc",
+            playlist_name: "Playlist 2",
+            playlist_size: 25,
+            tracking_user: "jellywx",
+            tracking_type: "week",
+            reduce_duplication_on: null,
+        },
+        {
+            rule_id: 3,
+            playlist_id: "aaaaaaaa-bbbbbbbbbbbbbbbb-cccccccc",
+            playlist_name: "Playlist 3",
+            playlist_size: 25,
+            tracking_user: "jellywx",
+            tracking_type: "week",
+            reduce_duplication_on: null,
+        },
+    ];
+
+    return (
+        <div class={"playlist-list"}>
+            {playlists.map((p) => (
+                <div class={"playlist"}>{p.playlist_name}</div>
+            ))}
+        </div>
+    );
+};
+
+const ViewPlaylist = ({ params }) => {
+    return (
+        <>
+            <div>Subpage {params.id}</div>
+        </>
+    );
+};
+
+render(<App />, document.getElementById("app"));