Add initial group settings

frontend/src/App.tsx

@@ -16,6 +16,7 @@ import Groups from "./pages/Groups/Groups";
 import Button from "./components/Button/Button";
 import DeviceSettings from "./components/DeviceSettings/DeviceSettings";
 import { type Device, type Group } from "../../types/zigbee_types";
+import GroupSettings from "./components/GroupSettings/GroupSettings";
 
 const Wrapper = styled.div`
   padding: 2em;
@@ -93,6 +94,27 @@ function App() {
           <Groups groups={groups} />
         </Route>
 
+        <Route path={"/groups/:groupId"}>
+          {(params) => {
+            if (!groups) return <></>;
+
+            const group: Group = groups.find(
+              (group: Group) =>
+                group.id === parseInt(decodeURIComponent(params.groupId)),
+            );
+
+            if (!group)
+              return (
+                <StyledText>
+                  Group with ID <code>{params.groupId}</code> does not exist on
+                  this network.
+                </StyledText>
+              );
+
+            return <GroupSettings group={group} />;
+          }}
+        </Route>
+
         <Route path={"/settings"}>
           <Settings bridgeState={{}} />
         </Route>

frontend/src/components/GroupCard/GroupCard.tsx

@@ -20,7 +20,7 @@ const Card = styled.div`
 function GroupCard(props: { group: Group; onClick: Function }) {
   return (
     <Card onClick={props.onClick}>
-      <StyledHeader>{props.group.friendly_name}</StyledHeader>
+      <StyledHeader>📂 {props.group.friendly_name}</StyledHeader>
       <StyledText>{`${props.group.members.length} devices`}</StyledText>
     </Card>
   );

frontend/src/components/GroupList/GroupList.tsx

@@ -10,7 +10,7 @@ function GroupList(props: { groups: Group[]; onClick?: Function }) {
     <div>
       {props.groups.map((group: Group) => (
         <Link href={`/groups/${group.id}`} key={group.id}>
-          <GroupCard group={group} onClick={() => props.onClick} />
+          <GroupCard group={group} onClick={props.onClick} />
         </Link>
       ))}
     </div>

frontend/src/components/GroupSettings/GroupSettings.tsx

@@ -0,0 +1,49 @@
+// SPDX-FileCopyrightText: © 2024 Amber Cronin <software@amber.vision>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { useState, useEffect } from "react";
+
+import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";
+import EditableText from "../EditableText/EditableText";
+
+const backend = import.meta.env.VITE_API_URL ?? "";
+
+function GroupSettings(props) {
+  const [groupSettingsState, setGroupSettingsState] = useState();
+  const [groupFriendlyNameState, setGroupFriendlyNameState] = useState(
+    props.group.friendly_name,
+  );
+
+  useEffect(() => {
+    fetch(`${backend}/api/groups/${props.group.id}/state`)
+      .then((res) => res.json())
+      .then((data) => setGroupSettingsState(data.data));
+  }, []);
+
+  if (!groupSettingsState) return <LoadingSpinner />;
+
+  return (
+    <>
+      <div>
+        <EditableText
+          text={groupFriendlyNameState}
+          fontSize={"2em"}
+          onChange={(event) => {
+            const newFriendlyName = event.target.value;
+            setGroupFriendlyNameState(newFriendlyName);
+          }}
+          // onEditFinish={() => {
+          //   setGroupFriendlyName(
+          //     props.group.friendly_name,
+          //     groupFriendlyNameState,
+          //   );
+          // }}
+        />
+      </div>
+
+      <div>"todo"</div>
+    </>
+  );
+}
+
+export default GroupSettings;

frontend/src/pages/Groups/Groups.tsx

@@ -3,6 +3,7 @@
 
 import LoadingSpinner from "../../components/LoadingSpinner/LoadingSpinner";
 import GroupList from "../../components/GroupList/GroupList";
+import GroupSettings from "../../components/GroupSettings/GroupSettings";
 
 function Groups(props) {
   const selectedGroup = props.selectedGroup;