# Notes
## Tree of all components

## Questions
##### 1. When closing the browser and reopening the app, what would happen?
- will the edits like changing the content of a file would remain or reset?
- will the UI continue where it left for example it would open like this or that (if we left at that step)?
 OR 
##### 2. Let say we have selected the Night.json Program currently, When we click on the wizard hat icon would it select the root (i.e playproject) entry ? will it restore the entry back to Night.json when clicked second time? And it will then show the actions that are applicable for root.
##### 3. How do we complete a step in step Wizard?
- As you can see in the Image that in these three steps we select the entries and don't know what we did in 2nd step maybe its just a random frame. And in the third step as you can see the step is checked or completed. My question is that what button we clicked to confirm the selected files? There seems to be no button for that.
- My first consideration was this button:
But it is only available for clicking when we are finished with all steps in step wizard bar.
- My second guess was this:
But it is used for focusing the step from the bar.
And clicking it second time would do this:
- Most likely there is no button doing that!
- Maybe that small number is to be clicked?
Confirm that if thats the case. This was not explained in the video.
##### 4. Can we have only 5 Quick Actions or it would become a scrollable bar?
##### 5. This is the tabs bar. Here we can select different programs, do all programs have different actions? Do they depend on file type like .css, .json? Do folders also have actions like the root folder has some I guess?
##### 6. How a file which has a json extension can have a sub entry? Can you explain the purpose of this design? Why we went for a graph instead a simple tree and why it is quite different from a file explorer?
##### 7. The Docs button is also part of the tabs bar, So does it also have some specific actions like other programms?
##### 8. Does this white border represents which program is selected?
But It does not highlight the wizard hat or Docs button when they are selected. I think that there should be a placeholder text in the input field.
##### 9. How do we plan to use the icons in the code? Currently we are using a icons.js script which is just stupid.

## Proposal
- I personally think that the tabs bar is a good component to start with.
- We can start with these tab buttons
- Then we can make this partial side
- And after that append into wizard hat div.

We will take make a component with filename tabsbar.js and create create the functionality as in the image
Then this component can be appended to the ActionBar which also includes Docs and Wizaed Hat.
I think that creating a seperate component file for the button
will complicate things as we would have to worry about state module also then. I don't think we need STATE in the buttons! Do we? Since their appearance is going to be same. They have the outline though but that is triggered by onclick maybe there would be some other way for that. We don't want to hardcode the number of tabs like we did in case of the web/menu.js

We can discuss more about it in discord like parameters and communications. And how much data would be provided to us. We have to plan for the future also like the communication between graph explorer and Actionbar also Tabbed Editor.