People lists

[dtonon]

Review / Todo

2023-12-18 by dtonon

Sidebar

• [x] SI01 Sort favorites a-z

Create list

• [x] CR01 Set the button "Create a new list" with the accent color as background
• [x] CR02 Only in the dark theme remove the shadow below the modal (it reduces the contrast)
• [x] CR03 When the "New list" opens focus the input
• [x] CR04 Button "Create" with the accent color as background
• [x] CR05 The validation error "Person List name must not be empty" should be showed between above the input, in red
• [x] CR06 After a validation error the input should be focused
• [x] CR07 Trim starting and ending spaces on the name, before saving
• [x] CR08 Add a "Favorite" toggle in the creation modal

Lists view

• [x] LI01 Show first Follow and Muted (the standard list), then the favorites, sorted a-z, them the other lists, sorted a-z
• [x] LI02 The click on the main row show the feed, remove "View feed on the right"
• [x] LI03 The dropdown menu should be: 1) View contacts 2) Rename list 3) Make private/Remove private 4) Set as favorite/Remove from favorite 5) Delete list
• [x] LI04 In the destroy confirmation modal set the button "Delete" with the accent color as background
• [x] LI05 For the dropdown use the simple style used in the note/profile
• [x] LI06 Increase the star icon near the name
• [x] LI07 For the row background use the same color of the note bg [2023-12-22]
• [x] LI08 Add some space (e.g. one row heigh) at the end of the list [2023-12-22]
• [x] LI09 The "more actions" button in the list view should not be displayed if it is empty (Followed and Muted) [2023-12-28]
• [ ] LI10 The row should be clickable also over the list's name [2024-03-20]

Contacts view

• [x] CO01 Set the buttons "Add contact" and "View the feed" with the accent color as background
• [x] CO02 "Rename list" and "Delete" actions don't work, the modal is not shown, but I can find it if I navigate to the Lists view
• CO03 Move the Overwrite, Merge and Publish actions in the dropdown list (the ideal would be add more space between the two blocks of buttons) #613
• [x] CO04 Reduce the space between the name and the npub/nip-05
• [x] CO05 The private toggle should have the text on the right and show only the "Private" text; when it is active toggle become yellow ("warning_marker_text_color")
• [x] CO06 Move the "Remove" action in a dropdown, with the settings icon
• [x] CO07 Show the contacts ordered a-z (name)
• [x] CO08 Increase the star icon near the title
• [x] CO09 For the row background use the same color of the note bg [2023-12-22]
• [x] CO10 For the name increase the font size setting it to the same used in the note [2023-12-22]
• [x] CO11 Reduce the space between name and NIP-05 [2023-12-22]
• [x] CO12 For the right dropdown button use the used in the note (2 horizontal lines) [2023-12-22]
• [x] CO13 Add some space (e.g. one row heigh) at the end of the list [2023-12-22]
• [x] CO14 The contact image is not clickable [2023-12-22]
• [ ] The error messages in the "Add contact to the list" should be displayed below the title [2023-12-28]

Feed view

• [x] FE01 Add the number of contacts after the title between parentheses ("My super list (64)")
• [x] FE02 Rename "View contacts" in "Edit list"
• [x] FE03 Add the start and the private icons near the title

2023-12-04 by dtonon

• [x] We are putting the list's name in the d tag, so it is not possible to rename the list without creating a duplicate. It is maybe better to generate an UID and use it, leaving the name for the title tag;
• [x] We should parse and show the title tag for imported lists;
• [x] Existing lists are correctly imported but the content is not fetched, e.g. 370120bd973f18dbc5f5028bce3f12863161dadc5dd9e49bf7148ff0b5ea799a, even if the top the contacts count is correct;

2023-12-04 by mike

• [ ] Person page: spruce up how you add/remove them from lists (follow dtonon's design)
• [x] Prompt for login and Wait for migration pages could use styling.
• [x] Feeds Menu: This can get too long. We need to work out how to handle that

Initial comment

This is the main discussion for the new Priority feed / list, a gateway for the full lists support. This new feature involves 3 views:

The "Priority feed" that shows the filtered notes. It is reachable from the sidebar, below the main feed. It include a switch to filter the notes type (root / replies) and a button to view the contacts list.

An action on the user profile to add/remove him to the Priority list. In the actual implementation we are using in the profile the same dropdown used in the notes near the user's picture. It is ok to add the action on this dropdown, of course.

The "Priority list" with the selected contacts, visibile following the top-right button in the Priority Feed, and maybe from an item in the People menu on the sidebar. On the top-right is present a button to show the related feed.

This last view can be reused, identical, for the Followed list in the People section; if it's ok I will start to design it in details.

/cc @mikedilger @bu5hm4nn

[dtonon]

@mikedilger user should be able to add also not-followed contacts?

[mikedilger]

if you add an unfollowed person to priority feed it should follow them too (I did not do that code yet I suspect). Because priority feed does not change the subscriptions to everybody you follow, it just filters it down.

[bu5hm4nn]

Like we talked in our call last week, we should think about what way we want to design it. Either we have to add everyone on any list into following as well, or we make the backend build the nostr query filter out of all "p" on all lists.

I personally favor the latter because it is more flexible. I think we should at some point have dynamic nostr filters with persisted state. So for example a filter could be a bunch of hashtags which we will display as a custom feed, and the backend persists the state (ie. what is the new "since" for this filter).

[mikedilger]

I personally favor the latter

I didn't get that when we talked. I heard you mention the two options, but I didn't hear a preference.

think we should at some point have dynamic nostr filters with persisted state...

Yeah, this is what bogged me down last week. It ends up being a huge amount of changes to derive nostr Filters from the list (e.g. filter on this hashtag or search term or anything really). It seems like the right thing eventually, but we need to take smaller steps at present.

[mikedilger]

As a case in point, someone (not me of course :-) might want to follow sexy girls that post nude pics... but rarely. Most of the time those would get in the way of getting any work done. So you wouldn't want them on your main feed, but maybe when you feel like it you want to go to that list. Forcing those onto your main following list is probably not the right thing.

I'm working on the oldest issue in our issues list: following privately. So the API for managing lists will change a little bit, and the UI is going to need some way to deal with it too.

[dtonon]

@mikedilger

As a case in point

I was thinking exactly about this, maybe niche but interesting use case; quite few people like the current optional push of the contacts list. So we are going on this direction, I will review the design.

@bu5hm4nn

I personally favor the latter because it is more flexible.

Me too.

[mikedilger]

Well it is coded now. We subscribe to the superset (except for people who are only in the muted list)

[dtonon]

Updated design for the list:

[bu5hm4nn]

I would personally prefer to not have to go through a popup menu. Maybe we can create dedicated buttons

• go to Profile can be when clicking on profile picture or name
• 🗑️ for 'remove from list' ?
• 🔕 for 'unfollow' ? I think remove from list and unfollow should be separate actions.

[dtonon]

Remove and unfollow are low frequency actions, so usually makes sense to hide them to not clutter the interface. Buttons/icons are also complex to manage graphically, this solution should be easier to do and scale better if we need to add more actions. The user can always find the same actions in the profile. Access to the profile should happen by clicking the row in any position, not only the picture.

I agree with splitting "remove from list" and "unfollow," the proposed solution is related to the old structure in which presence on a list was contingent on following status.

[bu5hm4nn]

Mike already made changes so that you no longer need to follow to add to a list. So we don't have to work around that limitation anymore.

[dtonon]

Profile page review to support personal lists:

[dtonon]

@mikedilger testing Unstable [1bc943cd], some feedbacks not related to the UI/UX:

• We are putting the list's name in the d tag, so it is not possible to rename the list without creating a duplicate. It is maybe better to generate an UID and use it, leaving the name for the title tag;

• We should parse and show the title tag for imported lists;

• Existing lists are correctly imported but the content is not fetched, e.g. 370120bd973f18dbc5f5028bce3f12863161dadc5dd9e49bf7148ff0b5ea799a, even if the top the contacts count is correct;

I will put the checklist in the first comment to make it easier to follow.

/cc @bu5hm4nn

[mikedilger]

I did much of the UI recently to get this moving, but here are some of the things I didn't do. I'm opened this on another issue which I will now close.

• Person page: spruce up how you add/remove them from lists (follow dtonon's design)
• Prompt for login and Wait for migration pages could use styling.
• Feeds Menu: This can get too long. We need to work out how to handle that

[dtonon]

@mikedilger I moved the checklists on the first comment, as per your request

[dtonon]

@bu5hm4nn review:

(Checklist on the top)

Sidebar

• SI01 Sort favorites a-z

Create list

• CR01 Set the button "Create a new list" with the accent color as background
• CR02 Only in the dark theme remove the shadow below the modal (it reduces the contrast)
• CR03 When the "New list" opens focus the input
• CR04 Button "Create" with the accent color as background
• CR05 The validation error "Person List name must not be empty" should be showed between above the input, in red
• CR06 After a validation error the input should be focused
• CR07 Trim starting and ending spaces on the name, before saving
• CR08 Add a "Favorite" toggle in the creation modal

Lists view

• LI01 Show first Follow and Muted (the standard list), then the favorites, sorted a-z, them the other lists, sorted a-z
• LI02 The click on the main row show the feed, remove "View feed on the right"
• LI03 The dropdown menu should be: 1) View contacts 2) Rename list 3) Make private/Remove private 4) Set as favorite/Remove from favorite 5) Delete list
• LI04 In the destroy confirmation modal set the button "Delete" with the accent color as background
• LI05 For the dropdown use the simple style used in the note/profile
• LI06 Increase the star icon near the name

Contacts view

• CO01 Set the buttons "Add contact" and "View the feed" with the accent color as background
• CO02 "Rename list" and "Delete" actions don't work, the modal is not shown, but I can find it if I navigate to the Lists view
• CO03 Move the Overwrite, Merge and Publish actions in the dropdown list (the ideal would be add more space between the two blocks of buttons)
• CO04 Reduce the space between the name and the npub/nip-05
• CO05 The private toggle should have the text on the right and show only the "Private" text; when it is active toggle become yellow ("warning_marker_text_color")
• CO06 Move the "Remove" action in a dropdown, with the settings icon
• CO07 Show the contacts ordered a-z (name)
• CO08 Increase the star icon near the title

Feed view

• FE01 Add the number of contacts after the title between parentheses ("My super list (64)")
• FE02 Rename "View contacts" in "Edit list"
• FE03 Add the start and the private icons near the title

[bu5hm4nn]

598 in progress

[bu5hm4nn]

@dtonon On Contacts view: CR03 CO03: I think we loose the information of those arrows between the two timestamps, it's a really nice visual explanation. I'll leave it for further discussion. CR07: They were already ordered, but by "person.best_name()" function, so I made sure we show that name

[dtonon]

@bu5hm4nn

CO03: I think we loose the information of those arrows between the two timestamps, it's a really nice visual explanation. I'll leave it for further discussion.

I think we should move this inside the dropdown. Or maybe create a separate dropdown just for this group of actions and have a little overlay dot that pop up when remote and local are not aligned. @mikedilger what do you think?

CO08 Increase the star icon near the name

In this view the star seems still smaller than the face emoji.

---

I added some items to the checklist:

• LI07 For the row background use the same color of the note bg
• CO09 For the row background use the same color of the note bg
• CO10 For the name increase the font size setting it to the same used in the note
• CO11 Reduce the space between name and NIP-05
• CO12 For the right dropdown button use the used in the note (2 horizontal lines)
• LI08 Add some space (e.g. one row heigh) at the end of the list
• CO13 Add some space (e.g. one row heigh) at the end of the list
• CO14 The contact image is not clickable

I am not fully convinced about LI07 and CO09, I would need to see it live. And if we keep this change we have to make it a standard UI, so e.g. applying it to relays too.

[dtonon]

@bu5hm4nn some minor glitches:

• The "more actions" button in the list view should not be displayed if it is empty (Followed and Muted)
• The error messages in the "Add contact to the list" should be displayed below the title

Checklist on the top updated. I'm going to update this comment if I found something else.

[bu5hm4nn]

Fixed on unstable