Skip to content

Improved Drawer UI Design#534

Open
SantamRC wants to merge 12 commits intoCircuitVerse:masterfrom
SantamRC:improved-drawer
Open

Improved Drawer UI Design#534
SantamRC wants to merge 12 commits intoCircuitVerse:masterfrom
SantamRC:improved-drawer

Conversation

@SantamRC
Copy link
Copy Markdown

@SantamRC SantamRC commented Mar 18, 2026

This PR adds an improved UI for the Drawer of the App.

Changes:

  1. Improved Text and alignments
  2. Uniform Sizing
  3. Changed the dark and light theme icons to better looking ones
  4. Added active tab highlight

Screenshot of Final Look:

Screenshot_1773869293

Demo:

Improved.Drawer.webm

Summary by CodeRabbit

  • New Features

    • Theme toggle in navigation drawers for quick dark/light switching
    • Expandable navigation sections for improved menu organization
  • Improvements

    • Redesigned navigation drawers with styled header, active-state highlighting, and clearer child-item styling
    • Larger, more visible notification indicators and refined navigation item behavior
  • Chores

    • Updated Android SDK/target to 36, Gradle wrapper and plugin versions
    • Added devtools configuration file and expanded .gitignore build exclusions

Copilot AI review requested due to automatic review settings March 18, 2026 21:30
@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 18, 2026

Deploy Preview for cv-mobile-app-web ready!

Name Link
🔨 Latest commit f8090f4
🔍 Latest deploy log https://app.netlify.com/projects/cv-mobile-app-web/deploys/69bc6059d8811b00083687fc
😎 Deploy Preview https://deploy-preview-534--cv-mobile-app-web.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 18, 2026

Walkthrough

Top-level metadata revision changed and channel set to "stable"; Windows platform block removed and an Android platform block added. Android: compileSdk/targetSdk bumped to 36, minSdk switched to flutter.minSdkVersion, Gradle wrapper updated to 8.14, and AGP/Kotlin plugin versions bumped. Added devtools_options.yaml. Drawer and landing view UI refactored (new header, theme toggle, expansion tiles); CVDrawerTile added isActive and isChild with updated styling. Windows plugin registration and generated plugin list include quill_native_bridge_windows. .gitignore expanded to ignore more build directories.

Possibly related PRs

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Improved Drawer UI Design' directly reflects the main objective of the PR, which is to improve the drawer UI with better text alignments, uniform sizing, updated theme icons, and active tab highlighting.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the app’s Drawer UI (CircuitVerse + Interactive Book) to improve alignment/sizing and introduce active-tab highlighting, while also including several platform/tooling changes (Flutter/Dart SDK constraints, Android Gradle upgrades, and a new Windows plugin registration).

Changes:

  • Redesign Drawer layout: new header styling, icon updates, and active item highlighting (including child items in expansion sections).
  • Extend CVDrawerTile API to support isActive/isChild styling for consistent navigation appearance.
  • Update platform/tooling config (Android Gradle/Kotlin/Gradle wrapper changes, Flutter/Dart SDK constraint bump, Windows plugin registration update).

Reviewed changes

Copilot reviewed 13 out of 15 changed files in this pull request and generated 7 comments.

Show a summary per file
File Description
windows/flutter/generated_plugins.cmake Adds quill_native_bridge_windows to Windows plugin list.
windows/flutter/generated_plugin_registrant.cc Registers Windows plugins (now includes quill native bridge, but currently with mismatched header/symbol names).
pubspec.lock Updates dependency resolutions and bumps Dart/Flutter SDK constraints.
lib/ui/views/ib/ib_landing_view.dart Updates Interactive Book drawer UI and passes active-state into tiles.
lib/ui/components/cv_drawer.dart Refactors main drawer UI: header, icons, expansion tiles, active highlighting.
lib/ui/components/cv_drawer_tile.dart Adds active/child styling support and updates tile layout.
devtools_options.yaml Adds DevTools extension configuration file.
android/settings.gradle.kts Adds Kotlin DSL settings file (duplicates existing Groovy settings).
android/settings.gradle Updates AGP/Kotlin plugin versions.
android/gradle/wrapper/gradle-wrapper.properties Bumps Gradle wrapper distribution version.
android/build/reports/problems/problems-report.html Adds a Gradle-generated problems report (build artifact).
android/build.gradle.kts Adds Kotlin DSL root build file (duplicates existing Groovy build.gradle).
android/app/build.gradle.kts Adds Kotlin DSL app build file (duplicates existing Groovy app/build.gradle).
android/app/build.gradle Updates compile/target SDK values and keeps Flutter integration.
.metadata Updates Flutter tool/channel metadata (likely from Flutter SDK upgrade).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread windows/flutter/generated_plugin_registrant.cc
Comment thread android/build/reports/problems/problems-report.html Outdated
Comment thread android/settings.gradle.kts Outdated
Comment thread android/app/build.gradle.kts Outdated
Comment thread lib/ui/components/cv_drawer_tile.dart Outdated
Comment thread android/app/build.gradle
Comment thread android/build.gradle.kts Outdated
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 9

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
android/app/build.gradle (1)

1-126: ⚠️ Potential issue | 🔴 Critical

Critical: Remove duplicate Gradle build configuration file.

Both android/app/build.gradle (Groovy DSL) and android/app/build.gradle.kts (Kotlin DSL) exist in the same directory. Gradle does not allow both files to coexist and will fail the build.

The Groovy file must be deleted to resolve this blocker. Ensure the Kotlin DSL configuration includes all necessary settings from the Groovy file, including signing configurations, minification settings, lint configuration, and dependencies before deletion.

android/settings.gradle (1)

1-25: ⚠️ Potential issue | 🔴 Critical

Critical: Remove this file — duplicate Gradle settings configuration.

Both android/settings.gradle (Groovy) and android/settings.gradle.kts (Kotlin DSL) exist. Gradle does not support both files coexisting and will exhibit undefined behavior or fail to build.

Since the PR is migrating to Kotlin DSL, delete the Groovy settings file.


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b20ac770-d4fa-45eb-a69a-d25201335674

📥 Commits

Reviewing files that changed from the base of the PR and between f621531 and 8dabf10.

⛔ Files ignored due to path filters (1)
  • pubspec.lock is excluded by !**/*.lock
📒 Files selected for processing (14)
  • .metadata
  • android/app/build.gradle
  • android/app/build.gradle.kts
  • android/build.gradle.kts
  • android/build/reports/problems/problems-report.html
  • android/gradle/wrapper/gradle-wrapper.properties
  • android/settings.gradle
  • android/settings.gradle.kts
  • devtools_options.yaml
  • lib/ui/components/cv_drawer.dart
  • lib/ui/components/cv_drawer_tile.dart
  • lib/ui/views/ib/ib_landing_view.dart
  • windows/flutter/generated_plugin_registrant.cc
  • windows/flutter/generated_plugins.cmake

Comment thread .metadata
Comment thread android/app/build.gradle.kts Outdated
Comment thread android/app/build.gradle.kts Outdated
Comment thread lib/ui/components/cv_drawer_tile.dart Outdated
Comment thread lib/ui/components/cv_drawer.dart Outdated
Comment thread lib/ui/components/cv_drawer.dart
Comment thread lib/ui/components/cv_drawer.dart Outdated
Comment thread lib/ui/components/cv_drawer.dart
Comment thread lib/ui/views/ib/ib_landing_view.dart
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (1)
lib/ui/components/cv_drawer_tile.dart (1)

28-101: ⚠️ Potential issue | 🟠 Major

Expose active and pending states to accessibility services.

At Line 36 and Line 84, these states are visual-only right now. Please add semantics so TalkBack/VoiceOver can announce selected/unread state.

Suggested fix
-    return Container(
+    return Semantics(
+      selected: isActive,
+      child: Container(
       margin: const EdgeInsetsDirectional.only(
         start: 8,
         end: 8,
         top: 2,
         bottom: 2,
       ),
       decoration: BoxDecoration(
         color: isActive ? CVTheme.primaryColor.withOpacity(0.12) : null,
         borderRadius: BorderRadius.circular(10),
       ),
       child: Theme(
         data: CVTheme.themeData(context),
         child: ListTile(
+          selected: isActive,
           contentPadding: EdgeInsetsDirectional.only(
             start: isChild ? 56 : 16,
             end: 16,
             top: 0,
             bottom: 0,
           ),
@@
-          trailing: pending
-              ? Container(
+          trailing: pending
+              ? Semantics(
+                  label: 'Pending updates',
+                  child: ExcludeSemantics(
+                    child: Container(
                   height: 10,
                   width: 10,
                   decoration: BoxDecoration(
                     shape: BoxShape.circle,
                     color: CVTheme.red,
                     boxShadow: [
                       BoxShadow(
                         color: CVTheme.red.withOpacity(0.5),
                         blurRadius: 4,
                         spreadRadius: 1,
                       ),
                     ],
                   ),
-                )
+                    ),
+                  ),
+                )
               : null,
         ),
       ),
-    );
+      ),
+    );
🧹 Nitpick comments (1)
lib/ui/components/cv_drawer_tile.dart (1)

70-80: Keep drawer row height uniform for long localized titles.

At Line 70, title text can wrap to multiple lines and break uniform sizing. Consider constraining to a single line with ellipsis.

Suggested fix
               Expanded(
                 child: Text(
                   title,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  softWrap: false,
                   style: Theme.of(context).textTheme.titleLarge?.copyWith(
                     fontFamily: 'Poppins',
                     fontSize: isChild ? 15 : 16,

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0661f675-49c5-413e-a83f-b108419b6a29

📥 Commits

Reviewing files that changed from the base of the PR and between 8dabf10 and 067bd78.

📒 Files selected for processing (1)
  • lib/ui/components/cv_drawer_tile.dart

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
lib/ui/components/cv_drawer.dart (1)

83-86: Consider Selector if drawer rebuilds become a performance concern.

Using context.watch<CVLandingViewModel>() subscribes to all notifyListeners() calls from the ViewModel, including selectedIndex, currentUser, hasPendingNotif, and logout state. Since the drawer legitimately uses all these values, this is functionally correct, but if profiling shows excessive rebuilds, consider wrapping specific sections with Selector to scope reactivity.

Also, the underscore prefix on _model is unconventional for local variables in Dart (typically reserved for private class members).


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a047e739-cec2-4ea7-a626-2df69fe36d05

📥 Commits

Reviewing files that changed from the base of the PR and between 067bd78 and 96e39b8.

📒 Files selected for processing (3)
  • .gitignore
  • lib/ui/components/cv_drawer.dart
  • lib/ui/views/ib/ib_landing_view.dart
✅ Files skipped from review due to trivial changes (1)
  • .gitignore
🚧 Files skipped from review as they are similar to previous changes (1)
  • lib/ui/views/ib/ib_landing_view.dart

Comment thread lib/ui/components/cv_drawer.dart
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
lib/ui/components/cv_drawer_tile.dart (2)

24-26: Use the activeColor variable consistently.

Line 24 defines activeColor = CVTheme.primaryColor, but line 39 accesses CVTheme.primaryColor directly. Use the variable to avoid redundancy and ensure consistency if the source changes.

Suggested fix
         decoration: BoxDecoration(
-          color: isActive ? CVTheme.primaryColor.withOpacity(0.12) : null,
+          color: isActive ? activeColor.withOpacity(0.12) : null,
           borderRadius: BorderRadius.circular(10),
         ),

Also applies to: 38-40


75-82: Consider extracting the hardcoded font family to a constant.

The 'Poppins' font family is hardcoded here. If this font is used elsewhere in the app's theme, consider referencing a shared constant or the app's TextTheme to ensure consistency and easier maintenance.


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c4e3b819-4501-410c-a714-7740e8d6003b

📥 Commits

Reviewing files that changed from the base of the PR and between 96e39b8 and 2feccb3.

📒 Files selected for processing (1)
  • lib/ui/components/cv_drawer_tile.dart

Comment thread lib/ui/components/cv_drawer_tile.dart Outdated
SantamRC and others added 4 commits March 20, 2026 02:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants