file explorer tool (+tab button) concept & design

[mimi-uxui-dev]

@todo

• make tab button dropdown/dropup menu concept & design
  • @input 📦 what have we built hackmd from History : How it all started #45
  • @input 📦 history content slides from History : How it all started #45
  • @input 📦 brief summary slide deck from project brief @mimi_uxui-dev #42
  • @input 📦 concept outline description from get familiar with wizardamigos #46
  • brainstorm UI/UX
    • add refresh action for in tabs instead of bottom bar, only where necessary also if the app crashes or if the there is an update
    • actions for file/tile.json
      • drag'n'drop to move a file
      • share action: which give a link to workshop/files
      • fork action: for workshop
      • move action to copy and paste workshop/files/folders
      • clone action to clone a workshop to another profile
    • Add profile to the overlay
    • allow as standalone tool in tile
    • allow as tab button dropdown/dropup menu
    • Layout: drop down contains opened tiles(sorted) and the content of the workshop/gigs/exercised , with search, also the ability to subscribe/unsubscribe to tiles
    • Click on any tab button in the tiling window manager to open the autocomplete list
@result 🏭 Figma WireFrame
    • Some of those actions or all of them could be integrated directly into the tab itself
    • put the side menu bar buttons on top the search bar in the overlay
    • integrate actions in the tab instead in the overlay menu
    • click on any tab on the bottom to get the overlay instead if click on both side menu and bottom tab
    • Get rid of open tabs section
    • maybe some of those actions or all of them could be integrated directly into the tab itself
    • a back button to get back to the main black action bar and/or show path (maybe when a user extend the overlay)
    • subscribe/unsubscribe is a part of the action bar
    • redandent informtion: same content in currently open section in the overlay and in file/folderList which take more space, to solve this I removed them
    • when we have 1000 folders, a user can also click and edit the path in the input field manually instead of just using back buttons
    • scroll bar pagination feedback: you can scroll in the list, with two arrows, one at the top, the other at the bottom of the scrollar bar, to help the user go back and forth in folders
    • resizing dropup/dropdown tab button menu
    • a new tile opens a new tile with its own tab button and actually the question is where
      • to the top?
      • to the right?
      • to the bottom?
      • think opening another chrome window with its own tabs, but maybe have the two programs each with tabs be split screen
    • overlay menu adapting to content size dynamically, overlay being infinite scrollable when it has lots of content, more than fits on a screen
    • The overlay contains:
      • content/gigs/exercises material (which you can subscribe/unsubscribe/mute ), shortcuts
      • Maintainers Value Network
      • Config
      • An icon(action) to expand it with an autocomplete search
      • Action to maximize, minimize, close tile
      • Submit feedback, "view source code", make a "GitHub pull request" or "look behind the scenes" option, a user can explore how and who made the tool/content they are using at the moment and reach out and/or start contributing
      • a user can open a new content in a selected tile, which will cause the already opened one to minimize/close
      • a user can open a folder in a selected tile which will open all folder content as tiles in the selected tile as nested tiles inside one tile
    • a back button to get back to the main black action bar and/or show path (maybe when a user extend the overlay)
    • subscribe/unsubscribe is a part of the action bar
    • note info, tool, notes, gigs/exercises they are all tiles in the workshops default tile grid, so they should exist in the workshops default tile.json
    • the about section is a about.json or package.json file instead and it can be opened via it's own tool which is the about tool
    • we definitely need an easy action between:
      • action "open in same tab"
      • action "open in new tab"
      • action "open in new tile"
      • action "open in current browser window" 😄 ...that refreshes the page and navigates away from the current
      • action "open in new browser window" 😄 ...just opens it in another browser tab instead
    • Tab:
      • @result 🏭 Figma WireFrame Figma Prototype
      • tab is shown only if the tile is selected and/or if a user hovers over the tile. And for the search bar is always located at the bottom and in zen mode it'll have a collapse/expand button
      • click on the file icon to display the action open with to open the file in multiple programs or even in a new browser
      • search field shows a path with dropdowns to each folder:
      • path segments should be navigatable with clicking or cursors
      • Integrate actions in the tab instead in the overlay menu
      • When the tab is not selected it will show: icon, title, expand/open menu action, when tab is clicked a search field will appear maybe next to title with 3 more actions with another icon to add more actions or replace the first three and an overlay with files/folders, important question: what can are those actions be? maybe select is one of them? also they must be related to the tile, maybe minimize, or close.
      • Regarding "default action"
        • when i click on the tab button
        • do i open the tab button menu?
        • do i only focus the content tile of that tab button?
        • do i only select the tab?
        • do i close the tab button?
        • do i need to click different parts of the tab button to make different actions happen?
        • does the default action depend on the current content of a tab?
        • can i change the default action when clicking on the tab button?
      • tab has space for name, icon, maybe a "x" for close ...maybe as mentioned above the focused tab could have that little "black bar" from your previous wireframes always visible as a custom set of "quick actions"
      • put the subscribe/unsubscribe action next to the title of the tab whether it's for file or folder
      • attach each tab button to it's tile, instead of stacking them all next to each other in the button bar
  • create slides, wireframes and markdown files
  • @output ❓ tab button dropdown/dropup menu slides
    • next file explorer tool (+tab button) #89
  • @output ❓ tab button dropdown/dropup menu markdown file per slide in "./slides/<slidename>.md"
    • next file explorer tool (+tab button) #89
  • @output ❓ tab button dropdown/dropup menu wireframes
    • next file explorer tool (+tab button) #89

---

@info

• the autocomplete list is a tool as well, it has shortcuts like other tools
  so the autocomplete list should maybe search through all of them in a similar way, but instead of opening it, you can subscribe/unsubscribe/mute, etc...

• tab button bar, has a tab for the entire workshop, you click on it to open the But the user clicks it to open the tab button menu it already shows a "BACK" button, because the workshop app is not "the root folder"

  • it is the root folder for the current workshop app
  • but when a user logs in with a profile, the current workshop app root folder is mounted/linked into the user profiles "file system" under e.g. ./apps
  • that way the user can navigate also to their ./notes/**/* folder to open a note
  • so a user visiting a workshop app would show the bottom bar with one tab to be e.g. ./apps/beginner-javascript-workshop
    • ./apps/beginner-javascript-workshop/repo/**/*
    • ./apps/beginner-javascript-workshop/user_config.json
    • if the user opens a sub tile grid inside the workshop apps tile and opens their own note from ./notes/**/* inside that sub tile grid
    • then the tiling window manager would offer the user to save that configuration as a tile.json file inside ./apps/beginner-javascript-workshop/
      • all the read only data that comes from the authors/maintainers of the workshop live in ./apps/beginner-javascript-workshop/repo/**/*`
      • all the linking of notes and other customizations live in ./apps/beginner-javascript-workshop/ directly
      • and maybe the workshop app when opening a workshop will always read the ./apps/beginner-javascript-workshop/user_config.json to customize the workshop repo withthe user data
      • of course - the user_config.json would also save the version of the workshop the user was last visiting, because if the workshop updates, the user might need to check those updates

• note the about section
  as noted in the previous feedback videos, i think yet again - this should be a about.json or package.json file instead
  the default program for that file should be shown in its icon and it should be the about tool
  this is a complex tool, just like the workshop tool is a complex tool to display a workshop.json file 😃
  and yes - that includes a way to "submit feedback" and "behind the scenes" and "maintainers" and so on...
  see details in the "value network issue" :-)
  the list of files/folders also displays that about.json file and the user can open it in a tile or we should add the option
  to open it in a new browser window instead of a tile inside the workshop app :-)

[mimi-uxui-dev]

Worklog 2022.04.15

• Prototype
• Wireframe

[mimi-uxui-dev]

Worklog 2022.04.27

• Wireframe

[serapath]

feedback 2022.04.29

worklog is related to tiling window manager, so i commented there this time 😅

see #59 (comment)

and #59 (comment)

and #59 (comment)