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

[mimi-uxui-dev]

@todo

• [ ] make tiling window/folder manager (= "folder editor/tool") concept & design
  • @input :package: what have we built hackmd from #45
  • @input :package: history content slides from #45
  • @input :package: brief summary slide deck from #42
  • @input :package: concept outline description from #46
  • [ ] brainstorm UI/UX
  • @output :factory: TWM specs from comment
  • @output :factory: Wireframe TWM V1 from comment
  • @output :factory: Prototype TWM V1 from comment
  • [ ] @mimi-uxui-dev need to:
    • [x] Refine the to-dos and remove redundancies
    • [ ] Process @serapath feedback from comment @output :factory: Work in progress feedback
    • [ ] User cases
      • [ ] when the users clicks on 'new instance' it will create an new file of type of the select tile, for e.g. if the selected tile is markdown file then the new instance of it will be a new empty markdown file, it will be created and saved in the notes/markdown folder
      • [ ] ISSUE can you make some wireframes that show interactively how those screens would look like? Alex is talking about the workshop stages and quizzes
      • [x] ISSUE les make some more wireframes for this and how this can look i think we need lots of more wireframes to put all these things together, where the user uses clicks tabs to use menu and has many tiles to show lesson content, notes, tools and exercises/gigs which he solves in the exercises/gig chat and in between user focuses on lesson then they focus on exercise chat, and that's how they resize and reposition elements in the tiles. That's a scenario in many wireframes of the workshop page.
      • [ ] ISSUE maybe lets add that selecting tabs (like when you want to put many of them in a ZEN/FOCUS mode, is what can also be used to put the selected ones together into a "sub tile grid" :-) and we need again WIREFRAMES for it :-)
  • [x] Search Bar @output 🏭 Search bar new concept instead of overlay on each tiles tab from comment
  • [x] user are able to open tiles.json/file from the file/folder explorer overlay in:
    • [x] same tile
    • [x] another tab in the same tile (so the tile has now two tabs)
    • [x] a different tile
    • [x] a new e.g. second tab of a different tile
    • [x] a new tile entirely (positioned on top, bottom, left, right or in between, depending on how the current tile grid look like)
    • [x] a new tile in a new single tile grid ...which actually just means a new tab in the root tile of the current tile - thats "zen" mode
    • [x] but eventually even the option to open the "new file content in a new browser window" => which opens a new browser tab with a url param that will open the workshop with maybe just that tile or whatever open as the only tile in that new browser tab ...
  • [x] Create account action will be in a seperate page, its more secure
  • [x] user can click and then select one or more files and then drag them to the destination folder to clone them, in addition to the regular copy, cut, paste, so user can:
    • select one or more files/folders
    • click copy or cut
    • select a different folder then
    • click paste ... which means it gets cloned, depending on whether it was cut or copy before
  • [ ] any layout has a saved or unsaved tile json file ...if its a new tile grid that hasnt been saved yet it could be a virtual tile json file ...which means those should show up in the "file explorer overlay", which means you can select them. AND those tile files, should be able to expand like a folder, which shows the path segment of the tile json file but the overlay has a list of all file/apps that are contained in that saved/unsaved/virtual tile json file ... so its all the the regular file explorer section and selected and active and open can be indicated by e.g. different background colors.
  • [x] notification displayed like discord or facebook chat
  • [x] fix profile
    • Add profile name
    • add username in path segment
    • show a list of accounts when you click the first profile segment of the path
  • Create account action will be in a seperate page, its more secure
  • [x] actions for "additional input params" display them in overlays:
    • create account
    • duplicate workshop
    • [x] add action to activates/disactivates tooltips
    • [x] idea of the < back and > forward arrows that appear sometimes we will define what and how they exactly navigate in the corresponding tile file.
    • [x] Wireframe the search bar and profile
    • [x] if we have a large folder with complex folders, opening folders can be displayed like the main folder (workshop in our case) and users can use the search bar and arrows to go back to the previous folder
    • [x] the root folder in the search bar is going to be the user profile instead of workshop
    • [x] user can create and have multiple profiles
    • [x] if the user is not logged in we will use an icon or a generic profile picture other wise we will user the users profile picture as an icon
    • [x] user can duplicate the workshop and open it with another profile
    • [x] Add open in a new tile to the Plus + overlay
    • [x] Open files with different programs: Add icon for the programs next to the search bar so the user can open the same file but with different program
    • [x] search bar has two arrows for lessons/gigs/exercises files only
    • [x] Add to profile actions:
    • duplicate workshop
    • logout if the user is logged in otherwise Login/Signup
    • create account
    • [x] Wireframe for Layouts (previously called Zen Mode)
    • [x] default workshop layout: the top row to be lesson and info/desc and the tool in the botom middle, and notes and chat on each side of the too
  • [x] Top Bar
  • [x] show history changes log in notification based on current program/file (+undo)
  • [x] Profile icon: for quick access
  • [x] notification
    • [x] its a notifications list
    • [x] it has a notifications counter
    • [x] if the use is online and they get notified by anything it will appear in the notification overlay and an alert
    • [x] we can receive notifications from our tools and also markdown file, to view history of their updates
  • [x] icon + title of the current workshop: for quick access
  • [x] Side Menu:
  • [x] side menu icons are ambiguous and overwhelming: maybe add a title below the icon or move them to the overlay
  • [x] workshop, content, notes, chat, gigs/exercises can all show up as bottom tabs instead of having some in the menu side bar and some in tabs, to solve this, i moved them to the overlay
  • [x] Remove the side menu
  • [x] put the side menu bar buttons on top the search bar in the overlay
  • [x] merge the "action section" with the "search/filter menu for files/folders", then all selected tabs can be marked in the menu of no matter which tab you used to show the menu and the actions can just show based on the current selection of tabs (usually its just one selected)
  • [x] Tiles:
  • [x] open the file explorer program in a tile
    • In addition to changing the view from list to icons grid
  • [x] we don't open folders anymore in tiles or subgrid tiles, but instead we open "tile json files"
    • If somebody wants to open a folder in a new tile, it will show the file explorer program in that tile (the file explorer which we otherwise only see in the overlay menu)
  • [x] Users can subscribe to tools, files and folders
  • [x] Tiles should have tab bar, tiles can be iframes
  • [x] tab bar title (positioned below the tile) called Tab Button
  • [x] tile program (e.g. video player, text editor, chat program)
  • [x] tile content (e.g. a video file, a text file, a growing chat history)
  • [x] a user can open a new content in a selected tile, which will cause the already opened one to minimize and not close
  • [x] 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.
  • [x] Subtile Grid
    • make sub tile grid
    • dissolve sub tile grid (=all its tiles become part of the parent grid instead
    • close "sub tile group"
    • move the tile with the tile grid around (=moves the set of sub tiles around as one tab)
    • name the sub tile group (=maybe even save it as a "tile file")
    • maybe give the border of the tile group a specific color
    • like any "tab button" clicking it allows to maximize/minimize the tile which si like collapse/expand
  • [x] folders can be opened in a the menu only so users can see the content: you can then select one or more files and then select the action to open the selected files in a new "tile" or also just a single file to open in a new tile if the single file happens to be some sort of tile.json file that describes a sub tile grid then a tile with that gets opened
  • [ ] wireframe focusing on all the different option of tabs and sub tile grids with tabs and brainstorm the pros/con
  • [x] tab bar title (positioned below the tile) called Tab Button
  • [ ] 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

• Generic mechanisms: No exception files and no config that's not just an overkill but also unnecessary

• tile json is a special file that defines a bunch of files and programs to open them with, so the tiling window manager can turn that into a (sub) tile grid where each tile represents a file opened with a specific program.

• Users can't subscribe to our system file

• File or folder and gets visualized in the tiling window manager. a tile shows a file, but if a tile shows a folder, that tile would be split into a sub tiling window manager to show the content.

• The "tab button" of practice-tool and info/desc is invisible, when you hove, select or click to use any of these tool it will appear and it will be just like any tile

• A browser can remember a specific layout for when the user comes back.

• User can "save" a layout and multiple layouts.

• clicking on "submit feedback" is basically opening or making a gig and the gig can be closed/removed by the maintainers, also like every gig, a bounty can be attached or maybe other users who want to submit feedback see an existing similar gig feedback and just add some more information and add some more bounty, other kinds of feeedback would probably instead just be a "chat message", not in the workshop chat, but in the chat of maintainers. submitting a feedback is opening or participating with info or bounty in an existing feedback gig

• when the user opens the workshop, all the data and programs are downloaded in the browsers cache, so the next time the users open their notes it will load faster, and if the user clears their cache, the data and programs will be downloaded again

Inspirations & useful links

react-mosiac muuri golden-layout responsive land resizable grid based on Gridstack gridtack.js Gridster.JS svelte-grid 100% Svelte (or vanillajs) no jquery drggable React-Grid-Layout interactjs

[mimi-uxui-dev]

Worklog 2022.03.17 Results 2022.03.17 : invested some time to look for resources for Tiling window manager (PS. some call it resizable responsive layout/grid) react-mosiac muuri golden-layout responsive land resizable grid based on Gridstack gridtack.js Gridster.JS svelte-grid 100% Svelte (or vanillajs) no jquery drggable React-Grid-Layout interactjs

[serapath]

feedback 2022.03.17 cool we can implement the first version of the "tiling window manager" as just a hard coded tile grid with no features at all and then we slowly upgrade it later once we need to. we can and should collect prior art and inspiration. we can later use it to "reverse engineer" parts at some point later, but not now ...which is why it is great to collect prior art and any kind of pictures, articles or whatever that give us inspiration and talk about how to approach the problem.

essentially, we can start writing a "feature list" for our tiling window manager for later and every time we have another idea we can extend it so by the time we actually move to implement it we have a specification of what exactly it is we actually want and how it is supposed to work

Got it! Makes sense, toggling first, then resizing and then connecting with drag and drop api

[mimi-uxui-dev]

Worklog 2022.03.31

[serapath]

feedback 2022.04.01

interesting worklog :-)

so maybe we also need some guiding princpiles for making UI/UX should probably be to make it efficient and teach the user "visual metaphors/mechanisms" which the user can re-use in the same way in many situation so they need to learn less special UI/UX features. It also should make use of the screen estate to not waste it or rather make it available for important content to be used while something less important is not used by the user. one more important guiding principle should definitely be that wizardamigos is about teaching the new literacy, so it always should be easy to "peek behind the scenes" and understand what is happening and how things work. Any user, no matter why they came to wizardamigos workshops, if they solve enough workshops they eventually become programmers. all workshops in the skilltree eventually lead to programming :-)

ok, so now some feedback given the above in mind: I started watching and paused in between to to take a look to describe my impression

1. minute 0:30
   • reminds me of vscode
   • no idea what all the icons are (even though you said it in the last video) - looks complex
   • no idea what i would exactly expect behind that hamburger menu
2. minute 0:40
   • oh, it shows me "currently open", but it looks like the same as the tabs on the bottom which are currently open
   • it reminds me of the "file explorer" but if there arent many lessons, a lot of screen estate is used for the empty part of the file explorer when it has little content
   • also "currently open" shows items which are listed also under "content", so 5 open items means 5 item names show up twice, which takes more space and the item name could show up once instead and be colored
3. minute 3:13
   • oh, so the hamburg menu unexpectedly does not show more options, but expands the side menu - unexpected
   • also:
     1. workshop info is a markdown file - opened in markdown viewer component
     2. content is a folder with one or more lesson videos - opened in video player component
     3. each lesson video actually has a lesson info markdown file too - opened in markdown viewer
     4. notes are additional markdown files - opened in markdown editor (because user can edit them)
     5. chat is a file that defines the chat server and a room - - opened in a chat program component
     6. gigs/exercises is a file that defines the chat server and list of rooms - opened in a chat program component
   • so shouldnt they "show up" in the same way than other files/folders and eventually appear on the tab bar below?
   • why do lesson file tabs open in the tab bar below but e.g. notes is in the menu on the side? feels arbitrary
4. minute `3:44
   • you mention the content sub menu is supposed to be an overlay
   • if content and lessons and notes and others are files/folders that are like the tabs on the bottom
   • but i can click e.g. the content folder to get the overlay menu
   • why not clicking any tab on the bottom to get the overlay?
5. minute 4:08
   • the user can click a lesson in the overlay to open a "new tile", which is good.
   • but what if i just want to open it directly in the current content tile to close the current/old lesson content tab?
   • also - if i had already 2+ tiles open, in which tile would it open the tab?
     • probably if cilcking an existing tab would open the overlay menu, it would open in the tile where the tab is that i clicked to get the overlay menu
6. minute 4:54
   • chrome allows you to click a link and it opens in the same tab or with the middle mouse or from the context menu
   • you can open it in a new tab or even new window... but actually chrome context menu on a link allows some more options too :-)
   • also for vscode, when you right click a tab you can split into new tiles or close it and in the line below even change its content
   • also for vscode when you click in the file/folder menu on a file or folder you can open it in many ways
   • and even defaults can be configured
   • the lesson0 is still again selectable from the menu to open it again
   • the lesson0 does not get deleted, it just gets closed
   • of course - as a user i might want to choose to open the lesson in an extra tab or even an extra tile to maybe even see it in parallel to lesson1 if i really wanted (but thats just possible and probably a more niche use case)
   • imagine a workshop has 50 lessons, currently, when a user reaches lesson 36, they will have 36 lesson tabs open
   • but if the user opens the next lesson in the "current tab/tile", that would overwrite/replace the current lesson shown so when the user reaches lesson 36 they only have one lesson tab open.
   • the idea is similar to browsers where some people want to have a few tabs open and some others end up with 100s or more open browser tabs, which is not really helpful, because at that point it just becomes impossible to make sense of so many tabs
7. minute 5:10
   • yes, i described in earlier feedback
   • open in current tab
   • open in new tab
   • open in new tile
   • ....
   • i think in the earlier feedback i listed quite a few other possible actions, for example to make or link a new note or to open a note in a markdown editor instead of a markdown viewer
   • also to open a file in json mode (for example the chat file) so you would see the server address and rooms listed raw instead of seeing them shown by a nice chat program component
8. minute 5:48
   • :exploding_head: :star_struck: nice tab context menu
   • close, minimize, maximize :+1:
   • haha, subscribe or unsubscribe are more action you could do to a file or folder actually :-)
   • i love the "submit feedback", BUT that is the first step to peek into the supply chain and reach out and become some sort of contributor, so maybe we should think about a solution here that also includes all the other parts of our supply chain ideas and makes space for that... so somehow i feel the "behind the scenes" is related in this sense, because maybe a similar feedback has been submitted already and exists as an issue and you can add to that, but issues or bug trackers are definitely part of the "behind the scenes"
   • wish i wonder if i could just here see also the "overlay menu" that shows otherwise when you click on content
     • so maybe those "menu buttons" appear above the search and the files/folder below the search bar and its all in the menu?
9. minute 6:16
   • the behind the scenes has to open in a behind the scenes component, because the repo of the code that powers everything is files/folders and people work on it using gigs and talk about it in a chat around those gigs. and the change ans save action or rather accepting the result from the gig and clsosing it can update those files/folders.
   • we basically have our own system and dont need github ...but yes, maybe we can pull the data from github in the first iteration :-)
10. minute 6:30
    • clicking on "submit feedback" is basically opening or making a gig and the gig can be closed/removed by the maintainers of in your example the current workshop or not ...and also like for every gig, a bounty can be attached or maybe other users who want to submit feedback see an existing similar agig feedback and just add some more information and add some more bounty. ....other kinds of feeedback would probably instead just be a "chat message" ...not in the workshop chat, but in the chat of maintainers which plan and work on maintaining and improving the current workshop :-)
11. minute 6:38
    • no, no name and email. ...the user has a profile already :-)
    • submitting a feedback is opening or participating with info or bounty in an existing feedback gig
    • so it will anyway show on the users profile and the user can (auto)subscribe to it
    • so the user will already get updates without the need for any old school email stuff
12. minute 6:53
    • yes, i like action section :star_struck:
13. minute 7:12
    • one more action for a tab would be to "SELECT" it but not to focus it. and then one or more selected tabs can be put together into ZEN MODE or exit from ZEN MODE to go back to the grid that it is currently
    • oh and i imagine ZEN MODE to be an action available from any of the tabs of the selected tabs
    • IF we, like recommended above, merge the "action section" with the "search/filter menu for files/folders", then
    • all selected tabs can be marked in the menu of no matter which tab you used to show the menu
    • and the actions can just show based on the current selection of tabs (usually its just one selected)
    • you can also put just one selected tab into ZEN MODE :-)
    • i guess you can "shift click" to select more tabs from the menu or by clicking on more tabs in the tiles

[mimi-uxui-dev]

Worklog 2022.04.01

Feedback 2022.04.01

1

• 1. A mix of dashboard and vscode :D
• 2. Maybe I should add the tools titles below their icons.
• 3. It's a common thing for dashboards e.g. https://tinyurl.com/5eu3wyys

2

• 2. having empty space is not a problem, it's actually something desirable called "breathing space"
• 3. if we're going to keep the "currently opened" items, then we'll color them in the "content" list, which it'll show that they're opened

3

• 1. It's very common :D, menu's do many different things, show lists, toggles, show inner/sub menus, depends on what you want to do with them
• 3./4. Good point!

4

• 2. Because when clicking on the bottom tab should show you only the things that is related to it. And the overlay is for the whole workshop.

5

• 1. because it's not expected, or is it. So we have 2 actions, one to open in a new tile, and the other one is to open in the current "active tile", but which one comes first. ✨ In my opinion, i think the second one, because, when the user discovers the workshop for the first time, there will 1 tile of content opened (in addition to chat, practice tool and info), so when they open the overlay and click on next piece of content (next lesson) it will open in the content tab 'the currently active one', if they press too long on the next piece content in the overlay, the mouse icon will change from cursor to hand/fist grab to drag'n'drop in a new tile OR the current one. Or The user can right click on the next piece of content to open another small overlay/menu to open in a new tile.
• 2. in the currently active/selected one

6 7

• Good point. I agree!

8

• 2. why would anyone want to subscribe to a folder (unless it has another meaning), I think subscribing to a file is enough and you get to it from the bottom-tab, on the go, instead of going all the way to the overlay.
• 3. i think behind the scenes could mean different things, like explained before in the previous issues, maybe a user want to see what is it, how does it work, who is the maintainers team behind it. Regarding submitting feedback we can redirect them to GitHub issues it has a search so they can look up for a solution in case they encountered a problem (also there's chat tool for that) or maybe they are looking for solution, they just want to say hi or thank you :D
• 4. regarding menu buttons on top and search + content files/folders on the bottom, i think it would be confusing, the users might think that the menu buttons are for the overlay not for the tab :-D

9

• behind the scenes component could be just a modal, it contains a button to redirect to GitHub or connect to your system.

10

• why is submitting feedback is basically opening or making a gig, i don't understand what you mean by this, enlighten me ✨

11

• 2. I understand the 'info' part, but when it the bounty part, why would any one add money for somebody else's gig? for e.g. i don't expect you to pay for someone that is doing work for me :D
• users can subscribe to feedback automatically. YES!

[mimi-uxui-dev]

Worklog 2022.04.01 : WF for Tab Menufor the TWM

[serapath]

feedback 2022.04.01

Worklog 2022.04.01

Feedback 2022.04.01

1

• 1. A mix of dashboard and vscode :D
• 2. Maybe I should add the tools titles below their icons.
• 3. It's a common thing for dashboards e.g. https://tinyurl.com/5eu3wyys

A

tiling window manager isn't necessarily a dashboard, so i don't want to invoke the wrong expectations. also, i am not aware of any UI in a browser that works similar to what we plan with our workshops and we might need to invent new visual metaphors and mechanisms to express things, so arguing from first principles makes more sense. Doing something in a way just because it was always like that is an argument that mostly prevents innovation and progress and should probably only be applied in case there are no other arguments, so if a new way or the current way are the same good, but ppl know the current way then lets re-use that.

To me, a generic menu is always the worst, because it invites to be a place to just "dump" all the things into it where we did not figure out a better place. Like a cupboard or a drawer to put everything in just so that things look clean

2

• 2. having empty space is not a problem, it's actually something desirable called "breathing space"
• 3. if we're going to keep the "currently opened" items, then we'll color them in the "content" list, which it'll show that they're opened

B

yes, i agree. i am ok with "breathing space". the idea was more about utilizing breathing space in case the user needs to look at a lot of content, but if they don't some space can and should be "breathing space" ...i'm just not a big fan of breathing space when its forced onto me, even though i would like to view a lot of things in parallel and i could, but then i can't because the breathing space is where i could position it but the program wont let me so now i have trouble seeing everything at once.

3

• 1. It's very common :D, menu's do many different things, show lists, toggles, show inner/sub menus, depends on what you want to do with them
• 3./4. Good point!

C

same as above. i don't agree with something being good just because it is common. my experience is that most things that are common are bad unless proven otherwise. otherwise the world wouldn't soon end because of climate crisis and the world would also be a more fair place and people in power were decent and ...yadda yadda yadda :D So if the only argument why something is supposedly good is because is: "because it's common" ...i would throw it out immediately :P ...haha

4

• 2. Because when clicking on the bottom tab should show you only the things that is related to it. And the overlay is for the whole workshop.

D

maybe. but what is related to it?

• in a browser the address bar shows the url, but it can be changed and when you click it and type, it even suggests you other urls in the autocomplete.
• in a file explorer on your computer, you also get a title bar that you can click and it shows you other files and folders you can switch to - depending on which operating system you use its always slightly different

I perceive the "tab button" to be something like that, so clicking it and then being able to change it and/or execute some actions makes sense to me ...also to search/filter through the alternatives makes sense to me too.

Next. The content/ button to me is a folder and clicking it reveals currently the list of lesson files/folders. Its only positioned in the side menu bar for some reason unlike other tabs. i don't really find that super consistent :-)

5

• 1. because it's not expected, or is it. So we have 2 actions, one to open in a new tile, and the other one is to open in the current "active tile", but which one comes first. sparkles In my opinion, i think the second one, because, when the user discovers the workshop for the first time, there will 1 tile of content opened (in addition to chat, practice tool and info), so when they open the overlay and click on next piece of content (next lesson) it will open in the content tab 'the currently active one', if they press too long on the next piece content in the overlay, the mouse icon will change from cursor to hand/fist grab to drag'n'drop in a new tile OR the current one. Or The user can right click on the next piece of content to open another small overlay/menu to open in a new tile.
• 2. in the currently active/selected one

E

can we design the tab button so that it looks more like it is something to click and a dropdown opens? and/or you can type to autocomplete?

• link0
• link1
• link2
• link3
• link4
• link5

6 7

• Good point. I agree!

F

that kinda relates to (5.) too then?

8

• 2. why would anyone want to subscribe to a folder (unless it has another meaning), I think subscribing to a file is enough and you get to it from the bottom-tab, on the go, instead of going all the way to the overlay.
• 3. i think behind the scenes could mean different things, like explained before in the previous issues, maybe a user want to see what is it, how does it work, who is the maintainers team behind it. Regarding submitting feedback we can redirect them to GitHub issues it has a search so they can look up for a solution in case they encountered a problem (also there's chat tool for that) or maybe they are looking for solution, they just want to say hi or thank you :D
• 4. regarding menu buttons on top and search + content files/folders on the bottom, i think it would be confusing, the users might think that the menu buttons are for the overlay not for the tab :-D

G

1. subscribe to a folder

   • if you as an author can share a folder with other people or even make it public, then other people might bookmark your folder and study its contents. Now a github repository is technically just a single folder that is shared with the public and people subscribe to it and its contents and install it too and work on it. github allows you to subscribe to repositories.
   • it happens to be that github repositories are often so called mono repos (an anti pattern but wide spread regardless) and in that case you might be interested in a few of those github repository folders and updates to it, but not the entire repository. sadly as of today github does not allow you to subscribe to individual folders.
   • once upon a time it wasnt possible to subscribe to github issues, but instead only to a repository as a whole, now they changed that so you can instead subscribe to individual issues :-)

2. subscribe to a file

   • yeah ...a "tab button" can represent a file, but also a folder in case a specific "tab button" represents an entire "tile with multiple sub tiles.
   • also some programs might open "folders" as input instead of "files". one example program is vscode and when you start it you select a folder and that is what it opens. imagine vscode running as a tool in one of the wizardamigos tiles.
   • in that case the "tab button" represents a folder opened with the "vscode component", but its again just a tab button so of course you should be able to subscribe to it just like any other "tab button" allows you to subscribe to files only in this case its a folder :-)

   • like explained before in the previous issues, maybe a user want to see what is it, how does it work, who is the maintainers team behind

   • yes that nice

   • regarding submitting feedback we can redirect them to GitHub issues it has a search so they can look up for a solution in case they encountered a problem (also there's chat tool for that) or maybe they are looking for solution, they just want to say hi or thank you :D

     • IMPORTANT :smile: - yeah, just that we are entering a pure p2p world, so there won't be any github. we are building technically our own github, so we can't just forward to a "github issue" ...what we have instead is "exercise/gigs" that can be created and yes, some gigs can be pro bono. ..and yes, if its something not executable, like a question or just a thumbs up, maybe that has to go into the chat and you can subscribe to answers there too ...or the gig is to answer you the question and the bounty is 0 ...but if nobody answers you can even put a bounty on a question?
     • stackoverflow for example rewards people with points to answer questions well and in the future that might be tokens or NFTs, who knows :-)

3. regarding menu buttons

   • might think that the menu buttons are for the overlay not for the tab :-D

   • what if we only use it for the "tab buttons". why would it be confusing? isn't that how vscode does it? they have actions
     • vscode example with action buttons

9

• behind the scenes component could be just a modal, it contains a button to redirect to GitHub or connect to your system.

H

again, imagine we won't have github in the future, so it has to be something inside our "p2p system" :-)

• it could open a new page, thats true.
• alternative would be that it would open some sort of "dev tools", like imagine you would open in your chrome browser the "dev tools" on a website, so you could explorer the source code of that website and debug it and even edit it.
• in fact, the chrome dev tools have a tab called What's New to inform you about the latest updates.
• technically why wouldnt it be able to include a FORUM and even all the github features so you can collaborate on a specific website with others who work on it too? :-)
  • now if those dev tools are like an iframe in a tile ...then you can open that devtools tile also in a stand alone browser tab
  • maybe thats the default when you click behind the scenes :-)
  • also just working and changing things in the dev tools change it just like in a browser, just for you, not everyone.
  • but you could make a "PULL REQUEST" with your changes and if they get accepted by maintainers it actually changes for everyone? :-)

Let's not forget, you might also want to donate or "tip" the maintainers for a specific app/file/folder/content they created ...and it will also automatically trickle down the supply chain to reward everyone who indirectly contributed :-)

@mimi-uxui-dev maybe should at some point decide to make more sub-issues for the tiling window manager for specific features and discuss those there, hehe :-)

10

• why is submitting feedback is basically opening or making a gig, i don't understand what you mean by this, enlighten me sparkles

I

Ha! :-) Alright. So when you "submit feedback" it goes to the people who made a website/app/service/workshop/whatever... They receive a lot of such feedback. There are different types of feedback and we should definitely thinkg about what types exist. But the following types (e.g. feature request, bug report, improvement proposal) and maybe even "answer my question", those types go into a big list of things the team has to decide to work on to fix the bug, implement the feature or improvement or to answer the question and if something is popular that will create a long list of tasks/todos for those who make the thing that people submit feedback on.

Now in an open p2p world, ...why would anyone go and work on that list of tasks that exists because people submit feedback? Maybe somebody can put a bounty on those tasks ...its maybe the person who submits the feedback or somebody who sponsors it and so the team of maintainers is motiviated to work on acting on the feedback to make things better.

BUT: ...now people can make stuff and maintain it and work on a constant list of paid tasks to make things better.

Isn't that just what gigs are? :-)

So why would we create "a different mechanism" instead of integrating it into our overall system in the way we already brainstormed and try to make a core feature of our system in general ... and thats gigs/exercises :-) :exploding_head: :exploding_head: :exploding_head: ...not sure if that made it a bit more clear

11

• 2. I understand the 'info' part, but when it the bounty part, why would any one add money for somebody else's gig? for e.g. i don't expect you to pay for someone that is doing work for me :D
• users can subscribe to feedback automatically. YES!

J

In the future world which you participate in already somwhat by using "open collective" :D ...you can actually receive donations and people can subscribe to you and your work with regularly supporting you with re-occuring donations for the good you do.

In the next "PHASE 2" the project you might work on will be https://opencollective.com/dat and if yu check, people actually regularly donate to our organisation :-)

But let's make some more specific example. So if i am using e.g. figma and every day you come across this missing feature or annoynig behavior and you have a good idea how it could actually work smoother and make things better. At the moment you are helpless, because you have to maybe send a feedback to the figma team and hope for the best, but in the future, your feedback would be public and other people who use figma just like you and feel the same can maybe add comments and because they earn a lot of money with their work and know a better figma tool would help them, they are willing to maybe bounty it with 1-2 USD if the figma team improves figma based on the feedback ...now imagine figma was a popular tool and 10.000 people think your feedback is important and it annoys them too, so they put also 1-2 USD on it... and all of a sudden that amounts to 10.000-20.000 USD to act on that issue and implement that feature and the money would go to the figma team ...so all of a sudden the figma team has some serious motivation and is incentivized to actually act on your feedback.

now even better ...because of course the future is open source. Lets say the figma team doesnt care :D Doesn't matter... a team of skilled developers can go and FORK FIGMA and implement the feature and get the bounty money. That in fact happens, so i personally for example do not use vscode and instead i use https://vscodium.com/ so what vscode does not fix, maybe i can convince the team behind vscodium ...thats fine :-)

[serapath]

feedback 2022.04.01

Worklog 2022.04.01 : WF for Tab Menufor the TWM

cant say much yes, other than that i like the direction in which this is going.

a few things though:

1. "focus mode"

   • ... isnt that an action too? (for more see below)
   • love the naming (better than ZEN MODE), but i feel UI is too verbose atm.

2. what about a "select tab" action - i still think getting rid of the "Opened Tabs" section (see below for more) is better

   • in the black bar or maybe some of those actions or all of them could be integrated directly into the tab itself?
   • see (7.) below for more
   • i like the "checkbox" but or rather the select action, but not sure if checkbox is the best, maybe :-)
   • still feel all of this is not minimalistic enough :-)
   • e.g. click tab selects and focuses tab
   • e.g. shift+click tab selects it but doesn't focus it
   • e.g. double click tab enters all selected tabs into a temporary full screen ZEN MODE tile
   • e.g. double clicking the tab button of that temporary ZEN MODE tile exits zen mode
   • by the way, calling it "focus mode" is cool too, maybe its even better :smile:
   • e.g. maybe each tab always has a little "X" next to it so you can always close it? (seems common in editors/vscode)
   • do we actually need a minimize "_" button? seems like activating a different tab hides the previous one anyway
   • if a tab is a tile, then "minimizing" it is closing the tab to later reopen it or draging it into another tile and not focusing it anymore, so that it becomes an open but inactive tab?

3. do we need the menu minimize/fullscreen buttons ?

   • like clicking outside of that menu would probably automatically "hide" or "minimize" the menu anyway :-)
   • regarding "maximizing", what about the menu auto-adjusts to the size based on the amount of content?
   • also maybe a user can click on the border of that menu to resize it to the exact size they want?

4. "opened tabs" menu section

   • all the "tab buttons" in the tiling window manager already show whats open
   • also items in the regular list of files/folders could be bold or have a different background color to indicate they are active as opened tabs, so we don't have to duplicate? :-)
   • also instead of a + i would probably more use a > prefix to indicate that lessons is a folder
   • also by default things are expanded to the level of whatever represents the current tab tile content in the files/folder menu

5. the "submit feedback" and "behind the scenes" maybe could all be hidden behind an extra icon in the action bar.

   • something like "about" or whatever ....
   • and pressing it can make a second action bar appear on top of the first one where you can select:
   • behind the scenes
   • submit feedback
   • alternative would be the current action items disappear and get replaced with
     1. a back button to get back to the main black action bar
     2. the items "behind the scenes" and "submit feedback" as sub actions

6. subscription icon

   • shouldnt subscribe/unsubscribe be also part of the action bar?
   • i still feel that list of "opened tabs" is exactly the same as all the "tab buttons" visible in the tiling window manager
   • so whatever "actions" you can trigger there, you should be able to trigger from each "tab button" directly :-)

7. hover menu items

   • hover is an input type not available on mobile devices, so thats problematic
   • maybe we can make each menu item have 2 areas
     1. clicking the first one (maybe the name) just opens the thing
     2. clicking the second one (maybe an action area) can select it or whatever other action is clicked
        • there just needs to be a visual indicator for each item to let the user clearly know the two different areas

        • ISSUE lets google image search or whatever some file explorers and how they do file actions? :-)

ISSUE maybe we need to have a workshop wireframe with multiple tiles to show in parallel e.g. lesson + info + chat + tool + gigs and then we can simulate a user flow where the user first watches, maybe full screen then exists zen mode to makes a new note tile or link an existing note tile from his personal data and then he opens "tool + his notes" in zen mode and starts using the tool to practice and read their notes in parallel ...just making it up.

Basically we might want to even make a special issue and write a little use case scenario in a few bullet points and then make wireframes that show how that would work ...and based on those we could explore how the menu would work?

[mimi-uxui-dev]

Worklog 2022.04.02

Feedback 2022.04.02 for Feedback 2022.04.02

B

• yes, and in our case, maybe we can make the list fit the content; if the list is way long and it's window lengthen, then it will become a scrolling list;

• OR, we get rid of the menu and make everything in stages:

  • Stage 1: Learn. After each lesson, there will be a quiz to track progress also there's no right or wrong answers in here, what i mean by this is that if the user didn't get the answers right they get to view the answer and move on to the next lesson
  • Stage 2: Exercises.
  • Stage 3: Gigs

• each workshop will have:

  • info/desc for the workshop
  • chat for the workshop
  • workshop will have multiple lessons, each lessons will have:
    • info/desc : MD file
  • Regarding note file, we can include an empty one so the user can edit for each lesson or one for the whol workshop

• After each stage completion the user will have access to the previous one.

• If we go this directin i think we will remove the side bar menu

• same detailed bullet point above apply for gigs and exercices.

E

• Already done that :)

[serapath]

feedback 2022.04.02

regarding "stages"

1. if there is a quiz, it should be an exercise and the quiz would be interactive in the exercise chat with the bot who accepts the correct answers if given
2. then there can be more complex exercises in addition and the bot might only accept people to apply who already finished the previous quiz exercise (..if we do that, we should add that to the gig/exercise issue)
3. and then there are gigs, but those depend on whether people post some actual real gigs :-)

i like the quiz exercise idea i am not convinced by "stages" that follow one another like a wizard or steps i think allowing to unlock exercise2 only after exercise1 is also a good idea (as a way of doing "stages")

workshops consist of

• lessons, where each lesson has
  • info/desc
  • maybe a tool
• a general support chat
• a general exercise/gig area (those are NOT lesson specific, but always depend on the entire workshop)

:+1: yes we could add an empty notes file, but when users come back the notes tool they used will be loaded again - thats a good idea :-)

ISSUE can you make some wireframes that show interactively how those screens would look like?

---

After each stage completion the user will have access to the previous one.

i think notes should always be one for all lesson files. The notes are a combined summary. The reason is that we want to really incentivize people to structure workshops so that all lessons belong together and learners end up with one summary note per workshop, otherwise, its not really clear for learners and maintainers when they would make a new workshop compared to just add a lesson.

We need to urgently prevent people from squeezing too many lessons into a workshop to teach too many things. We might even want to consider if a single info/desc section is good enough actually. So ideally one workshop would always have a single lesson video and thats it and sometimes more, but never lets say 50 lesson videos :-)

---

If we go this directin i think we will remove the side bar menu

:+1: to remove the side bar menu.

---

feedback 2022.04.02

Worklog 2022.04.02

now watchign the video:

B :+1: on having a menu an overlay, so "breathing space" doesn't occupy space when i need it for something else. :+1: overlay menu adapting to content size dynamically :+1: overlay being infinite scrollable when it has lots of content, more than fits on a screen

ISSUE les make some more wireframes for this and how this can look i think we need lots of more wireframes to put all these things together, where the user uses clicks tabs to use menu and has many tiles to show lesson content, notes, tools and exercises/gigs which he solves in the exercises/gig chat and in between user focuses on lesson then they focus on exericse chat, and thats how they resize and reposition elements in the tiles. Thats a scenario in many wireframes of the workshop page.

---

lets make a lot more wireframes (maybe one a day at least???)

Ideally we can have one where we can click through the different scenarios, like for example here: https://xd.adobe.com/view/2c7f1bd5-f2f7-4741-81f8-b0772615c77f-792c/grid

For example here you see all wireframes for the datdot app. You don't have to understand how all of it works, but when i click on one screen

1. shows me the screen in big
2. if i click on it it highlights in blue where i can click

3. if i click on a blue area it jumps to the next screen simulating what the app would do

   We need to build something like that for all the aspects of wizardamigos, so we can see and click through specific use cases to showcase the UI and how it behaves with all the elements that we brainstorm about

---

tile files

thinking more about a "sub tiling window manager" or sub tiles, maybe its better to have a specific tile file too, so a user can create a new tile and then move arbitrary other tabs into that tile and when the user is happy with the arrangement, they can use the "tab button" below that sub tile grid to save the exact layout and configuration in a "tile file". Next time the user can open the "tile file" which will open all the files in the sub tile grid in the exact same layout again.

ISSUE lets add that "sub grid json tile file" or whatever to the top level comment info section. So if the user opens a "folder" in a sub tile grid but that folder has a tile file, then it won't open ALL sub folders in the sub tile grid, but maybe only whats in the tile file?

...otherwise we might get a problem with a folder that contains 1000 sub folders and files

---

regarding "google chrome tab groups"

the feature:

1. new group
2. ungroup
3. close group
4. move entire group to "new window"
5. name group 6 give group a color
6. clicking it to toggle expand/collapse

...imagine a "sub tile grid" ...a "tab button" with a tile that contains a "sub tile grid" is like a group, yes :-)

1. make sub tile grid
2. disolve sub tile grid (=all its tiles become part of the parent grid instead
3. close "sub tile group"
4. move the tile with the tile grid around (=moves the set of sub tiles around as one tab)
5. name the sub tile group (=maybe even save it as a "tile file")
6. maybe give the border of the tile group a specific color
7. like any "tab button" clicking it allows to maximize/minimize the tile which si like collapse/expand

definitely the feature is a great feature, but we just display the group inside a tiling window manager

ISSUE maybe lets add that selecting tabs (like when you want to put many of them in a ZEN/FOCUS mode, is what can also be used to put the selected ones together into a "sub tile grid" :-) and we need again WIREFRAMES for it :-)

[mimi-uxui-dev]

Worklog 2022.04.04 :

• Wireframe
• prototype
• HackMD file mentioned in the video

[serapath]

feedback 2022.04.04

first a small formal remark. lets try to always be careful when editing comments to not accidentely delete or damage something. i fixed the top level comment in this issue to again show inputs and outputs. somehow those were deleted when you last updated the issue, but now it works again.

Also, you created new output or at least intermediate results so those should be also linked in the top level comment. FOR EXAMPLE

• see https://github.com/wizardamigos/wizardamigos.github.io/issues/39
  • there you can see:

  • @result :package: link to output or internal result file from [link to same issue comment](#)

  • you made a "wireframes" and "prototype" and linked it in your last comment, so it would be great to add:
  • @result :factory: wireframe twm v1 from comment
  • @result :factory: prototype twm v1 from comment

TODO please add those somewhere into the list of todos here in the top level comment so we see all the intermediate results that we made and we can also quickly click the comment link to jump down deep into the comments to see which worklog comment created those and what where we discussing :-)

---

Worklog 2022.04.04 :

• Wireframe
• prototype

quick first impression: wireframes look nice and very interesting :-) one quick feedback is that all "tab buttons" are on the bottom bar instead of attached to their tile, which i find confusing. can we try how it works when each "tab button" is attached to its tile?

Below will be my feedback for the video structured again with time check points. The tiling window manager shows many components working together, so i try to structure things so that:

• TODO you can take the feedback and update the correct issues with it instead of having it all just here in comments below the tiling window manager :-)

---

1. minute 0:30

   • lots of feedback you scroll through and some that you said you missed and will go through.
   • probably worth adding the important bits to the right component issues

2. minute 0:40

   • you show a hackmd, but you did not link it i think - TODO maybe you will copy it directly to the issues?
     • about TWM:
     • yes those seem to be added to the issue, but lets try to be careful not to delete inputs/outputs or things that were in the issue already
       • todo some parts of the todos seem to belong to a "sub component" of the tiling window manager
         1. e.g. the tab button menu component, see: https://github.com/wizardamigos/wizardamigos.github.io/issues/69
         2. e.g. the new note component (maybe?)
            • lets add the todos there or keep them in "tiling window manger" but link to the components
            • e.g. https://github.com/wizardamigos/wizardamigos.github.io/issues/54
     • about Value Network: ...i did not see the hackmd content yet on the github issue todo list
     • about gigs...i did not see the hackmd content yet on the github issue todo list
     • about profile: ...i did not see the hackmd content yet on the github issue todo list
     • about no issues or multiple issues: ... is that somewhere already?
   • just please be careful to not delete something important from an issue while you do that :-)
   • also, if you do leave empty line breaks in the todo list, they will be formatted weirdly, so there should not be empty lines

3. minute 1:30

   • i can see here in the video that the formatting is already broken and the input/output was deleted/overwritten.
     • i restored it now, you can check the top level comment, but lets be more careful so we dont lose important bits :-)
   • i also turned normal bullet points into sub todos with check boxes, so you can go through one by one re-arrange and cover all of them in the wireframes :-)
   • the formatting (there is a lot of white space displayed between your todos are again because of empty lines, but i removed them)

4. minute 2:03

   • todo same as in e.g. vscode, the tab buttons should always be attached next to the tile they belong to
   • todo we probably need some sort of tiles.json file in each lesson which defines the default tile layout
     • when a workshop loads the tiling window manager loads the tile,json file and displays the initial tile grid
     • changing the tile.json file can change the layout or define which files and folders get opened by default
     • like any other tool, the tiling window manager tool can open a "tile file" and then display the tiles.
     • just like an "image editor" can open an image file to display the image
     • if you open a file with unsupported content the program tells you that it cant load the file

5. minute 2:30

   • oh lovely :-) ...i like the menu - good job, ...BUT a lot of feedback need to be given about it, so lets start:
     0. here is an issue where we can actually discuss more details about it https://github.com/wizardamigos/wizardamigos.github.io/issues/69
     1. just like an "address bar", once the "tab button" is clicked, i thinkthe "tab button" itself or immediately above should turn into an input autocomplete search field which currently has the value of the currently displyed content of the corresponding tile
     2. the action bar should probably be right below or right above it or maybe can be expanded
        • imagine a input field with an action/enter button next to to execute e.g. a search, but that action button has a dropdown to select a different action.
     3. i see many actions spread out everywhere, but probably this needs to somehow be simplified
        • action: ..."select" ... i think it is missing?
        • action: behind the scenes
        • action: submit feedback
        • action: info, tool, notes, chat, gigs, exercises ... or those are "programs"?
          • maybe those get auto detected based on file/folder, but UX wise need to be selected when a user selects/clicks a sepcific file
        • action: maximize/expand => shouldnt that be focus/zen mode? and it expands the current or all selected ones?
        • action: subscribe/unsubscribe => should be next to the tab button, otherwise user might not know if they subscribe to one of the files/folders in the displayed list instead
        • todo maybe we should make some action lists or groups to not forget any of them
     4. there is a "back button - title of lessson0" and its unclear what it would do
     5. each "lesson" probably has a corresponding info/desc but also video, so every lesson should be a folder with at least 2 files
     6. i would think we might want to avoid indented files/folders, but if a folder is clicked, it switched all content to the sub folder, but thats why the "back button" exists maybe?
     7. if the user can resize the menu - especially on touch screens, maybe there needs to e a tiny indicator? ...like a standard html textarea has it in the corner, that users know they can resize it.
     8. about section should probably be just a file and we need a program to open it.
        • in our case the information we need comes from something like a package.json file and every project has one
        • it is shown in the list of files/folders and if a user clicks on it, it gets opened in a tile tab and displays all the options
        • e.g. submit feedback
        • e.g. chat with people
        • e.g. ...whatever you can do behind the scenes :-)
        • todo maybe you have seen it, but in our main UI/UX/concept design issue i made one sub issue:
        • https://github.com/wizardamigos/wizardamigos.github.io/issues/65
        • in this issue i listed a bunch of things that do not have a ui component yet
        • todo i think "value network/maintainers" probably could be that component to open a "package.json" about file
          • if you want to try that, you could todo move the value network issue to the list of all the other concept issues and link inputs/outputs. ...or let me know so i can do that and record a video to show you how :-)

6. minute 3:58

   • todo to repeat from earlier: i think having a "tab bar" for each tile changes lots of things
     • in a 2:2 split like in your wireframe, each tile has a tab button underneath it
     • but also the entire 2:2 grid itself has a tab button. the 2:2 grid itself loads the "tile.json" file in the tiling window manager program to display: lesson0-video, info/desc, notes, chat :-)
   • clicking on a file opens a context menu with open in current tab, open in new tab, subscribe to lesson 4
     • these are some actions, but they dont allow me to decide which program to use
     • also can i just "select" the file?
     • what about opening something in a new tile vs. in a new tab but same tile vs. in same tab in same tile
     • can i also add a new custom note here or link to it?
     • how many clicks does it need? is there a default action when i just click directly?
       • can i do something to change the default action?
       • can i see all actions and select the right one from all the actions that are possible but maybe not so common?
     • what do we do if a user is on a touch screen and has no right mouse click?

7. minute 4:31

   • you clicked "open in new tab" but it opened it in new tile ... ok makes sense, because you currently still have only one tab bar and not one for every tile. we should make that more similar to vscode, because its also confusing to quickly know which tab belongs to which tile at the moment unless you read the names, but in reality the tiles itself will not display their names but show the content, so you cant really do that for real :P

8. minute 5:00

   • ok, you open a folder in a new tile and it shows a "sub tile grid" ...kinda like i said/thought.
   • i think maybe we need to change it, because what if a folder has 1000 files inside?
   • maybe folders cant be opened in a tile, but only in the menu so you see the content
     • you can then select one or more files and then select the action to open the selected files in a new "tile"
     • or also just a single file to open in a new tile
     • if the single file happens to be some sort of tile.json file that describes a sub tile grid then a tile with that gets opened

9. minute 5:29

   • dark gray was confusing. brown as a color is better, but the real confusing thing is to have many tiles and only one tab bar
   • the "folder" tab should be the tab button of the tile that contains content of lesson 4 and content of lesson5
   • then the sub tile with content of lesson 4 should have its own addition nested tab button
   • and the sub tile with content of lesson 4 should also have its own nested tab button
   • :+1: that a tile with a nested grid has a slightly different colored border to highlight it is a nested tile grid. thats cool :-)

10. minute 6:20

    • random thought seeing the top level menu bar with the profile button
    • the entire workshop itself is loaded from a file too
    • and the workshop itself is a tool to open that file
    • so it should have a "tab button" too
    • and the subscribe icon can subscribe to then entire workshop file or everything
    • ...but that also tells me, maybe the "profile avatar" should be a little icon next or inside of the tab button menu?
    • what do you think?
    • i think the files/folders (e.g. custom notes and config files a user wants to open next to a lesson come from a users profile
    • so the file menu needs to also show the users personal files, but that depends on the account they are logged in with
    • ALSO
      • technically a specific tile inside the tile grid could allow a user to log in with a different profile to show different content
      • it is of course not a necessary feature, but it allows people to use the same system even for such use cases
      • i know people have sometimes multiple facebook or twitter or instagram or email or any kind of account and switch between them. This would just make that much simpler and the mechanism would be very easyily integrated that way

11. minute 6:36

    • the actions for example list close action, but i havent seen that in the menu
    • also the "select" action seems missing
    • also, you mention a bit later that users can press hotkeys, BUT :-)
      • anything a user can do with a shortkeys should also be possible without shortkeys just by pressing visible buttons
      • that way a user maybe can hover over an action to see a tool tip and learn about the shortkey, but without they would never know
      • todo so zen/focus/maximize mode still needs an action icon/button or something, and select too and close, and so on :-)

12. minute 8:13

    • you say some of the things in the list have been done.
    • can you make them a chckebox and finish those todos?
    • :+1: if we don't need a config anymore :-) ...haha, because it is again a "general placeholder" (which is bad)
    • todo feel free to carefullly remove "redundance" to clean up issues when you see that.

13. minute 8:49

    • "view source code" or "make github pull request" and also "submit feedback" belongs to the new "about component"
      • the about component is what opens a visual program to display information from the package.json
      • it includes submitting a feedback as some sort of "gig/exercise" like said before but it also includes everything else that we define as "behind the scenes" :-) ...todo do you want to make a new issue for that component and structure it like the other ones with inputs and outputs :-)
      • todo @mimi-uxui-dev when you say and notice that certain todos belong together like:
        • e.g. submit feedback + view source code + lookg behind the scenes + start contributing, etc...
        • then please immediately go to the issue and group those todos or remove redundancy so that next time we know it
        • when i opened the issue, it was exactly like shown in your video, so next time we forget about it.
          • lets try to always fix those things immediately to improve our situation :-)

14. minute 9:43

    • question: > what is meant with integrat eactions into tab instead of overlay menu
    • answer :-)
      1. some most important actions should maybe be possible from the tile tab directly
         • that was also said towards the end of the last feedback when i compared it to chrome
      2. also some actions could be shown more in the "black action bar" directly next to the tab button like you showed in your last wireframe. That makes it technically part of the overlay menu, but maybe the "black action bar" could also always be visible for the tab wihich is focused? ...so a user can more quickly activate them
         • maybe we should collect a list of actions in the todos?
         • @mimi-uxui-dev thats what i meant above under (13.) when you notice something, just restructure the issue to slowly collect a complete list of actions

15. minute 10:33

    • open in new tab, current tab, new tile
    • i thiink that makes much more sense once we change the tab button to be below each tile and not in only a single tab bar.
    • if you only have a single tab bar it doesnt make sense

16. minute 10:55

    • open in json mode
      • you suggest to add that to a context menu, but as said above, this is difficult on mobile and also hides actions between so many nested menus
      • also open in json mode is just another program to open a file with
      • by default maybe you open a file with tool A, but you can also open a file with tool B
        • https://github.com/wizardamigos/wizardamigos.github.io/issues/57

17. minute 11:25

    • so there is another todo called add "seelct tab" action to overlay
      • by brainstorming in feedback comments and discord and restructuring issues, sometimes it is easy to first
        • take a bunch of information or todos and just quickly add them to the correct issue (e.g. tiling window manager)
      • BUT it doesnt mean they are perfectly structured and grouped yet and as you saw there is sometimes redundancy
      • so as said above on the example of actions and that we should make a complete list and group todos for it
      • todo every time you notice a pattern or redundancy, please group things and try to clean up the issue and todo structure :-)

18. minute 11:36

    • select tab action
      • we do need a visual way for everything that has a shortcut too, so a user can use it on mobile but also to learn about a shortcut in the first place
      • second, we need to be able to select multiple tabs/tiles to put them together into zen/focus mode or not
    • also regarding tiles and restructuring todos
      • if you search this issue here for the word "save" you will find multiple hits
        1. in the info section in the top level comment
        2. in multuple feedbacks
    • so it was multiple times mentioned that we should be able to probably save a set of selected files of a tile in maybe a tile.json which is also what we use to open a set of files in a sub tile grid.
    • todo i think it is time to define that "feature" better and make it clear in a description or a set of todos so we dont forget
    • todo you mention e.g. <ctrl+shift+tab> to select something.
      • @mimi-uxui-dev thats a neat idea - we still need a visual way of doing the same thing, BUT
        • the moment you say or recommend that keyboard shortcut, can you please write it down? :-)
        • ad it as a todo group related to "selection" or "select action" so we dont forget which shortcut we could or should use
        • we try to make a rock solid specification so we can implement and not forget anything
        • but things get forgotten if we dont capture them immediately and put them in the correct place to see them again when we need them

19. minute 11:59

    • the 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" ???
    • again as said earlier - in chrome "Double clicking" the tab makes it full screen for example
    • also dragging the tab can move it around
      • maybe clicking the logo can be a short cut to show latest updates/notifications for a given file? or subscribe to it? *chrome tabs have a little "x" to close it ... but maybe there is space for more actions?
      • question how many actions do we have? ...only when we have the entire list can we easily think of where to put those
      • todo can we clean up the todo list of the issue to group things and remove redundancy to get a better picture of what we have? ..including from the feedback here and the previous feedback so we dont forget anything?

20. minute 13:02

    • the todo: > `shift-click + ctrl+click to select tab so that it doesnt loose focus
    • @mimi-uxui-dev you say: "we can do that" and then mark it as done
      • question how are we systamatically gonna remember that and many other similar details when we gonna implement it maybe in 4 or 5 months from now?
        • we need a specification where we have all the "features" neatly grouped and listed so that it will be easy for our "future selfes" to not forget any of those details. ... i am worried that when the issue is done and closed and all todos are checked, we will move on and forget that we have to remember to do that particular shortcust.
        • todo for the very least the @info section should slowly grow a detailed specification of everything that needs to be in a component and link maybe to particular wireframe screens so we know EXACTLY where what goes.
        • once we have that, things can be marked as done, but not before please.

21. minute 13:32

    • the todo: > double click on any tab to enter zen mode
      • yes, we can also have a shortkey to enter zen mode, but all the options need to be documented
      • for example in chrome you can double click not the tab, but the "tab bar" to enter fullscreen or at least maximize chrome

22. minute 14:02

    • i think we dont have a clear action bar yet.
    • it is a regression, because i think with the "black action bar" in the previous overlay menu wireframe we had it
    • ...but somehow we forgot, probably because it wasn't properly written down?
    • todo we have to find ways to write things down in a summary (notes + wireframes + links)
      • and then always revisit them so that we dont fall back behind what we already figured out :-)
      • we need a systematic listing of all actions we discovered so far and group them in todos
      • if we mark any action as done, because we "have them now" ...then they need to be in the wireframe
      • and how it works should be written in a markdown file for that component added to the repository
      • or at least in the @info section of the issue so when in 5 months from now we implement we have a perfect specification|

[mimi-uxui-dev]

*Worklog 2022.04.04

Feedback 2022.04.04

Regarding Stages:

• in case of including quizzes as exercises between lessons, i believe these quizzes should be simple and easy to do based on the learning materials. quizzes are good way to put the learning materials into action, for e.g. image we have a workshop with 40 lessons, and after going through all of them, you get to do the exercises, you might forget about things especially basic, it's overwhelming, therefor, we use quizzes to warm up the users minds and to keep things interesting and always challenging.

Regarding notes:

• each workshop will have one note file and it can be used

Regarding workshop:

• workshops consist of:
  • lessons, where each lesson has
    • info/desc
    • maybe a tool
  • a general support chat
  • a general exercise/gig area (those are NOT lesson specific, but always depend on the entire workshop)
• Also we'll prevent users from putting too many lessons (50 lessons is probably the maximum)
• You said We might even want to consider if a single info/desc section is good enough actually. could you elaborate more on this :-)

Tile File

• Here's what i understood from your idea about tile file: a folder can have a tile file, that tile file is used to save configuration for the folder's files that were open in a specific tile, for e.g. a folder can have 1000 files, a user open only 4 files from that folder in a tile and then save this as configuration into tile file
• you mentioned that a user can create a new tile i didn' think that this action exist till now, should i add it to the actions bar or there's a misunderstanding

regarding "google chrome tab groups"

• i believe we should create sub tile grid issue

---

Feedback for feedback 2022.04.04

4. Regarding tile.js

• Why does each lesson has a tile.json file ? maybe each workshop? or the TWM should have a tiles.json since it's the container of all tiles?

5.

i. i don't think i understand this idea clearly, but i think you want to add an input autocomplete search field to the tab to search into the tile/content which has many tiles?

ii. if we put the action bar below the tab it makes no sense to me because the tab is display in the bottom bar. And if we put the action bar on top of the tab, then the space next to the expand button (locate top-right of the overlay) will be empty. Also, what's purpose of the input field with an action/enter button next to to execute? we already have an input autocomplete search field to look for anything in the whole workshop iii. actions are not spread, but they are grouped, you have the :

• Select action: you use a the right click of your mouse, unless you want to include an empty checkbox which makes no sense to me rn
• Behind the scene and submit feedback are under About like you mentioned before
• info, tool, notes, chat, gigs, exercises are our tools, for e.g. user can click on tool , it will open the tool in a new tile or current/selected tile and if they close it's tab, they can always open it from the overlay menu
• maximize/expand action is to expand the overlay and make it almost fullscreen for better view, whenever the list of the content get's bigger it's much more nice to have a better view of the overlay so it wont be overwhelming
• i'll put the subscribe/unsubscribe action next to the title of the tab whether it's for file or folder iv. the back button is for nested folders, for e.g. inside Folder0 there's Folder1, and inside Folder1 there's Folder2 so basically the path would be Folder0/Folder1/Folder2/ . To go back to Folder0 you click on back button which will take you back to Folder1 and the you click again to go back to Folder0. This arrow is useful when there's for e.g 1000 files in folder, instead of scrolling all the way up, you just click on the arrow, the folder would close and you're back to the path you want to. v. noted vi. explained in iv vii. the user cannot resize the menu, they can only expand it, to be almost fullscreen for a better view of the list, if it an overwhelming list of files/folders, especially if many folders are nested. viii. i think we should call it help section instead of about section. also i think it's bad practice to click on about/help section and it'll open all it's files in new tiles, it's overwhelming. @todo for Mimi : i'm gonna put **value network issue** under other brainstorm slides concept & design #65 and link inputs/outputs .. if i mess up, Alex to the rescue :D

  6

• i thought that each tab bar is for each tile! wasn't this the case from the start?
• you said clicking on a file opens a context menu with open in current tab, open in new tab, subscribe to lesson 4 these are some actions, but they dont allow me to decide which program to use why do you have to pick a program, isn't that each lesson has it's own program, it can be a video player, and hackmd viewer or slide, also it opens in an iframe.
• the "select" file action happens using the mouse click, isn't this what selection is, if not how do you imagine it?
• you said what about opening something in a new tile vs. in a new tab but same tile vs. in same tab in same tile i'm confused haha
• can i also add a new custom note here or link to it? no you can't, users get one file note per workshop
• how many clicks does it need? is there a default action when i just click directly? what are you talking about in here
  • can i do something to change the default action? not sure why
  • can i see all actions and select the right one from all the actions that are possible but maybe not so common? we can put this in configuration
• what do we do if a user is on a touch screen and has no right mouse click? they can long press or double tab

7

• Good point, noted.

8

• folders can be opened in a the menu only so users can see the content: you can then select one or more files and then select the action to open the selected files in a new "tile" or also just a single file to open in a new tile if the single file happens to be some sort of tile.json file that describes a sub tile grid then a tile with that gets opened

9

• You said dark gray was confusing. brown as a color is better, you mentioned before that you wanted wireframes just to use black, white and gray when i used green.
• You said but the real confusing thing is to have many tiles and only one tab bar i'm gonna append each tab to it tile, do you think if we remove the bottom bar it would still make sense? the way i see it, it's like windows (the OS) you have the bottom bar and it has many tab and each tab is for window/tile.
• the "folder" tab should be the tab button of the tile that contains content of lesson 4 and content of lesson5 it is. there's a folder tab, and a tab for each lesson inside the folder. :-)

10

• what would happen if you click on the workshop tab? same overlay menu opens up?
• user can subscribe to then entire workshop file or everything. YES!
• we can have the profile inside the overlay menu. we dont have custom notes.
• technically a specific tile inside the tile grid could allow a user to log in with a different profile to show different content we would a user do that, aren't workshops suppose to be direct and for one thing only? also can users have multiple profiles in your system?

11, 12 , 13, 14, 15, 17, 18, 21

• noted

16

• open in json mode any tool to view to peek behind the scenes

20

• nothing to worry about, we'll have detailed wireframes, components and checked todo lists to guide us. if want to implement let's say TWM, we read through the checked todo list and find out what needs to be done.
• you said **todo** for the very least the @info section should slowly grow a detailed specification of everything that needs to be in a component and link maybe to particular wireframe screens so we know EXACTLY where what goes. once we have that, things can be marked as done, but not before please. could you cover this, this is beyond me haha

22

• the "black action bar" shows that the tile is selected/active.

[serapath]

feedback 2022.04.05

*Worklog 2022.04.04

Feedback 2022.04.04 ....

---

next A

Regarding Stages:

yes, so maybe we can make a "quiz exercise template" so any workshop author can easily create a quiz for their workshop. also the workshop data generator or editor can maybe suggest to use the exercise/gig tool to add a quiz exercise from a template?

---

next B

Regarding notes:

1. hmm, the thing is that notes is what the user is supposed to be taking
2. each workshop has a description/info section and video to explain stuff
3. the notes also do not live on the workshop files/folders every learner sees
   • but they are custom and stored only for each user in their profile

Maybe the tile.file format can define a tile grid that contains a tile with the note editor

• => but only defines to open a new file
• => unless the user re-vists the workshop and already has a note
  • ==> then the workshop should display the tile grid and notes of the user instead of the default for a new workshop learner

---

next C

Regarding workshop:

:+1: the info/desc section is a regular markdown file

what i mean by single info/desc instead of one for each video: The workshop maker can't make a seperate info/desc for each video, so that is discouraging the workshop maker from stuffing to many lessons into a workshop if they need different info/desc for some videos, they rather make new workshops and link them in workshop.json#unlocks section

Or if we say a video can at least have a small description and title, then we should maybe limit the characters to maybe 140 or 256 characters for video descriptions.

---

next D

Tile File

:+1:

yes. in fact all tiles should always be layout from a saved or new unsaved tile.json file ...i think we might NEVER want to just open all files in a folder in a sub tile grid probably

---

next E

4. Regarding tile.js

why? because when a user skips to the next lesson, the tile grid or a sub tile grid should change to show

1. the new lesson video
2. the maybe different tool for that next lesson video
3. maybe if we stick with multiple info/desc, then also a new info/desc file

so basically moving from one lesson to the next might update not just a tile, but a (sub) tile grid

• which means the workshop author needs to specify what goes in there via tile.json file

in a way we have something like that in the workshop.json lessons array. each entry in that array specifies multiple files already

This is just not very generic and neutral for a tiling window manager but very specific to our workshop.json

We anyway did not yet decide how a user can skip forward and back to each of the lessons in a workshop.

• what does that mean in terms of tiling window manager?
  • can a user define a set of tile grids and if thats defined the tiling window manager will show previous/next buttons?
  • any recommendations?

---

next F

5.

i. i don't think i understand this idea clearly, but i think you want to add an input autocomplete search field to the tab to search into the tile/content which has many tiles?

:+1: yes

you already showed it in the tab button menu, but on top instead of next or even in the tab button itself (like a browser url bar)

then the space next to the expand button (locate top-right of the overlay) will be empty

so what? :-) we can use it to display the files/folders instead

what's purpose of the input field with an action/enter button next to to execute

just an idea.

So when the "tab button" is not clicked, it shows whats currently selected with an action next to it When the "tab button" is clicked it turns into an autocomplete input dropup field with

• an action next to it, but the current displayed can maybe change too? maybe it can show multiple?
• maybe it shows the must used actions for a specific file/folder currently selected in the tab button?
• by clicking and holding for a longer time for example on the action, it would open the dropup/dropdown to show all actions and select a different one
• or we show actions in the black action bar sorted by how often they are used and user can rearrange them if they want and the first 1-3 actions are shown next to the collapes menu in the tab button?

...just brainstorming here... how do game deal with allowing people to quickly access the most used actions? :-)

---

next G

5. (action list)

how to use shortcuts for actions how to (re)assign shortcuts for actions where to present/display actions so user can find and see all of them how to allow a user to have very convenient access to all actions quickly

yeah - it is an art. we can study games and other apps to find insipiration :-)

lets aim for "minimalism" while doing this :-)

1. SELECT
   • on mobile or tables there might be no mouse right click
   • or e.g. "gmail" has multiple icons (select, star, important, title)
   • if you click title, it opens the email
   • if you click select it selects it
   • if you click the star, it marks it
   • if you click important you make it important
   • there could be another button for "subscribe/unsubscribe" (but doesnt make sense for email)

point is - a tab button is long enough to have different sections a user can click :-)

• it does not have to be an ugly "check box"
• it can be something where when the user clicks it makes a differnt border color or background to indicate its now selected
• the same color for selection can also be used in the file dropdown/dropup list while its selected
• ... discord for example has next to each chat room small icons for "invite" or if you have your own server, then also "settings"
• ... discord has a "+" button next to channel categories to quickly add a new channel if you have your own discord server

2. about :+1:

3. tools :+1:

4. maximize/expand

   • yeah, thats the same as "focus" or "zen" mode :-)
   • just maximize all the selected tabs/tiles together ...also if the set of selected are not yet saves as a tile.json, a user can do that
   • on the "sub tile grid" tab button, there should be an action offering to "SAVE" that tile.json file :-)

5. subscribe :+1:

6. back button :+1:

   • yes maybe the tab bar input field can display in which sub folder we currently are?
   • 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
   • i think we had some scroll bar pagination feedback already in some previous feedback.
   • once you added all of this to wireframes or issues, i can add that there so we will get a complete specification in the end :-)

7. resizing dropup/dropdown tab button menu

   • maybe the user should be able to "resize" it to read long file names or scroll less if they want to?
   • by default it opens in the standard size
   • ...i think that would be a helpful feature

8. about/help

   • i was more thinking that it is a new app
   • imagine i am using an app and its open source so they have a little "github icon" to lead me to their github org repository
   • where i have github issues to give feedback
   • but also everything else

In our app, clicking such an "icon" would open an entirely new app ... "the github app" that has nothing to do with "the workshop app" It is for working and collaborating on the project

For example:

• https://excalidraw.com/
  • They have a small "QUESTION MARK" in the bottom corner from where you can go to github
• http://viliusle.github.io/miniPaint/
  • They have it under help/about with a link to github
• https://www.photopea.com/
  • they have it in the top menu bar under (about/report a bug/etc..)
• https://fengyuanchen.github.io/photo-editor/ :+1:
  • this one actually just has a little "github icon" and i think thats the best

I personally would love to have "help" seperated from "about"

1. help - would make you stay in the workshop app and just help you
2. about - would make you open a new app or page which is not about the workshop app anymore
   • it is about github, the issues, the maintainers and everything else in the supply chain that enables the workshop app

---

next H

6

i thought that each tab bar is for each tile! wasn't this the case from the start?

not sure what you mean.

• each tile has one or more tab buttons
• a sub tile grid is a tile and has one or more tab buttons
  • but each tile inside the sub tile grid also has tab buttons

you said clicking on a file opens a context menu with open in current tab, open in new tab, subscribe to lesson 4 these are some actions, but they dont allow me to decide which program to use why do you have to pick a program, isn't that each lesson has it's own program, it can be a video player, and hackmd viewer or slide, also it opens in an iframe.

maybe i want to open a tile.json with the program "tiling window manager" or maybe i want to open the workshop.json with the program "workshop viewer" or maybe i want to open the tile.json or workshop.json with the json editor

My notes are markdown, but i want to open them in markdown editor but the info/desc is markdown too, but i want to open them in the markdown viewer

the "select" file action happens using the mouse click, isn't this what selection is, if not how do you imagine it? :+1:

yeah - just when do we click to select and when do we click to focus and/or open the tab menu bar?

you said what about opening something in a new tile vs. in a new tab but same tile vs. in same tab in same tile i'm confused haha

1. a new tile opens a new tile with its own tab button and actually the question is where
   • to the top?
   • to the left?
   • 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
2. a new tab just adds another "tab button" next to the current "tab button" (but its the same tile)
   • think: chrome switching to the next tab
3. a new tab in same tile means it replaces the current "tab button" and its content with the selected one
   • think: chrome changing the url in the address bar and loading it in the same tab

can i also add a new custom note here or link to it? no you can't, users get one file note per workshop

i think its good a user has an empty note by default, but imagine an advanced workshop ...an advanced learner might already have many notes that are relevant in that lesson context ...me as a learner, i want to open all of my different notes next to the workshop to start copying and editing and updating my notes ...also my user data config should remember all the notes that i loaded or linked to a workshop, so that when i go on my user profile ...i can also next to each note see the list of workshops they are attached to ...maybe the list of my notes on my profile page can also show me notifications which of the workshops i used a note with has updates?

how many clicks does it need? is there a default action when i just click directly? what are you talking about in here can i do something to change the default action? not sure why can i see all actions and select the right one from all the actions that are possible but maybe not so common? we can put this in configuration

:+1:

regarding "default action" when i click on the tab button

1. do i open the tab button menu?
2. do i only focus the content tile of that tab button?
3. do i only select the tab?
4. do i close the tab button?
5. do i need to click different parts of the tab button to make different actions happen?
6. does the default action depend on the current content of a tab?
7. can i change the default action when clicking on the tab button?

...what is the best UX? ...we should support all use cases ...but we also need to keep thing minimal and simple its not easy :D

what do we do if a user is on a touch screen and has no right mouse click? they can long press or double tab

as a mobile user i have to say the long press or double press is horrible if there is a better way i would prefer that :-)

---

next I

7

:+1:

---

next J

8 :+1: lets make wireframes for it :-)

---

next K

9

You said dark gray was confusing. brown as a color is better, you mentioned before that you wanted wireframes just to use black, white and gray when i used green.

yes, black/white is what we should stick to i think thats a misunderstanding, i just heard you saying that brown is better than a confusing gray in one of your worklogs ...but it doesnt matter, because with the new sub tiles and tab buttons attached to tiles this goes away anyway

do you think if we remove the bottom bar it would still make sense? the way i see it, it's like windows (the OS) you have the bottom bar and it has many tab and each tab is for window/tile.

:+1:

YES :-) I see it the same.

The "OS bottom bar" is just another tab button with a tab menu and possibly multiple more tabs instead of just one That way, the general bottom bar becomes the same as everything else... it is fractal or recursive :-) everything is just another tile or subtile with one or more tabs :-) ..including the OS or app itself

---

next L

10

what would happen if you click on the workshop tab? same overlay menu opens up?

YES

user can subscribe to then entire workshop file or everything. YES! :+1:

we can have the profile inside the overlay menu. we dont have custom notes. cool.

and custom notes

maybe:

1. a workshop app visited by a user will have the OS or app tab bar on the bottom with one tab for the entire workshop app.
2. 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

technically a specific tile inside the tile grid could allow a user to log in with a different profile to show different content we would a user do that, aren't workshops suppose to be direct and for one thing only?

Yes, a user would usually NOT do that :-) I am just saying that technically our system makes that trivial. So if we re-use the tiling window manager in a different context, that might be cool.

Imagine a workshop teaches you how to develop an app so users of your app can log into your app with their user profile just like we log into our workshop app with the user profile So when you develop the tool and see a preview in another tile, you might want to log into your app with a demo account to test if it works But you still want to stay logged in to your workshop or developer editor with your real account.

I think allowing a user to change the account they are using inside a tile with a specific tool which is maybe an app they are building to test it, would be useful :-)

also can users have multiple profiles in your system? :+1:

YES :-)

---

next M

open in json mode any tool to view to peek behind the scenes yes, if it makes sense of course, to open a jpeg or video in a json tool wouldnt really work :D ...but for many kinds of files it totally might work

e.g. a markdown file can be opened in a markdown editor, but also a normal text editor

---

next N

20

nothing to worry about, we'll have detailed wireframes, components and checked todo lists to guide us. if want to implement let's say TWM, we read through the checked todo list and find out what needs to be done.

:worried: :worried: :worried: noooooo :-)

I tried to explain in the video. all the outputs we create (slides, wireframes, markdown files) are not supposed to be "github issues". When we close todos and close issues, all the outputs should contain all results that include everything that was discussed and worked on in that issue. If we delete the issue at the end, we should not use anything important, because it is all captured in the outputs.

outputs will be added to the github repository as files and are under version control and easy to git clone

issues cannot be git cloned. issues dont have version history. issues can be changed later. also issues contain a lot of discussuion and in between information. It is not the right placce for outputs/results.

if something is part of the end results it should become part of some sort of document (e.g. markdown file, wireframe, slides, etc...) and added to the github repository

---

next O

22

the "black action bar" shows that the tile is selected/active.

yes, great. But it also included a bunch of actions. it is still part of your old wireframes. i think i liked that idea

[mimi-uxui-dev]

worklog 2022.04.6-5

A

• yes, in my head the template would maybe something like this : { "id": 2, "question": "What's the best programming language?", "answers": [ "Python", "Cobol", "Javascript", "Java" ], "correct_answer": 3 }

B

• notes are stored in the users' profile, for alltime, quick and easy access.
• tile.json file can stores the tile grid and note editor. initialy the users opens a new note file, and when they revisit the workshop, the tile.json file will load the saved grids and the already taken notes, so the user can continue where they left off

C

• each workshop has the info/desc section which is a markdown file, and if it's enough, users can create separate workshops and link them in the workshop.json#unlocks section.
• However a video can be self explanatory so no need a 140-256 characters description; and if the user really must add description they can put it in the workshops info/desc. if we stick with this approach the workshop will stay clean and neat

D

Noted!

E

why? because when a user skips to the next lesson, the tile grid or a sub tile grid should change to show

1. the new lesson video
2. the maybe different tool for that next lesson video
3. maybe if we stick with multiple info/desc, then also a new info/desc file
   • i think it would make sense to do it this way: when a user opens the next lesson; everything will be loaded in its place; new lesson video will be in the old lesson video, the new tool will be in the previsous tool tile and so on. OR, a new tile is loaded and the user starts from scratch in the default layout tile, instead of overwritting the old one.

We anyway did not yet decide how a user can skip forward and back to each of the lessons in a workshop.

• what does that mean in terms of tiling window manager?
  • can a user define a set of tile grids and if thats defined the tiling window manager will show previous/next buttons?
• any recommendations?
• i believe we can add forward/backward arrows to each lesson tile; but the real problem lies in the case when we have for e.g. lesson0, lesson1 and lesson 2 opened in several tiles, then how will the arrows look like? can even the user open multiple lessons at the same time because i think they can.
• let's suppose that we only allow the user to open one lesson at a time, then the user can use the arrows to move on to the next lesson.
• let's suppose that we allow the user to open multiple lessons, then no need for arrows because the user knows that he/she can go to the next lesson via the overlay menu

F

• I LOVE the idea, i think it will look pretty cool it it animated propally (with CSS not figma haha). so:
  • 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.

G

• We can add shortcuts to each action and tool, when the user hovers over an icon/button it will show a tool tip with maybe a simple description about the action and tool with hotkeys
• to re-assign shortcuts, we can do it via the tile.json file or in the profile
• to present/display actions so users can find and see all of them we can put them in profile, which allow users to have very convenient access to all actions quickly
• how does the maximize action work in our case.
  • let's suppose that we have 1 tile open, and then we add another one, so each of them will automaticlly allocate 50% of the screen, if we click on maximise on one of them does it go full screen and close the other one, (we don't have minimize action for the record).
  • let's suppose we have 5 tiles open, and we select 2 of them then click expand, what will happen in this case, will the other 3 close and the 2 allocate 50% of the screen each? isnt this the same as zen mode

yes maybe the tab bar input field can display in which sub folder we currently are? do you mean as a placeholder? if it's the case, i don't think it will work because once the user starts to type it's gone. 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 👌👍 i think we had some scroll bar pagination feedback already in some previous feedback. Yes! I remember! 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 once you added all of this to wireframes or issues, i can add that there so we will get a complete specification in the end :-) 👌👍

resizing dropup/dropdown tab button menu 👌👍

• about help: i think we can put the github link under about, so about will have:
  • behind the scene
  • submit feedback
  • github link
  • shortcuts

H

• each tile has one tab
• if it's a sub tile grid will look like chrome tab groups

• 1. a new tile opens a new tile with its own tab button and actually the question is where
     • to the top?
     • to the left?
     • 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
  2. I have to think about it and do some reasearch

2. a new tab just adds another "tab button" next to the current "tab button" (but its the same tile)

3. they will be grouped together

4. a new tab in same tile means it replaces the current "tab button" and its content with the selected one think: chrome changing the url in the address bar and loading it in the same tab

5. Makes sense now! thanks!

i think its good a user has an empty note by default, but imagine an advanced workshop ...an advanced learner might already have many notes that are relevant in that lesson context ...me as a learner, i want to open all of my different notes next to the workshop to start copying and editing and updating my notes ...also my user data config should remember all the notes that i loaded or linked to a workshop, so that when i go on my user profile ...i can also next to each note see the list of workshops they are attached to ...maybe the list of my notes on my profile page can also show me notifications which of the workshops i used a note with has updates?

• all notes should be located in profile, for all time and easy access and also because they belong to the user not the workshop

L

to be continued

[serapath]

feedback 2022.04.07

worklog 2022.04.6-5

A

• yes, in my head the template would maybe something like this : { "id": 2, "question": "What's the best programming language?", "answers": [ "Python", "Cobol", "Javascript", "Java" ], "correct_answer": 3 }

yes, i think we will have something like that. In fact something similar we already made for wizardamigos e-learning app in the past, see here

• https://github.com/wizardamigos/app/blob/master/curriculum/lesson001/slides.en.json

todo You can maybe make a todo on gig/exercise concept issue so we can copy that as information to a document/file and then link to it as a work in progress :factory: result and also link to this comment here so we know where that result was discussed :-)

So the link abovev and the context i am talking about is that we will have a bot which is like a "gig author", but for an exercise and each gig/exercise chat log will be similar to those issue we use here on github to work together. We have normal chat comments, but we also have special chat comments, like:

• worklog comments
• feedback comments
• make/update/finish todos
• make/update results/outputs
• make new issues
• ... etc ...

We properly link here on github everything back and forth, issues/todos/comments/outputs/etc... and that is what a gig/exercise chat log would have too.

so what is a QUIZ in this context?

A quiz is a little "gig" made by the author, but in our case the "gig" is an "exercise" madae by the "bot" ...and the answer is the "result/output" the learner selects or produces.

If the answer is correct, the "quiz exercise gig" will be successfully closed. If the answer is not correct, maybe the learner can try again later or just re-apply for the same gig to try again? :-)

...but basically we would use the above method to turn even a simple thing like a quiz into a proposed gig where the answer is the output ....its so simple that the output can come directly and worklogs can be skipped, but if the output answer from the learner is wrong, maybe there will be a feedback from the bot, so the learner can try again? :-)

also initially the bot might create a planned output

• @output :question: quiz answer

then the learner answer on the chat with a special chat message type that turns it into

• @ouput :factory: quiz answer

and then the bot either accepts the correct answer and maybe turns it into

• @output :package: quiz answer

or gives a feedback comment and the learner tries again :-)

a real gig with a real gig author is the same, but just more complex and paid :-)

[serapath]

feedback 2022.04.07

B

• notes are stored in the users' profile, for alltime, quick and easy access.
• tile.json file can stores the tile grid and note editor. initialy the users opens a new note file, and when they revisit the workshop, the tile.json file will load the saved grids and the already taken notes, so the user can continue where they left off

:+1: todo could you please copy the things you and I write and agree on here and above in the feedback discussion, like for example the "notes in user profile stuff", etc.., into some sort of output/result document files (e.g. markdown file, slides, wireframes) and then make an issue todo (e.g. on the gig/exercise issue) and link that document as :factory: work in progress result/output and also mention/link to our feedback comments where that output was created

[serapath]

feedback 2022.04.07

C

• each workshop has the info/desc section which is a markdown file, and if it's enough, users can create separate workshops and link them in the workshop.json#unlocks section.
• However a video can be self explanatory so no need a 140-256 characters description; and if the user really must add description they can put it in the workshops info/desc. if we stick with this approach the workshop will stay clean and neat

:+1: ok, yes. todo please the same as in the previous feedback comment above :-) we need to add this to an output document/file and then link to it from a sub bullet point in an issue todo and also link to this comment here so we know where that output came from.

[serapath]

feedback 2022.04.07

D

Noted!

todo :smiley: haha, i love it when we agree, but... noted where? :yum: So again, same as above, whatever we agree on in previous feedback or what was agreed on here or noted, lets take it and copy it to an existing result/output document to refine it or make a new result/output document and then again.... go to the correct issue and link it next to the corresponding todos and also link this or the related comments

E

why? because when a user skips to the next lesson, the tile grid or a sub tile grid should change to show

1. the new lesson video
2. the maybe different tool for that next lesson video
3. maybe if we stick with multiple info/desc, then also a new info/desc file

• i think it would make sense to do it this way: when a user opens the next lesson; everything will be loaded in its place; new lesson video will be in the old lesson video, the new tool will be in the previsous tool tile and so on. OR, a new tile is loaded and the user starts from scratch in the default layout tile, instead of overwritting the old one.

todo again same as above. we need new/updated result/output document/file and link to it from a new or existing issue todo and also link to the comment here or previous ones so we know where the result came from.

the output specification should summarize short and precicely what we decided in the feedback comments discussion :slightly_smiling_face:

We anyway did not yet decide how a user can skip forward and back to each of the lessons in a workshop.

• what does that mean in terms of tiling window manager?

  • can a user define a set of tile grids and if thats defined the tiling window manager will show previous/next buttons?
• any recommendations?

• i believe we can add forward/backward arrows to each lesson tile; but the real problem lies in the case when we have for e.g. lesson0, lesson1 and lesson 2 opened in several tiles, then how will the arrows look like? can even the user open multiple lessons at the same time because i think they can.

yes, i think they can

• let's suppose that we only allow the user to open one lesson at a time, then the user can use the arrows to move on to the next lesson.

yes they can do that too, but we shouldnt restrict the user to only do it this way

• let's suppose that we allow the user to open multiple lessons, then no need for arrows because the user knows that he/she can go to the next lesson via the overlay menu

true, but when a user comes to a workshop and went through the first lesson, how will they know there is a next lesson to continue to?

idea:

• we have files and folders
• we also have the tiling window manager
• a workshop author can specify the files/folders and layout shown to the user by default
• the user can change/updatae the layout and which files/folders are shown and even save it
• we said it is or can be saved in some sort of tile.json file

So maybe a tile.json file has an option to include one back: path/to/tileX.json and next: path/to/tileY.json, which means the next and previous button click updates the tiling window manager view with what is specified in those files, so a workshop author can define how the view will change in the lesson from workshop to workshop

A question that remains would be:

1. what if the user opens their notes and rearranges the view of the tiles they see?
2. what if they want to save those changes?
3. what if they make further changes and save those too?
4. Can they navigate not only between the prepared back/next of the workshop author, but also somehow jump between the different tile views they changed and created and then saved?

Do you have any inspiration how that could or should work?

[serapath]

feedback 2022.04.07

F

• I LOVE the idea, i think it will look pretty cool it it animated propally (with CSS not figma haha). so:

  • 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.

cool.

1. yeah, maybe a non-focused tile only shows the tab
2. a focused tile shows maybe the "black action bar" next to it's tab button (but just for the currently focused tile)
3. clicking the tab button of a focused tile turns the tab button into the autocomplete search field?

todo lets make todos for it in the correct issue to work on this and link an output document to capture exactly how it is supposed to work and why and link to this and my feedback comment so we know where the output came from and was discussed. The output should be or at least include a link to wireframes we make to showcase and define the exact behavior visually so we can also include that on the output slides later on.

[serapath]

feedback 2022.04.07

G

• We can add shortcuts to each action and tool, when the user hovers over an icon/button it will show a tool tip with maybe a simple description about the action and tool with hotkeys

:+1:

todo lets also somewhere make a list - maybe in the @info section to collect all the different kinds of actions we already mentioned in previous issues and feedback, so we can get a better idea of what they are and not forget one :-) ...then it will be easier to decide exactly how to deal with all of them (depends on the amount and what they do)

• to re-assign shortcuts, we can do it via the tile.json file or in the profile

interesting. ...not sure if the tile.json is the correct place. let's first take a look at a complete list of the actions. maybe it needs a separate config file for action shortcut keys.

todo maybe make a todo to brainstorm about that after we have the list of @result :question: of all actions?

• to present/display actions so users can find and see all of them we can put them in profile, which allow users to have very convenient access to all actions quickly

:+1:

• how does the maximize action work in our case.

  • let's suppose that we have 1 tile open, and then we add another one, so each of them will automaticlly allocate 50% of the screen, if we click on maximise on one of them does it go full screen and close the other one, (we don't have minimize action for the record).

:+1:

• yes, all selected tabs will go into focus/zen/maximize mode, which temporarily overlays/hides the other remaining tiles
• i think in focus/zen/maximize mode you would have a minimize/exit action to get out of focus mode, including a shortcut key (displaying shortcuts as tooltips sounds good btw.) so it restores the original tile and puts back all the focused fullscreen tiles into their original position from before

• let's suppose we have 5 tiles open, and we select 2 of them then click expand, what will happen in this case, will the other 3 close and the 2 allocate 50% of the screen each? isnt this the same as zen mode

:+1: yes :-) I think focus/zen/fullscreen/expan whatevery you call it is the same. It just depends how many files ...a single or many you want to put into that mode

yes maybe the tab bar input field can display in which sub folder we currently are? do you mean as a placeholder? if it's the case, i don't think it will work because once the user starts to type it's gone. 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 ok_hand+1 i think we had some scroll bar pagination feedback already in some previous feedback. Yes! I remember! 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 once you added all of this to wireframes or issues, i can add that there so we will get a complete specification in the end :-) ok_hand+1

resizing dropup/dropdown tab button menu ok_hand+1

:+1: todo ...again, lets do what should be the usual procedure.

1. add that feature specification to a new or existing output/result document
2. link to the document in a bullet point below the corresponding todo in the top level comment
3. also link this or the feedback comments next to the todo so we know where it came from

we can then later use all those result documents we create as inputs to a future issue todo to create more summary results or output :-)

• about help: i think we can put the github link under about, so about will have:

  • behind the scene
  • submit feedback
  • github link
  • shortcuts

can we differentiate between:

1. "about"
2. "help"

I think the "help" will help the user of a workshop app to continue their learning and tell them how the learning app works, including for example shortcuts and shortcuts need to be explained but maybe can also be reconfigured

I think the "about" will basically interrupt their learning and allow anyone to explore or contribute the supply chain of a workshop app, may it be with just submitting a feedback or even going to the github org and check the code and talk to maintainers ot whatever, but this is absolutely not at all part of learning the workshop content to be able to move on to gigs/exercises or future workshops.

todo so lets group stuff that is "help", thus part of completing learnings and tasks in one way and stuff that is part of "about", thus exploring how all of this is made and who makes it and maybe even helping out in another way.

[serapath]

H

• each tile has one tab
• if it's a sub tile grid will look like chrome tab groups

1. a new tile opens a new tile with its own tab button and actually the question is where

   • to the top?

   • to the left?

   • 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

1. I have to think about it and do some reasearch

:+1:

todo maybe do some reasearch and try to capture it and what i describe in a wireframe. lets just go through iterations and i can also try to share/guide how its supposed to work :-) ...but i think without many wireframe iterations we cant get there. this is very difficult to capture in textual description alone.

2. a new tab just adds another "tab button" next to the current "tab button" (but its the same tile)

2. they will be grouped together

yeah, what i mean is a tab bar below a tile with one or more tab buttons to switch the content of that tile

3. a new tab in same tile means it replaces the current "tab button" and its content with the selected one think: chrome changing the url in the address bar and loading it in the same tab

3. Makes sense now! thanks!

:+1:

i think its good a user has an empty note by default, but imagine an advanced workshop ...an advanced learner might already have many notes that are relevant in that lesson context ...me as a learner, i want to open all of my different notes next to the workshop to start copying and editing and updating my notes ...also my user data config should remember all the notes that i loaded or linked to a workshop, so that when i go on my user profile ...i can also next to each note see the list of workshops they are attached to ...maybe the list of my notes on my profile page can also show me notifications which of the workshops i used a note with has updates?

• all notes should be located in profile, for all time and easy access and also because they belong to the user not the workshop

:+1: yes, thats for sure.

todo the important bit is how do we show to a user under which workshops they opened/linked their notes? and how do we remember in a specific workshop which notes a user added to their tile views?

[mimi-uxui-dev]

Worklog 2022.04.09 @result :factory: Figma WireFrame

[serapath]

feedback 2022.04.10

Worklog 2022.04.09 @result factory Figma WireFrame

thx. :+1: i love how todos are added to the different todo list here and in other issues. thats great. I agree its a bit overwhelming. Your plan to turn some groups of todos into sub issues seems a good way to solve that.

Some issues already exist in

• 39

  • e.g. json mode or notes, etc... issues
  • the todos groups you made about them might not actually have anything to do with the tiling window manager, so you might just move those todo groups to their existing issues where they belong :slightly_smiling_face:

oh, also :+1: for cleaned up some todo lists in existing issues, but you mentioned there was a todo in the list to say that this should be done, so you could have just checked that todo instead of removing it :yum: ....but anyway, cool. looks more organized now.

---

issue value network

Based on the feedback you added here it seems we might just have another tool for it.

i think the solution is to rename the value network issue into "about tool concept & design" :-) ...and add it to the todo list in:

• 39

  and then also remove it from the sub todo list of

• 65

  which is where the value network it is currently linked and if you check the planned result of that issue you can see that the goal is anyway to remove the issue and instead integrate all its todos into other existing issues, and by making value network into its own "about" tool we solved part of that goal already. good job :+1:

todo so could you edit #65 and move it to #39 and rename it then?

[serapath]

feedback 2022.004.10

heya, maybe the first todo for the following feedback should be to copy things over into the specific issues and sub issues they belong to before actually processing it and then you can make worklogs for those issues and we discuss the details there instead of making this comment list longer and longer :rainbow:

• :+1: :100: love the tile having a black focus border when active/focused
• :+1: love the tab button with the icon, title and a few action buttons
  • todo maybe a list of all actions to decide which go into the tab bar and which into... a tab bar expansion?
    • tab bar expansion could be an additional "dropup bar" or expand the tab button temporarily? any other ideas?
• :+1: :100: love the tab button turning into a search when a user clicks to focus the tile
  • todo it could temporarily expaned the tab button so the search input and action icons have more space or
    • it could display the search in a temporary search bar directly below or directly above the tab button (similar to browser urls)
  • :+1: you said to remove it because it needs another overlay just like the one we already have with the "menu"
    • YES, true, i think so too, so could we make that overlay the menu we have? can we merge them?
• note search field - how to toggle/switch between "tab button" and "search" field?
  • the user could press enter to turn it back into a "tab button"
  • the user could click outside (e.g. into a different tile or into the tile content area so the search unfocuses into a tab button
  • the user could cilck an action to execute so the search turns back into the tab button ...always when search loses focus
• note hamburger icon to open overlay menu
  • clicking tab button into search field could show dropup overlay with files/folders
  • clicking menu action button shows dropup overlay menu
  • its duplicate, i think we can make clicking the tab to turn it into a search also show the dropup overlay menu :smiley:
• :+1: :100: love the subscribe action button
• :+1: to the select checkbox, but
  • todo improvement idea can we minimize selecting things visually by making that an action heppening only:
  • when clicking the tab button or tile in general? (e.g. hover over the tab might show the shift hotkey for selection?)
  • or when shift clicking anywhere on other tab buttons or other tiles it add those to the selection?
  • selection could then be indicated by giving tab buttons and tiles a different selection highlight color or border
  • that way we don't need the dedicated select box icon and have more space for something else :-)
• overlay menu
  • :+1: :100: i love the scroll bar, really lovely
  • :+1: :100: the focus/zen/expand mode button, but i think we might want to move that to the action bar?
    • can we use the "select box action" or we use the "menu button action"? (see above why we can probably remove them)
  • :+1: :100: awesome, i so love the profile :-) ..but then again we can remove it in the title bar
    • the profile should probably show next to an section to expand to see users personal files instead of workshop files only
  • :+1: settings icon, but lets find out what else other than saving layour for tiles/grids/notes would be in there
    • each tile as a tab button, but a tile can also contain a sub tile grid.
    • the tab buton of a tile which contains a "sub tile grid" which is not saved should show an action to do so
      • think a new vscode tab with some text content that is not yet saved as a file. it might show the title "Untitled-1"
      • if a user clicks the "save" action, it will save it as a Untitled-1.json "tile file" if the user did not type to rename it
      • note this way we might not need a "settings" button and solve it naturally just like we deal with other files
  • note JSON Mode
    • it is something that should be "just another program" to open files with
    • the files/folder list for example shows the workshop.json or tile.json
      • those can be opened either with the workshop tools or with the tiling window manager tool
      • but of course each of them could alternatively be opened by the json editor tool
      • so each file can have multiple programs to open it
      • the tab bar icon should actually show the program icon the file is opened with
      • in the files/folder list each default program can be shown next to the file
        • maybe we need a special open with... action in the action bar to open things with a different tool?
        • what about the user could also click on the "file extension" part of the file name to change the program to open it?
    • :+1: focus mode - but what if we merge that with the expand action?
      • it only maximises current tab tile, but if many files in the list are highlighted as selected, it maximizes them together
  • 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
    • what content is displayed in each of them, depends on the file in the workshop that gets opened by the tool
    • but if for all of them just like for example for
      • info - we are talking about a info description markdown file opened in a markdown viewer tile
      • or chat - we are talking about a chat server room json file opened in a chat program tile
    • so they should not be displayed as special buttons different from the rest of the files/folders i think
      • it is all just specific files opened in specific programs in specific tiles in the grid defined by a tiles.json file, no?
  • :+1: :100: love the auto complete filter list :-)
    • but can we make the tab button search to be that auto complete filter list instead? ...just by moving it down?
    • as you show in the wireframe with the path to "Tile of Lesson 0" that we are as also the tab button shows in lesson 0
      • couldnt we make the tab button search field display that by default then?
  • 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 :smiley:
      • 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 :-)
  • :+1: :100: files/folder list
    • the idea is that the folder/file path in or next to the "search input" is what shows on the bottom ...autocomplete style
      • :+1: but cool to show the path, thats great :100:
      • :+1: :100: AMAZING SUGGESTION, YES :-) please we should do what you recommend to copy vscode
        • i agree the path segments should be navigatable with clicking or cursors
        • on windows for example the bar supports both, see here
        • important the sub dropdown inside the overlay dropdown you suggest, see here
          • i think we should rather filter or highlight the current normal files & folders autocomplete overlay list based on it.
          • i think yet another sub overlay for showing the same files/folders is a bit too much
          • if the user exits the path editing the filter will be removed and all files/folders show in the autocomplete again
        • todo the folder path segments can be clicked to quickly navigate what the current tab button displays
    • the folder structure in your example i imagine a bit different, let me share how :slightly_smiling_face:
      • ./workshop.json is actually a "tile.json" file to open the default tile layout with the tools and files for the workshop
      • ./support_chat.json
      • ./gigs&exercises-chatserver.json
      • ./lesson0/
      • ./lesson0/tile.json
      • ./lesson0/Title_Of_Lesson_0.mp4
      • ./lesson0/info_description.md
      • ./lesson1/tile.json
      • ./lesson1/Title_Of_Lesson_1.mp4
      • ./lesson1/info_description.md
      • ./lesson2/tile.json
      • ./lesson2/Title_Of_Lesson_2.mp4
      • ./lesson2/info_description.md
      • ./lesson3/tile.json
      • ./lesson3/Title_Of_Lesson_3.mp4
      • ./lesson3/info_description.md
      • ./lesson4/tile.json
      • ./lesson4/Title_Of_Lesson_4.mp4
      • ./lesson4/info_description.md
      • ....
    • note 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" :smile: ...that refreshes the page and navigates away from the current
      • action "open in new browser window" :smile: ...just opens it in another browser tab instead
    • note when the menu is very long, the scrollbar can become longer or if e.g. upper left tile has more space below:
      • the dropup menu would just open as a dropdown instead
      • BUT lets not open it as a modal, because its just an "autocomplete list" for the search input
• :+1: windows style bottom bar
  • i like the idea and direction, lets brainstorm about that more.
  • you say the "tab buttons" are quite long so not many will fit, maybe 5 or a few more if ppl have large screens
    • but if a person opens many tabs in the browser the tabs shrink and only the currently selected tab expands
    • but also in vscode, you get a tab button scroll bar, or arrow buttons? so scroll back and forth between all the tabs
    • but vscode also has a little menu and any tab could highlight in the autocomplete dropdown all other open tabs
      • so clicking one could allow a JUMP action to focus the tab you want to see in a long list
    • of course, a user could also just NOT open so many tab buttons to avoid the problem? ...up to them
  • again - i agree its complex and we have to think about it. let see if we can make the right issues and todos for it.
    • one thing is, that every time we have a split tile or any other kind of "sub tile grid", the entire grid is the content of:
      • a single tile
      • and that single tile has a single tab bar with a tab button to save or close or whatever the whole "sub tile grid"
        • in that "sub tile grid" every sub tile has of course another "tab button" of its own

[mimi-uxui-dev]

Worklog 2022.04.10

Feedback 2022.04.10: Rest of the feedback for this comment

L

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

• i think here, when the user opens their notes/**/* it should open automatically as sub tile grid. the way i see it, it should be
• if the user want to open a file, it will open as tile, then they can drag'n'drop it to whatever they wish it'd be.
• if the user want to open a folder, it will open as a sub tile grid, and of course they can drag'n'drop to whatever they wish it'd be.
• this approach is better then opening/creating a sub tile grid and then opening your notes/files..etc in it.

then the tiling window manager would offer the user to save that configuration as a tile.json file inside ./apps/beginner-javascript-workshop/

• Why would the TWM offer the user to sav that config, i think it should be automatic, like auto save in VSCode

M, N, O

Noted!

[serapath]

feedback 2022.04.11

the worklog video is not linked yet

Worklog 2022.04.10

Feedback 2022.04.10: Rest of the feedback for this comment

L

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

• i think here, when the user opens their notes/**/* it should open automatically as sub tile grid. the way i see it, it should be

  • if the user want to open a file, it will open as tile, then they can drag'n'drop it to whatever they wish it'd be.
  • if the user want to open a folder, it will open as a sub tile grid, and of course they can drag'n'drop to whatever they wish it'd be.
• this approach is better then opening/creating a sub tile grid and then opening your notes/files..etc in it.

yeah - we said in old feedback the "tile grid" should show a folder, but since then invented the tile.json file, so opening that type of file should show a tile grid instead of a folder. every sub tile grid should always be savable as a tile json file or show because a user opened a tile json file ...and it shouldnt be about folders anymore. it also means every lesson folder should have a little tile json file to define itts tile grid view

then the tiling window manager would offer the user to save that configuration as a tile.json file inside ./apps/beginner-javascript-workshop/

• Why would the TWM offer the user to sav that config, i think it should be automatic, like auto save in VSCode

:+1: yeah, agree. closing tab or refreshing should restore auto save. if you open files in vscode and change them and if you did not save and closed vscode, vscode will restore the unsaved files and your layout when you restart it again.

We should have that kind of autosave, but also a user might want to specifically save and maybe even share a particular view with other users in a way a workshop author can define the default layout of their workshop and save and share that as a tile json file :smiley:

M, N, O

Noted!

todo ...just to make sure, what does noted mean. Can you share the issue or markdown file or whatever where those things have been added to output that is part of the specification we are trying to produce?

• is it part of wireframes? slides? markdown files?

how do we make sure after the final presentation is done we have all that noted stuff be part of our specification summary? :-)

[mimi-uxui-dev]

Worklog 2022.04.12 : Feedback and notes on this feedback

• tab actions should be based on the type of the file, for e.g. if the file is markdown then in the action tab there should json viewer/editor

👍 you said to remove it because it needs another overlay just like the one we already have with the "menu" YES, true, i think so too, so could we make that overlay the menu we have? can we merge them?

• We should merger them, i'll show you in the wireframe what i mean :)

when clicking the tab button or tile in general? (e.g. hover over the tab might show the shift hotkey for selection?)

• sounds like a good idea but it's hard for me to image the cursor/tab to show maybe a tooltip to shift+click to select.. i think it's a regular, maybe a common thing to shift+click to select more

or when shift clicking anywhere on other tab buttons or other tiles it add those to the selection?

• Exactly

👍 💯 i love the scroll bar, really lovely

• THANKS :D

The profile should probably show next to an section to expand to see users personal files instead of workshop files only

• my intention for the profile was to open the profile page in a new window. is there a way where we can display the users personnel files in the workshop files/folder instead of expanding them?

👍 settings icon, but lets find out what else other than saving layout for tiles/grids/notes would be in there each tile as a tab button, but a tile can also contain a sub tile grid. the tab button of a tile which contains a "sub tile grid" which is not saved should show an action to do so think a new vscode tab with some text content that is not yet saved as a file. it might show the title "Untitled-1" if a user clicks the "save" action, it will save it as a Untitled-1.json "tile file" if the user did not type to rename it note this way we might not need a "settings" button and solve it naturally just like we deal with other files

• i think it should be automatic without the having to save it manually. and it should be for the whole workshop because the workshop tile is just a sub grid tile container than has many tiles and inner subtile grids therefor i believe we should save the subtile grid of the whole workshop no matter what it has in there.

in the files/folder list each default program can be shown next to the file maybe we need a special open with... action in the action bar to open things with a different tool? what about the user could also click on the "file extension" part of the file name to change the program to open it?

• I think clicking on the icon of the file in the file/folder explore and/or the tab will open a small overlay titled open with.. and bellow this title a list of option of all the tools that it can open the file

Focus mode

• we will have focus mode in addition to the action of expanding and shrinking the file/folder explorer using cursor when you put it in the edge of the

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

• so when the user open the workshop for the first time, it opens the tools that are available in the tiles.json, my question is, can the user close for e.g. info/desc and when if he can, then how can the user re-open it? maybe through the file/folders explorer? :D

• we'd definitely go vscode style but we'd not have the sub overlay, we'd open only one overlay .. again i'll show you what i mean

👍 windows style bottom bar i like the idea and direction, lets brainstorm about that more.

• we can have the bottom bar and only append the icons of the tiles in it. but again i still think we should get rid of the bottom bar, i can't see the purpose of it.

[serapath]

feedback 2022.04.12

please add the link to the worklog video :-)

Worklog 2022.04.12 : Feedback and notes on this feedback

• tab actions should be based on the type of the file, for e.g. if the file is markdown then in the action tab there should json viewer/editor

i think i dont understand what that means

1. Is that a question? (doesnt have a question mark)

2. is it a recommendation?

3. is it repeating what should be our specification of how it should work?

I dont understand what it says. If markdown then json?

+1 you said to remove it because it needs another overlay just like the one we already have with the "menu" YES, true, i think so too, so could we make that overlay the menu we have? can we merge them?

• We should merger them, i'll show you in the wireframe what i mean :)

good :-) please make a todo for it and then when its done link the wireframe file as output

when clicking the tab button or tile in general? (e.g. hover over the tab might show the shift hotkey for selection?)

• sounds like a good idea but it's hard for me to image the cursor/tab to show maybe a tooltip to shift+click to select.. i think it's a regular, maybe a common thing to shift+click to select more

it is not easy, but we have to find a way how any shortcut can be visibly shown in the UI. lets be creative. Maybe an additional ? action button and when user press it it is activated, which means anything the user clicks will show a tool tip for the hotkey - maybe they can even edit in that mode? :-)

When the user presses ? action button again it deactivates so all other buttons work again as usual.

People come from different backgrounds (linux, windows, only mobile, or apple macOS, etc...) ...people use different programs and apart from copy/paste ctrl+c and ctrl+v almost all things work slightly differently and it is hard to expect anything. We need a way for a user to show

again whatever we decide, lets make it a todo and an @output :question: where it is described and once the todo is finished lets link the final document and mark it as :package: Lets start really working strictly with the todo system.

or when shift clicking anywhere on other tab buttons or other tiles it add those to the selection?

• Exactly

could you please then link that in some sort of @output next to the corresponding todo?

• if there is no todo yet for this to link the output to, then could you please make one?

+1 100 i love the scroll bar, really lovely

• THANKS :D

could you please then link that in some sort of @output next to the corresponding todo?

• if there is no todo yet for this to link the output to, then could you please make one?

The profile should probably show next to an section to expand to see users personal files instead of workshop files only

• my intention for the profile was to open the profile page in a new window. is there a way where we can display the users personnel files in the workshop files/folder instead of expanding them?

sure - if you can imagine something there is a way. i imagined we would have a section in the autocomplete overlay to display user profile files/folders. we can try out things in wireframes.

could you please just make a todo for that and link some sort of @output next to the corresponding todo as work in progress :factory: ?

• if there is no todo yet for this to link the output to, then could you please make one?

so we can work on the output until we agree on how we do it and then we turn the output link in the closed todo into a :package:

Focus mode

• we will have focus mode in addition to the action of expanding and shrinking the file/folder explorer using cursor when you put it in the edge of the

sounds right. lets see in the wireframe.

please can you make a todo for this so we can track it and mark it as done once we have it? also right below it could be the @output link to the wireframe and maybe additional outputs that describe the behavior.

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

• so when the user open the workshop for the first time, it opens the tools that are available in the tiles.json, my question is, can the user close for e.g. info/desc and when if he can, then how can the user re-open it? maybe through the file/folders explorer? :D
• we'd definitely go vscode style but we'd not have the sub overlay, we'd open only one overlay .. again i'll show you what i mean

cool. yeah i love to see the wireframe.

also - if the user closes the info/decs it is like a "file edit" (to the tile json file) if the user closes the browser and comes back, the browser will remember the changed layout if the user wants to explicitly save the changed layout for themselves in general - so they can change the layout more, but then like a save file in a game, they can restore it, then they should just use the tab button of the entire "tile grid" to save it :-)

+1 windows style bottom bar i like the idea and direction, lets brainstorm about that more.

• we can have the bottom bar and only append the icons of the tiles in it. but again i still think we should get rid of the bottom bar, i can't see the purpose of it.

i think we can probably hide the bar and never show it, because it is anyway empty. we only show the "tab buttons" instead?

lets brainstorm - but again, please make todos to track all these things and also always immediately create "expected @outputs" with a :question: or when they are work in progress with a :factory: symbol ...and once they are done, we make it a :package: symbol :-)

[serapath]

feedback 2022.04.12

+1 settings icon, but lets find out what else other than saving layout for tiles/grids/notes would be in there each tile as a tab button, but a tile can also contain a sub tile grid. the tab button of a tile which contains a "sub tile grid" which is not saved should show an action to do so think a new vscode tab with some text content that is not yet saved as a file. it might show the title "Untitled-1" if a user clicks the "save" action, it will save it as a Untitled-1.json "tile file" if the user did not type to rename it note this way we might not need a "settings" button and solve it naturally just like we deal with other files

• i think it should be automatic without the having to save it manually. and it should be for the whole workshop because the workshop tile is just a sub grid tile container than has many tiles and inner subtile grids therefor i believe we should save the subtile grid of the whole workshop no matter what it has in there.

like i tried to say earlier. yes it is an automatic save, like in games you have automatic save games, but there will be all kinds of automatic save games all the time basically. but sometimes you want a specific game state or in our case a specific tile lyout to save it under a specific name - like a bookmark - so you can later return to that exact one, because its maybe important to you.

The automatic saves will anyway happen by programming the browser cache so it remembers the layout when you return to the app and shows it to you the way it was when you left and closed the browser.

in the files/folder list each default program can be shown next to the file maybe we need a special open with... action in the action bar to open things with a different tool? what about the user could also click on the "file extension" part of the file name to change the program to open it?

• I think clicking on the icon of the file in the file/folder explore and/or the tab will open a small overlay titled open with.. and bellow this title a list of option of all the tools that it can open the file

hmm... so we have:

1. clicking the icon of a file which shows the default program the file will open with
2. hold click and drag the filename ...maybe to drag and drop it somwhere? or to open a little extra overlay dropdown?
3. clicking the file name of a file
4. hold click and drag the file icon
5. hold click and drag the file extension
6. clicking the file extension part of the file name

also at the end of the filename there might be space for some additional icon(s) ..like the x symbol in the browser search autocomplete at the end of each entry line in the autocomplete list ...lets call it end of line icon

7. click the end of line icon
8. hold click and drag the end of line icon

whatever we do, it should cover all our use cases and it should work without timing (my experience is that all timing related gestures like click and hold for a second are not intuitive and tedious to use) and it should work on all platforms the same, dekstop, laptop, mobile, touchscreen, etc...

todo did you make a list of actions we have?

can you please make a todo for a list of actions and a @output link to the list of actions ...its ok if it is in the @INFO section for now so we can see what are all the actions that we need to integrate into the UI and then think which of the options above would work to cover all of that conveniently :-)

[mimi-uxui-dev]

Worklog 2022.04.16-17 1/4 2/4 3/4 4/4

Wireframe

notes and thoughts

• I think that open with.. action is a good idea but maybe not for WA, we have these files and we can just open them with their own tools and json mode:

  • about tool:
    • We open it with about tool
    • we can open it with json tool and it's read-only, users cannot change this file
  • tile.json:
    • we open it with json tool and it's read-only file
    • we can't open it with our other tools simply because it doesnt make sense; our tools are: chat tool, practice (coding) tool, json tool and markdown tool. Chat and practice tool are links to external resources, we are left with json and markdown tool, i suppose that json tool is only a read-only files and the markdown is a read-write file with auto save.
  • note files:
    • we open it with markdown file and it's a read-write file with auto save functionality
  • info/desc / lesson / gigs / exercices :
    • we open it with it's own tool, read only file
    • we can open it with markdown file and it's a read-only file or maybe not because you can see it with it's own tool
    • we can open it with json tool but how will that will look like, also doesnt make sense to me

• I think that Open in a new Tile action is unnecessary, once we have a file that is opened in a tile why would we want to open it again basically we are make a copy of it. We can change this to Open a new tile which is a a tile that's empty, users can use the search bar to open any file they want. Or we can change it to open next file that file can any file that is next in queue, we can be in the lessons folder, the currently open file is Lesson1 therefor the next file in queue would be Lesson2, if we both agree on this action we can maybe add the prev file :)

[serapath]

feedback 2022.04.18

1 open with should definitely be implemented in a more subtle way than as a context menu

• program icon might might need to be able to choose a different program somehow
  2. open in new tile or in general open it in various ways might be important
• maybe you want to open the lesson video twice, like for example when i give feedback i want to give feedback to different parts of your video or compare different screens
• maybe if i have a source code file, i want to open the same file in different tiles but scroll to different spots to compare a function definintion and whats happens inside that function with the code where that function is called with specific arguments so i can quickly see the arguments given while reading through the function code in the same file - so there are use cases :-)

I think i said more in my feedback videos, which i linke here:

1. https://share.vidyard.com/watch/kgWcWofWBTSLzErgojGszr?
2. https://share.vidyard.com/watch/hDHdTn4Jx1DV4PCL8vVw5H?
3. https://share.vidyard.com/watch/EHhnvby1FXRan2UAYYbqGV?

[mimi-uxui-dev]

Worklog 2022.04.23

Feedback 2022.04.23

Thoughts and ideas:

First video

1. The markdown tool: when the user opens the workshop, all the data is downloaded in the browsers cache, so the next time the users open their notes it will load faster.
2. The root folder should be the user profile, user can have multiple accounts and many workshops, if the user doesn't have an account or is not logged in we'll use a generic icon and when they're logged in, we'll use their profile picture. Since users can have multiple accounts, they can create a copy of the workshop in their second profile
3. We can have an icon for the current workshop at the top bar, for quick and easy navigation to get back to the workshop.
4. program icon in the action bar, that shows what program the file is open with
5. Question: you mentioned in the first video that programs folder is located in the profile,, you can see the programs that you have installed, programs are associated with certain type files i don't see the purpose of this?
6. if we have a large folder with complex folders, opening folders can be displayed like the main folder (workshop in our case) and users can use the search bar and arrows to go back to the previous folder

Second video

1. You asked how to cancel from zen mode? you click ESC in the keyboard and you can drag the mouse to extreme top, an overlay will appear with the exit button
2. you motioned for the tools which don't have a subscribe icon, we can use that space to make another action for the user to create a new file/data from the tool, this can work for the markdown tool open, users can create a new markdown file, but for the chat, about, practice tool i don't see that working. after the user creates a new markdown file, it will be located in the notes folder
3. Add a notification-counter to notification icon, if the use is online and they get notified by anything it will appear in the notification overlay and an alert, we can add notification icon to tools, to view history of their updates
4. Question: how can we share the link of markdown file and get to add it to the file explorer of other users and it will send them a notification? i can see users share their markdown files, but not adding them to file explorer
5. Question: why should users subscribe to sub-grid tiles and tiles, if they're getting notifications from folders and files?
6. i think we should give users the ability to read-only the tile.json file as a json file and we open the json file via the TWM.

Third Video

1. shift+click we can display it as an overlay for tips, and whenever a user opens the workshop it will be displayed. also i remember that you mentioned before that we can make a workshop to announce and pitch WA (instead of a website or make it a part of the website) therefor we can explain to the users that this is how you select multiple tiles

[serapath]

feedback 2022.04.28

Thoughts and ideas:

First video

1. The markdown tool: when the user opens the workshop, all the data is downloaded in the browsers cache, so the next time the users open their notes it will load faster.

:+1:

2. The root folder should be the user profile, user can have multiple accounts and many workshops, if the user doesn't have an account or is not logged in we'll use a generic icon and when they're logged in, we'll use their profile picture. Since users can have multiple accounts, they can create a copy of the workshop in their second profile

:+1:

3. We can have an icon for the current workshop at the top bar, for quick and easy navigation to get back to the workshop.

:+1:, but can we try to make it a bottom bar?

4. program icon in the action bar, that shows what program the file is open with

:+1:

5. Question: you mentioned in the first video that programs folder is located in the profile,, you can see the programs that you have installed, programs are associated with certain type files i don't see the purpose of this?

So each workshop has files. (e.g. file.txt, file.md, file.mp4, file.jpg, file.json, ....), right?

• the default program icon in the action bar opens a e.g. workshop.json file with the workshop viewer.
• the user could decide to open it instead with the json editor

how does the workshop page or tiling window manager or tab button overlay menu know which one it is?

• is the "default program icon" the json editor? or the tiling window manager? or the workshop viewer?
• also, all programs have to be downloaded too before you can open files with them

So do we cache all downloaded programs locally on the users computer?

• if so - the user can probably see which programs they have
• if so - the user can probably see which files open with which programs by default (= default program icons)

6. if we have a large folder with complex folders, opening folders can be displayed like the main folder (workshop in our case) and users can use the search bar and arrows to go back to the previous folder

:+1:

[mimi-uxui-dev]

Feedback 2022.04.28

• Add icon for the programs next to the search bar so the user can open the same file but with different program
• We can integrate the programs:
  • When the workshop is opened for the first time, the programs are downloaded in the cache, sounds like a good practice, right :)
  • if the user cleared their cache, then the programs will be downloaded again for faster reach

[serapath]

feedback 2022.04.28

Thoughts and ideas:

Second video

1. You asked how to cancel from zen mode? you click ESC in the keyboard and you can drag the mouse to extreme top, an overlay will appear with the exit button

:+1: not bad. i like the part with pressing ESC

the overlay ...yeah, its an option.

• What if i want to save the current zen mode layout as a tile.json file?

A

i was wondering if instead i could have a single "full screen" regular tiling window manager with its own tab menu button that allows me a "save action" and it has also an x to close the entire fullscreen tab with sub tiling window manager zen mode tiles?

Basically - the difference to a non-zen-mode tiling window manager layout is that the first root tab button for the entire screen of all tiles has no x to close it. Instead you just have to leave the website to close it?

So basically:

• every tab button in the bottom bar is a zen mode tiling window
• the last remaining "zen mode" tab is always the unclosable root tab
• if only one tiling window root tab is open (e.g. the default one in a workshop)
  • then it is the "root tab"
  • but when some selected tabs are turned into a new zen mode tab button
  • then the bottom bar has two tabs and if any of the two is closed:
  • the one that remains is the new current "root tab" tiling window
  • and if thats not the default one in our example, it can be saved as a tile file

---

B

minute 1:12

your tile grid looks cool :+1:

as a side note, in a real workshop, i imagine i would want the top row to be lesson and info/desc and the tool in the botom middle, and notes and chat on each side of the tool :smiley:

but otherwise:

you show the overlay menu and say it is overwhelming - i agree.

Let me try to summarize your idea for myself:

1. the bottom "search" bar is for the entire workshop if nothing is selected

   • so could that be like the bar for the tiling window as described under A?

2. if you select a tile (or many tiles) the bottom bar adapts to the selected tiles

   • yes - a (sub) tiling window's tab button can be adapted based on selected tiles
   • vscode, when you select a tile, it marks its open file in the side file explorer too
   • ...just for us its a bottom instead of a side bar (which is maybe configurable)
   • vscode always selects the same file if you select any tile that opens that file
   • but what if we select two tiles which show the same file?
   • vscode doesnt show a list of "running program processes" for each tile though
   • it just highlights the file in the file explorer

So:

1. i think we could imagine your bottom bar as tab button for the entire tiled window
2. maybe a "tab button" can always:
   • stretch over the entire length of it's tile when it is the only tab button
   • but when a second "tab button" is added

What do we want from "tab buttons" bars?

SINGLE TILE TAB BUTTON USE CASES:

1. via tab button: change program and/or file visible in current tile from overlay menu
2. via tab button: show history changes log based on current program/file (+undo)
3. via tab button: trigger generic and/or program based actions

MULTI TILES:

1. maybe multiple tiles (e.g. like the 5 tiles shown in your workshop wireframe)
2. or multiple (full window) ZEN MODE tabs, each with a single tile
3. or multiple (full window) ZEN MODE tabs, each with a multi tile layout from a tile file
4. or multiple TABS from a single multi tile window when its collapsed on mobile

So multiple ZEN MODE bottom bar tabs, each with a single tile is very similar to a single multi tiles window but collapsed into tabs on mobile.

So the bottom tile bar is a combination of many tab buttons and "grouped" tab buttons, where:

1. a normal tab button represents more (sub) ZEN MODE tiles a user can switch between
   • with potentially a corresponding tile file that the zen mode layout can be saved to
2. potentially some more "grouped tab buttons" which could belong to
   • one of the ZEN MODE tiles multi tile file layouts
   • but they are currently collapsed because of a small screen, like mobile screen

questions + answers

1. via tab button: how to split into more sub tiles or close some?
   • => i guess to open (click/drag'n'drop/select?) a new program/file into a new tile
     • you do that from the overlay menu
2. via tab button: how to add additional tab buttons to switch tile content (e.g. ZEN MODE)
   • => given the above, open a single file in a new tab of the same tile would make:
     • ==> an unsaved single file zen mode tab button
   • => given the above, selecting multiple tiles into a new tab would make:
     • ==> an unsaved multi tile zen mode tab button
   • => and, selecting multiple files with programs into a new tab would make:
     • ==> an unsaved multi tile zen mode tab button

So selecting one or more existing tiles in the grid for a ZEN MODE tab (thats always now what ZEN MODE would mean - close it or press ESC to get out), would just be a different way of selecting the files + programs to open them with** from the overlay menu into a ZEN MODE tab, right?

• question: How do we present "ZEN MODE tabs" with their open tiles in the file explorer overlay menu?

• answer: not different than the first one, which is files/folders that are open and they belong to a tiles json file

• question: what if a "ZEN MODE tab" is not yet saved?

• answer: maybe that should be represented by a "temporary" tile json file that is automatically deleted if a user exits the ZEN MODE unless they saved it to be able to always open exactly that kind of tiled layout view with the specifc files opened and arrange in that ZEN MODE tab :-)

so maybe: in our overlay "file explorer" menu, a tile json file (once opened):

• should allow the tile json file in the overlay "file explorer menu" to expand like a folder:
• the "file like" entries in that exapnded "folder like entry" in the menu could be:
  • a list of entries for each tile program that displays a file at the moment
  • including twice the same file and program if the tiled layout has two tiles that open the same file with the same program

[mimi-uxui-dev]

Worklog 2022.04.28

Feedback 2022.04.28

What if i want to save the current zen mode layout as a tile.json file?

• that would be new feature, we can maybe include it in the overlay.

A

• that's intressting, but i think it negates the zen mode idea, therefor we dont need a tab for the tiles when the user want to go zen mode, zen mode is about concentration on the open iles and their content, so they can focus without even having an option to the tab. they use it for maximum focus
• the root tab is just a tile with no tab

B

as a side note, in a real workshop, i imagine i would want the top row to be lesson and info/desc and the tool in the botom middle, and notes and chat on each side of the tool 😃

• We'll make this our default when the workshop loads

1. the bottom "search" bar is for the entire workshop if nothing is selected
   • Yes, for the entire workshop, but you can navigate to the other levels whether that's a profile directory or workshops listed under your profile or navigate to all the nested folders inside the workshop

i think we could imagine your bottom bar as tab button for the entire tiled window

• that would be overwhelming, tiles nested inside of eachother, subgrid tiles, and each of them has a tab and for the root tile it has its own tab. as a solution for this, we can have the buttom search bar like i showed you in the last wireframe, it's for every tile, and because each tab has its own file explorer overlay that would be redundent. user can select any tile they want and it will change the path in the search bar

What do we want from "tab buttons" bars?

SINGLE TILE TAB BUTTON USE CASES:

1. via tab button: change program and/or file visible in current tile from > overlay menu

   • I like this, we ca do that

2. via tab button: show history changes log based on current program/file (+undo)

   • Good idea, but its too much, we have to keep this minimalistic, we can add the changes to notification (i will show you what i mean in the next iteration)

3. via tab button: trigger generic and/or program based actions

   • Yes, will add this :thumbsup:

MULTI TILES:

• in zen mode we dont display tabs nor bottom search bar, just tiles for maximum focus
• the bottom tile bar is like the search field in the browser, you can have many tabs open and when navigate from to another it will change the url accordingly

So the bottom tile bar is a combination of many tab buttons and "grouped" tab buttons, where:

• no its not haha it just a tab that its share by many tiles

1. a normal tab button represents more (sub) ZEN MODE tiles a user can switch between
   • with potentially a corresponding tile file that the zen mode layout can be saved to
2. potentially some more "grouped tab buttons" which could belong to
   • one of the ZEN MODE tiles multi tile file layouts
   • but they are currently collapsed because of a small screen, like mobile screen
   • this got me sooo confused :laughing: im sorrr, but could you explain it more :blush:

questions + answers

1. via tab button: how to split into more sub tiles or close some? => i guess to open (click/drag'n'drop/select?) a new program/file into a new tile

   • you do that from the overlay menu
   • Correct

2. so confusing, but i think we shouldnt save the tiles of Zen mode, saving the original tiles is enough

**So selecting one or more existing tiles in the grid for a ZEN MODE tab (thats always now what ZEN MODE would mean - close it or press ESC to get out), would just be a different way of selecting the files + programs to open them with from the overlay menu into a ZEN MODE tab, right?

• to enter zen mode, you just select tiles, click the zen mode icon and you're good to go, to close it, click esc. thats simple
• the search bar at the bottom is for all the tiles and for when you're not in the zen mode

question: How do we present "ZEN MODE tabs" with their open tiles in the file explorer overlay menu?

• answer: we don't. zen mode is just for users so they can focus

• should allow the tile json file in the overlay "file explorer menu" to expand like a folder:

• what do you mean by expand like a folder

[serapath]

feedback 2022.04.28

and the remaining feedback for your previous worklog :-) I see i ahve to be faster now if you are regularly making them now, hehe.

2. you motioned for the tools which don't have a subscribe icon, we can use that space to make another action for the user to create a new file/data from the tool, this can work for the markdown tool open, users can create a new markdown file, but for the chat, about, practice tool i don't see that working. after the user creates a new markdown file, it will be located in the notes folder

cool. yes :+1:

3. Add a notification-counter to notification icon, if the use is online and they get notified by anything it will appear in the notification overlay and an alert, we can add notification icon to tools, to view history of their updates

:+1:

4. Question: how can we share the link of markdown file and get to add it to the file explorer of other users and it will send them a notification? i can see users share their markdown files, but not adding them to file explorer

If a workshop author creates a info/desc file and a workshop user sees and subscribes to the info/desc file of the workshop then when the author updates the info/desc file, all users will receive notifications. datdot and the hypercore-protocol technology enable this.

5. Question: why should users subscribe to sub-grid tiles and tiles, if they're getting notifications from folders and files?

At the moment we do not subscribe to folders, right? ...but to tile json files maybe. Also i would just make it a generic option, so if a user wants to subscribe to the updates of a file, like a tile json file, then why not? i wouldn't make an exception from the subscribe logic for just one particular type of file. Yeah, they should be able to subscribe to folders too.

6. i think we should give users the ability to read-only the tile.json file as a json file and we open the json file via the TWM.

yes cool. i agree. i think we also have to work on the tile json file concept. i think defining the grid is what i understand well already, but ...the prev and next button that you say exist for lessons. those might need to be defined too ...basically as options in the tile json file i guess.

[serapath]

feedback 2022.04.29

Third Video

1. shift+click we can display it as an overlay for tips, and whenever a user opens the workshop it will be displayed. also i remember that you mentioned before that we can make a workshop to announce and pitch WA (instead of a website or make it a part of the website) therefor we can explain to the users that this is how you select multiple tiles

nah, i think showing the keyboard shortcuts needs to be part of the app. to me, so far the touch on mobile compatible version i still like the most would be to have some sort of help symbol, which when clicked will turn any click on any action into showing a tooltip overlay which includes shortcuts for any action.

to make the action buttons again work, just disable the help mode by pressing the help action button again.

[serapath]

feedback 2022.04.29

continuing some feedback on previous worklog

:+1: for the profile widget as the first segment in the address bar path.

• we might need to deal with switching accounts
• we should consider that that the following are again actions
  1. duplicate workshop to
  2. logout
  3. and what about a create account? :-)

we should deal with actions the same way we deal with all actions. An action bar :-)

actually ...if an action requires "additional input params", we should consider adding a little second bar or something that includes a form to select the additional inputs necessary to submit a specific action.

1. duplicate workshop to might need such additional inputs
2. logout doesnt, its a single click and done :-)
3. create account definitely has some kind of form, but maybe instead opens that on the profile page itself instead of doing it inside the workshop

also "duplicate workshop to" is quite long. ...maybe there should rather be a share action when a user clicks on a folder like Workshop-title-XYZ?

---

programs/ folder

That is somehow the cache or rather the place where all programs are stored which the user downloaded in the past.

1. the json editor => which can be used to open a workshop.json
2. the workshop app code => which is used later to open a workshop.json

we could instead call the folder tools/ or apps/ instead of "programs" too :-)

---

:+1: for the white background to indicate the active address path segment

---

Overall, the path segments and the way folders are now structured is a lot better. we should do it everywhere like that :-)

[serapath]

feedback 2022.04.29

feedback on worklog 47

Worklog 2022.04.28

Feedback 2022.04.28

What if i want to save the current zen mode layout as a tile.json file?

• that would be new feature, we can maybe include it in the overlay.

:+1: lets do it, its another action. available actions depend on the content of a tile

A

• that's intressting, but i think it negates the zen mode idea, therefor we dont need a tab for the tiles when the user want to go zen mode, zen mode is about concentration on the open tiles and their content, so they can focus without even having an option to the tab. they use it for maximum focus
• the root tab is just a tile with no tab

hm, yes i see, but i also think doing it through the tab makes ZEN MODE just smart use of a regular feature. less features but those feature which we have being very powerful is always a more minimalist approach. i think i prefer that a lot.

To mitigate your concenr, we could think about an optional expand/collapse feature for the tabs if a user wants that?

e.g. vscode allows to click the file explorer icon to collapse it. e.g. atom editor can get rid of all menus and replace them with a small tiny button

do you think we could do something similar and just have a tiny button above the bar or somewhere in the corner to collapse or roll up the tab buttons bar into maybe the corner and clicking it again expands or rolls out the tabs bar again?

B

as a side note, in a real workshop, i imagine i would want the top row to be lesson and info/desc and the tool in the botom middle, and notes and chat on each side of the tool smiley

• We'll make this our default when the workshop loads

:+1:

1. the bottom "search" bar is for the entire workshop if nothing is selected

• Yes, for the entire workshop, but you can navigate to the other levels whether that's a profile directory or workshops listed under your profile or navigate to all the nested folders inside the workshop

:+1: of course this will update what is shown in the main tiling window manager tile unless you open those files/folders you navigate to in new tiles or sub tiles

i think we could imagine your bottom bar as tab button for the entire tiled window

• that would be overwhelming, tiles nested inside of eachother, subgrid tiles, and each of them has a tab and for the root tile it has its own tab. as a solution for this, we can have the buttom search bar like i showed you in the last wireframe, it's for every tile, and because each tab has its own file explorer overlay that would be redundent. user can select any tile they want and it will change the path in the search bar

It is true, but the overlay also always collapses as soon as the user focuses (=clicks) on a different tab button of another tile.

The thing is, each tile will show a different perspective on the overlay based on what that tile currently shows.

What do we want from "tab buttons" bars?

SINGLE TILE TAB BUTTON USE CASES:

1. via tab button: change program and/or file visible in current tile from > overlay menu

• I like this, we ca do that

:+1:

2. via tab button: show history changes log based on current program/file (+undo)

• Good idea, but its too much, we have to keep this minimalistic, we can add the changes to notification (i will show you what i mean in the next iteration)

ok lets see

3. via tab button: trigger generic and/or program based actions

• Yes, will add this +1

:+1:

MULTI TILES:

• in zen mode we dont display tabs nor bottom search bar, just tiles for maximum focus

can we like said earlier - have the bottom bar with its tabs expandable/collapsable or rollup/rollout or whatever instead? I think having only a subtle bottom bar still keeps things pretty much "ZEN MODE", but you can just click to collapse the bottom bar to a single icon or something temporarily. It would also allow you to use the bottom bar tabs like "multiple desktops" that you can switch between. It makes the 'ZEN MODE' feature more versatile and also more generic and less special, hence easier to understand.

• the bottom tile bar is like the search field in the browser, you can have many tabs open and when navigate from to another it will change the url accordingly

true, but the browser also does not have "sub tiles"

if we make the tab button bar of tiles collapsable it might be less overwhelming?

So the bottom tile bar is a combination of many tab buttons and "grouped" tab buttons, where:

• no its not haha it just a tab that its share by many tiles

I know in your last wireframe it wasnt, but what if we changed that?

We definitely need one more wireframe focusing on all the different option of tabs and sub tile grids with tabs and brainstorm the pros/cons.

I am not yet convinced that the tab shared by many tiles would be the better solution. I will write a seperate feedback comment below to talk about it.

1. a normal tab button represents more (sub) ZEN MODE tiles a user can switch between

• with potentially a corresponding tile file that the zen mode layout can be saved to

2. potentially some more "grouped tab buttons" which could belong to

• one of the ZEN MODE tiles multi tile file layouts
• but they are currently collapsed because of a small screen, like mobile screen

• this got me sooo confused laughing im sorrr, but could you explain it more blush

:blush: hehe :-) i mean this is of course thinking not of one bottom search bar for everything but an alternative. I will write it in the next comment again.

questions + answers

1. via tab button: how to split into more sub tiles or close some? => i guess to open (click/drag'n'drop/select?) a new program/file into a new tile

• you do that from the overlay menu

• Correct

:+1:

2. so confusing, but i think we shouldnt save the tiles of Zen mode, saving the original tiles is enough

**So selecting one or more existing tiles in the grid for a ZEN MODE tab (thats always now what ZEN MODE would mean - close it or press ESC to get out), would just be a different way of selecting the files + programs to open them with from the overlay menu into a ZEN MODE tab, right?

• to enter zen mode, you just select tiles, click the zen mode icon and you're good to go, to close it, click esc. thats simple
• the search bar at the bottom is for all the tiles and for when you're not in the zen mode

question: How do we present "ZEN MODE tabs" with their open tiles in the file explorer overlay menu?

• answer: we don't. zen mode is just for users so they can focus

• should allow the tile json file in the overlay "file explorer menu" to expand like a folder:

• what do you mean by expand like a folder

ok, so another comment below for the rest :-)

[serapath]

feedback - TWM concept 2022.04.30

tab button + tiles and sub tiles concept

"special bottom search bar which changes based on selected tiles" vs. "regular tab buttons bar"

---

question: How do we present "ZEN MODE tabs" with their open tiles in the file explorer overlay menu?

• answer: we don't. zen mode is just for users so they can focus

The "nature" or "essence" of what the user is doing by selecting one or more tiles is marking one or more files with the program they are opened with. From a data perspective, once you know the list of files with the programs, you can create a "ZEN MODE" view. ...how the user selects those, e.g. with keyboard shortcuts or with touching visual tiles does not really matter. In fact there could be multiple ways or not. Limiting a user to just selecting tiles limits the user to only select the files and programs that are currently available through open tiles.

If a user wants to create a new "ZEN MODE" view with files opened with programs that are not yet tiles, they have to first open them just so they can then select them for a ZEN MODE view and I think that is why i would prefer they can additionally also just select files/program combinations in the "explorer overlay menu" :-)

• should allow the tile json file in the overlay "file explorer menu" to expand like a folder:

• what do you mean by expand like a folder

ok i think in you latest designs you do not have that anymore, because now you have the "path segments", but, when you click on a folder or folder path segment, the overlay menu shows the files and folders contained within that folder. Now a tile json obviously is a special file that defines a bunch of files and programs to open them with, so the tiling window manager can turn that into a (sub) tile grid where each tile represents a file opened with a specific program.

so what i mean:

1. if you click on the "path segment" that represents a single file (e.g. note.md), not much happens other than maybe the cursor is now focused on tile in the editor in that shows the content of the file.
2. but if you click on a tile json file as a path segment, it could totally open a explorer overlay, just like for folders, but with only the list of files and the programs that are opened in the tiles of that tile json file and if a user select those, it could focus directly on that tile ...also a user could "add" more new files with a program to the tile json file ...or they could close or delete a file/program from the tile json menu and if they save it they delete it from the tile json file.

It would be a visual way of using the overlay menu to quick edit a tile json or navigate to a particular tile

1. a normal tab button represents more (sub) ZEN MODE tiles a user can switch between

• with potentially a corresponding tile file that the zen mode layout can be saved to

2. potentially some more "grouped tab buttons" which could belong to

• one of the ZEN MODE tiles multi tile file layouts
• but they are currently collapsed because of a small screen, like mobile screen

**So selecting one or more existing tiles in the grid for a ZEN MODE tab (thats always now what ZEN MODE would mean - close it or press ESC to get out), would just be a different way of selecting the files + programs to open them with from the overlay menu into a ZEN MODE tab, right?

• to enter zen mode, you just select tiles, click the zen mode icon and you're good to go, to close it, click esc. thats simple

yes. i would keep that feature, but as above, would consider adding so it possible to create a ZEN MODE from files and programs not currently open as tiles yet by using the overlay menu

• the search bar at the bottom is for all the tiles and for when you're not in the zen mode

Yes, i do understand that :-)

I really also like the feature or idea of the < back and > forward arrows that appear sometimes and i think we might need to define what and how they exactly navigate in the corresponding tile file.

Still, if a button is clicked or bar is focused, maybe it is also possible to expaned a search input bar directly above or below that button, so maybe it is possible to use the "search bar" idea but also use the tab buttons idea the way i describe it.

can we try a few wireframes and see how this would work?

[mimi-uxui-dev]

Worklog 2022.04.29-30

Takeaways & feedback

Feedback

At the moment we do not subscribe to folders, right? ...but to tile json files maybe. Also i would just make it a generic option, so if a user wants to subscribe to the updates of a file, like a tile json file, then why not? i wouldn't make an exception from the subscribe logic for just one particular type of file. Yeah, they should be able to subscribe to folders too.

• I think we should make an exception for some files, the exception should be for our system files like tile.json file. if the users like getting updates about tools and

help symbol, which when clicked will turn any click on any action into showing a tooltip overlay which includes shortcuts for any action.

to make the action butto

• So the help symbol activates/disactivates the tooltips?

actually ...if an action requires "additional input params", we should consider adding a little second bar or something that includes a form to select the additional inputs necessary to submit a specific action.

duplicate workshop to might need such additional inputs logout doesnt, its a single click and done :-) create account definitely has some kind of form, but maybe instead opens that on the profile page itself instead of doing it inside the workshop

• if an action reauires "additional input params", i think we should do it in the workshop, overlays will fix that for us

also "duplicate workshop to" is quite long. ...maybe there should rather be a share action when a user clicks on a folder like Workshop-title-XYZ?

• how about just "duplicate workshop", short and self-explanatory because duplicating a thing and "sharing" are too different concepts, sharing is more of a social media thing :-)

we could instead call the folder tools/ or apps/ instead of "programs" too :-)

• apps it is :-D

To mitigate your concenr, we could think about an optional expand/collapse feature for the tabs if a user wants that?

• yes, i would love that, more option for the user

do you think we could do something similar and just have a tiny button above the bar or somewhere in the corner to collapse or roll up the tab buttons bar into maybe the corner and clicking it again expands or rolls out the tabs bar again?

• How about the 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

I think that is why i would prefer they can additionally also just select files/program combinations in the "explorer overlay menu" :-)

• i think that would be difficult, like can you imagine, selecting tiles and then opening the overlay to select unopened programs/files, just to do zen mode, i think it would be better if they want to open files/programs wich are not currently open, they open them and then select zen mode

Now a tile json obviously is a special file that defines a bunch of files and programs to open them with, so the tiling window manager can turn that into a (sub) tile grid where each tile represents a file opened with a specific program.

• YESSS, now i understand what the tile.json is really about :D .. thanks

Takeaways

• Next to search box, add an action that shows the extention of the file/tool also users can create a new instance of it
• notification-counter to notification icon, if the use is online and they get notified by anything it will appear in the notification overlay and an alert, we can add notification icon to tools, to view history of their updates
• Users can subsribe to tools, files and folders
• tile.json concept: work on
• search bar has two arrows for lessons/gigs/exercices files only
• How do we deal with switching accounts?
• Add to profile actions:
  • duplicate workshop to
  • logout if the user is logged in otherwise Login/Signup
  • create account
• add profile actions to action bar
• Wireframe the search bar and profile
• "duplicate workshop to" is quite long, change it to "duplicate workshop"
• we call the tools/programs Apps
• Users can save the current zen mode layout as a tile.json file (new action)
• Add search bar and tabs to zen mode
• default workshop layout: the top row to be lesson and info/desc and the tool in the botom middle, and notes and chat on each side of the too
• show history changes log in notification based on current program/file (+undo)
• tab button: trigger generic and/or program based actions
• make a wireframe focusing on all the different option of tabs and sub tile grids with tabs and brainstorm the pros/cons.
• tile json is a special file that defines a bunch of files and programs to open them with, so the tiling window manager can turn that into a (sub) tile grid where each tile represents a file opened with a specific program.
• idea of the < back and > forward arrows that appear sometimes we will define what and how they exactly navigate in the corresponding tile file.

[mimi-uxui-dev]

Worklog '2022.05.02' TWM specs file

[serapath]

feedback 2022.05.05

Worklog 2022.04.29-30

Takeaways & feedback

Feedback

At the moment we do not subscribe to folders, right? ...but to tile json files maybe. Also i would just make it a generic option, so if a user wants to subscribe to the updates of a file, like a tile json file, then why not? i wouldn't make an exception from the subscribe logic for just one particular type of file. Yeah, they should be able to subscribe to folders too.

• I think we should make an exception for some files, the exception should be for our system files like tile.json file. if the users like getting updates about tools and

:+1:

help symbol, which when clicked will turn any click on any action into showing a tooltip overlay which includes shortcuts for any action.

to make the action butto

• So the help symbol activates/disactivates the tooltips?

yes :+1:

actually ...if an action requires "additional input params", we should consider adding a little second bar or something that includes a form to select the additional inputs necessary to submit a specific action. duplicate workshop to might need such additional inputs logout doesnt, its a single click and done :-) create account definitely has some kind of form, but maybe instead opens that on the profile page itself instead of doing it inside the workshop

• if an action reauires "additional input params", i think we should do it in the workshop, overlays will fix that for us

ok. lets give it a try

also "duplicate workshop to" is quite long. ...maybe there should rather be a share action when a user clicks on a folder like Workshop-title-XYZ?

• how about just "duplicate workshop", short and self-explanatory because duplicating a thing and "sharing" are too different concepts, sharing is more of a social media thing :-)

we could instead call the folder tools/ or apps/ instead of "programs" too :-)

• apps it is :-D

:+1:

To mitigate your concenr, we could think about an optional expand/collapse feature for the tabs if a user wants that?

• yes, i would love that, more option for the user

:+1:

do you think we could do something similar and just have a tiny button above the bar or somewhere in the corner to collapse or roll up the tab buttons bar into maybe the corner and clicking it again expands or rolls out the tabs bar again?

• How about the 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

yes i agree, that would be ideal - my main concern is, that it should work on mobile and tablets too, but there is no mouse hover on those.... so what do we do here?

I think that is why i would prefer they can additionally also just select files/program combinations in the "explorer overlay menu" :-)

• i think that would be difficult, like can you imagine, selecting tiles and then opening the overlay to select unopened programs/files, just to do zen mode, i think it would be better if they want to open files/programs wich are not currently open, they open them and then select zen mode

hmm, maybe - just extra clicks :thinking:

i imagine they e.g. click 2 tiles (which in the background selects the corresponding file+program of that tile if the user now opens an overlay they can see the files+programs of those 2 tiles are already selected. They can now proceed and select an additional file/program or multiple and then put all of them into a new:

===> ROOT TAB BUTTON ....in the bottom bar to make it a full window tiles grid with those selected opened.

they have now at least 2 tab buttons in the bottom bar. the current new one ...and the old previous one.

• the current new one is what i guess we were calling now the "ZEN MODE tile grid"
• the previous old one was just the regular initial tile grid
• now a user can open even more extra "ZEN MODE tile grid" ... and maybe we should reconsider the name

Basically we don't need "ZEN MODE" anymore, because if the user wishes they can just ad-hoc select one or more tiles (or file+programs) and put them into a full window tab... and then switch back or close that tile grid

combined with a good mechanism to make the "tab button bar" minimal or temporarily hide/collapse it ...it shouldnt bother much.

Now a tile json obviously is a special file that defines a bunch of files and programs to open them with, so the tiling window manager can turn that into a (sub) tile grid where each tile represents a file opened with a specific program.

• YESSS, now i understand what the tile.json is really about :D .. thanks

:dancers: :dancers: :dancers: :100:

Takeaways

• Next to search box, add an action that shows the extention of the file/tool also users can create a new instance of it
• notification-counter to notification icon, if the use is online and they get notified by anything it will appear in the notification overlay and an alert, we can add notification icon to tools, to view history of their updates
• Users can subsribe to tools, files and folders
• tile.json concept: work on
• search bar has two arrows for lessons/gigs/exercices files only
• How do we deal with switching accounts?

maybe an action that can be used when selecting the profile? ...lets try some wireframes again.

...again, feel free to make extra wireframes, maybe even extra sub issues to discuss/solve/wireframe on some detailed areas in the wireframe :-)

• Add to profile actions:

  • duplicate workshop to
  • logout if the user is logged in otherwise Login/Signup
  • create account
• add profile actions to action bar
• Wireframe the search bar and profile
• "duplicate workshop to" is quite long, change it to "duplicate workshop"

technically a user could duplicate all kinds of stuff.

• so maybe workshop is already implicit by having the workshop selected?
• and instead of duplicate it could be copy or fork ...
  • yes fork is quite technical, but then again wizardamigos is meant to teach programming literacy
  • so when in doubt, we can consider that goal too :P
  • an alternative would also share (like thats what people do when they share stuff online with others

• we call the tools/programs Apps
• Users can save the current zen mode layout as a tile.json file (new action)
• Add search bar and tabs to zen mode
• default workshop layout: the top row to be lesson and info/desc and the tool in the botom middle, and notes and chat on each side of the too
• show history changes log in notification based on current program/file (+undo)
• tab button: trigger generic and/or program based actions
• make a wireframe focusing on all the different option of tabs and sub tile grids with tabs and brainstorm the pros/cons.
• tile json is a special file that defines a bunch of files and programs to open them with, so the tiling window manager can turn that into a (sub) tile grid where each tile represents a file opened with a specific program.
• idea of the < back and > forward arrows that appear sometimes we will define what and how they exactly navigate in the corresponding tile file.

:100: :100: :100:

[serapath]

feedback 2022.05.05

Worklog '2022.05.02' TWM specs file

cool. yes, lets continue to refine the tiling window manager spec file. I think when you now make the next refinement of the wireframes, you could in parallel:

1. talk and name the different sections and elements in your wireframe when you record the worklog video
2. use those section names in the TWM spec file to describe the interaction mechanics :-)

But thx. love it so far :partying_face:

[mimi-uxui-dev]

Worklog 2022.05.05

Feedback

help symbol activates/disactivates the tooltips?

• I think this is confusing and misleading. We should use the information icon instead of help to activate it

yes i agree, that would be ideal - my main concern is, that it should work on mobile and tablets too, but there is no mouse hover on those.... so what do we do here?

• on tablets and on mobile we display the tab

hmm, maybe - just extra clicks 🤔

i imagine they e.g. click 2 tiles (which in the background selects the corresponding file+program of that tile if the user now opens an overlay they can see the files+programs of those 2 tiles are already selected. They can now proceed and select an additional file/program or multiple and then put all of them into a new:

===> ROOT TAB BUTTON ....in the bottom bar to make it a full window tiles grid with those selected opened.

they have now at least 2 tab buttons in the bottom bar. the current new one ...and the old previous one.

the current new one is what i guess we were calling now the "ZEN MODE tile grid" the previous old one was just the regular initial tile grid now a user can open even more extra "ZEN MODE tile grid" ... and maybe we should reconsider the name Basically we don't need "ZEN MODE" anymore, because if the user wishes they can just ad-hoc select one or more tiles (or file+programs) and put them into a full window tab... and then switch back or close that tile grid

combined with a good mechanism to make the "tab button bar" minimal or temporarily hide/collapse it ...it shouldn't bother much.

• The less the clicks are the best the experience is, we have to keep it simple
• i like the idea, but it makes things more complex, however:
• we need to brainstorm a name for it + icon .. how about Layouts
• we must simplify it, if a users wishes to make a layout:
  1. They can click the layout action in the bottom search bar
  2. an overlay will appear, it is divided into 3 sections:
• top section: is for the created layouts, they choose one, select it and it will load/open
• middle section: is for already opened files, next to each file there's a checkbox to select it
• bottom section: the file/folder explorer and next to each file/app there's a checkbox to select it, in addition to search bar for quick filtering
  3. When the layout is displayed, a save action is added to the bottom bar if that layout it not saved already

Takeaways

• Users can't subscribe to our system file
• add action to activates/disactivates tooltips
• actions for "additional input params" display them in overlays:
  • create account
  • duplicate workshop
• 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
• tile json is a file that defines a bunch of files and programs, the tiling window manager can open the tile.json file into a (sub) tile grid where each tile represents a file opened with a specific program.
• Actions: how to create tile.json and how to load it
• Make an issue to discuss wireframes
• action to select profile
• action to share any file
• action to duplicate/copy any file

[mimi-uxui-dev]

Worklog 2022.05.06

Wireframes

[mimi-uxui-dev]

Worklog 2022.05.07

Wireframe Prototype

[serapath]

feedback 2022.05.07

Worklog 2022.05.05

Feedback

help symbol activates/disactivates the tooltips?

• I think this is confusing and misleading. We should use the information icon instead of help to activate it

:+1:

yes i agree, that would be ideal - my main concern is, that it should work on mobile and tablets too, but there is no mouse hover on those.... so what do we do here?

• on tablets and on mobile we display the tab

:+1: ok, let's try. ....also lets have wireframes to capture how all that will work :-)

hmm, maybe - just extra clicks thinking i imagine they e.g. click 2 tiles (which in the background selects the corresponding file+program of that tile if the user now opens an overlay they can see the files+programs of those 2 tiles are already selected. They can now proceed and select an additional file/program or multiple and then put all of them into a new: ===> ROOT TAB BUTTON ....in the bottom bar to make it a full window tiles grid with those selected opened. they have now at least 2 tab buttons in the bottom bar. the current new one ...and the old previous one. the current new one is what i guess we were calling now the "ZEN MODE tile grid" the previous old one was just the regular initial tile grid now a user can open even more extra "ZEN MODE tile grid" ... and maybe we should reconsider the name Basically we don't need "ZEN MODE" anymore, because if the user wishes they can just ad-hoc select one or more tiles (or file+programs) and put them into a full window tab... and then switch back or close that tile grid combined with a good mechanism to make the "tab button bar" minimal or temporarily hide/collapse it ...it shouldn't bother much.

• The less the clicks are the best the experience is, we have to keep it simple

:+1:

• i like the idea, but it makes things more complex, however:

does it thought? ...

• we need to brainstorm a name for it + icon .. how about Layouts

:+1:

• we must simplify it, if a users wishes to make a layout:

  1. They can click the layout action in the bottom search bar

  2. an overlay will appear, it is divided into 3 sections:

     • top section: is for the created layouts, they choose one, select it and it will load/open

maybe we can skip the choosing? stuff is just positioned in a default layout or if the user selected tiles, the layout will mimic the layout of tiles where the user selected.

...a user can then still drag'n'drop to re-arrange the layout the way they want.

   * middle section: is for already opened files, next to each file there's a checkbox to select it

also - wouldn't "already opened files" just show up as sub entries to the corresponding tile json file? :-)

   * bottom section: the file/folder explorer and next to each file/app there's a checkbox to select it, in addition to search bar for quick filtering

or instead if they click the background color will indiciate it is selected instead of a "check box icon" to make it visually nicer...

3. When the layout is displayed, a **save action** is added  to the bottom bar if that layout it not saved already

Takeaways

• Users can't subscribe to our system file

can or can't ... why again? can you remind me? ...maybe we should also capture sometimes the reason why we decided like this or that... but ok.

• add action to activates/disactivates tooltips

:+1: info as you suggested sounds good to me

• actions for "additional input params" display them in overlays:

:+1:

• create account

:+1:

• duplicate workshop

:+1: (still prefer copy or share or fork over the long and unwieldy "duplicate") ..and what is gonne be duplicated should just depend on where the user clicks ... so it is workshop if they selected that action on the workshop itself

• 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

:+1: just remember mobile and that there is no mouse hover

• tile json is a file that defines a bunch of files and programs, the tiling window manager can open the tile.json file into a (sub) tile grid where each tile represents a file opened with a specific program.

:+1:

• Actions: how to create tile.json and how to load it

:+1:

• Make an issue to discuss wireframes
• action to select profile

:+1:

• action to share any file

i think that is the same as "duplicate" ...thats what i meant

• action to duplicate/copy any file

...wait, thats the third time you mention that takeaway? :D