Prompt: Could you refactor this so that all of the protocols are in a separate structure that's iterated over to create the <ListItems> and stuff?

ai.diff

diff --git a/js/app/components/player/controls.tsx b/js/app/components/player/controls.tsx
index d89aea0..24aae03 100644
--- a/js/app/components/player/controls.tsx
+++ b/js/app/components/player/controls.tsx
@@ -267,6 +267,34 @@ function LiveBubbleText() {
 
 function GearMenu(props: PlayerProps) {
   const [menu, setMenu] = useState("root");
+
+  const protocols = [
+    {
+      id: PROTOCOL_HLS,
+      title: "HLS",
+      subtitle: "HTTP Live Streaming",
+      icon: Star,
+    },
+    {
+      id: PROTOCOL_PROGRESSIVE_MP4,
+      title: "Progressive MP4",
+      subtitle: "MP4 but loooong",
+      icon: Shell,
+    },
+    {
+      id: PROTOCOL_PROGRESSIVE_WEBM,
+      title: "Progressive WebM",
+      subtitle: "WebM but loooong",
+      icon: Squirrel,
+    },
+    {
+      id: PROTOCOL_WEBRTC,
+      title: "WebRTC",
+      subtitle: "Lowest latency, probably",
+      icon: Antenna,
+    }
+  ];
+
   return (
     <YGroup alignSelf="center" bordered width={240} size="$5" borderRadius="$0">
       {menu == "root" && (
@@ -307,63 +335,22 @@ function GearMenu(props: PlayerProps) {
             />
           </YGroup.Item>
           <Separator />
-          <YGroup.Item>
-            <ListItem
-              hoverTheme
-              pressTheme
-              title="HLS"
-              subTitle="HTTP Live Streaming"
-              icon={Star}
-              iconAfter={props.protocol === PROTOCOL_HLS ? CheckCircle : Circle}
-              onPress={() => props.setProtocol(PROTOCOL_HLS)}
-            />
-          </YGroup.Item>
-          <Separator />
-          <YGroup.Item>
-            <ListItem
-              hoverTheme
-              pressTheme
-              title="Progressive MP4"
-              subTitle="MP4 but loooong"
-              icon={Shell}
-              iconAfter={
-                props.protocol === PROTOCOL_PROGRESSIVE_MP4
-                  ? CheckCircle
-                  : Circle
-              }
-              onPress={() => props.setProtocol(PROTOCOL_PROGRESSIVE_MP4)}
-            />
-          </YGroup.Item>
-          <Separator />
-          <YGroup.Item>
-            <ListItem
-              hoverTheme
-              pressTheme
-              title="Progressive WebM"
-              subTitle="WebM but loooong"
-              icon={Squirrel}
-              iconAfter={
-                props.protocol === PROTOCOL_PROGRESSIVE_WEBM
-                  ? CheckCircle
-                  : Circle
-              }
-              onPress={() => props.setProtocol(PROTOCOL_PROGRESSIVE_WEBM)}
-            />
-          </YGroup.Item>
-          <Separator />
-          <YGroup.Item>
-            <ListItem
-              hoverTheme
-              pressTheme
-              title="WebRTC"
-              subTitle="Lowest latency, probably"
-              icon={Antenna}
-              iconAfter={
-                props.protocol === PROTOCOL_WEBRTC ? CheckCircle : Circle
-              }
-              onPress={() => props.setProtocol(PROTOCOL_WEBRTC)}
-            />
-          </YGroup.Item>
+          {protocols.map((protocol, index) => (
+            <>
+              <YGroup.Item key={protocol.id}>
+                <ListItem
+                  hoverTheme
+                  pressTheme
+                  title={protocol.title}
+                  subTitle={protocol.subtitle}
+                  icon={protocol.icon}
+                  iconAfter={props.protocol === protocol.id ? CheckCircle : Circle}
+                  onPress={() => props.setProtocol(protocol.id)}
+                />
+              </YGroup.Item>
+              {index < protocols.length - 1 && <Separator />}
+            </>
+          ))}
         </>
       )}
     </YGroup>