Hide the 5 bottom-tray tab buttons from ribbon

[whyboris]

Since the bottom tray can be opened by clicking on the tabs that stick out on the bottom, we don't need the 5 associated buttons in the top ribbon (they take up space and are a silly way to access the bottom tray).

Hide the 5 buttons from showing up 🪓

[kmaehlmann]

Can I work on this issue?

[whyboris]

@kmaehlmann thank you for the offer! 🙇‍♂️

To be clear, these are the five icons I have in mind:

Please let me know if you have any questions or would like any pointers 🤝

[kmaehlmann]

Hi, I am having trouble with the npm install for development. I can't exactly say what the problem is right now but I am having trouble following the steps to develop. I have node.js/npm installed but I am not sure what else to do. I am also not exactly sure where to start with this issue. Some help would be great, sorry I am new to most of this. Thank you.

[kmaehlmann]

I am mostly concerned with testing my changes, I am not sure how to do that.

[whyboris]

No worries at all - I'm happy to hear you're trying out coding 👨‍🚀

When you run npm install there may be an error (the word "ERROR" will likely appear somewhere in the output). To circumvent this issue, you can execute npm install --legacy-peer-deps in your terminal instead. Once that step finishes (there may be "WARNING" written somewhere, but there shouldn't be an "ERROR") you can run npm start. After this command (and about 1 minute) the app should show up.

If you can get to this stage - you are ready to start coding. Consider using VS Code and in the app open the Video-Hub-App folder - so you can browse around and edit files.

Once you make changes to any file (.ts files contain the code) and save, the running Video Hub App instance should reload - and you should be able to see changes.

Look around this file: settings-buttons.ts (link) and try removing (in your text editor / VS Code) showRelatedVideosTray from the line I linked to above, then save the file, and the app should reload with the button gone from the UI.

Unfortunately, just deleting the button like that will probably prevent it from showing up in the tray, so you may need to change some other things. Look for the showRelatedVideosTray string (text) in this file (use CTRL + F to find the text in the file) - and you'll likely find it around line 668. These are the properties of the button (direct link)

I don't remember right, but maybe, if we're lucky, there is a way to hide the button from the ribbon while still showing it in the settings. There are other buttons around that behave this way I think -- maybe if you see how they are configured (they are part of this settings-buttons.ts file) - you may be able to fix this Issue 👍

I'm happy to help more if you'd like 😁

[kmaehlmann]

Hi boris, thank you for all your help.

Removing these 4 lines seemed to have removed the top ribbon buttons.

[whyboris]

@kmaehlmann - I'm glad you were able to get code to work on your computer 🥳

I suspect now that the buttons are removed from the tray, they are no longer showing up in the settings menu. I suspect now with your code change there is no way to toggle them on / off from showing up in the bottom tray (they are either showing or hidden - and the user doesn't have the ability to show them / hide them in the bottom tray).

The main task of this Issue is to hide the buttons from the ribbon, but still show them in the settings.

Take a glance at the settings menu - there are some buttons that do not have an eye icon next to them (so they never appear in the ribbon) - perhaps in their configuration there is something that makes them not show up in the ribbon, but still show up in the settings menu 😉