yang991178 / fluent-reader

Modern desktop RSS reader built with Electron, React, and Fluent UI
https://hyliu.me/fluent-reader/
BSD 3-Clause "New" or "Revised" License
7.79k stars 425 forks source link

UI to address the following aspects: Filters, Stars, Flags, Tags and Categories. #675

Open Slon104 opened 4 months ago

Slon104 commented 4 months ago

Hello Fluent Reader Community,

I started exploring Fluent Reader about a week ago and have fully configured it to suit my needs. I'm thoroughly enjoying the experience! My primary use case involves monitoring 50+ media portals for the latest news, and I frequently perform searches based on topics that interest me. Currently, the search functionality is somewhat basic—designed to handle a single keyword or phrases separated by spaces. This has led me to repetitively enter the same keywords, which felt inefficient and somewhat cumbersome.

Given this, I began pondering ways to enhance the UI to streamline the experience for users like me, who require efficient tools to filter news based on specific queries. Before diving into design, I reviewed existing GitHub issues to ensure my efforts would address common concerns and enhance functionality for a broader audience. Notably, I found:

Proposed Design

My design proposal does not aim to reinvent the wheel. Instead, it builds on the existing UI framework to introduce more dynamic and user-friendly filtering options. Here are some of the enhancements I was thinking about:

  1. Advanced Filtering System: Integrate a more robust filter system that allows users to save and quickly toggle between different search queries. This would eliminate the need to repeatedly enter the same keywords and enhance usability.
  2. Tagging vs. Filtering Approach: Initially, I considered tagging system. However, given that tags would require frequent re-runs and could become cumbersome to manage like emails, I decided that a dedicated filter system might be more user-friendly for general users.
  3. Integration with Existing Features: Enhance the existing system of Stars by allowing these elements to be part of the filtering criteria, enabling users to quickly access their prioritized content.
  4. Category Management: Streamline the management and visibility of categories directly from the main UI, allowing for more intuitive navigation and organization of articles.

Screen previews

Each screen preview is crafted to illustrate how these features function in a real-world scenario, demonstrating the practical benefits and enhanced control they provide.

MAIN screen

The first image will introduce you to the updated Main/Home default view. Subsequent images will focus on the newly refined hamburger menu. Here, you’ll find the addition of a Marked with Star view—a dedicated space for all your starred articles, making them easily accessible. Furthermore, I’ve introduced a new grouping called "Custom Filter Views." This feature organizes articles based on each individual filter you apply, allowing for a high personalization. 01 MAIN

Filter setting tab

The Filter Settings tab, much like the familiar Group tab, uses a similar UI language to ensure a seamless user experience. Here's what you can expect:

  1. Create New Filter: At the top of the tab, you will see an option to create a new filter.
  2. Manage Existing Filters: Below the creation option, there is a list of existing filters. These can be managed in a similar way to Groups, allowing for easy customization.
  3. Edit Filter Options: When a filter is selected, you will have the option to edit its parameters. This includes changing the Filter name, selecting which content to filter, and specifying keywords that are of higher or no interest. 02 Filteris

Filter - Add sources & groups

Upon accessing this feature by clicking on Sources & Groups within the Filter tab, users are greeted with a streamlined interface:

  1. Back to Filter Tab: At the top, you will find a straightforward option to return to the main Filter tab, ensuring easy navigation and a seamless workflow.
  2. Add Sources or Groups: Users can add new sources or groups through a dropdown selection, tailoring their filter feed to include specific content that matches their preferences.
  3. Manage List: Similar to the management system in the Sources tab.
  4. Delete Option: For further customization, there is also the functionality to delete selected items directly from this tab, offering users complete control over their content. I am currently exploring an additional feature where all sources within a selected group could be displayed beneath the delete button. While this could add complexity to the implementation, I am assessing its value based on user needs. If you think this feature would enhance your experience or solve a specific problem, please share your thoughts with us MB. 03 Add source or group

Filter - Keywords

The journey into customizing your news feed starts when you select 'Keywords' from the Filter tab. Here’s what you can expect from the interface:

  1. Return to Filter Tab: At the top, there is an option to easily navigate back to the main Filter tab, ensuring you can switch between settings without hassle.
  2. Adding Keywords: Users can add keywords with specific actions. Either to focus on news that includes these terms or to exclude articles mentioning them. This allows for a highly personalized news experience, filtering content exactly as you prefer.
  3. Testing Keywords: After setting your keywords, there’s an option to test them to ensure they work as expected. This feature lets you confirm that the filters are correctly applied to your filter feed before you proceed. 04 1 Keywords 04 2 Keywords add or edit

Conclusion

These enhancements are intended to make Fluent Reader more accommodating to power users who need to manage large volumes of information efficiently, without overwhelming casual users. I believe these changes will improve the overall user experience by making news reading and management more seamless and intuitive.

I am eager to hear your thoughts on this proposal and looking forward to collaborating with the community to refine these ideas further. If you have any suggestions or feedback, please feel free to share!

Thank you for considering my suggestions.