Start working on the dialog to make a new table

public/styles/Apps/StatsSidebar.css

@@ -1,5 +1,8 @@
 .stats-sidebar {
-	display: flex;
+
+	&.active {
+		display: flex;
+	}
 	flex-direction: column;
 	gap: 2rem;
 	padding: 1rem;

public/styles/Apps/TableCreator.css

@@ -0,0 +1,23 @@
+.TableCreator {
+	.window-content {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.group {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+		gap: 0.5rem;
+	}
+
+	label {
+		color: var(--color-form-label);
+		font-weight: bold;
+		line-height: var(--input-height);
+	}
+
+	button {
+		height: calc(1.25 * var(--input-height));
+	}
+}

public/styles/main.css

@@ -3,4 +3,5 @@
 @import url("./elements/custom-multi-select.css") layer(elements);
 
 @import url("./Apps/StatsViewer.css") layer(apps);
-@import url("./Apps/StatsSidebar.css") layer(apps);
+@import url("./Apps/StatsSidebar.css") layer(apps);
+@import url("./Apps/TableCreator.css") layer(apps);

public/templates/Apps/StatSidebar/main.hbs

@@ -26,6 +26,12 @@
 	>
 		View Statistics
 	</button>
+	<button
+		type="button"
+		data-action="createTable"
+	>
+		Create New Table
+	</button>
 	<button type="button">Manage Tables</button>
 	<button type="button">Manage Rows</button>
 </section>

public/templates/Apps/TableCreator.hbs

@@ -0,0 +1,30 @@
+<div class="group">
+	<label for="{{meta.idp}}-name">
+		Name
+	</label>
+	<input
+		id="{{meta.idp}}-name"
+		type="text"
+		value="{{ name }}"
+		data-bind="_name"
+	>
+</div>
+
+<div class="group">
+	<label for="{{meta.idp}}-type">
+		Type
+	</label>
+	<select
+		id="{{meta.idp}}-type"
+		data-bind="_type"
+	>
+		{{ st-options type types }}
+	</select>
+</div>
+
+<button
+	type="button"
+	data-action="createTable"
+>
+	Create Table
+</button>