Skip to content

Enhance navigation bar#7913

Closed
aledeg wants to merge 1 commit intoFreshRSS:edgefrom
aledeg:enhance/navbar
Closed

Enhance navigation bar#7913
aledeg wants to merge 1 commit intoFreshRSS:edgefrom
aledeg:enhance/navbar

Conversation

@aledeg
Copy link
Member

@aledeg aledeg commented Sep 4, 2025

Now, it includes a button to open the current article in a new window and a button to toggle the current article favourite flag.

See #7912

Closes #7912

Changes proposed in this pull request:

  • Add 2 buttons in the navbar to ease mobile navigation

How to test the feature manually:

  1. use the 2 new buttons and validate that they behave properly

Pull request checklist:

  • clear commit messages
  • code manually tested
  • unit tests written (optional if too hard)
  • documentation updated

Additional information can be found in the documentation.

The new navbar

Screen Shot 2025-09-04 at 08 26 15

Now, it includes a button to open the current article in a new window and
a button to toggle the current article favourite flag.

See FreshRSS#7912
@Alkarex Alkarex added this to the 1.27.1 milestone Sep 4, 2025
@Alkarex Alkarex added the UI 🎨 User Interfaces label Sep 4, 2025
@SHU-red
Copy link

SHU-red commented Sep 4, 2025

This looks so nice!
Im using freshRSS via Docker freshrss/freshrss

Will this PR somehow be availalbe via edge or something?
How can i test it with my setup?

@aledeg
Copy link
Member Author

aledeg commented Sep 4, 2025

It will be available in edge only if it is accepted.

If you are using git, you can change branch to aledeg:enhance/navbar.

@math-GH
Copy link
Contributor

math-GH commented Sep 4, 2025

Is this PR already ready for a review?
missing i18n:

  • gen.action.nav_buttons.favourite is not a valid key
  • gen.action.nav_buttons.link is not a valid key

If no feed article is selected then the new buttons use the first article. It feels a bit strange when I already scrolled down and the first article is out of view (I know, same situation with the navigation buttons at all).
When the favorite button is selected there is no feedback on this button (I think a simliar feedback should be used while using the star icon in the article: loading icon while waiting for the response).

At all:
IMHO it feels strange to have 3 navigation buttons and 2 non-navigation buttons in the same bar.
Currently no chance to configurate this buttons. I do not understand why this 2 buttons (link, star) are much more important than read/unread, sharing, labeling.
Why are these buttons only important to have it in the normal view but not in the reading view and/or global view?
I am a heavy user of the mobile layout on my phone. The 3 navigation buttons are now much smaller than before. I do not know if I would prefer to have them smaller.
Is this feature widely requested or is it a good case for an extension?

While the discussion was around the mobile view, currently the "desktop view" is affected too. It looks strange to have these 2 new buttons there too.

@Alkarex
Copy link
Member

Alkarex commented Sep 4, 2025

How can i test it with my setup?

It depends on how you installed FreshRSS.

For instance if using Docker, you can modify your Docker Compose or equivalent like so:

  freshrss:
    image: freshrss/freshrss:7913
    build:
      context: https://github.com/aledeg/FreshRSS.git#enhance/navbar
      dockerfile: Docker/Dockerfile-Alpine
    ...

If using git, you can just run git pull https://github.com/aledeg/FreshRSS.git enhance/navbar and then git reset --hard to revert.

If using ZIP, you can get https://github.com/aledeg/FreshRSS/archive/refs/heads/enhance/navbar.zip

By the way, we should have such instructions in a Q&A or in our documentation somewhere. Help welcome.

@aledeg
Copy link
Member Author

aledeg commented Sep 4, 2025

Is this PR already ready for a review? missing i18n:

* gen.action.nav_buttons.favourite is not a valid key

* gen.action.nav_buttons.link is not a valid key

If no feed article is selected then the new buttons use the first article. It feels a bit strange when I already scrolled down and the first article is out of view (I know, same situation with the navigation buttons at all). When the favorite button is selected there is no feedback on this button (I think a simliar feedback should be used while using the star icon in the article: loading icon while waiting for the response).

At all: IMHO it feels strange to have 3 navigation buttons and 2 non-navigation buttons in the same bar. Currently no chance to configurate this buttons. I do not understand why this 2 buttons (link, star) are much more important than read/unread, sharing, labeling. Why are these buttons only important to have it in the normal view but not in the reading view and/or global view? I am a heavy user of the mobile layout on my phone. The 3 navigation buttons are now much smaller than before. I do not know if I would prefer to have them smaller. Is this feature widely requested or is it a good case for an extension?

While the discussion was around the mobile view, currently the "desktop view" is affected too. It looks strange to have these 2 new buttons there too.

This is more of a POC to see how it is feasible. It can work. I am not saying it should be this way. You were concerned about the difficulty of knowing which article was in focus. This proves that it's already working. If you check the code, most things I've used were existing.

@aledeg aledeg marked this pull request as draft September 4, 2025 20:48
@Frenzie
Copy link
Member

Frenzie commented Sep 4, 2025

IMHO it feels strange to have 3 navigation buttons and 2 non-navigation buttons in the same bar.

That doesn't bother me.

I am a heavy user of the mobile layout on my phone. The 3 navigation buttons are now much smaller than before. I do not know if I would prefer to have them smaller.

But that does. I'm afraid I definitely don't like the worse Fitts' law. :-)

While the discussion was around the mobile view, currently the "desktop view" is affected too. It looks strange to have these 2 new buttons there too.

Incidentally, on desktop it also immediately stands out that it's a button and not a proper link.

@math-GH
Copy link
Contributor

math-GH commented Sep 4, 2025

You were concerned about the difficulty of knowing which article was in focus. This proves that it's already working. If you check the code, most things I've used were existing.

It is good to know that it work this way. In my mind I was thinking about the feature "Show articles unfolded by default"

@SHU-red
Copy link

SHU-red commented Sep 4, 2025

For instance if using Docker, you can modify your Docker Compose or equivalent like so:

So good! Thanks for that hint, im not that familiar with build in docker compose

Tested your branch:

  • love it! Super convenient for managing my favourites
  • Also did not think about the open article button but also extremely practical

I definetly think this is an awesome feature!

@math-GH

I fully understand your points and appreciate your sense for rather deeply think about features before quickly impelementing them

But also:

  • (as you mentioned) your "already scrolled down" points have always been the same for the already present arrow/next buttons → You scroll somewhere random and then hit the arrow key and jump up → so the behavior you are highlighting is already normal
  • as i add the article to the favs i immediately see the yellow star highlighting it
  • also being a dedicated user to NOT use 3rd party apps because i like the simplicity (and configuratibility) of FreshRSS → testing the PR of @Alkarex immediately made me smile because now i can commit to use the fast and reachable navbar buttons on the bottom very conveniently to run through all of the tasks i need
  • your comparison/questioning of importance just brings be back to → it should be configurable because everyone has a different aproach/preference so every discussion about importance just comes down to preference

Having used the PR right now makes me not want to go back
I think there is plenty of space, no matter what if we are talking about mobile or deskop

@aledeg
Copy link
Member Author

aledeg commented Sep 4, 2025

Maybe we can add a action bar on top of the navigation bar with all the actions available in the article footer and header (configurable as them as-well).
This action bar could be display or not depending either of the configuration or the size of the display (or both).

@aledeg
Copy link
Member Author

aledeg commented Sep 4, 2025

Maybe, it can be handle by an extension.
This means we need a way to hook something there and to have access to the URL of the article.

@Alkarex Alkarex modified the milestones: 1.27.1, 1.28.0 Sep 16, 2025
aledeg added a commit to aledeg/FreshRSS that referenced this pull request Oct 2, 2025
The new hook allows extension to add their own tool bar to navigate between
entries. For instance, if the user wants less or more buttons that what's
available by default.

See FreshRSS#7912
See FreshRSS#7913
aledeg added a commit to aledeg/FreshRSS that referenced this pull request Oct 2, 2025
The new hook allows extension to add their own tool bar to navigate between
entries. For instance, if the user wants less or more buttons that what's
available by default.

See FreshRSS#7912
See FreshRSS#7913
aledeg added a commit to aledeg/FreshRSS that referenced this pull request Oct 2, 2025
The new hook allows extension to add their own tool bar to navigate between
entries. For instance, if the user wants less or more buttons that what's
available by default.

See FreshRSS#7912
See FreshRSS#7913
@aledeg aledeg mentioned this pull request Oct 2, 2025
4 tasks
Alkarex pushed a commit that referenced this pull request Oct 2, 2025
* Add a new hook in the UI

The new hook allows extension to add their own tool bar to navigate between
entries. For instance, if the user wants less or more buttons that what's
available by default.

See #7912
See #7913

* add link data to ease navigation
@aledeg
Copy link
Member Author

aledeg commented Oct 2, 2025

@SHU-red the new hook has been added to the UI. Now, an extension can add something above the navigation buttons.

@aledeg
Copy link
Member Author

aledeg commented Oct 2, 2025

@SHU-red check the extension I quickly built here https://github.com/aledeg/xExtension-EnhancedNavigation. This way you can rely on the edge branch for the project and use this extention.

At the moment, it's limited but I will add some more features and configuration.

@SHU-red
Copy link

SHU-red commented Oct 3, 2025

@aledeg thank you so much for putting effort into this!

  1. I switched to edge docker image
  2. I git clone your repo into the extensions folder
  3. I activated the user extension

The navbar is there! Awesome!
Currently somehow hitting the star-button does not toggle the article to the favourites on my phone but maybe the problem is me

Thank you so so much!

@SHU-red
Copy link

SHU-red commented Oct 3, 2025

@aledeg my fault:
The fav-toggle action on my phone just did not work because i was not logged in as user
Since being logged in everything is perfect!

Thank you once more!

@aledeg aledeg marked this pull request as ready for review October 3, 2025 10:26
@aledeg
Copy link
Member Author

aledeg commented Oct 3, 2025

Implemented in an extension

@aledeg aledeg closed this Oct 3, 2025
@aledeg aledeg deleted the enhance/navbar branch October 3, 2025 10:26
@aledeg
Copy link
Member Author

aledeg commented Oct 8, 2025

@SHU-red I've published the first real version of the extension. I've fixed some errors, add some configuration, change the CSS to smoothly change when you enable/disable a button.

If you have time, please check https://github.com/aledeg/xExtension-EnhancedNavigation/releases/tag/0.1.1. Thank you

@SHU-red
Copy link

SHU-red commented Oct 8, 2025

  1. went to extensions folder
  2. pulled newest state of repo
HEAD detached at 0.1.1
  1. Restarted freshRSS container
  2. NavBar is missing but extension active
[Wed Oct 08 15:03:10.270608 2025] [php:error] [pid 41:tid 41] [client 192.168.178.136:46808] PHP Fatal error:  Uncaught TypeError: EnhancedNavigationExtension::showPreviousEntryButton(): Return value must be of type bool, null returned in /var/www/FreshRSS/extensions/xExtension-EnhancedNavigation/extension.php:115\nStack trace:\n#0 /var/www/FreshRSS/extensions/xExtension-EnhancedNavigation/extension.php(75): EnhancedNavigationExtension->showPreviousEntryButton()\n#1 /var/www/FreshRSS/extensions/xExtension-EnhancedNavigation/extension.php(58): EnhancedNavigationExtension->generatePreviousEntryButton()\n#2 /var/www/FreshRSS/lib/Minz/ExtensionManager.php(373): EnhancedNavigationExtension->generateEnhancedNavigation()\n#3 /var/www/FreshRSS/app/views/index/normal.phtml(208): Minz_ExtensionManager::callHookString()\n#4 /var/www/FreshRSS/lib/Minz/View.php(94): include('...')\n#5 /var/www/FreshRSS/lib/Minz/View.php(116): Minz_View->includeFile()\n#6 /var/www/FreshRSS/app/layout/layout.phtml(92): Minz_View->render()\n#7 /var/www/FreshRSS/lib/Minz/View.php(94): include('...')\n#8 /var/www/FreshRSS/lib/Minz/View.php(107): Minz_View->includeFile()\n#9 /var/www/FreshRSS/lib/Minz/View.php(74): Minz_View->buildLayout()\n#10 /var/www/FreshRSS/lib/Minz/Dispatcher.php(57): Minz_View->build()\n#11 /var/www/FreshRSS/lib/Minz/FrontController.php(61): Minz_Dispatcher->run()\n#12 /var/www/FreshRSS/p/i/index.php(58): Minz_FrontController->run()\n#13 {main}\n  thrown in /var/www/FreshRSS/extensions/xExtension-EnhancedNavigation/extension.php on line 115

192.168.178.136 - - [08/Oct/2025:15:03:10 +0200] "GET /i/ HTTP/1.1" 200 129644 "-" "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36"

::1 - - [08/Oct/2025:15:03:10 +0200] "OPTIONS * HTTP/1.0" 200 - "-" "Apache/2.4.65 (Debian) (internal dummy connection)"

192.168.178.136 - - [08/Oct/2025:15:03:11 +0200] "GET /i/ HTTP/1.1" 304 - "-" "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36"

::1 - - [08/Oct/2025:15:03:11 +0200] "OPTIONS * HTTP/1.0" 200 - "-" "Apache/2.4.65 (Debian) (internal dummy connection)"

192.168.178.136 - - [08/Oct/2025:15:03:12 +0200] "GET /themes/icons/spinner.svg HTTP/1.1" 200 275 "-" "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36"

192.168.178.136 - - [08/Oct/2025:15:03:12 +0200] "GET /themes/icons/tag.svg HTTP/1.1" 200 142 "-" "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36"

192.168.178.136 - - [08/Oct/2025:15:03:12 +0200] "GET /themes/icons/label.svg HTTP/1.1" 200 282 "-" "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36"

192.168.178.136 - - [08/Oct/2025:15:03:13 +0200] "POST /i/?c=entry&a=read HTTP/1.1" 200 11 "-" "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36"

[Wed Oct 08 15:03:14.590150 2025] [php:error] [pid 46:tid 46] [client 192.168.178.136:50068] PHP Fatal error:  Uncaught TypeError: EnhancedNavigationExtension::showPreviousEntryButton(): Return value must be of type bool, null returned in /var/www/FreshRSS/extensions/xExtension-EnhancedNavigation/extension.php:115\nStack trace:\n#0 /var/www/FreshRSS/extensions/xExtension-EnhancedNavigation/extension.php(75): EnhancedNavigationExtension->showPreviousEntryButton()\n#1 /var/www/FreshRSS/extensions/xExtension-EnhancedNavigation/extension.php(58): EnhancedNavigationExtension->generatePreviousEntryButton()\n#2 /var/www/FreshRSS/lib/Minz/ExtensionManager.php(373): EnhancedNavigationExtension->generateEnhancedNavigation()\n#3 /var/www/FreshRSS/app/views/index/normal.phtml(208): Minz_ExtensionManager::callHookString()\n#4 /var/www/FreshRSS/lib/Minz/View.php(94): include('...')\n#5 /var/www/FreshRSS/lib/Minz/View.php(116): Minz_View->includeFile()\n#6 /var/www/FreshRSS/app/layout/layout.phtml(92): Minz_View->render()\n#7 /var/www/FreshRSS/lib/Minz/View.php(94): include('...')\n#8 /var/www/FreshRSS/lib/Minz/View.php(107): Minz_View->includeFile()\n#9 /var/www/FreshRSS/lib/Minz/View.php(74): Minz_View->buildLayout()\n#10 /var/www/FreshRSS/lib/Minz/Dispatcher.php(57): Minz_View->build()\n#11 /var/www/FreshRSS/lib/Minz/FrontController.php(61): Minz_Dispatcher->run()\n#12 /var/www/FreshRSS/p/i/index.php(58): Minz_FrontController->run()\n#13 {main}\n  thrown in /var/www/FreshRSS/extensions/xExtension-EnhancedNavigation/extension.php on line 115

192.168.178.136 - - [08/Oct/2025:15:03:14 +0200] "GET /i/ HTTP/1.1" 200 128814 "-" "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36"

192.168.178.136 - - [08/Oct/2025:15:03:18 +0200] "POST /i/?c=entry&a=read HTTP/1.1" 200 11 "-" "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36"

192.168.178.87 - - [08/Oct/2025:15:03:34 +0200] "GET /i/?c=extension HTTP/1.1" 200 6959 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0"

192.168.178.87 - - [08/Oct/2025:15:03:34 +0200] "GET /ext.php?f=xExtension-EnhancedNavigation%2Fstatic%2Fnavigation.css&1759928534 HTTP/1.1" 200 333 "http://192.168.178.55:8080/i/?c=extension" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0"

192.168.178.87 - - [08/Oct/2025:15:03:34 +0200] "GET /ext.php?f=xExtension-EnhancedNavigation%2Fstatic%2Fnavigation.js&1759928534 HTTP/1.1" 200 562 "http://192.168.178.55:8080/i/?c=extension" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0"

192.168.178.87 - - [08/Oct/2025:15:03:34 +0200] "GET /i/?c=extension HTTP/1.1" 200 6959 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0"

192.168.178.87 - - [08/Oct/2025:15:03:35 +0200] "GET /i/?c=extension HTTP/1.1" 304 - "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0"

@aledeg
Copy link
Member Author

aledeg commented Oct 8, 2025

You need to configure it

@aledeg
Copy link
Member Author

aledeg commented Oct 8, 2025

Maybe I should add default values

@SHU-red
Copy link

SHU-red commented Feb 19, 2026

Do you think you can finish this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

UI 🎨 User Interfaces

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Add Fav-Button to Bottom-Navbar on mobile view

5 participants