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

feat: desktop responsiveness
2025-06-27 19:07:40 +08:00 · 2024-06-16 15:04:55 +05:30
parent a49bcec641 126de74ca3
commit fe684e022b
21 changed files with 525 additions and 557 deletions
--- a/lib/app.dart
+++ b/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
-          ? context.isLargeWidth
-              ? const Dashboard()
-              : const MobileDashboard()
-          : Stack(
-              children: [
-                kIsLinux ? const Dashboard() : const App(),
-                if (kIsWindows)
-                  SizedBox(
-                    height: 29,
-                    child: WindowCaption(
-                      backgroundColor: Colors.transparent,
-                      brightness:
-                          isDarkMode ? Brightness.dark : Brightness.light,
-                    ),
-                  ),
-              ],
+      home: Stack(
+        children: [
+          !kIsLinux && !kIsMobile
+              ? const App()
+              : context.isMediumWindow
+                  ? const MobileDashboard()
+                  : const Dashboard(),
+          if (kIsWindows)
+            SizedBox(
+              height: 29,
+              child: WindowCaption(
+                backgroundColor: Colors.transparent,
+                brightness: isDarkMode ? Brightness.dark : Brightness.light,
+              ),
            ),
+        ],
+      ),
    );
  }
 }
--- a/lib/consts.dart
+++ b/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);
--- a/lib/extensions/context_extensions.dart
+++ b/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 =>
-      MediaQuery.of(this).size.width > kMinWindowSize.width;
+  bool get isCompactWindow =>
+      MediaQuery.of(this).size.width < kCompactWindowWidth;

-  bool get isMobile =>
-      kIsMobile && MediaQuery.of(this).size.width < kMinWindowSize.width;
+  bool get isMediumWindow =>
+      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;
 }
--- a/lib/providers/ui_providers.dart
+++ b/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>>(
-    (ref) => GlobalKey<InnerDrawerState>());
+final mobileScaffoldKeyStateProvider = StateProvider<GlobalKey<ScaffoldState>>(
+    (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);
--- a/lib/screens/dashboard.dart
+++ b/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(),
                ],
--- a/lib/screens/home_page/collection_pane.dart
+++ b/lib/screens/home_page/collection_pane.dart
@ -22,91 +22,101 @@ class CollectionPane extends ConsumerWidget {
        child: CircularProgressIndicator(),
      );
    }
-    return Padding(
-      padding: kIsMacOS ? kP24CollectionPane : kP8CollectionPane,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          Padding(
-            padding: kPe8,
-            child: Wrap(
-              alignment: WrapAlignment.spaceBetween,
-              children: [
-                TextButton.icon(
-                  onPressed: (savingData || !hasUnsavedChanges)
-                      ? null
-                      : () async {
-                          overlayWidget.show(
-                              widget:
-                                  const SavingOverlay(saveCompleted: false));
+    return Drawer(
+      shape: const ContinuousRectangleBorder(),
+      backgroundColor: Theme.of(context).colorScheme.surface,
+      surfaceTintColor: kColorTransparent,
+      child: Padding(
+        padding: (!context.isMediumWindow && kIsMacOS
+                ? kP24CollectionPane
+                : kP8CollectionPane) +
+            (context.isMediumWindow ? kPb70 : EdgeInsets.zero),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Padding(
+              padding: kPe8,
+              child: Wrap(
+                alignment: WrapAlignment.spaceBetween,
+                children: [
+                  TextButton.icon(
+                    onPressed: (savingData || !hasUnsavedChanges)
+                        ? null
+                        : () async {
+                            overlayWidget.show(
+                                widget:
+                                    const SavingOverlay(saveCompleted: false));

-                          await ref
-                              .read(collectionStateNotifierProvider.notifier)
-                              .saveData();
-                          overlayWidget.hide();
-                          overlayWidget.show(
-                              widget: const SavingOverlay(saveCompleted: true));
-                          await Future.delayed(const Duration(seconds: 1));
-                          overlayWidget.hide();
-                        },
-                  icon: const Icon(
-                    Icons.save,
-                    size: 20,
+                            await ref
+                                .read(collectionStateNotifierProvider.notifier)
+                                .saveData();
+                            overlayWidget.hide();
+                            overlayWidget.show(
+                                widget:
+                                    const SavingOverlay(saveCompleted: true));
+                            await Future.delayed(const Duration(seconds: 1));
+                            overlayWidget.hide();
+                          },
+                    icon: const Icon(
+                      Icons.save,
+                      size: 20,
+                    ),
+                    label: const Text(
+                      kLabelSave,
+                      style: kTextStyleButton,
+                    ),
                  ),
-                  label: const Text(
-                    kLabelSave,
-                    style: kTextStyleButton,
+                  //const Spacer(),
+                  ElevatedButton(
+                    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(
-              children: [
-                kHSpacer5,
-                Icon(
-                  Icons.filter_alt,
-                  size: 18,
-                  color: Theme.of(context).colorScheme.secondary,
+            kVSpacer10,
+            Container(
+              margin: const EdgeInsets.only(right: 8),
+              decoration: BoxDecoration(
+                borderRadius: kBorderRadius8,
+                border: Border.all(
+                  color: Theme.of(context).colorScheme.surfaceVariant,
                ),
-                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();
-                    },
+              ),
+              child: Row(
+                children: [
+                  kHSpacer5,
+                  Icon(
+                    Icons.filter_alt,
+                    size: 18,
+                    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,
-          const Expanded(
-            child: RequestList(),
-          ),
-        ],
+            kVSpacer10,
+            const Expanded(
+              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: () {
--- a/lib/screens/home_page/editor_pane/editor_request.dart
+++ b/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(
--- a/lib/screens/home_page/editor_pane/url_card.dart
+++ b/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(),
--- a/lib/screens/mobile/dashboard.dart
+++ b/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 '../home_page/collection_pane.dart';
+import 'widgets/page_base.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 =
-        ref.watch(mobileDrawerKeyProvider);
-    final isLargeMobile = MediaQuery.sizeOf(context).width > kLargeMobileWidth;
+    final railIdx = ref.watch(navRailIndexStateProvider);
+    final isLeftDrawerOpen = ref.watch(leftDrawerStateProvider);
+
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: FlexColorScheme.themedSystemNavigationBar(
        context,
@ -54,70 +35,16 @@ class _MobileDashboardState extends ConsumerState<MobileDashboard> {
      child: Stack(
        alignment: AlignmentDirectional.bottomCenter,
        children: [
-          InnerDrawer(
-            key: innerDrawerKey,
-            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,
-                  ),
-                ),
-              ),
-            ),
+          PageBranch(
+            pageIndex: railIdx,
          ),
-          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,
+        );
+    }
+  }
+}
--- a/lib/screens/mobile/navbar.dart
+++ b/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 '../intro_page.dart';
+import 'package:apidash/providers/providers.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,
-                      Icons.help, Icons.help_outline, 'About',
-                      isNavigator: true, onTap: () {
-                    Navigator.of(context).push(
-                      MaterialPageRoute(
-                          builder: (context) => const PageBase(
-                                title: 'About',
-                                scaffoldBody: IntroPage(),
-                              )),
-                    );
-                  }),
+                  child: customNavigationDestination(
+                    context,
+                    ref,
+                    railIdx,
+                    2,
+                    Icons.help,
+                    Icons.help_outline,
+                    'About',
+                  ),
                ),
                Expanded(
-                  child: customNavigationDestination(context, ref, railIdx, 3,
-                      Icons.settings, Icons.settings_outlined, 'Settings',
-                      isNavigator: true, onTap: () {
-                    Navigator.of(context).push(
-                      MaterialPageRoute(
-                          builder: (context) => const PageBase(
-                                title: 'Settings',
-                                scaffoldBody: SettingsPage(),
-                              )),
-                    );
-                  }),
+                  child: customNavigationDestination(
+                    context,
+                    ref,
+                    railIdx,
+                    3,
+                    Icons.settings,
+                    Icons.settings_outlined,
+                    '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(
-    message: label,
-    triggerMode: TooltipTriggerMode.longPress,
-    verticalOffset: 42,
+  return MouseRegion(
+    cursor: SystemMouseCursors.click,
    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 =
-                            buttonIdx;
+                      ref.read(navRailIndexStateProvider.notifier).state =
+                          buttonIdx;
+                      if (railIdx > 1 && buttonIdx <= 1) {
+                        ref.read(leftDrawerStateProvider.notifier).state =
+                            false;
                      }
                      onTap?.call();
                    },
--- a/lib/screens/mobile/requests_page.dart
+++ b/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 {
-  final GlobalKey<InnerDrawerState> innerDrawerKey;
+class RequestsPage extends ConsumerWidget {
+  const RequestsPage({
+    super.key,
+    required this.scaffoldKey,
+  });

-  const RequestsPage({super.key, required this.innerDrawerKey});
+  final GlobalKey<ScaffoldState> scaffoldKey;

  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Colors.transparent,
-      appBar: AppBar(
-        backgroundColor: Theme.of(context).colorScheme.surface,
-        scrolledUnderElevation: 0,
-        shape: const RoundedRectangleBorder(
-          borderRadius: BorderRadius.only(topLeft: Radius.circular(8)),
-        ),
-        leading: IconButton(
-          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),
+  Widget build(BuildContext context, WidgetRef ref) {
+    return TwoDrawerScaffold(
+      scaffoldKey: scaffoldKey,
+      title: const RequestTitle(),
+      leftDrawerContent: const CollectionPane(),
+      rightDrawerContent: const ResponseDrawer(),
+      mainContent: const RequestEditorPane(),
+      bottomNavigationBar: const RequestPageBottombar(),
+      onDrawerChanged: (value) =>
+          ref.read(leftDrawerStateProvider.notifier).state = value,
    );
  }
 }
@ -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!
-                  .open(direction: InnerDrawerDirection.end);
+              ref
+                  .read(mobileScaffoldKeyStateProvider)
+                  .currentState!
+                  .openEndDrawer();
            },
          ),
        ],
--- a/lib/screens/mobile/widgets/left_drawer.dart
+++ b/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,
-          ),
-        ),
-      ),
-    );
-  }
-}
--- a/lib/screens/mobile/widgets/page_base.dart
+++ b/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) {
-    return Scaffold(
+  Widget build(BuildContext context, WidgetRef ref) {
+    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,
+            ),
+          ),
+      ],
+    );
  }
 }
--- a/lib/screens/settings_page.dart
+++ b/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
--- a/lib/widgets/dropdowns.dart
+++ b/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(
--- a/lib/widgets/intro_message.dart
+++ b/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());
--- a/lib/widgets/request_widgets.dart
+++ b/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,
--- a/lib/widgets/splitviews.dart
+++ b/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,
+      ),
+    );
+  }
+}
--- a/lib/widgets/tabs.dart
+++ b/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(
--- a/pubspec.lock
+++ b/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"
-  inner_drawer:
-    dependency: "direct main"
-    description:
-      name: inner_drawer
-      sha256: "19df8813ccb6aa1b6db76f2f976c93befbbae67452d019f5267209b15deb0772"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.0+1"
+    version: "4.2.0"
  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"
-  pointycastle:
-    dependency: transitive
-    description:
-      name: pointycastle
-      sha256: "7c1e5f0d23c9016c5bbd8b1473d0d3fb3fc851b876046039509e18e0c7485f2c"
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.7.3"
+    version: "0.10.2"
  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:
--- a/pubspec.yaml
+++ b/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