elk-zone / elk Goto Github PK

Support third-party plugins for more features and possibilities.

• NPM package
• plugins can inject their UI into some places.

mas.to shows an underline below some clickable content like account name and post-time

We should copy this behavior
IMO it serves a better UX

• zen-hide sidebar should be an aside instead of a div
  • "A mastodon client made with <3" and "las build" should be in p tags instead of divs
  • Username should be a header or a p instead of a div
  • Profile image should be wrapped in the same tag as the username stuff, and should be a button because it's not pointing to a separate URL but rather toggles a flyout menu (it's should semantically be the same as a "hamburger" flyout toggle). In fact, the button should probably be lifted up to the div that contains the button styling
    • Speaking of the account flyout menu, that should capture tab focus, include a "close" button, and should close when a user hits esc
  • The light grey used throughout the dark theme isn't accessible for the sizes it's used at (it looks like white with .35 opacity applied; I'd generally recommend against applying opacity to text because it gets hard to use DevTools to determine color contrast)`
• The glass effect that holds small-screen nav and headers (at least in dark mode) doesn't allow for enough color contrast when over light colors (especially white). I'd generally recommend (as a quick test, because these are mostly white and black, and the orange is close to white in lightness) determining color contrast by throwing a white background behind the effect and doing a contrast ratio test against the resultant rendered background color
• The account sidebar and nav shouldn't require a user to hover to see the ability to enable/view. Instead, a persistent button to show/hide these items should be made available.

I literally searched the dark mode toggle everywhere at first.
In my profile settings by clicking on my profile below the compose button or in the lower right corner.

It took me around 10 seconds to find it in the right lower corner.

I'm also not sure but does it use already preferred color schema by default? It was light mode for me by default.

• DB for storing app tokens
• Auto register app for servers
• Users switcher, logout
• Dialog of warning on the first visit
• "Open in main server" mean for each toot

Nice to have

• Editor
  • Image upload
  • Video upload
  • Code snippets
  • Rich text?
  • Emoji picker: #500
• Preference page
• Override emojis: #129
• i18n setup

Web apps installed on iOS have problems resuming, which can result in an app trapped in a seemingly stable but actually unusable/behind experience. Adding pull-to-refresh (maybe two staged, one to update timeline, one to reload app) can help resolve this problem

When being in an account page, emojis will not get rendered and fallback to their text representation

This bug is also in mastodon 😕

I think it's not possible to show (at least custom) emojis in title because we cannot render images

So maybe trim out /:.+:/ from the account displayName when showing in title

As elk supports markdown and other thing, we should provide a preview before sending the post out to the world

Here some ui issues (I'll add new ones when found):

• #51
• login dialog not using focus trap
• mobile nav button missing, cannot navigate (not logged/public)
• mobile nav button missing, cannot navigate (logged)
• change message header layout: on mobile breaks the layout

Feel free o create issue from previous list and assign it yourself.

Example: right elk, left bird-site

When creating a post we should be able to add polls to the post. I'll be happy to take up this task. We can probably use a UI similar to Twitter's. The only difference seems to be that Mastodon allows you to toggle between single and multi poll responses.

Links should not get cut of hardly
Maybe use 3 dots at the end after the trimmed length

Maybe go further and support some links with e.g. github/faker-js/faker#1122 or something like that

https://mas.to/@[email protected]/109400153409528085
https://elk.zone/status/109400153409528085

it should be possible to:

• set image alt text when uploading images
• view image alt text by clicking on the image or in a button in an overlay
• edit image alt text when editing a post

UI in Twitter with a line showing the connection between messages

An example from another mastodon client

At a quick pass, the following features don't appear immediately accessible on small screens:

• showing/hiding nav
• Switching color mode
• Accessing the account switcher

In dark mode the publish text is hard to read for both cases: disabled or enabled

I would suggest lower the orange tone a bit and increase grey the text color a bit for disabled

Edit: when hovering over the publish button, it feels like it gets the correct color that should be applied by default

When clicking on the elk logo in the right upper corner while you are on the timeline and have scrolled a bit down, jump back to top (and see if there are new posts)

mas.to and bird-site is doing this already

Elk should show the new notification count like mas.to

Beside that, elk should also directly implement the missing feature of favicon indicator

mastodon/mastodon#20762

Currently the search feature is completely missing

I wanted to search for some tags to follow them, and suddenly found out that the search functionality is not supported yet

Code in ` should be rendered as inline code

When clicking on an image in a post, it should be enlarged and shown in a fullscreen preview

On mobile mas.to has also the issue/bug to scroll the content behind the preview instead of e.g. support pinch zoom for touch input 😕 / or swipe to show prev-next image if there are multiple

The default mastodon client is using a search request after each new letter when the word starts with @. https://mas.to/api/v1/accounts/search?q=de&resolve=false&limit=4

See masto.js docs: https://neet.github.io/masto.js/classes/AccountRepository.html#search

currently working in chrome but not yet in firefox/safari

I asked about our current UI here: https://mas.to/@patak/109399921162411092
I think we can keep "Mutuals" meaning "Following + Follows you", but the label transforming into an action button is not accessible and it doesn't work well on mobile.

I'm thinking we should add an Icon button for Follow/unfollow next to the label. Going to play with this a bit. Creating an issue in case someone has other ideas.

.... or convert to markdown: #40

Currently we display something like this:

As a user, I will like to be able to drag media from my file directory into the compose container to attach it to my post. Similar behavior to birdy-app

I'm thinking about using vueuse useDropZone wdyt?

It should be Reply instead of Replay

Two big things I noticed on the sign in form:

• It's not a form, so pressing Return/Enter doesn't cause the login to initiate.
• It doesn't capture focus within the dialog, or follow some other dialog guidelines.

I'm happy to take this one on, just reporting it here.

One thing that annoys me already on mastodon is that you can fav/boost your own posts 🤔
IMO this doesn't make sense

We could disable these in the first step, but also even could think further to hide these posts (by default) as these should go into the notifications tab (this should be more thinked through)

Mastodon shows a char counter, a button for flagging as content warning and switch the target language

Also there is a poll feature

• streaming home
• streaming public timelines
• streaming tags
• streaming notifications
• streaming conversations

When hovering over the publish button, we should show a tooltip to describe what you need to do to be possible to press publish

yes, I know this is just to make it really stupid safe
but as there is no hover effect or disable cursor icon, it feels like the UI is buggy

PWA tasks list:

• #101
• #340
• include tests for service worker and push notifications
• include notification settings panel
• add support to send messages when offline

The back navbar could be transparent (only having a solid background for the button) until the user starts scrolling down, so the banner starts right away at the top.

mas.to:

Show a "Are you sure you want to unfollow?" or a dialog with an "undo" and delay the action like in Twitter.

relate #55 #61

docs: https://docs.joinmastodon.org/methods/push/

On mas.to animated emojis only play when you are near to the context
Like when you hover over the post or over your profile

Right now it is really distracting with many playing emojis on one viewport

I think we could at least support *italic*, **bold**, and inline code.

Maybe we should have a toggle button to see the raw post, as an escape hatch. And also make sure that when we select and copy the text, the original raw post is copied.

likely implemented with https://github.com/LibreTranslate/LibreTranslate?

Add mobile navigation menus

like default mastodon ui + twitter, we can implement shortcuts, e.g. g - n goes to notifications, g - h to home, etc.

When writing a hashtag in mas.to you get a preview of which hashtags matches and how well they are used (in current week)

elk should support that as well