[IMP] Option V2 - UX Improvement

[MrSweeter]

Option page is not user friendly, too much and not enough information at same time.

MAIN PAGE

HOST

• Implement a Dashboard-Like Interface Dashboard for Each Host: Instead of listing features and origins separately, create a dashboard for each host. This dashboard can display all the features associated with that host, categorized into sections like "UI/UX Enhancements," "Security," "Task Automation," etc. Toggle with 3 states: Blacklist - Disabled - Whitelist

• Dynamic Contextual Information Tooltips or Descriptive Info: Next to each feature toggle, show a small info icon (🛈) or have a tooltip that explains what the feature does, along with its impact on the host.

• Bulk Management Tools Global Host Settings: Add global options for each host, allowing the user to perform bulk actions like "Enable All Features" or "Disable All Features" for that host. This can simplify the workflow when managing multiple features.

STATE

• Use Cards for Features
  • Feature Cards: Convert each feature into a card format. Each card would display:
  • Feature Name
  • Brief Description
  • Current State (Whitelist/Blacklist/Disabled) (e.g., a small badge or tag)
  • Drag Handle: A distinct area for dragging (e.g., dots or grip icons).

Compact Cards: Keep the cards compact, so more features are visible at once. When hovered over or clicked, the card can expand to reveal more details like the description or options to modify.

• Batch Actions for Efficiency Select Multiple Features: Allow users to select multiple features at once (e.g., by holding Shift or Ctrl) and drag them together to a different state. This can save time when managing a large number of features.

Bulk Move Buttons: Include buttons to move all features from one state to another. For example, a "Move All to Whitelist" button within the Blacklist zone would be useful for hosts managing many features.

• Contextual Controls Right-Click or Tap-and-Hold Menu: Introduce contextual menus for each feature. For example, when right-clicking or tapping-and-holding a feature card, a menu appears with options like "Move to Whitelist," "Move to Blacklist," or "Disable."

Menu

• Home
• Features
  • One page per feature
  • General settings + Popup Settings
    • Versions
    • More
  • Notification
  • Import/Export/Migrate Task
  • Developers

[MrSweeter]

Contextual Menus Implementation Guide.md Smooth Drag Animation.md Multi-Select Feature Implementation.md

Migrate CSS to SCSS and minify

https://www.npmjs.com/package/rollup-plugin-scss?activeTab=readme

https://codebuds.com/blog/sass-scss-introduction

[GaetanVandenBergh]

Draft wireframe

[MrSweeter]

On info icon click for feature card, open a dialog/modal with details

Video/Gif Legend

Feature name Description/Details

Tags (category, type)

[MrSweeter]

Feature state

Replace "whitelist"/"blacklist" by Enabled/Disabled toggle with color

Update "disable" state to "deactivate"

[MrSweeter]

Enable some feature by default

Loading (need a custom one for Joorney) Tooltipmetadata Context OdooMenu (need some default) Stars effect Show my badge