tiling window/folder manager (= "folder editor/tool") concept & design -- 2 --

[mimi-uxui-dev]

@Todo

@input tiling window/folder manager (= "folder editor/tool") concept & design ISSUE

• [ ] Brainstorm
  • [x] Users can be logged in with some sort of guest/dummy account by default. You can log in or identify your progress and copy all progress you made so far on that workshop to your profile.
  • [x] User click "log in" in the TWM UI, the new browser tab opens your wallet/profile and switches focus to that browser tab but also shows your wallet/profile page with some sort of overlay that represents a login request from a particular aoo (e.g. WA workshop) and a particular (file/app) that is gonna be opened in a tile to log in with one of your available accounts and if you choose an account, the focus switches back to the WA TWM browser tab and you can now see that account/profile you successfully logged in with or switched to so it also becomes visible in the path segment :-) We have to do it this way for security reasons.
  • [ ] Make action list for each App because not all apps have/need the same actions especial refresh action
  • Open the File/folder explorer in a tile in the TWM
  • clone workshop => should be just clone (depends on the file)
  • fork workshop => should be just fork (depends on the file)
  • get shareable link => should be just copy link (or copy link address)
  • Responsive Layout
    • Tap + Hold in mobile/layout is the equivalent for Right Click in Web or Tap and the overlay will appear instead of Left Click
  • [x] add a little vertical ... file explorer entry so users can click it to see the menu
  • [x] dropping files on the bottom search bar would turn it into a a new full screen zen mode tile
  • [ ] also i can see in the search bar the (+) New button, which i think should be also an action like the ones you show in the context menu ...in fact the search bar has space for a few default action icons a user can touch (lets always think touch so we can make sure it works on desktop and tablet) ....but then have the vertical ... icon or some icon for a menu to show the remaining actions for the current selection, where selection happens by clicking on one or more files/folders in the overlay
  • [ ] or selection happens by autocomplete typing in the search bar and just activates the default action shown in the menu bar, while ... pressing another key ... maybe could open the actions and then can change the action ... or also show hotkeys
  • [ ] I think the subscribe/unsubscribe icon should also be an action for a given selection :-)
  • [ ] the refresh action is probably/hopefully a rarely used one and not relevant to all, so should go behind the ... more actions button imho
  • [ ] if they use keyboard only, one they execute the "open in new tile" action, it would show them a transparent colored area in the tile grid and the user can move it with and then confirm for the tile to be created in that position. also - that mode can be used to *move" an existing tile around in the tile grid to position it somewhere else
  • [x] add Guest Account to the profile overlay
  • [ ] make the profile actions like folders
  • [ ] clicking on the notification will make it go away, remove the "x"
  • [ ] add show more action to notification
  • [ ] add confirm, cancel actions to notification card
  • [ ] the mark all as read button could be on the bottom rather than on top
  • [ ] change log: reverse the order, top to bottom
  • [ ] merge change log with notifications and add filter
  • [ ] delete open in .. option for the wireframe, the only thing will remain is the open in browser tab which will be added next to the search bar as an icon
  • [ ] add dropdown menu to the file icon to open open with ... overlay
  • [ ] add save button in tabs
  • [ ] remove icon + workshop title at the bottom left
  • [ ] Add types to notifications
  • [ ] Swath to old versions
  • [ ] add terminal as components that opens in a tile
  • [ ] Open the file explorer in a tile
• [ ] Wireframes
  • [ ] Understand that for "lessons" don't get it for gigs/exercises :-) maybe a wireframe could clarify how that would work for gigs/exercises?
  • @input :package: WF 01: Design inspiration, Figma Link
  • @input :package: WF 02: Iteration 01, Figma Link
  • @input :package: WF 03: Iteration 02, Figma File
  • @input :package: WF 04: Iteration 03, Figma File
  • @input :package: WF 05: Iteration 04, Figma File
  • @input :package: WF 06: Iteration 05, Figma File
  • @input :package: WF 07: Iteration 06, Figma File
  • @input :package: WF 08: Iteration 07, Figma File
  • @input :package: WF 09: Overlay, Figma File
  • @input :package: WF 10: Tab button, Figma File
  • @input :package: WF 11: File explorer tool concept and design, Figma File
  • @input :package: WF 12: Tab button -Iteration 2-, Figma file
  • @input :package: WF 13: TWM specs in WF -Iteration 1-, Figma File
  • @input :package: WF 14: TWM specs in WF -Iteration 2-, Figma File
  • [ ] do the next wireframe iteration
  • @output :question: WF15: TWM specs in WF - Iteration 3 - figma
  • [ ] do yet another wireframe iteration
  • @input :question: WF15: TWM specs in WF - Iteration 3 - figma
  • @output :question: WF16: TWM specs in WF - Iteration 4 - figma
• [ ] Sub Components
  • [ ] #69
  • [ ] #90
  • [ ] #54
  • [ ] #57
  • [ ] #96
• [ ] Create slides, wireframes and markdown files
  • @output :factory: twm editor slides
    • next #87
  • @output :factory: twm editor linked markdown file per slide in "./slides/<slidename>.md"
    • next #87
  • @output :factory: twm editor wireframes
  • next #87

@Info

• we should always allow the user to migrate back to the old workshop version. the p2p technology we are using has that option baked in, so its easy to do. Refreshing the page would open the version of the page the user wants. if you open https://datdot.org and check the dummy page for downloading the datdot app, you will see there are many versions and a users can change them.
  • So a new user is basically a new folder - that is true.
    • So now you already know from the previous feedback comment, that the notification area in addition to the search bar command field together forms some sort of terminal where possible commands/actions depend pretty much on the context, you can see that is also true for the profiles/ folder.
    • If a user selects the profiles folder.
    • The notifications history would show all the changes or updates relevant to that path or profile/folder.
    • A user can also use the available actions from the search action bar.
    • does that make more sense now? :-)
    • Which actions are available in specific situations is up for brainstorming, but for example:
    • So for a selected file, the available actions are the default actions the TWM always offers and the ones connected to the default program associated with the file extension, but switching the program can show different actions associated with the file
    • For a selected folder its the default options (which means e.g. open folder as a file explorer tile) but i guess in our case we should also be able to associate specific folder paths with actions, similar to how files can be associated with specific programs, thus the profile folder would by default have those additional folder specific actions
    • Somewhere we have a config for all known file extensions and the default programs/actions
    • Somewhere we have a config for all known paths and the default programs/actions

[mimi-uxui-dev]

Worklog A 25.05.2022 Worklog B 25.05.2022

[serapath]

feedback 2-22.06.03

Worklog A 25.05.2022

1. wireframing feedback

• :heart: for the file explorer tile :100:
• :heart: for the file explorer tile in folder icon mode :100: - awesome idea, thank you.
  • to be honest, i think that should maybe be the default mode :slightly_smiling_face:
• :heart: love the notifications terminal, but noticed you made it full with for real :smile:
  • i imagined it to be full width in context of only the specific tile they belong to :P
  • also in the "overlay version" i imagined it to be full width/full height overlay, which you showed and is super awesome
    • (including the scroll bar and the little (x) to close it)
    • but again, only in the area of the specific tile they belong to
    • if that tile area is "too small", a user can always move the tile or resize the tile to make it bigger ot put that entire tile into "ZEN MODE"? :-) ...which means the notification terminal will also be larger, because the whole tile has more space now
  • the last (third) version of notification terminal layout was meant as overlaying the tile in the background instead of pushing the "tile content" up, but not full height of the tile, so only overlay some of the tile content, maybe resizable/draggable between full tile height and just the bottom area of the tile?:star_struck:
  • :100: :+1: for opening the notification terminal in a standalone tile, i think that should totally be an additional option !!!
  • ...its anyway more or less experimenting, but to me i think you got it right, i think the way you made it is cool for now :-)
• feedback video - vscode inspiration
• feedback video2 - devtools inspiration
• also that you thought about keyboard navigation in the notification terminal too - thats cool.
• the next thing i noticed is, that the command prompt (e.g. username/workshops/workshop-title-XYZ) is the same as in the search bar (which you noticed too) AND the searchbar has the "action button" (e.g. new, etc...) to trigger actions, just like we could trigger actions by probably typing the command in the terminal ...which tells me, the search bar with the action button and the terminal command line are the same thing so we should merge them.
  • maybe: when the notifications terminal is open, the search bar could be used as the "command line"?

regarding styling and features for the next iteration:

1. Could we try styling/theme of the terminal to look a little bit more like the notification sidebar you made before?
2. maybe you can that sidebar and "change log" entries and just move it into the position where the terminal is shown?
3. ...oh also - i think we still need some sort of bar or UX for filtering to only show
   • chat message (e.g. hey mimi, whats up?)
   • updates
   • ...

---

2. issue structure feedback - maybe you can try to update it with my feedback below?

i love the new TWM issue. i fixed some things about linking to the figma files. Also the "tags" or "flags" you are talking about ...there is only @input and @output and nothing else. I think we should not use @result anymore ...every task is either textual or an issue link and can have textual sub tasks or sub issue and each of them can have @input and/or @output links and thats it. There is nothing else.

regarding the new TWM issue now the previous issue should not be linked as an @input, because issues itself should never be @input or @output, but instead we take specific resources/links/files/etc... that were @output on the old issue and use them as @input in the new issue and additionally use the from field in that input to link to the old issue where they were created.

check the todo list above - i updated the WF figma links to reflect that :slightly_smiling_face:

• i changed the linked figma wireframes into task @inputs coming from the old TWM issue where they were created and added planned @outputs.

another example formatted in markdown:

* [ ] some new task on the new TWM issue
  * `@input` :package: [`WF 13: iteratin1`](https://figma.com/link/to/wireframe/...) from #101
  * `@input` :package: [`WF 05: iteratin 04`](https://figma.com/link/to/wireframe/...) from #101
  * [ ] do this
  * [ ] do that
  * [ ] do some more to produce the final output for the parent bullet point "some new task on the new TWM issue"
  * `@output` :question: [WF 15: TWM specs in WF - Iteration 3-](https://figma.com/link/to/wireframe/...)
* [ ] next task

so you see, the above example has:

1. a new task to do something
2. it includes two sub bullet points of already made wireframes :package: as input from issue 101 (=the old TWM issue)
3. it includes 3 textual sub tasks
4. and it has a last bullet point as planned output :question:to make the next wireframe iteration

Ideally we remove the @input link to the old issue completely and instead add all the @output figma and other links as @input to specific tasks in the new issue instead. Because those @input links will have a from we will know that they came from the old TWM issue :slight_smile:

the new TWM issue can be put as a new task into the issue where the old TWM issue is currently linked, which is our main UI/UX/concept design issue task:

• https://github.com/wizardamigos/wizardamigos.github.io/issues/39

Worklog B 25.05.2022

:+1: