Merge pull request #408 from DenserMeerkat/add-feat-desktop-responsiveness

feat: desktop responsiveness

lib/app.dart

@@ -5,8 +5,8 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:window_manager/window_manager.dart' hide WindowCaption;
 import 'widgets/widgets.dart' show WindowCaption;
 import 'providers/providers.dart';
-import 'screens/screens.dart';
 import 'extensions/extensions.dart';
+import 'screens/screens.dart';
 import 'consts.dart';
 
 class App extends ConsumerStatefulWidget {
@@ -95,7 +95,7 @@ class _AppState extends ConsumerState<App> with WindowListener {
 
   @override
   Widget build(BuildContext context) {
-    return const Dashboard();
+    return context.isMediumWindow ? const MobileDashboard() : const Dashboard();
   }
 }
 
@@ -125,24 +125,23 @@ class DashApp extends ConsumerWidget {
         visualDensity: VisualDensity.adaptivePlatformDensity,
       ),
       themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
-      home: kIsMobile
+      home: Stack(
-          ? context.isLargeWidth
+        children: [
-              ? const Dashboard()
+          !kIsLinux && !kIsMobile
-              : const MobileDashboard()
+              ? const App()
-          : Stack(
+              : context.isMediumWindow
-              children: [
+                  ? const MobileDashboard()
-                kIsLinux ? const Dashboard() : const App(),
+                  : const Dashboard(),
-                if (kIsWindows)
+          if (kIsWindows)
-                  SizedBox(
+            SizedBox(
-                    height: 29,
+              height: 29,
-                    child: WindowCaption(
+              child: WindowCaption(
-                      backgroundColor: Colors.transparent,
+                backgroundColor: Colors.transparent,
-                      brightness:
+                brightness: isDarkMode ? Brightness.dark : Brightness.light,
-                          isDarkMode ? Brightness.dark : Brightness.light,
+              ),
-                    ),
-                  ),
-              ],
             ),
+        ],
+      ),
     );
   }
 }

lib/consts.dart

@@ -35,11 +35,14 @@ final kColorLightDanger = Colors.red.withOpacity(0.9);
 const kColorDarkDanger = Color(0xffcf6679);
 
 const kWindowTitle = "API Dash";
-const kMinWindowSize = Size(900, 600);
+const kMinWindowSize = Size(320, 600);
 const kMinInitialWindowWidth = 1200.0;
 const kMinInitialWindowHeight = 800.0;
 const kMinRequestEditorDetailsCardPaneSize = 300.0;
-const kLargeMobileWidth = 600.0;
+const kCompactWindowWidth = 600.0;
+const kMediumWindowWidth = 840.0;
+const kExpandedWindowWidth = 1200.0;
+const kLargeWindowWidth = 1600.0;
 
 const kColorSchemeSeed = Colors.blue;
 final kFontFamily = GoogleFonts.openSans().fontFamily;
@@ -106,12 +109,21 @@ const kP8CollectionPane = EdgeInsets.only(
   //right: 4.0,
   // bottom: 8.0,
 );
+const kPt28 = EdgeInsets.only(
+  top: 28,
+);
+const kPt32 = EdgeInsets.only(
+  top: 32,
+);
 const kPb10 = EdgeInsets.only(
   bottom: 10,
 );
 const kPb15 = EdgeInsets.only(
   bottom: 15,
 );
+const kPb70 = EdgeInsets.only(
+  bottom: 70,
+);
 const kHSpacer4 = SizedBox(width: 4);
 const kHSpacer5 = SizedBox(width: 5);
 const kHSpacer10 = SizedBox(width: 10);

lib/extensions/context_extensions.dart

@@ -2,9 +2,21 @@ import 'package:apidash/consts.dart';
 import 'package:flutter/material.dart';
 
 extension MediaQueryExtension on BuildContext {
-  bool get isLargeWidth =>
+  bool get isCompactWindow =>
-      MediaQuery.of(this).size.width > kMinWindowSize.width;
+      MediaQuery.of(this).size.width < kCompactWindowWidth;
 
-  bool get isMobile =>
+  bool get isMediumWindow =>
-      kIsMobile && MediaQuery.of(this).size.width < kMinWindowSize.width;
+      MediaQuery.of(this).size.width < kMediumWindowWidth;
+
+  bool get isExpandedWindow =>
+      MediaQuery.of(this).size.width < kExpandedWindowWidth;
+
+  bool get isLargeWindow => MediaQuery.of(this).size.width < kLargeWindowWidth;
+
+  bool get isExtraLargeWindow =>
+      MediaQuery.of(this).size.width > kLargeWindowWidth;
+
+  double get width => MediaQuery.of(this).size.width;
+
+  double get height => MediaQuery.of(this).size.height;
 }

lib/providers/ui_providers.dart

@@ -1,9 +1,9 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:inner_drawer/inner_drawer.dart';
 
-final mobileDrawerKeyProvider = StateProvider<GlobalKey<InnerDrawerState>>(
+final mobileScaffoldKeyStateProvider = StateProvider<GlobalKey<ScaffoldState>>(
-    (ref) => GlobalKey<InnerDrawerState>());
+    (ref) => GlobalKey<ScaffoldState>());
+final leftDrawerStateProvider = StateProvider<bool>((ref) => false);
 final navRailIndexStateProvider = StateProvider<int>((ref) => 0);
 final selectedIdEditStateProvider = StateProvider<String?>((ref) => null);
 final codePaneVisibleStateProvider = StateProvider<bool>((ref) => false);

lib/screens/dashboard.dart

@@ -37,6 +37,19 @@ class Dashboard extends ConsumerWidget {
                       'Requests',
                       style: Theme.of(context).textTheme.labelSmall,
                     ),
+                    kVSpacer10,
+                    IconButton(
+                      isSelected: railIdx == 1,
+                      onPressed: () {
+                        ref.read(navRailIndexStateProvider.notifier).state = 1;
+                      },
+                      icon: const Icon(Icons.computer_outlined),
+                      selectedIcon: const Icon(Icons.computer_rounded),
+                    ),
+                    Text(
+                      'Variables',
+                      style: Theme.of(context).textTheme.labelSmall,
+                    ),
                   ],
                 ),
                 Expanded(
@@ -45,12 +58,12 @@ class Dashboard extends ConsumerWidget {
                     children: [
                       Padding(
                         padding: const EdgeInsets.only(bottom: 16.0),
-                        child: bottomButton(context, ref, railIdx, 1,
+                        child: bottomButton(context, ref, railIdx, 2,
                             Icons.help, Icons.help_outline),
                       ),
                       Padding(
                         padding: const EdgeInsets.only(bottom: 16.0),
-                        child: bottomButton(context, ref, railIdx, 2,
+                        child: bottomButton(context, ref, railIdx, 3,
                             Icons.settings, Icons.settings_outlined),
                       ),
                     ],
@@ -81,6 +94,7 @@ class Dashboard extends ConsumerWidget {
                 index: railIdx,
                 children: const [
                   HomePage(),
+                  SizedBox(),
                   IntroPage(),
                   SettingsPage(),
                 ],

lib/screens/home_page/collection_pane.dart

@@ -22,91 +22,101 @@ class CollectionPane extends ConsumerWidget {
         child: CircularProgressIndicator(),
       );
     }
-    return Padding(
+    return Drawer(
-      padding: kIsMacOS ? kP24CollectionPane : kP8CollectionPane,
+      shape: const ContinuousRectangleBorder(),
-      child: Column(
+      backgroundColor: Theme.of(context).colorScheme.surface,
-        crossAxisAlignment: CrossAxisAlignment.stretch,
+      surfaceTintColor: kColorTransparent,
-        children: [
+      child: Padding(
-          Padding(
+        padding: (!context.isMediumWindow && kIsMacOS
-            padding: kPe8,
+                ? kP24CollectionPane
-            child: Wrap(
+                : kP8CollectionPane) +
-              alignment: WrapAlignment.spaceBetween,
+            (context.isMediumWindow ? kPb70 : EdgeInsets.zero),
-              children: [
+        child: Column(
-                TextButton.icon(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
-                  onPressed: (savingData || !hasUnsavedChanges)
+          children: [
-                      ? null
+            Padding(
-                      : () async {
+              padding: kPe8,
-                          overlayWidget.show(
+              child: Wrap(
-                              widget:
+                alignment: WrapAlignment.spaceBetween,
-                                  const SavingOverlay(saveCompleted: false));
+                children: [
+                  TextButton.icon(
+                    onPressed: (savingData || !hasUnsavedChanges)
+                        ? null
+                        : () async {
+                            overlayWidget.show(
+                                widget:
+                                    const SavingOverlay(saveCompleted: false));
 
-                          await ref
+                            await ref
-                              .read(collectionStateNotifierProvider.notifier)
+                                .read(collectionStateNotifierProvider.notifier)
-                              .saveData();
+                                .saveData();
-                          overlayWidget.hide();
+                            overlayWidget.hide();
-                          overlayWidget.show(
+                            overlayWidget.show(
-                              widget: const SavingOverlay(saveCompleted: true));
+                                widget:
-                          await Future.delayed(const Duration(seconds: 1));
+                                    const SavingOverlay(saveCompleted: true));
-                          overlayWidget.hide();
+                            await Future.delayed(const Duration(seconds: 1));
-                        },
+                            overlayWidget.hide();
-                  icon: const Icon(
+                          },
-                    Icons.save,
+                    icon: const Icon(
-                    size: 20,
+                      Icons.save,
+                      size: 20,
+                    ),
+                    label: const Text(
+                      kLabelSave,
+                      style: kTextStyleButton,
+                    ),
                   ),
-                  label: const Text(
+                  //const Spacer(),
-                    kLabelSave,
+                  ElevatedButton(
-                    style: kTextStyleButton,
+                    onPressed: () {
+                      ref.read(collectionStateNotifierProvider.notifier).add();
+                    },
+                    child: const Text(
+                      kLabelPlusNew,
+                      style: kTextStyleButton,
+                    ),
                   ),
-                ),
+                ],
-                //const Spacer(),
-                ElevatedButton(
-                  onPressed: () {
-                    ref.read(collectionStateNotifierProvider.notifier).add();
-                  },
-                  child: const Text(
-                    kLabelPlusNew,
-                    style: kTextStyleButton,
-                  ),
-                ),
-              ],
-            ),
-          ),
-          kVSpacer10,
-          Container(
-            margin: const EdgeInsets.only(right: 8),
-            decoration: BoxDecoration(
-              borderRadius: kBorderRadius8,
-              border: Border.all(
-                color: Theme.of(context).colorScheme.surfaceVariant,
               ),
             ),
-            child: Row(
+            kVSpacer10,
-              children: [
+            Container(
-                kHSpacer5,
+              margin: const EdgeInsets.only(right: 8),
-                Icon(
+              decoration: BoxDecoration(
-                  Icons.filter_alt,
+                borderRadius: kBorderRadius8,
-                  size: 18,
+                border: Border.all(
-                  color: Theme.of(context).colorScheme.secondary,
+                  color: Theme.of(context).colorScheme.surfaceVariant,
                 ),
-                kHSpacer5,
+              ),
-                Expanded(
+              child: Row(
-                  child: RawTextField(
+                children: [
-                    style: Theme.of(context).textTheme.bodyMedium,
+                  kHSpacer5,
-                    hintText: "Filter by name or URL",
+                  Icon(
-                    onChanged: (value) {
+                    Icons.filter_alt,
-                      ref.read(searchQueryProvider.notifier).state =
+                    size: 18,
-                          value.toLowerCase();
+                    color: Theme.of(context).colorScheme.secondary,
-                    },
                   ),
-                ),
+                  kHSpacer5,
-              ],
+                  Expanded(
+                    child: RawTextField(
+                      style: Theme.of(context).textTheme.bodyMedium,
+                      hintText: "Filter by name or URL",
+                      onChanged: (value) {
+                        ref.read(searchQueryProvider.notifier).state =
+                            value.toLowerCase();
+                      },
+                    ),
+                  ),
+                ],
+              ),
             ),
-          ),
+            kVSpacer10,
-          kVSpacer10,
+            const Expanded(
-          const Expanded(
+              child: RequestList(),
-            child: RequestList(),
+            ),
-          ),
+            kVSpacer5
-        ],
+          ],
+        ),
       ),
     );
   }
@@ -150,7 +160,7 @@ class _RequestListState extends ConsumerState<RequestList> {
       radius: const Radius.circular(12),
       child: filterQuery.isEmpty
           ? ReorderableListView.builder(
-              padding: context.isMobile
+              padding: context.isMediumWindow
                   ? EdgeInsets.only(
                       bottom: MediaQuery.paddingOf(context).bottom,
                       right: 8,
@@ -198,7 +208,7 @@ class _RequestListState extends ConsumerState<RequestList> {
               },
             )
           : ListView(
-              padding: kIsMobile
+              padding: context.isMediumWindow
                   ? EdgeInsets.only(
                       bottom: MediaQuery.paddingOf(context).bottom,
                       right: 8,
@@ -240,7 +250,6 @@ class RequestItem extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final selectedId = ref.watch(selectedIdStateProvider);
     final editRequestId = ref.watch(selectedIdEditStateProvider);
-    final mobileDrawerKey = ref.watch(mobileDrawerKeyProvider);
 
     return SidebarRequestCard(
       id: id,
@@ -250,7 +259,7 @@ class RequestItem extends ConsumerWidget {
       selectedId: selectedId,
       editRequestId: editRequestId,
       onTap: () {
-        mobileDrawerKey.currentState?.close();
+        ref.read(mobileScaffoldKeyStateProvider).currentState?.closeDrawer();
         ref.read(selectedIdStateProvider.notifier).state = id;
       },
       // onDoubleTap: () {

lib/screens/home_page/editor_pane/editor_request.dart

@@ -12,7 +12,7 @@ class RequestEditor extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return context.isMobile
+    return context.isMediumWindow
         ? const Padding(
             padding: kPb10,
             child: Column(

lib/screens/home_page/editor_pane/url_card.dart

@@ -21,9 +21,9 @@ class EditorPaneRequestURLCard extends StatelessWidget {
       child: Padding(
         padding: EdgeInsets.symmetric(
           vertical: 5,
-          horizontal: !context.isMobile ? 20 : 6,
+          horizontal: !context.isMediumWindow ? 20 : 6,
         ),
-        child: context.isMobile
+        child: context.isMediumWindow
             ? const Row(
                 children: [
                   DropdownButtonHTTPMethod(),

lib/screens/mobile/dashboard.dart

@@ -2,14 +2,14 @@ import 'package:apidash/consts.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:inner_drawer/inner_drawer.dart';
 import 'package:flex_color_scheme/flex_color_scheme.dart';
-import '../../providers/providers.dart';
+import 'package:apidash/extensions/extensions.dart';
+import 'package:apidash/providers/providers.dart';
+import '../intro_page.dart';
+import '../settings_page.dart';
 import 'navbar.dart';
-import 'widgets/left_drawer.dart';
 import 'requests_page.dart';
-import 'response_drawer.dart';
+import 'widgets/page_base.dart';
-import '../home_page/collection_pane.dart';
 
 class MobileDashboard extends ConsumerStatefulWidget {
   const MobileDashboard({super.key});
@@ -19,32 +19,13 @@ class MobileDashboard extends ConsumerStatefulWidget {
 }
 
 class _MobileDashboardState extends ConsumerState<MobileDashboard> {
-  late Color backgroundColor;
-  bool isLeftDrawerOpen = false;
-  ValueNotifier<double> dragPosition = ValueNotifier(0);
-  ValueNotifier<InnerDrawerDirection?> drawerDirection =
-      ValueNotifier(InnerDrawerDirection.start);
-
-  Color calculateBackgroundColor(double dragPosition) {
-    Color start = Theme.of(context).colorScheme.surface;
-    Color end = Theme.of(context).colorScheme.onInverseSurface;
-    return dragPosition == 0 ? start : end;
-  }
-
-  @override
-  void dispose() {
-    super.dispose();
-    dragPosition.dispose();
-    drawerDirection.dispose();
-  }
-
   @override
   Widget build(
     BuildContext context,
   ) {
-    final GlobalKey<InnerDrawerState> innerDrawerKey =
+    final railIdx = ref.watch(navRailIndexStateProvider);
-        ref.watch(mobileDrawerKeyProvider);
+    final isLeftDrawerOpen = ref.watch(leftDrawerStateProvider);
-    final isLargeMobile = MediaQuery.sizeOf(context).width > kLargeMobileWidth;
+
     return AnnotatedRegion<SystemUiOverlayStyle>(
       value: FlexColorScheme.themedSystemNavigationBar(
         context,
@@ -54,70 +35,16 @@ class _MobileDashboardState extends ConsumerState<MobileDashboard> {
       child: Stack(
         alignment: AlignmentDirectional.bottomCenter,
         children: [
-          InnerDrawer(
+          PageBranch(
-            key: innerDrawerKey,
+            pageIndex: railIdx,
-            swipe: true,
-            swipeChild: true,
-            onTapClose: true,
-            offset: isLargeMobile
-                ? const IDOffset.only(left: 0.1, right: 1)
-                : const IDOffset.only(left: 0.7, right: 1),
-            boxShadow: [
-              BoxShadow(
-                offset: const Offset(1, 0),
-                color: Theme.of(context).colorScheme.onInverseSurface,
-                blurRadius: 0,
-              ),
-            ],
-            colorTransitionChild: Colors.transparent,
-            colorTransitionScaffold: Colors.transparent,
-            rightAnimationType: InnerDrawerAnimation.linear,
-            backgroundDecoration:
-                BoxDecoration(color: Theme.of(context).colorScheme.surface),
-            onDragUpdate: (value, direction) {
-              drawerDirection.value = direction;
-              if (value > 0.98 && direction == InnerDrawerDirection.start) {
-                dragPosition.value = 1;
-              } else {
-                dragPosition.value = 0;
-              }
-            },
-            innerDrawerCallback: (isOpened) {
-              if (drawerDirection.value == InnerDrawerDirection.start) {
-                setState(() {
-                  isLeftDrawerOpen = isOpened;
-                });
-              }
-            },
-            leftChild: const LeftDrawer(
-              drawerContent: CollectionPane(),
-            ),
-            rightChild: const ResponseDrawer(),
-            scaffold: ValueListenableBuilder<double>(
-              valueListenable: dragPosition,
-              builder: (context, value, child) {
-                return Container(
-                  color: calculateBackgroundColor(value),
-                  child: child,
-                );
-              },
-              child: ClipRRect(
-                borderRadius:
-                    const BorderRadius.only(topLeft: Radius.circular(8)),
-                child: SafeArea(
-                  bottom: false,
-                  child: RequestsPage(
-                    innerDrawerKey: innerDrawerKey,
-                  ),
-                ),
-              ),
-            ),
           ),
-          if (!isLargeMobile)
+          if (context.isMediumWindow)
             AnimatedPositioned(
-              bottom: isLeftDrawerOpen
+              bottom: railIdx > 1
                   ? 0
-                  : -(72 + MediaQuery.paddingOf(context).bottom),
+                  : isLeftDrawerOpen
+                      ? 0
+                      : -(72 + MediaQuery.paddingOf(context).bottom),
               left: 0,
               right: 0,
               height: 70 + MediaQuery.paddingOf(context).bottom,
@@ -130,3 +57,48 @@ class _MobileDashboardState extends ConsumerState<MobileDashboard> {
     );
   }
 }
+
+class PageBranch extends ConsumerWidget {
+  const PageBranch({
+    super.key,
+    required this.pageIndex,
+  });
+
+  final int pageIndex;
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final scaffoldKey = ref.watch(mobileScaffoldKeyStateProvider);
+    switch (pageIndex) {
+      case 1:
+        // Temporary Environment Page
+        return Scaffold(
+          key: scaffoldKey,
+          appBar: AppBar(
+            title: const Text('Environments'),
+          ),
+          onDrawerChanged: (isOpened) {
+            ref.read(leftDrawerStateProvider.notifier).state = isOpened;
+          },
+          drawer: const Drawer(
+            surfaceTintColor: kColorTransparent,
+            shape: ContinuousRectangleBorder(),
+          ),
+          body: const SizedBox(),
+        );
+      case 2:
+        return const PageBase(
+          title: 'About',
+          scaffoldBody: IntroPage(),
+        );
+      case 3:
+        return const PageBase(
+          title: 'Settings',
+          scaffoldBody: SettingsPage(),
+        );
+      default:
+        return RequestsPage(
+          scaffoldKey: scaffoldKey,
+        );
+    }
+  }
+}

lib/screens/mobile/navbar.dart

@@ -1,9 +1,6 @@
-import 'package:apidash/providers/ui_providers.dart';
-import 'package:apidash/screens/mobile/widgets/page_base.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import '../settings_page.dart';
+import 'package:apidash/providers/providers.dart';
-import '../intro_page.dart';
 
 class BottomNavBar extends ConsumerWidget {
   const BottomNavBar({super.key});
@@ -47,30 +44,26 @@ class BottomNavBar extends ConsumerWidget {
                       'Variables'),
                 ),
                 Expanded(
-                  child: customNavigationDestination(context, ref, railIdx, 2,
+                  child: customNavigationDestination(
-                      Icons.help, Icons.help_outline, 'About',
+                    context,
-                      isNavigator: true, onTap: () {
+                    ref,
-                    Navigator.of(context).push(
+                    railIdx,
-                      MaterialPageRoute(
+                    2,
-                          builder: (context) => const PageBase(
+                    Icons.help,
-                                title: 'About',
+                    Icons.help_outline,
-                                scaffoldBody: IntroPage(),
+                    'About',
-                              )),
+                  ),
-                    );
-                  }),
                 ),
                 Expanded(
-                  child: customNavigationDestination(context, ref, railIdx, 3,
+                  child: customNavigationDestination(
-                      Icons.settings, Icons.settings_outlined, 'Settings',
+                    context,
-                      isNavigator: true, onTap: () {
+                    ref,
-                    Navigator.of(context).push(
+                    railIdx,
-                      MaterialPageRoute(
+                    3,
-                          builder: (context) => const PageBase(
+                    Icons.settings,
-                                title: 'Settings',
+                    Icons.settings_outlined,
-                                scaffoldBody: SettingsPage(),
+                    'Settings',
-                              )),
+                  ),
-                    );
-                  }),
                 ),
               ],
             ),
@@ -81,95 +74,6 @@ class BottomNavBar extends ConsumerWidget {
   }
 }
 
-class NavRail extends ConsumerWidget {
-  const NavRail({super.key});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final railIdx = ref.watch(navRailIndexStateProvider);
-    return Material(
-      type: MaterialType.transparency,
-      child: Container(
-        width: 70,
-        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
-        decoration: BoxDecoration(
-          border: Border(
-            right: BorderSide(
-              color: Theme.of(context).colorScheme.onInverseSurface,
-              width: 1,
-            ),
-          ),
-        ),
-        child: Column(
-          children: [
-            customNavigationDestination(
-              context,
-              ref,
-              railIdx,
-              0,
-              Icons.dashboard,
-              Icons.dashboard_outlined,
-              'Requests',
-            ),
-            const SizedBox(height: 16),
-            customNavigationDestination(
-              context,
-              ref,
-              railIdx,
-              1,
-              Icons.laptop_windows,
-              Icons.laptop_windows_outlined,
-              'Variables',
-            ),
-            const Expanded(child: SizedBox()),
-            customNavigationDestination(
-              context,
-              ref,
-              railIdx,
-              2,
-              Icons.help,
-              Icons.help_outline,
-              'About',
-              isNavigator: true,
-              showLabel: false,
-              onTap: () {
-                Navigator.of(context).push(
-                  MaterialPageRoute(
-                      builder: (context) => const PageBase(
-                            title: 'About',
-                            scaffoldBody: IntroPage(),
-                          )),
-                );
-              },
-            ),
-            const SizedBox(height: 24),
-            customNavigationDestination(
-              context,
-              ref,
-              railIdx,
-              3,
-              Icons.settings,
-              Icons.settings_outlined,
-              'Settings',
-              isNavigator: true,
-              showLabel: false,
-              onTap: () {
-                Navigator.of(context).push(
-                  MaterialPageRoute(
-                      builder: (context) => const PageBase(
-                            title: 'Settings',
-                            scaffoldBody: SettingsPage(),
-                          )),
-                );
-              },
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
 Widget customNavigationDestination(
   BuildContext context,
   WidgetRef ref,
@@ -178,22 +82,20 @@ Widget customNavigationDestination(
   IconData selectedIcon,
   IconData icon,
   String label, {
-  bool isNavigator = false,
   bool showLabel = true,
   Function()? onTap,
 }) {
   bool isSelected = railIdx == buttonIdx;
-  return Tooltip(
+  return MouseRegion(
-    message: label,
+    cursor: SystemMouseCursors.click,
-    triggerMode: TooltipTriggerMode.longPress,
-    verticalOffset: 42,
     child: GestureDetector(
       behavior: HitTestBehavior.translucent,
       onTap: isSelected
           ? null
           : () {
-              if (!isNavigator) {
+              ref.read(navRailIndexStateProvider.notifier).state = buttonIdx;
-                ref.read(navRailIndexStateProvider.notifier).state = buttonIdx;
+              if (railIdx > 1 && buttonIdx <= 1) {
+                ref.read(leftDrawerStateProvider.notifier).state = false;
               }
               onTap?.call();
             },
@@ -214,9 +116,11 @@ Widget customNavigationDestination(
               onTap: isSelected
                   ? null
                   : () {
-                      if (!isNavigator) {
+                      ref.read(navRailIndexStateProvider.notifier).state =
-                        ref.read(navRailIndexStateProvider.notifier).state =
+                          buttonIdx;
-                            buttonIdx;
+                      if (railIdx > 1 && buttonIdx <= 1) {
+                        ref.read(leftDrawerStateProvider.notifier).state =
+                            false;
                       }
                       onTap?.call();
                     },

lib/screens/mobile/requests_page.dart

@@ -1,58 +1,36 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:inner_drawer/inner_drawer.dart';
 import 'package:apidash/providers/providers.dart';
 import 'package:apidash/utils/http_utils.dart';
 import 'package:apidash/consts.dart';
 import 'package:apidash/widgets/widgets.dart';
+import '../home_page/collection_pane.dart';
 import '../home_page/editor_pane/editor_request.dart';
 import '../home_page/editor_pane/editor_pane.dart';
 import '../home_page/editor_pane/url_card.dart';
 import '../home_page/editor_pane/details_card/code_pane.dart';
+import 'response_drawer.dart';
 import 'widgets/page_base.dart';
 
-class RequestsPage extends StatelessWidget {
+class RequestsPage extends ConsumerWidget {
-  final GlobalKey<InnerDrawerState> innerDrawerKey;
+  const RequestsPage({
+    super.key,
+    required this.scaffoldKey,
+  });
 
-  const RequestsPage({super.key, required this.innerDrawerKey});
+  final GlobalKey<ScaffoldState> scaffoldKey;
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
-    return Scaffold(
+    return TwoDrawerScaffold(
-      backgroundColor: Colors.transparent,
+      scaffoldKey: scaffoldKey,
-      appBar: AppBar(
+      title: const RequestTitle(),
-        backgroundColor: Theme.of(context).colorScheme.surface,
+      leftDrawerContent: const CollectionPane(),
-        scrolledUnderElevation: 0,
+      rightDrawerContent: const ResponseDrawer(),
-        shape: const RoundedRectangleBorder(
+      mainContent: const RequestEditorPane(),
-          borderRadius: BorderRadius.only(topLeft: Radius.circular(8)),
+      bottomNavigationBar: const RequestPageBottombar(),
-        ),
+      onDrawerChanged: (value) =>
-        leading: IconButton(
+          ref.read(leftDrawerStateProvider.notifier).state = value,
-          icon: const Icon(Icons.format_list_bulleted_rounded),
-          onPressed: () {
-            innerDrawerKey.currentState!
-                .open(direction: InnerDrawerDirection.start);
-          },
-        ),
-        title: const RequestTitle(),
-        titleSpacing: 0,
-        actions: [
-          IconButton(
-            icon: Icon(
-              Icons.quickreply_outlined,
-              color: Theme.of(context).colorScheme.onBackground,
-            ),
-            onPressed: () {
-              innerDrawerKey.currentState!
-                  .open(direction: InnerDrawerDirection.end);
-            },
-          ),
-        ],
-      ),
-      body: Container(
-        color: Theme.of(context).colorScheme.surface,
-        child: const RequestEditorPane(),
-      ),
-      bottomNavigationBar: RequestPageBottombar(innerDrawerKey: innerDrawerKey),
     );
   }
 }
@@ -118,16 +96,13 @@ class RequestTitle extends ConsumerWidget {
   }
 }
 
-class RequestPageBottombar extends StatelessWidget {
+class RequestPageBottombar extends ConsumerWidget {
   const RequestPageBottombar({
     super.key,
-    required this.innerDrawerKey,
   });
 
-  final GlobalKey<InnerDrawerState> innerDrawerKey;
-
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     return Container(
       height: 60 + MediaQuery.paddingOf(context).bottom,
       width: MediaQuery.sizeOf(context).width,
@@ -160,7 +135,9 @@ class RequestPageBottombar extends StatelessWidget {
                   builder: (context) => const PageBase(
                     title: 'View Code',
                     scaffoldBody: CodePane(),
+                    addBottomPadding: false,
                   ),
+                  fullscreenDialog: true,
                 ),
               );
             },
@@ -168,8 +145,10 @@ class RequestPageBottombar extends StatelessWidget {
           ),
           SendButton(
             onTap: () {
-              innerDrawerKey.currentState!
+              ref
-                  .open(direction: InnerDrawerDirection.end);
+                  .read(mobileScaffoldKeyStateProvider)
+                  .currentState!
+                  .openEndDrawer();
             },
           ),
         ],

lib/screens/mobile/widgets/left_drawer.dart

@@ -1,45 +0,0 @@
-import 'package:apidash/consts.dart';
-import 'package:apidash/screens/mobile/navbar.dart';
-import 'package:flutter/material.dart';
-
-class LeftDrawer extends StatelessWidget {
-  final Widget drawerContent;
-  const LeftDrawer({super.key, required this.drawerContent});
-
-  @override
-  Widget build(BuildContext context) {
-    final isLargeMobile = MediaQuery.sizeOf(context).width > kLargeMobileWidth;
-    return Container(
-      padding: EdgeInsets.only(top: MediaQuery.paddingOf(context).top),
-      color: Theme.of(context).colorScheme.onInverseSurface,
-      child: Drawer(
-        backgroundColor: Colors.transparent,
-        surfaceTintColor: Colors.transparent,
-        child: Padding(
-          padding: const EdgeInsets.only(right: 16),
-          child: Container(
-            padding: EdgeInsets.only(
-                left: MediaQuery.paddingOf(context).left,
-                bottom: isLargeMobile
-                    ? MediaQuery.paddingOf(context).bottom
-                    : 70 + MediaQuery.paddingOf(context).bottom),
-            clipBehavior: Clip.hardEdge,
-            decoration: BoxDecoration(
-              color: Theme.of(context).colorScheme.surface,
-              borderRadius:
-                  const BorderRadius.only(topRight: Radius.circular(8)),
-            ),
-            child: isLargeMobile
-                ? Row(
-                    children: [
-                      const NavRail(),
-                      Expanded(child: drawerContent),
-                    ],
-                  )
-                : drawerContent,
-          ),
-        ),
-      ),
-    );
-  }
-}

lib/screens/mobile/widgets/page_base.dart

@@ -1,19 +1,33 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:apidash/consts.dart';
+import 'package:apidash/extensions/extensions.dart';
+import 'package:apidash/providers/providers.dart';
+import 'package:apidash/widgets/window_caption.dart';
 
-class PageBase extends StatelessWidget {
+class PageBase extends ConsumerWidget {
+  const PageBase({
+    super.key,
+    required this.title,
+    required this.scaffoldBody,
+    this.addBottomPadding = true,
+  });
   final String title;
   final Widget scaffoldBody;
-  const PageBase({super.key, required this.title, required this.scaffoldBody});
+  final bool addBottomPadding;
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
-    return Scaffold(
+    final isDarkMode =
+        ref.watch(settingsProvider.select((value) => value.isDark));
+    final scaffold = Scaffold(
       backgroundColor: Theme.of(context).colorScheme.background,
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.background,
         primary: true,
         title: Text(title),
         centerTitle: true,
+        scrolledUnderElevation: 0,
       ),
       body: Padding(
         padding: EdgeInsets.only(
@@ -22,5 +36,25 @@ class PageBase extends StatelessWidget {
         child: scaffoldBody,
       ),
     );
+    return Stack(
+      children: [
+        Container(
+          padding: (addBottomPadding && context.isMediumWindow
+                  ? kPb70
+                  : EdgeInsets.zero) +
+              (kIsWindows || kIsMacOS ? kPt28 : EdgeInsets.zero),
+          color: Theme.of(context).colorScheme.surface,
+          child: scaffold,
+        ),
+        if (kIsWindows)
+          SizedBox(
+            height: 29,
+            child: WindowCaption(
+              backgroundColor: Colors.transparent,
+              brightness: isDarkMode ? Brightness.dark : Brightness.light,
+            ),
+          ),
+      ],
+    );
   }
 }

lib/screens/settings_page.dart

@@ -17,7 +17,7 @@ class SettingsPage extends ConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        !context.isMobile
+        !context.isMediumWindow
             ? Padding(
                 padding: kPh20t40,
                 child: kIsDesktop

lib/widgets/dropdowns.dart

@@ -30,7 +30,7 @@ class DropdownButtonHttpMethod extends StatelessWidget {
         return DropdownMenuItem<HTTPVerb>(
           value: value,
           child: Padding(
-            padding: EdgeInsets.only(left: context.isMobile ? 8 : 16),
+            padding: EdgeInsets.only(left: context.isMediumWindow ? 8 : 16),
             child: Text(
               value.name.toUpperCase(),
               style: kCodeStyle.copyWith(

lib/widgets/intro_message.dart

@@ -38,7 +38,7 @@ class IntroMessage extends StatelessWidget {
 
           return CustomMarkdown(
             data: text,
-            padding: !context.isMobile ? kPh60 : kPh20,
+            padding: !context.isMediumWindow ? kPh60 : kPh20,
           );
         }
         return const Center(child: CircularProgressIndicator());

lib/widgets/request_widgets.dart

@@ -48,7 +48,7 @@ class _RequestPaneState extends State<RequestPane>
     }
     return Column(
       children: [
-        context.isMobile
+        context.isMediumWindow
             ? const SizedBox.shrink()
             : Padding(
                 padding: kP8,

lib/widgets/splitviews.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:multi_split_view/multi_split_view.dart';
+import 'package:apidash/extensions/extensions.dart';
 import 'package:apidash/consts.dart';
 
 class DashboardSplitView extends StatefulWidget {
@@ -110,3 +111,79 @@ class _EqualSplitViewState extends State<EqualSplitView> {
     super.dispose();
   }
 }
+
+class TwoDrawerScaffold extends StatelessWidget {
+  const TwoDrawerScaffold({
+    super.key,
+    required this.scaffoldKey,
+    required this.mainContent,
+    required this.title,
+    this.actions,
+    this.leftDrawerContent,
+    this.rightDrawerContent,
+    this.rightDrawerIcon,
+    this.bottomNavigationBar,
+    this.onDrawerChanged,
+    this.onEndDrawerChanged,
+  });
+
+  final GlobalKey<ScaffoldState> scaffoldKey;
+  final Widget mainContent;
+  final Widget title;
+  final List<Widget>? actions;
+  final Widget? leftDrawerContent;
+  final Widget? rightDrawerContent;
+  final IconData? rightDrawerIcon;
+  final Widget? bottomNavigationBar;
+  final ValueChanged<bool>? onDrawerChanged;
+  final ValueChanged<bool>? onEndDrawerChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: (kIsWindows || kIsMacOS) ? kPt28 : EdgeInsets.zero,
+      color: Theme.of(context).colorScheme.surface,
+      child: Scaffold(
+        key: scaffoldKey,
+        backgroundColor: Theme.of(context).colorScheme.surface,
+        onDrawerChanged: onDrawerChanged,
+        onEndDrawerChanged: onEndDrawerChanged,
+        drawerEdgeDragWidth: context.width,
+        appBar: AppBar(
+          backgroundColor: Theme.of(context).colorScheme.surface,
+          scrolledUnderElevation: 0,
+          shape: const ContinuousRectangleBorder(),
+          leading: IconButton(
+            icon: const Icon(Icons.format_list_bulleted_rounded),
+            onPressed: () {
+              scaffoldKey.currentState!.openDrawer();
+            },
+          ),
+          title: title,
+          titleSpacing: 0,
+          actions: [
+            ...actions ?? [],
+            (rightDrawerContent != null
+                ? Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: IconButton(
+                      icon: Icon(
+                        rightDrawerIcon ?? Icons.arrow_forward,
+                        color: Theme.of(context).colorScheme.onBackground,
+                      ),
+                      onPressed: () {
+                        scaffoldKey.currentState!.openEndDrawer();
+                      },
+                    ),
+                  )
+                : const SizedBox.shrink()),
+          ],
+        ),
+        drawer: leftDrawerContent,
+        endDrawer: rightDrawerContent,
+        body: mainContent,
+        bottomNavigationBar: bottomNavigationBar,
+      ),
+    );
+  }
+}

lib/widgets/tabs.dart

@@ -14,7 +14,7 @@ class TabLabel extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      height: context.isMobile ? kMobileTabHeight : kTabHeight,
+      height: context.isMediumWindow ? kMobileTabHeight : kTabHeight,
       child: Stack(
         children: [
           Center(

pubspec.lock

@@ -5,34 +5,34 @@ packages:
     dependency: transitive
     description:
       name: _fe_analyzer_shared
-      sha256: eb376e9acf6938204f90eb3b1f00b578640d3188b4c8a8ec054f9f479af8d051
+      sha256: "0b2f2bd91ba804e53a61d757b986f89f1f9eaed5b11e4b2f5a2468d86d6c9fc7"
       url: "https://pub.dev"
     source: hosted
-    version: "64.0.0"
+    version: "67.0.0"
   analyzer:
     dependency: transitive
     description:
       name: analyzer
-      sha256: "69f54f967773f6c26c7dcb13e93d7ccee8b17a641689da39e878d5cf13b06893"
+      sha256: "37577842a27e4338429a1cbc32679d508836510b056f1eedf0c8d20e39c1383d"
       url: "https://pub.dev"
     source: hosted
-    version: "6.2.0"
+    version: "6.4.1"
   archive:
     dependency: transitive
     description:
       name: archive
-      sha256: "7b875fd4a20b165a3084bd2d210439b22ebc653f21cea4842729c0c30c82596b"
+      sha256: cb6a278ef2dbb298455e1a713bda08524a175630ec643a242c399c932a0a1f7d
       url: "https://pub.dev"
     source: hosted
-    version: "3.4.9"
+    version: "3.6.1"
   args:
     dependency: transitive
     description:
       name: args
-      sha256: eef6c46b622e0494a36c5a12d10d77fb4e855501a91c1b9ef9339326e58f0596
+      sha256: "7cf60b9f0cc88203c5a190b4cd62a99feea42759a7fa695010eb5de1c0b2252a"
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.2"
+    version: "2.5.0"
   async:
     dependency: transitive
     description:
@@ -45,18 +45,18 @@ packages:
     dependency: transitive
     description:
       name: audio_session
-      sha256: "6fdf255ed3af86535c96452c33ecff1245990bb25a605bfb1958661ccc3d467f"
+      sha256: a49af9981eec5d7cd73b37bacb6ee73f8143a6a9f9bd5b6021e6c346b9b6cf4e
       url: "https://pub.dev"
     source: hosted
-    version: "0.1.18"
+    version: "0.1.19"
   barcode:
     dependency: transitive
     description:
       name: barcode
-      sha256: "2a8b2ee065f419c2aeda141436cc556d91ae772d220fd80679f4d431d6c2ab43"
+      sha256: ab180ce22c6555d77d45f0178a523669db67f95856e3378259ef2ffeb43e6003
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.5"
+    version: "2.2.8"
   bidi:
     dependency: transitive
     description:
@@ -109,18 +109,18 @@ packages:
     dependency: "direct dev"
     description:
       name: build_runner
-      sha256: "581bacf68f89ec8792f5e5a0b2c4decd1c948e97ce659dc783688c8a88fbec21"
+      sha256: "3ac61a79bfb6f6cc11f693591063a7f19a7af628dc52f141743edac5c16e8c22"
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.8"
+    version: "2.4.9"
   build_runner_core:
     dependency: transitive
     description:
       name: build_runner_core
-      sha256: c9e32d21dd6626b5c163d48b037ce906bbe428bc23ab77bcd77bb21e593b6185
+      sha256: "4ae8ffe5ac758da294ecf1802f2aff01558d8b1b00616aa7538ea9a8a5d50799"
       url: "https://pub.dev"
     source: hosted
-    version: "7.2.11"
+    version: "7.3.0"
   built_collection:
     dependency: transitive
     description:
@@ -133,10 +133,10 @@ packages:
     dependency: transitive
     description:
       name: built_value
-      sha256: c9aabae0718ec394e5bc3c7272e6bb0dc0b32201a08fe185ec1d8401d3e39309
+      sha256: c7913a9737ee4007efedaffc968c049fd0f3d0e49109e778edc10de9426005cb
       url: "https://pub.dev"
     source: hosted
-    version: "8.8.1"
+    version: "8.9.2"
   characters:
     dependency: transitive
     description:
@@ -197,10 +197,10 @@ packages:
     dependency: transitive
     description:
       name: coverage
-      sha256: "8acabb8306b57a409bf4c83522065672ee13179297a6bb0cb9ead73948df7c76"
+      sha256: "3945034e86ea203af7a056d98e98e42a5518fff200d6e8e6647e1886b07e936e"
       url: "https://pub.dev"
     source: hosted
-    version: "1.7.2"
+    version: "1.8.0"
   cross_file:
     dependency: transitive
     description:
@@ -245,10 +245,10 @@ packages:
     dependency: "direct main"
     description:
       name: data_table_2
-      sha256: fdb0551f103f1daf837bddfde14619fd9e683408833a618c9afabeb533fce88c
+      sha256: e403de6d9a58dddf27700114b614ea8ea5aa8442d7fbdfbe8b3d11b0512e7a49
       url: "https://pub.dev"
     source: hosted
-    version: "2.5.11"
+    version: "2.5.12"
   eventify:
     dependency: transitive
     description:
@@ -261,10 +261,10 @@ packages:
     dependency: transitive
     description:
       name: extended_text_field
-      sha256: ed9655c70a47a54c7cc689cf7f89a2bde9ab7b530150b4d1808b7aa7eb8cdf90
+      sha256: d064097c774eab3a7f2aad1db32533611a71ed52305b3afd3e0364642a1a61f7
       url: "https://pub.dev"
     source: hosted
-    version: "13.0.0"
+    version: "13.1.0"
   extended_text_library:
     dependency: transitive
     description:
@@ -285,10 +285,10 @@ packages:
     dependency: transitive
     description:
       name: ffi
-      sha256: "7bf0adc28a23d395f19f3f1eb21dd7cfd1dd9f8e1c50051c069122e6853bc878"
+      sha256: "493f37e7df1804778ff3a53bd691d8692ddf69702cf4c1c1096a2e41b4779e21"
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.2"
   file:
     dependency: transitive
     description:
@@ -309,18 +309,18 @@ packages:
     dependency: transitive
     description:
       name: file_selector_android
-      sha256: "1cd66575f063b689e041aec836905ba7be18d76c9f0634d0d75daec825f67095"
+      sha256: "8bcc3af859e9d47fab9c7dc315537406511a894ab578e198bd8f9ed745ea5a01"
       url: "https://pub.dev"
     source: hosted
-    version: "0.5.0+7"
+    version: "0.5.1+2"
   file_selector_ios:
     dependency: transitive
     description:
       name: file_selector_ios
-      sha256: b015154e6d9fddbc4d08916794df170b44531798c8dd709a026df162d07ad81d
+      sha256: "38ebf91ecbcfa89a9639a0854ccaed8ab370c75678938eebca7d34184296f0bb"
       url: "https://pub.dev"
     source: hosted
-    version: "0.5.1+8"
+    version: "0.5.3"
   file_selector_linux:
     dependency: transitive
     description:
@@ -333,10 +333,10 @@ packages:
     dependency: transitive
     description:
       name: file_selector_macos
-      sha256: b15c3da8bd4908b9918111fa486903f5808e388b8d1c559949f584725a6594d6
+      sha256: f42eacb83b318e183b1ae24eead1373ab1334084404c8c16e0354f9a3e55d385
       url: "https://pub.dev"
     source: hosted
-    version: "0.9.3+3"
+    version: "0.9.4"
   file_selector_platform_interface:
     dependency: transitive
     description:
@@ -381,15 +381,23 @@ packages:
     dependency: transitive
     description:
       name: flex_seed_scheme
-      sha256: "29c12aba221eb8a368a119685371381f8035011d18de5ba277ad11d7dfb8657f"
+      sha256: "4cee2f1d07259f77e8b36f4ec5f35499d19e74e17c7dce5b819554914082bc01"
       url: "https://pub.dev"
     source: hosted
-    version: "1.4.0"
+    version: "1.5.0"
   flutter:
     dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_hooks:
+    dependency: "direct main"
+    description:
+      name: flutter_hooks
+      sha256: cde36b12f7188c85286fba9b38cc5a902e7279f36dd676967106c041dc9dde70
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.20.5"
   flutter_keyboard_visibility:
     dependency: transitive
     description:
@@ -450,18 +458,18 @@ packages:
     dependency: "direct dev"
     description:
       name: flutter_lints
-      sha256: e2a421b7e59244faef694ba7b30562e489c2b489866e505074eb005cd7060db7
+      sha256: "9e8c3858111da373efc5aa341de011d9bd23e2c5c5e0c62bccf32438e192d7b1"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.1"
+    version: "3.0.2"
   flutter_markdown:
     dependency: "direct main"
     description:
       name: flutter_markdown
-      sha256: cb44f7831b23a6bdd0f501718b0d2e8045cbc625a15f668af37ddb80314821db
+      sha256: "04c4722cc36ec5af38acc38ece70d22d3c2123c61305d555750a091517bbe504"
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.21"
+    version: "0.6.23"
   flutter_riverpod:
     dependency: "direct main"
     description:
@@ -500,10 +508,10 @@ packages:
     dependency: "direct dev"
     description:
       name: freezed
-      sha256: "57247f692f35f068cae297549a46a9a097100685c6780fe67177503eea5ed4e5"
+      sha256: a434911f643466d78462625df76fd9eb13e57348ff43fe1f77bbe909522c67a1
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.7"
+    version: "2.5.2"
   freezed_annotation:
     dependency: "direct main"
     description:
@@ -576,6 +584,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.0"
+  hooks_riverpod:
+    dependency: "direct main"
+    description:
+      name: hooks_riverpod
+      sha256: "45b2030a18bcd6dbd680c2c91bc3b33e3fe7c323e3acb5ecec93a613e2fbaa8a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.5.1"
   html:
     dependency: transitive
     description:
@@ -620,18 +636,10 @@ packages:
     dependency: transitive
     description:
       name: image
-      sha256: "028f61960d56f26414eb616b48b04eb37d700cbe477b7fb09bf1d7ce57fd9271"
+      sha256: "2237616a36c0d69aef7549ab439b833fb7f9fb9fc861af2cc9ac3eedddd69ca8"
       url: "https://pub.dev"
     source: hosted
-    version: "4.1.3"
+    version: "4.2.0"
-  inner_drawer:
-    dependency: "direct main"
-    description:
-      name: inner_drawer
-      sha256: "19df8813ccb6aa1b6db76f2f976c93befbbae67452d019f5267209b15deb0772"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.0+1"
   io:
     dependency: transitive
     description:
@@ -660,10 +668,10 @@ packages:
     dependency: "direct main"
     description:
       name: json_annotation
-      sha256: b10a7b2ff83d83c777edba3c6a0f97045ddadd56c944e1a23a3fdf43a1bf4467
+      sha256: "1ce844379ca14835a50d2f019a3099f419082cfdd231cd86a142af94dd5c6bb1"
       url: "https://pub.dev"
     source: hosted
-    version: "4.8.1"
+    version: "4.9.0"
   json_data_explorer:
     dependency: "direct main"
     description:
@@ -677,10 +685,10 @@ packages:
     dependency: "direct dev"
     description:
       name: json_serializable
-      sha256: aa1f5a8912615733e0fdc7a02af03308933c93235bdc8d50d0b0c8a8ccb0b969
+      sha256: ea1432d167339ea9b5bb153f0571d0039607a873d6e04e0117af043f14a1fd4b
       url: "https://pub.dev"
     source: hosted
-    version: "6.7.1"
+    version: "6.8.0"
   json_text_field:
     dependency: "direct main"
     description:
@@ -693,10 +701,10 @@ packages:
     dependency: "direct main"
     description:
       name: just_audio
-      sha256: b607cd1a43bac03d85c3aaee00448ff4a589ef2a77104e3d409889ff079bf823
+      sha256: "5abfab1d199e01ab5beffa61b3e782350df5dad036cb8c83b79fa45fc656614e"
       url: "https://pub.dev"
     source: hosted
-    version: "0.9.36"
+    version: "0.9.38"
   just_audio_mpv:
     dependency: "direct main"
     description:
@@ -709,26 +717,26 @@ packages:
     dependency: transitive
     description:
       name: just_audio_platform_interface
-      sha256: c3dee0014248c97c91fe6299edb73dc4d6c6930a2f4f713579cd692d9e47f4a1
+      sha256: "0243828cce503c8366cc2090cefb2b3c871aa8ed2f520670d76fd47aa1ab2790"
       url: "https://pub.dev"
     source: hosted
-    version: "4.2.2"
+    version: "4.3.0"
   just_audio_web:
     dependency: transitive
     description:
       name: just_audio_web
-      sha256: "134356b0fe3d898293102b33b5fd618831ffdc72bb7a1b726140abdf22772b70"
+      sha256: "0edb481ad4aa1ff38f8c40f1a3576013c3420bf6669b686fe661627d49bc606c"
       url: "https://pub.dev"
     source: hosted
-    version: "0.4.9"
+    version: "0.4.11"
   just_audio_windows:
     dependency: "direct main"
     description:
       name: just_audio_windows
-      sha256: "7b8801f3987e98a2002cd23b5600b2daf162248ff1413266fb44c84448c1c0d3"
+      sha256: "48ab2dec79cf6097550602fe07b1a644f341450e138dc8fdc23e42ce0ed2d928"
       url: "https://pub.dev"
     source: hosted
-    version: "0.2.0"
+    version: "0.2.1"
   leak_tracker:
     dependency: transitive
     description:
@@ -773,10 +781,10 @@ packages:
     dependency: "direct main"
     description:
       name: lottie
-      sha256: ce2bb2605753915080e4ee47f036a64228c88dc7f56f7bc1dbe912d75b55b1e2
+      sha256: "6a24ade5d3d918c306bb1c21a6b9a04aab0489d51a2582522eea820b4093b62b"
       url: "https://pub.dev"
     source: hosted
-    version: "3.1.0"
+    version: "3.1.2"
   markdown:
     dependency: "direct main"
     description:
@@ -813,10 +821,10 @@ packages:
     dependency: transitive
     description:
       name: mime
-      sha256: e4ff8e8564c03f255408decd16e7899da1733852a9110a58fe6d1b817684a63e
+      sha256: "2e123074287cc9fd6c09de8336dae606d1ddb88d9ac47358826db698c176a1f2"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.4"
+    version: "1.0.5"
   mime_dart:
     dependency: "direct main"
     description:
@@ -901,26 +909,26 @@ packages:
     dependency: "direct main"
     description:
       name: path_provider
-      sha256: b27217933eeeba8ff24845c34003b003b2b22151de3c908d0e679e8fe1aa078b
+      sha256: c9e7d3a4cd1410877472158bee69963a4579f78b68c65a2b7d40d1a7a88bb161
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.2"
+    version: "2.1.3"
   path_provider_android:
     dependency: transitive
     description:
       name: path_provider_android
-      sha256: e595b98692943b4881b219f0a9e3945118d3c16bd7e2813f98ec6e532d905f72
+      sha256: a248d8146ee5983446bf03ed5ea8f6533129a12b11f12057ad1b4a67a2b3b41d
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.1"
+    version: "2.2.4"
   path_provider_foundation:
     dependency: transitive
     description:
       name: path_provider_foundation
-      sha256: "19314d595120f82aca0ba62787d58dde2cc6b5df7d2f0daf72489e38d1b57f2d"
+      sha256: f234384a3fdd67f989b4d54a5d73ca2a6c422fa55ae694381ae0f4375cd1ea16
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.1"
+    version: "2.4.0"
   path_provider_linux:
     dependency: transitive
     description:
@@ -933,10 +941,10 @@ packages:
     dependency: transitive
     description:
       name: path_provider_platform_interface
-      sha256: "94b1e0dd80970c1ce43d5d4e050a9918fce4f4a775e6142424c30a29a363265c"
+      sha256: "88f5779f72ba699763fa3a3b06aa4bf6de76c8e5de842cf6f29e2e06476c2334"
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.1"
+    version: "2.1.2"
   path_provider_windows:
     dependency: transitive
     description:
@@ -949,10 +957,10 @@ packages:
     dependency: transitive
     description:
       name: pdf
-      sha256: "93cbb2c06de9bab91844550f19896b2373e7a5ce25173995e7e5ec5e1741429d"
+      sha256: "243f05342fc0bdf140eba5b069398985cdbdd3dbb1d776cf43d5ea29cc570ba6"
       url: "https://pub.dev"
     source: hosted
-    version: "3.10.7"
+    version: "3.10.8"
   pdf_widget_wrapper:
     dependency: transitive
     description:
@@ -973,34 +981,34 @@ packages:
     dependency: transitive
     description:
       name: platform
-      sha256: "0a279f0707af40c890e80b1e9df8bb761694c074ba7e1d4ab1bc4b728e200b59"
+      sha256: "12220bb4b65720483f8fa9450b4332347737cf8213dd2840d8b2c823e47243ec"
       url: "https://pub.dev"
     source: hosted
-    version: "3.1.3"
+    version: "3.1.4"
   plugin_platform_interface:
     dependency: transitive
     description:
       name: plugin_platform_interface
-      sha256: f4f88d4a900933e7267e2b353594774fc0d07fb072b47eedcd5b54e1ea3269f8
+      sha256: "4820fbfdb9478b1ebae27888254d445073732dae3d6ea81f0b7e06d5dedc3f02"
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.7"
+    version: "2.1.8"
   pointer_interceptor:
     dependency: transitive
     description:
       name: pointer_interceptor
-      sha256: bd18321519718678d5fa98ad3a3359cbc7a31f018554eab80b73d08a7f0c165a
+      sha256: d0a8e660d1204eaec5bd34b34cc92174690e076d2e4f893d9d68c486a13b07c4
       url: "https://pub.dev"
     source: hosted
-    version: "0.10.1"
+    version: "0.10.1+1"
   pointer_interceptor_ios:
     dependency: transitive
     description:
       name: pointer_interceptor_ios
-      sha256: "2e73c39452830adc4695757130676a39412a3b7f3c34e3f752791b5384770877"
+      sha256: a6906772b3205b42c44614fcea28f818b1e5fdad73a4ca742a7bd49818d9c917
       url: "https://pub.dev"
     source: hosted
-    version: "0.10.0+2"
+    version: "0.10.1"
   pointer_interceptor_platform_interface:
     dependency: transitive
     description:
@@ -1013,18 +1021,10 @@ packages:
     dependency: transitive
     description:
       name: pointer_interceptor_web
-      sha256: "9386e064097fd16419e935c23f08f35b58e6aaec155dd39bd6a003b88f9c14b4"
+      sha256: a6237528b46c411d8d55cdfad8fcb3269fc4cbb26060b14bff94879165887d1e
       url: "https://pub.dev"
     source: hosted
-    version: "0.10.1+2"
+    version: "0.10.2"
-  pointycastle:
-    dependency: transitive
-    description:
-      name: pointycastle
-      sha256: "7c1e5f0d23c9016c5bbd8b1473d0d3fb3fc851b876046039509e18e0c7485f2c"
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.7.3"
   pool:
     dependency: transitive
     description:
@@ -1061,10 +1061,10 @@ packages:
     dependency: transitive
     description:
       name: pubspec_parse
-      sha256: c63b2876e58e194e4b0828fcb080ad0e06d051cb607a6be51a9e084f47cb9367
+      sha256: c799b721d79eb6ee6fa56f00c04b472dcd44a30d258fac2174a6ec57302678f8
       url: "https://pub.dev"
     source: hosted
-    version: "1.2.3"
+    version: "1.3.0"
   qr:
     dependency: transitive
     description:
@@ -1290,26 +1290,26 @@ packages:
     dependency: "direct main"
     description:
       name: url_launcher
-      sha256: "0ecc004c62fd3ed36a2ffcbe0dd9700aee63bd7532d0b642a488b1ec310f492e"
+      sha256: "21b704ce5fa560ea9f3b525b43601c678728ba46725bab9b01187b4831377ed3"
       url: "https://pub.dev"
     source: hosted
-    version: "6.2.5"
+    version: "6.3.0"
   url_launcher_android:
     dependency: transitive
     description:
       name: url_launcher_android
-      sha256: "31222ffb0063171b526d3e569079cf1f8b294075ba323443fdc690842bfd4def"
+      sha256: "17cd5e205ea615e2c6ea7a77323a11712dffa0720a8a90540db57a01347f9ad9"
       url: "https://pub.dev"
     source: hosted
-    version: "6.2.0"
+    version: "6.3.2"
   url_launcher_ios:
     dependency: transitive
     description:
       name: url_launcher_ios
-      sha256: bba3373219b7abb6b5e0d071b0fe66dfbe005d07517a68e38d4fc3638f35c6d3
+      sha256: "7068716403343f6ba4969b4173cbf3b84fc768042124bc2c011e5d782b24fe89"
       url: "https://pub.dev"
     source: hosted
-    version: "6.2.1"
+    version: "6.3.0"
   url_launcher_linux:
     dependency: transitive
     description:
@@ -1322,26 +1322,26 @@ packages:
     dependency: transitive
     description:
       name: url_launcher_macos
-      sha256: b7244901ea3cf489c5335bdacda07264a6e960b1c1b1a9f91e4bc371d9e68234
+      sha256: "9a1a42d5d2d95400c795b2914c36fdcb525870c752569438e4ebb09a2b5d90de"
       url: "https://pub.dev"
     source: hosted
-    version: "3.1.0"
+    version: "3.2.0"
   url_launcher_platform_interface:
     dependency: transitive
     description:
       name: url_launcher_platform_interface
-      sha256: "980e8d9af422f477be6948bdfb68df8433be71f5743a188968b0c1b887807e50"
+      sha256: "552f8a1e663569be95a8190206a38187b531910283c3e982193e4f2733f01029"
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.0"
+    version: "2.3.2"
   url_launcher_web:
     dependency: transitive
     description:
       name: url_launcher_web
-      sha256: fff0932192afeedf63cdd50ecbb1bc825d31aed259f02bb8dba0f3b729a5e88b
+      sha256: "8d9e750d8c9338601e709cd0885f95825086bd8b642547f26bda435aade95d8a"
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.3"
+    version: "2.3.1"
   url_launcher_windows:
     dependency: transitive
     description:
@@ -1354,10 +1354,10 @@ packages:
     dependency: "direct main"
     description:
       name: uuid
-      sha256: cd210a09f7c18cbe5a02511718e0334de6559871052c90a90c0cca46a4aa81c8
+      sha256: "814e9e88f21a176ae1359149021870e87f7cddaf633ab678a5d2b0bff7fd1ba8"
       url: "https://pub.dev"
     source: hosted
-    version: "4.3.3"
+    version: "4.4.0"
   vector_graphics:
     dependency: transitive
     description:
@@ -1394,26 +1394,26 @@ packages:
     dependency: "direct main"
     description:
       name: video_player
-      sha256: afc65f4b8bcb2c188f64a591f84fb471f4f2e19fc607c65fd8d2f8fedb3dec23
+      sha256: db6a72d8f4fd155d0189845678f55ad2fd54b02c10dcafd11c068dbb631286c0
       url: "https://pub.dev"
     source: hosted
-    version: "2.8.3"
+    version: "2.8.6"
   video_player_android:
     dependency: transitive
     description:
       name: video_player_android
-      sha256: "4dd9b8b86d70d65eecf3dcabfcdfbb9c9115d244d022654aba49a00336d540c2"
+      sha256: "134e1ad410d67e18a19486ed9512c72dfc6d8ffb284d0e8f2e99e903d1ba8fa3"
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.12"
+    version: "2.4.14"
   video_player_avfoundation:
     dependency: transitive
     description:
       name: video_player_avfoundation
-      sha256: "309e3962795e761be010869bae65c0b0e45b5230c5cee1bec72197ca7db040ed"
+      sha256: d1e9a824f2b324000dc8fb2dcb2a3285b6c1c7c487521c63306cc5b394f68a7c
       url: "https://pub.dev"
     source: hosted
-    version: "2.5.6"
+    version: "2.6.1"
   video_player_platform_interface:
     dependency: "direct main"
     description:
@@ -1426,10 +1426,10 @@ packages:
     dependency: transitive
     description:
       name: video_player_web
-      sha256: "41245cef5ef29c4585dbabcbcbe9b209e34376642c7576cabf11b4ad9289d6e4"
+      sha256: ff4d69a6614b03f055397c27a71c9d3ddea2b2a23d71b2ba0164f59ca32b8fe2
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.0"
+    version: "2.3.1"
   vm_service:
     dependency: transitive
     description:
@@ -1458,10 +1458,10 @@ packages:
     dependency: transitive
     description:
       name: web_socket_channel
-      sha256: d88238e5eac9a42bb43ca4e721edba3c08c6354d4a53063afaa568516217621b
+      sha256: "58c6666b342a38816b2e7e50ed0f1e261959630becd4c879c4f26bfa14aa5a42"
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.0"
+    version: "2.4.5"
   webkit_inspection_protocol:
     dependency: transitive
     description:
@@ -1474,24 +1474,24 @@ packages:
     dependency: transitive
     description:
       name: win32
-      sha256: b0f37db61ba2f2e9b7a78a1caece0052564d1bc70668156cf3a29d676fe4e574
+      sha256: "0eaf06e3446824099858367950a813472af675116bf63f008a4c2a75ae13e9cb"
       url: "https://pub.dev"
     source: hosted
-    version: "5.1.1"
+    version: "5.5.0"
   window_manager:
     dependency: "direct main"
     description:
       name: window_manager
-      sha256: b3c895bdf936c77b83c5254bec2e6b3f066710c1f89c38b20b8acc382b525494
+      sha256: "8699323b30da4cdbe2aa2e7c9de567a6abd8a97d9a5c850a3c86dcd0b34bbfbf"
       url: "https://pub.dev"
     source: hosted
-    version: "0.3.8"
+    version: "0.3.9"
   window_size:
     dependency: "direct main"
     description:
       path: "plugins/window_size"
       ref: HEAD
-      resolved-ref: "6c66ad23ee79749f30a8eece542cf54eaf157ed8"
+      resolved-ref: eb3964990cf19629c89ff8cb4a37640c7b3d5601
       url: "https://github.com/google/flutter-desktop-embedding.git"
     source: git
     version: "0.1.0"
@@ -1499,10 +1499,10 @@ packages:
     dependency: transitive
     description:
       name: xdg_directories
-      sha256: "589ada45ba9e39405c198fe34eb0f607cddb2108527e658136120892beac46d2"
+      sha256: faea9dee56b520b55a566385b84f2e8de55e7496104adada9962e0bd11bcff1d
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.3"
+    version: "1.0.4"
   xml:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -57,10 +57,11 @@ dependencies:
   dart_style: ^2.3.6
   json_text_field: ^1.1.0
   csv: ^6.0.0
-  inner_drawer: ^1.0.0+1
   flex_color_scheme: ^7.3.1
   data_table_2: ^2.5.11
   file_selector: ^1.0.3
+  hooks_riverpod: ^2.5.1
+  flutter_hooks: ^0.20.5
 
 dependency_overrides:
   web: ^0.5.0