timeline rendering

client/assets/styling/player.scss

@@ -19,4 +19,44 @@
 #timeline {
 	grid-area: Timeline;
 	border: 1px solid $lightBackground;
+
+	#tracklist {
+		display: flex;
+		flex-direction: column;
+		overflow: auto;
+		width: 100%;
+		gap: 1px;
+	}
+	.track {
+		display: block;
+		position: relative;
+		padding: 2px 0;
+		height: 30px;
+		background-color: $lightBackground;
+		/* overflow: hidden; */
+		margin-left: 100px;
+
+		.label {
+			width: 100px;
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			position: absolute;
+			left: -100px;
+			top: 0px;
+			background-color: $featureBackround;
+		}
+	}
+
+	.clip {
+		position: absolute;
+		display: block;
+		height: 30px;
+		top: auto;
+		flex-grow: 0;
+		flex-shrink: 0;
+		background-color: $mainAccentDark;
+		overflow: hidden;
+	}
 }