add dropdown for peer view types

Signed-off-by: Sahil Yeole <sahilyeole93@gmail.com>

flutter/lib/common/widgets/peer_tab_page.dart

@@ -215,34 +215,7 @@ class _PeerTabPageState extends State<PeerTabPage>
   }
 
   Widget _createPeerViewTypeSwitch(BuildContext context) {
-    final textColor = Theme.of(context).textTheme.titleLarge?.color;
+    return PeerViewDropdown();
-    final types = [PeerUiType.grid, PeerUiType.tile, PeerUiType.list];
-
-    return Obx(() => _hoverAction(
-        context: context,
-        onTap: () async {
-          final currentIndex = types.indexOf(peerCardUiType.value);
-          final newIndex = (currentIndex + 1) % types.length; // cycle through types
-          final type = types[newIndex];
-          await bind.setLocalFlutterOption(
-              k: 'peer-card-ui-type', v: type.index.toString());
-          peerCardUiType.value = type;
-        },
-        child: Tooltip(
-            message: peerCardUiType.value == PeerUiType.grid
-                ? translate('Small Tiles')
-                : peerCardUiType.value == PeerUiType.tile
-                    ? translate('List')
-                    : translate('Big Tiles'),
-            child: Icon(
-              peerCardUiType.value == PeerUiType.grid
-                  ? Icons.view_list_rounded
-                  : peerCardUiType.value == PeerUiType.tile
-                      ? Icons.view_agenda_rounded
-                      : Icons.grid_view_rounded,
-              size: 18,
-              color: textColor,
-            ))));
   }
 
   Widget _createMultiSelection() {
@@ -782,6 +755,81 @@ class _PeerSearchBarState extends State<PeerSearchBar> {
   }
 }
 
+class PeerViewDropdown extends StatefulWidget {
+  const PeerViewDropdown({super.key});
+
+  @override
+  State<PeerViewDropdown> createState() => _PeerViewDropdownState();
+}
+
+class _PeerViewDropdownState extends State<PeerViewDropdown> {
+  @override
+  Widget build(BuildContext context) {
+    final List<PeerUiType> types  = [PeerUiType.grid, PeerUiType.tile, PeerUiType.list];
+    final style = TextStyle(
+        color: Theme.of(context).textTheme.titleLarge?.color,
+        fontSize: MenuConfig.fontSize,
+        fontWeight: FontWeight.normal);
+    List<PopupMenuEntry> items = List.empty(growable: true);
+    items.add(PopupMenuItem(
+        height: 36,
+        enabled: false,
+        child: Text(translate("Change View"), style: style)));
+      for (var e in PeerUiType.values) {
+      items.add(PopupMenuItem(
+          height: 36,
+          child: Obx(() => Center(
+                child: SizedBox(
+                  height: 36,
+                  child: getRadio<PeerUiType>(
+                      Text(translate(
+                        types.indexOf(e) == 0 ? 'Big Tiles' : types.indexOf(e) == 1 ? 'Small Tiles' : 'List'
+                      ), style: style),
+                      e, 
+                      peerCardUiType.value,
+                      dense: true, 
+                      (PeerUiType? v) async {
+                    if (v != null) {
+                      peerCardUiType.value = v;
+                      await bind.setLocalFlutterOption(
+                        k: "peer-card-ui-type",
+                        v: peerCardUiType.value.index.toString(),
+                      );
+                    }}
+                  ),
+                ),
+              ))));
+    }
+
+    var menuPos = RelativeRect.fromLTRB(0, 0, 0, 0);
+    return _hoverAction(
+      context: context,
+      child: Tooltip(
+          message: translate('Change View'),
+          child: Icon(
+              peerCardUiType.value == PeerUiType.grid
+                  ? Icons.grid_view_rounded
+                  : peerCardUiType.value == PeerUiType.tile
+                      ? Icons.view_list_rounded
+                      : Icons.view_agenda_rounded,
+              size: 18,
+            )),
+      onTapDown: (details) {
+        final x = details.globalPosition.dx;
+        final y = details.globalPosition.dy;
+        menuPos = RelativeRect.fromLTRB(x, y, x, y);
+      },
+      onTap: () => showMenu(
+        context: context,
+        position: menuPos,
+        items: items,
+        elevation: 8,
+      ),
+    );
+  }
+}
+
+
 class PeerSortDropdown extends StatefulWidget {
   const PeerSortDropdown({super.key});