Design - bookmarksPopover

[Mehrabbruno]

@todo

#115

• Design - Bookmarked pop-over (toggles on onClick)
  • @input 📦 popOvers_v0.0.1 (Deprecated) from Design TWM - popOvers Deprecated #113
  • pop-over header (fixed to the top and contains bookmarked title, total number of bookmarked tabs and close button)
  • Bookmarks container (contains application logo, title, and remove button)
  • Search input (contains search icon, inputField and close icon when added text)
  • Record an explanatory video for Bookmars Popover Component and add it in the header description
  • @output 📦 bookmarksPopover_v0.0.1 from comment
• Design - bookmarksPopover_v0.0.2
  • @input 📦 bookmarksPopover_v0.0.1
  • @input 📦 popoverContainer_v0.0.1 from Design - popoverContainer #125
  • remove header, and footer from the component.
  • place the content inside the Design - popoverContainer #125's content body
  • @output 📦 bookmarksPopover_v0.0.2 from comment
• Design - bookmarksPopover_v0.0.3
  • @input 📦 bookmarksPopover_v0.0.2
  • discussion on new bookmarkPopoverDesign
  • @output ❓ bookmarksPopover_v0.0.3
    • next Design - bookmarksContainer #115

@info

This pop-over is designed for to be placed in component Design TWM - bookmarksContainer_v0.0.1

[Mehrabbruno]

Worklog

Worklog 1 2022.10.21

---

Tasks

• done Design - Bookmarked pop-over (toggles on onClick) - 1min
  • done pop-over header (fixed to the top and contains bookmarked title, total number of bookmarked tabs and close button) - 1min
  • done Bookmarks container (contains application logo, title, and remove button) - 1min
  • done Search input (contains search icon, inputField and close icon when added text) - 1min
  • done Record an explanatory video for Bookmars Popover Component and add it in the header description - 1min
  • @output 📦 bookmarksPopover_v0.0.1

[serapath]

feedback 2022.10.22

This one for bookmarks should look like a file explorer with the current bookmark highlighted.

[Mehrabbruno]

Worklog

worklog-1 2022.10.31

---

Tasks

• done Design - bookmarksPopover_v0.0.2 - 20min
  • done remove header, and footer from the component.
  • done place the content inside the Design - popoverContainer #125 content body
  • @output 📦 bookmarksPopover_v0.0.2

[serapath]

feedback 2022.10.31

Regarding the bookmark and how i imagine it, i recorded a short screencast
https://share.vidyard.com/watch/MjmwyDuz7o386C4MwZE12n?

But I assume what you are referring to is the issue that one single "bookmark" or in general any file or folder that is "symlinked" under more than one folder, but also all the entries inside a "tile json" file themselves, they can have "multiple parents"

In that case - there is already a solution that i have been working on with david for quite some time now, but in the context of something we call a task messegner which is actually the wireframes for the tool or app that is supposed to replace our github/youtube workflow in the future.

In essence it looks and works like the following:

---------------------------------------
FILE EXPLORER:
---------------------------------------

🏰┬🗝root
  └📂┬🗂️🧙user
     ├📂┬🗂️🪦tomb
     │  ├📁─🗄️repo3
     │  └📂┬🔐org3
     │     └📁─🗄️repo1
     │
     ├📁─🗂️🗄️repo1
     ├📁─🗂️🗄️user
     │
     │  ┌⚓📁─🔐orgX
     │  ├📎🧙user
     ├📂┼🗂️🔐org1
     │  ├📁─🗂️🪦tomb
     │  ├📁─🗂️🗄️org1
     │  └📁─🗂️🗄️repo1
     │
     └📂┬🗂️─🗂️🔓org2
        ├📁─🗂️🪦tomb
        ├📁─🗂️🗄️repo1
        ├📁─🗂️🗄️repo2
        ├📁─🗂️🗄️org2
        ├📂┬🗂️🔐org2a
        │  ├📁─🗂️🪦tomb
        │  ├📁─🗂️🗄️repo1
        │  └📁─🗂️🗄️repo2
        └📂┬🗂️🔐org2b
           ├📁─🗂️🪦tomb
           │  ┌⚓📁─🗂️🗄️orgA
           │  ├⚓📁─🗂️🗄️orgB
           │  ├⚓📁─🗂️🗄️orgC
           │  ├⚓📁─🗂️🗄️orgD
           └📂┼🗂️🗄️repo1
              ├📂┼📂ties
              ├📂┼📂ring
              │  ┌⚓📁─🗂️🗄️repoZ/📄package.json
              │  ├📁─🗂️🗄️repo2#12/📄package.json
              ├📂┼📂📄package.json
              │  ├📁─🗂️🗄️repo1
              │  └⚓📁─🗂️🗄️repoY
              ├📂─🗂️📄README.md
              ├📂─🗂️📄index.htm
              └📂─📂src

---------------------------------------
BOOKMARKS:
---------------------------------------

🧲📂┬🗂️org2b
    │  ┌⚓📁─🗂️🗄️orgA
    │  ├⚓📁─🗂️🗄️orgB
    │  ├⚓📁─🗂️🗄️orgC
    │  ├⚓📁─🗂️🗄️orgD
    └📂┼🗂️🗄️repo1
       ├📂┼📂ties
       ├📂┼📂ring
       │  ┌⚓📁─🗂️🗄️repoZ/📄package.json
       │  ├📁─🗂️🗄️repo2/📄package.json
       ├📂┼📂📄package.json
       │  ├📁─🗂️🗄️repo1
       │  └⚓📁─🗂️🗄️repoY
       ├📂─🗂️📄README.md
       ├📂─🗂️📄index.html
       └📂─📂src

---------------------------------------

    ┌⚓📁─🗂️🔒orgX
    ├📎🧙user
🧲📂┼🗂️🔐org1
    └📁─🗂️🗄️repo1

---------------------------------------

    ┌🏰┬🗝root
    │  └📎🧙user
🧲📂┼📂🧙user
    ├📁─🗂️🗄️repo1
    ├📁─🗂️🗄️user 
    │  ┌⚓📁─🗂️orgX
    │  ├📎🧙user
    ├📂┼📂org1🔗
    │  └📁─🗂️repo1
    └📂┬🗂️─🗂️org2
    
---------------------------------------

This is not the latest or fully featured or perfect example.
We use it so it is terminal compatible and works purely with emojis too.

Now regardless of how this could be nicer themed or improved by using a better set of icons or changing the formatting slightly, the main feature is, that each entry can potentially be expanded in 2 directions.

Depeding on where you started (e.g. a bookmark (= 🧲) or the normal file exporer, there is always one main line of expansion.

The difference can be seen in the following example coped from above:

A

    ┌🏰┬🗝root
    │  └📎🧙user
🧲📂┼📂🧙user
    ├📁─🗂️🗄️repo1
    ...

vs.

B

🏰┬🗝root
  └📂┬🗂️🧙user
     │ ...
     ├📁─🗂️🗄️repo1
     ...

B is the main file explorer, so root/user is a sub folder and root/user/repo1 is a sub sub folder.
But in bookmark A it starts with user, so user/repo1 is a sub folder, but user\root is a super folder

This means, you can technically expand in endless loops.
If / means sub folder
and \ means super folder
you could go root/user/repo1\user/repo1\user\root/user/repo1\user/....

But the 📎 icon always appears in front of an icon when the visible item, e.g.

└📎🧙user

is already expanded and visible in the current structure, so the user knows they are now starting to expand in a loop if they continue - which they might anyway for temporary convenience reasons or whatever... it is up to them.

solution

So it is easy to choose an emoji for links and for tile json files and then add those types of entries to the above structure, but use the same expansion mechanism that allows to go in both directions.

[Mehrabbruno]

Worklog

Worklog - 80 [2022 Oct 22]

---

Task

• Design - bookmarksPopover_v0.0.3
  • discussion on new bookmarkPopoverDesign - 36min

---

Proposed Tasks

---

Feedback

I agree that the design look similar to the file explorer popover but the functionality of the bookmark popover is different.

1. You mentioned the user can navigation the parent and the child directories from the bookmarked file or folder.
   My argument for that is "Why?". If I only care about specific folder or a file. Why would I want to see navigation anything around that?
2. In a scenario where the user only want to bookmark the .html files from the whole directory. They will create their own folder of let's name it html files. and in that folder they will place the .html files as bookmarked. The folder which the user created are represented with the image below. When the user click html files tab here, they will get the bookmarkPopover containing only the files that they have bookmarked. nothing else, because that's what all they care about. easy accessibility to the specific files they care about. not what around that or the parent folder.
   
3. In cases when the user saved/bookmarked a whole tile or a tile json file. That will be represented with the image below. Yes, this look familiar to the file explorer but the purpose is different. I only allow's user to see what's inside that tile json file. not what it's parent contains. Multiple tile json file, and application files etc can coexist next to each other even if they are from different destination. How they are placed is decided and customized by the user.
   

[serapath]

feedback 2022.11.05

Beinb able to know the parents of a bookmarked issue is important and the main issue why we can't re-use an existing file explorer component.

The problems with traditional file explorer components

1. you cant know all specific "folders" where a specific file is linked/bookmarked under
2. a specific file/folder/page/bookmark does not show overview what it's context is

My main *need is, that when any bookmark is shared with me (e.g. a link to a github issue or even a website, i want to know what are the parents.

If somebody shares with me a link, i can literally see the file/folder it is under, imagine you see a link like:

./dashboard.html ....
or
./user/work/my-projects/tesla//design/roadster/dashboard.html
The latter gives you a lot of context precisely because you know the file path which shows you the parents.

I also can easily switch my bookmark from ./dashboard.html to
./tesla if i want the project to be bookmarked instead(but only if clicking on the popover for dashboard.html shows me also the parent(s) :-)

So please, the requirement is to:

1. enable the overview over one or more parents (because maybe dashboard.html is also bookmarked/symlinked under ./user/work/presentations/2022.11.15/meeting-with-musk/dashboard.html
2. make the design work in any terminal too (which only understands ascii/emoji/utf-8 characters) ...which doesn't leave much choice, even though in a web app we can use a more sophesticated theme to make it smoother than it would appear in a computer terminal :-)

In fact - the entire tiling window manager is in part targeting developers who mainly use a terminal - and should ideally work in a computer terminal (in a shell, like "bash") too

---

As you said - those "files" belong to different "destinations" (in the whole root directory)

You talk about an example with html files all bookmarked under a special ./HTML Files/ folder somewhere

So look at the path /root/user/org2/org2b/repo1/ for example.
You can see it has orgA, orgB, orgC and orgD as a parent.

So imagine repo1 was instead /root/user/org2/org2b/repo1.html
So you could see that this html file is bookmarked or linked under those 4 orgs.
But it could easily also show one more parent, which would be ./html

1. so if you go to your new ./HTML Files/ folder you see all html files quickly.
2. but if you go to any html file you can easily see that it is part of the ./HTML Files/ folder too

It is exactly the use case I want to solve and make things more easily visible.

What do we care about?

1. you say you only care about the html files which is fine.
2. but i do care about the overall structure too

What we care about depends on our use case - basically our "query" to the "database".
It depends on what we wanna know... So in the scenario where you say you only care about the html files and nothiner else. => The answer is to just not expand the parents :-)

for example

Imagine the bookmark bar shows HTML Files and other bookmarks (5 in total), e.g.
🧲🏰─🗝user
🧲📂─🗂️HTML Files
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

---

Imagine the file explorer would look like this:

🧲🏰┬🗝user
    ├📂┬🗂️work
    │  └📂┬🗂️my-projects
    │     ├📂┬🗂️files
    │     │  └📂┬🗂️HTML Files
    │     │     ├📄─🗂️dashboard.html
    │     │     └📄─🗂️dashboard.html
    │     ├📂┬🗂️tesla
    │     │  └📂┬🗂️design
    │     │     ├📄─🗂️dashboard.html
    │     │     ├📂┬🗂️modelX
    │     │     │  └📄─🗂️dashboard.html
    │     │     ├📂┬🗂️modelY
    │     │     │  └📄─🗂️dashboard.html
    │     │     └📂┬🗂️roadster
    │     │        └📄─🗂️dashboard.html
    │     └📂┬🗂️presentations
    │        └📂┬🗂️2022.11.15
    │           └📂┬🗂️meeting-with-musk
    │              └📄─🗂️dashboard.html
    └📂┬🗂️documents
       └📁┬🗂️HTML Files
          ├📄─🗂️dashboard.html
          └📄─🗂️dashboard.html
🧲📂─🗂️HTML Files
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

First - Should the above be allowed?
Or when you link 2 HTML files from different location, but both e.g. called index.html into the same bookmark folder, would you be forced to give the linked version a different name, e.g. indexA.html->index.html so that it doesn't have multiple times the same name in one folder?

Second

1. If you are in /user/documents/HTML Files you see all HTML files you have
2. If you are in /user/work/my-projects/tesla/files/HTML Files you see all tesla html files
3. If you are in /user/work/presentations/2022.11.15/meeting-with-musk you see all relevant html files

But would you know which file is which in terms of overview?

• is it always the same dashboard.html file?
• is it always a different dashboard.html file?
• If you delete the first /user/documents/HTML Files/dashboard.html file, is it gone forever or was it just a link and still exists in another folder?
• If you delete or change the ./modelY/dashboard.html, will that affect meeting-with-musk?

Your use cases is solved by seeing the popover look like this.
This shows exactly what you want, only the HTML Files you care about, nothing else, just like you want it. Your bookmark bar has 5 entries and you open the popover for HTML Files and you only see the HTML Files inside it. Isn't that great?!? :-)

🧲🏰─🗝user
🧲📂┬🗂️HTML Files
    ├📄─🗂️dashboard.html
    ├📄─🗂️dashboard.html
    └📄─🗂️dashboard.html
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

my use case is solved by enabeling me to expand HTML files or a specific html file

🧲🏰─🗝user
🧲📂┬🗂️HTML Files
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️roadster
    │  ├📁─🗂️meeting-with-musk
    ├📄┴📂dashboard.html
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️modelY
    │  ├📁─🗂️modelX
    │  ├📁─🗂️design
    └📄─🗂️dashboard.html
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

so actually, now i know from that already what my bookmark 🧲📂┬🗂️HTML Files is,
and if i expand it i know now.

🏰─🗝user
             ┌🏰┬🗝user
             │  └📁┬🗂️documents
👉           │     └📄─🗂️HTML Files     <-- click here to channge pinned bookmark to this!
          ┌📁┴🗂️work
       ┌📁┴🗂️my-projects
    ┌📁┴🗂️files
🧲📂┼🗂️HTML Files
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️roadster
    │  ├📁─🗂️meeting-with-musk
    ├📄┴📂dashboard.html
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️modelY
    │  ├📁─🗂️modelX
    │  ├📁─🗂️design
    └📄┴🗂️dashboard.html
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

🧲🏰─🗝user
       ┌🏰─🗝user
    ┌📁┴🗂️documents
🧲📂┼🗂️HTML Files
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️roadster
    │  ├📁─🗂️meeting-with-musk
    ├📄┴📂dashboard.html
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️modelY
    │  ├📁─🗂️modelX
    │  ├📁─🗂️design
    └📄┴🗂️dashboard.html
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

You see how now you changed your bookmarks from ./my-projects/files/HTML Files/ to /user/documents/HTML Files/ :-)