From b4e7cc3561cee11dfcfe38a4a025d63d1c1a1e76 Mon Sep 17 00:00:00 2001
From: Felipe Trost <felipe.trost@gmail.com>
Date: Thu, 17 Apr 2025 22:06:09 +0200
Subject: [PATCH 1/2] display group name

---
 src/components/Group.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index 3831e3a..c56f10a 100644
--- a/src/components/Group.tsx
+++ b/src/components/Group.tsx
@@ -252,7 +252,7 @@ export default function Group(props: GroupProps) {
             justifyContent="space-between"
             alignItems="center"
           >
-            <Stack direction="row" justifyContent="center" alignItems="center" >
+            <Stack direction="row" justifyContent="center" alignItems="center" gap="1rem">
               <IconButton aria-label="Options" onClick={(event) => { handleSettingsClicked(event); }}>
                 <SettingsIcon />
               </IconButton>
@@ -272,6 +272,10 @@ export default function Group(props: GroupProps) {
                   {props.server.streams.map(stream => <MenuItem key={stream.id} value={stream.id}>{stream.id}</MenuItem>)}
                 </Select>
               </FormControl>
+
+              <Typography noWrap variant="subtitle1">
+                {props.group.name}
+              </Typography>
             </Stack>
 
             {stream?.properties.canControl &&

From a6d3741e94eec9556663439b5b26bd9991be67e3 Mon Sep 17 00:00:00 2001
From: Felipe Trost <felipe.trost@gmail.com>
Date: Thu, 17 Apr 2025 22:06:21 +0200
Subject: [PATCH 2/2] change group name in settings

---
 src/components/Group.tsx | 11 +++++++++++
 src/snapcontrol.ts       |  7 +++++++
 2 files changed, 18 insertions(+)

diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index c56f10a..840fe55 100644
--- a/src/components/Group.tsx
+++ b/src/components/Group.tsx
@@ -32,6 +32,7 @@ export default function Group(props: GroupProps) {
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [clients, setClients] = useState<GroupClient[]>([]);
   const [streamId, setStreamId] = useState("");
+  const [groupName, setGroupName] = useState("");
   const [deletedClients, setDeletedClients] = useState<Snapcast.Client[]>([]);
   const [volume, setVolume] = useState(0);
   const groupVolumeChange = useRef<GroupVolumeChange>({ volumeEntered: true, client_volumes: new Map<string, number>(), group_volume: 0 });
@@ -66,6 +67,7 @@ export default function Group(props: GroupProps) {
     setSettingsOpen(true);
     setClients(clients);
     setStreamId(props.group.stream_id)
+    setGroupName(props.group.name);
   }
 
   function handleSettingsClose(apply: boolean) {
@@ -89,6 +91,9 @@ export default function Group(props: GroupProps) {
 
       if (props.group.stream_id !== streamId)
         props.snapcontrol.setStream(props.group.id, streamId);
+
+      if(props.group.name !== groupName)
+        props.snapcontrol.setGroupName(props.group.id, groupName);
     }
     setSettingsOpen(false);
   }
@@ -334,6 +339,12 @@ export default function Group(props: GroupProps) {
       <Dialog fullWidth open={settingsOpen} onClose={() => { handleSettingsClose(false) }}>
         <DialogTitle>Group settings</DialogTitle>
         <DialogContent>
+          <Divider textAlign="left">Name</Divider>
+          <TextField
+            margin="dense" id="group-name" fullWidth variant="standard"
+            value={groupName}
+            onChange={(event) => setGroupName(event.target.value) }
+          />
           <Divider textAlign="left">Stream</Divider>
           <TextField
             // label="Stream" 
diff --git a/src/snapcontrol.ts b/src/snapcontrol.ts
index fea3ff6..9383c1d 100644
--- a/src/snapcontrol.ts
+++ b/src/snapcontrol.ts
@@ -338,6 +338,9 @@ class SnapControl {
                 stream = this.getStream(notification.params.id);
                 stream.properties.fromJson(notification.params.properties);
                 return true;
+            case 'Group.OnNameChanged':
+                this.getGroup(notification.params.id).name = notification.params.name;
+                return true;
             default:
                 return false;
         }
@@ -388,6 +391,10 @@ class SnapControl {
         return this.getStream(group.stream_id);
     }
 
+    public setGroupName(group_id: string, name: string) {
+        this.sendRequest('Group.SetName', { id: group_id, name: name });
+    }
+
     // public getMyStreamId(): string {
     //     try {
     //         let group: Group = this.getGroupFromClient(SnapStream.getClientId());