first style changes

src/components/StratItem.module.css

@@ -0,0 +1,22 @@
+.layout {
+    display: grid;
+    width: 100%;
+
+}
+
+.title {
+    font-weight: bold;
+    grid-column: 1;
+}
+
+.description {
+    grid-column: 2;
+}
+
+.stratType {
+    grid-column: 3;
+}
+
+.deleteButton {
+    grid-column: 4;
+}

src/components/StratItem.tsx

@@ -41,17 +41,13 @@ const StratItem: Component<StratItemProps> = (props) => {
 	};
 
 	return (
-		<div class={styles.member}>
+		<div class={styles.layout}>
-			<div class={styles.memberDetails}>
+			<span class={styles.title} innerText={props.strat.title} onclick={() => navigate('/group/' + props.group.id + '/strat/' + props.strat.id)} />
-				<div class={styles.memberName} onclick={() => navigate('/group/' + props.group.id + '/strat/' + props.strat.id)}>
+			<span class={styles.description} innerText={props.strat.description} />
-					<span innerText={props.strat.title} />
+			<span class={styles.stratType} innerText={props.strat.stratType} />
-					<span innerText={props.strat.description} />
+			<div class={styles.deleteButton}>
-					<span innerText={props.strat.stratType} />
-				</div>
-				<div>
 				<button onClick={deleteMember}><BsTrash /></button>
 			</div>
-			</div>
 		</div >
 	)
 }

src/pages/GroupPage.module.css

@@ -0,0 +1,13 @@
+.layout {
+    display: grid;
+    column-gap: 50px;
+}
+
+.strats {
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+
+.members {
+    grid-column: 4;
+}

src/pages/GroupPage.tsx

@@ -1,18 +1,13 @@
 import { useNavigate, useParams } from "@solidjs/router";
 import { Component, Show, createEffect, createSignal, onMount } from "solid-js";
 
-import styles from './GroupPage.module.css'
+import styles from './GroupPage.module.css';
 import { Group, Map, Profile, Strat, User, api } from "../api";
 import { showDialog, showInputDialog, showMessageDialog } from "../state";
-import { _arrayBufferToBase64, addMap, addMember, addProfile, addStratType, errorToString, normalize } from "../util";
+import { _arrayBufferToBase64, addMap, addMember, addStratType, errorToString, normalize } from "../util";
 import { BsCheck2, BsPencil, BsTrash } from "solid-icons/bs";
-import { Collapse } from "solid-collapse";
 import MemberItem from "../components/MemberItem";
-import MapItem from "../components/MapItem";
 import StratItem from "../components/StratItem";
-import StratTypeItem from "../components/StratTypeItem";
-import ProfileItem from "../components/ProfileItem";
-import { UploadFile, createFileUploader } from "@solid-primitives/upload";
 
 const GroupPage: Component = () => {
 	const params = useParams();
@@ -29,6 +24,12 @@ const GroupPage: Component = () => {
 	const [profilesIsExpanded, setProfilesIsExpanded] = createSignal(false);
 	const [stratTypesIsExpanded, setStratTypesIsExpanded] = createSignal(false);
 
+	const [filters, setFilters] = createSignal({
+		name: "",
+		Map: "All",
+		stratType: "All"
+	});
+
 	onMount(async () => {
 		try {
 			setGroup(await api().getGroup(params.id));
@@ -91,8 +92,9 @@ const GroupPage: Component = () => {
 				name: 'description'
 			}],
 			onDismiss: async () => {
-				const strat = await api().addStrat(group().id, { title: title(), description: description(), stratType: stratType() });
+				const newGroup = await api().addStrat(group().id, { title: title(), description: description(), stratType: stratType() });
-				navigate('/group/' + group().id + '/strat/' + strat.id);
+				const strat = newGroup.strats.find(s => s.description === description() && s.title === title() && s.stratType === stratType());
+				navigate('/group/' + group().id + '/strat/' + strat!.id);
 			},
 			content: <select name="stratType" id="stratType">
 				{group().stratTypes.map(p => <option value={p} onclick={() => setStratType(p)}>{p}</option>)}
@@ -132,6 +134,21 @@ const GroupPage: Component = () => {
 		setGroup({ ...group(), profiles: [...group().profiles.filter(p => p.id !== profile.id)] });
 	};
 
+	const handleFilters = (filter: string, val: any) => {
+		if (val === "Add") {
+			switch (filter) {
+				case "Map":
+					addMap(group(), (g) => setGroup(g));
+					break;
+				case "StratType":
+					addStratType(group(), (g) => setGroup(g));
+				default:
+					break;
+			}
+		}
+		setFilters({ ...filters(), [filter]: val });
+	}
+
 	return (
 		<>
 			<Show when={!loading()} fallback={<div>Loading...</div>}>
@@ -144,46 +161,30 @@ const GroupPage: Component = () => {
 					<button class={styles.editButton} onClick={toggleEdit}>{editing() ? <BsCheck2 /> : <BsPencil />}</button>
 				</div>
 				<hr />
-				<div>
+				<div class={styles.layout}>
-					<button onClick={() => setMembersIsExpanded(!membersIsExpanded())}>Members</button>
-					<button class={styles.addMemberButton} onClick={async () => addMember(group(), (g) => setGroup(g))}>+</button>
-					<Collapse value={membersIsExpanded()} class={styles.members}>
-						<div class={styles.groupMembers}>
-							{group().members?.map(m => <MemberItem group={group()} member={m} onDelete={onDeleteMember} />)}
-						</div>
-					</Collapse>
-					<br />
-					<button onClick={() => setStratsIsExpanded(!stratsIsExpanded())}>strats</button>
-					<button class={styles.addStratButton} onClick={() => createStrat()}>+</button>
-					<Collapse value={stratsIsExpanded()} class={styles.strats}>
 					<div class={styles.strats}>
-							{group().strats?.map(s => <StratItem group={group()} strat={s} onDelete={onDeleteStrat} />)}
+						<h3>Strats <button class={styles.addStratButton} onClick={() => createStrat()}>Add</button></h3>
+						<div class={styles.filter}>
+							Filter <br />
+							<input name="name" type="text" placeholder="Strat Name"></input>
+							<select name="Map" onInput={e => handleFilters(e.target.name, e.target.value)}>
+								<option value={"All"} >Map</option>
+								{group().maps.map(m => <option value={m.id}>{m.name}</option>)}
+								<option value={"Add"} >Add</option>
+							</select>
+							<select name="StratType" onInput={e => handleFilters(e.target.name, e.target.value)}>
+								<option value={"All"} >Strat Type</option>
+								{group().stratTypes.map(s => <option value={s}>{s}</option>)}
+								<option value={"Add"} >Add</option>
+							</select>
+
 						</div>
-					</Collapse>
+						{group().strats.map(s => <StratItem group={group()} onDelete={onDeleteStrat} strat={s} />)}
-					<br />
-					<button onClick={() => setMapsIsExpanded(!mapsIsExpanded())}>maps</button>
-					<button class={styles.addMapButton} onClick={async () => addMap(group(), (g) => setGroup(g))}>+</button>
-					<Collapse value={mapsIsExpanded()} class={styles.maps}>
-						<div class={styles.maps}>
-							{group().maps?.map(m => <MapItem group={group()} map={m} onDelete={onDeleteMap} />)}
 					</div>
-					</Collapse>
+					<div class={styles.members}>
-					<br />
+						<h3>Member <button class={styles.addMemberButton} onClick={async () => addMember(group(), (g) => setGroup(g))}>Add</button></h3>
-					<button onClick={() => setStratTypesIsExpanded(!stratTypesIsExpanded())}>strat types</button>
+						{group().members.map(m => <MemberItem group={group()} member={m} onDelete={onDeleteMember} />)}
-					<button class={styles.addMemberButton} onClick={async () => addStratType(group(), (g) => setGroup(g))}>+</button>
-					<Collapse value={stratTypesIsExpanded()} class={styles.stratTypes}>
-						<div class={styles.stratTypes}>
-							{group().stratTypes?.map(s => <StratTypeItem group={group()} stratType={s} onDelete={onDeleteStratType} />)}
 					</div>
-					</Collapse>
-					<br />
-					<button onClick={() => setProfilesIsExpanded(!profilesIsExpanded())}>profiles</button>
-					<button class={styles.addMemberButton} onClick={async () => addProfile(group(), (g) => setGroup(g))}>+</button>
-					<Collapse value={profilesIsExpanded()} class={styles.profiles}>
-						<div class={styles.profiles}>
-							{group().profiles?.map(p => <ProfileItem group={group()} profile={p} onDelete={onDeleteProfile} />)}
-						</div>
-					</Collapse>
 				</div>
 			</Show>
 		</>

src/pages/Groups.tsx

@@ -2,7 +2,7 @@ import { Component, For, Show, createSignal } from "solid-js";
 
 import GroupItem from '../components/GroupItem'
 
-import styles from './Groups.module.css'
+import styles from './Groups.module.css';
 import { useNavigate } from "@solidjs/router";
 import { Group, api } from "../api";
 import { localState, showMessageDialog } from "../state";