Easier @mentions about oasis

[cinnamon-bun]

[main textbox]
[@user dropdown here]   [button to add mention]

This could reload the page so the server could append the @user link at the end of the post-in-progress. Then the user can copy-paste it to move it around inside their post.

Or maybe with CSS wizardry we can show the @user link code for the user to copy-paste into the post:

[main textbox]
[@user dropdown]   copy and paste this user code: [code for @user appears here]

[soapdog]

My advise is to fill a <datalist> with the names and ids of friends and following: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

If you really want a dropdown, then it can be divided into sections using <optgroup> to organize the dropdown: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup

[christianbundy]

Thanks @soapdog!

I think <datalist> is perfect, it just means we need a "add another recipient" button that refreshes the page to add a second datalist, since we can't currently do multiple. I found this, which suggests that Chrome and Opera will let you do multiple if you set type="email", but we don't want that.

[cinnamon-bun]

• To make impersonation attacks harder, let's sort your direct friends first in the list and make them visually distinguishable from the rest.

• We'll have to include the list of users and IDs in the HTML of most pages instead of loading them on demand. It could be very long. Maybe limit it to 1 or 2 hops, plus the people who show up on the currently viewed page?

[christianbundy]

I love that idea, I never would've thought of that!

I'm thinking something like:

• People in this thread
  • jedahan
  • soapdog
  • cinnamon-bun
• People that you follow
  • alice
  • bob
  • carol
• People followed by people you follow
  • dave
  • emma
  • frank

Just inserting the text at the bottom would be so easy, and I'd imagine we could do the same thing for blob uploads too (!).

[jedahan]

Multiselect checkboxes styled as profile avatars could work real nicely. Lots of different sorting methods could be tried. Might even be able to “insert” the text within the messaging using some css styling hacks :)

[jedahan]

https://w3bits.com/css-floating-labels/ for an example of making some label look like it’s in the textarea a little bit

[christianbundy]

I totally agree. Anything is better than what we have now. :~)

That link looks great. I've been struggling with the separate goals of make form inputs match the theme and make form inputs familiar and easy to recognize, and it hasn't always gone well. For example, I think the theme chooser is confusing, and when I watched a friend use it he selected "set theme" because it's impossible to tell that the <select> is a dropdown menu. If we remove appearance: none then it shows the familiar button with an arrow, but there's no way to change the button/arrow colors.

[jedahan]

If you can clearly state design goals like that, I know a css wizard at work who could help :)

[christianbundy]

(Note for whoever implements this: my guess is that the "add a recipient button" will probably require the same code for post previews, since you're basically refreshing the page with a form button.)

[soapdog]

TBH, I think I'm gonna use <datalist> on patchfox as well... so much easier.

[christianbundy]

Blaze the trail!

One thing I'm still unsure how to solve: @mentions in the middle of a sentence. It's easy to maintain a list of recipients with a <datalist> and throw those at the top of the post or something, but I'm not sure how to do mid-sentence shenanigans.

[jedahan]

I wonder if theres a css target psuedo-selector that allows regex. This sounds like an awful idea.

[jedahan]

total hack for zero-js searching:

<style>
input:invalid + ul {
  display: none;
}
</style>

<input id=searched required pattern=".*@.*">
</input>

<ul>
  <li> @micro
  <li> @christianbundy 
</ul>

[jedahan]

https://jsfiddle.net/mpa61wyo/

[jedahan]

okay, last weird experiment

<style>
input:invalid + ul, #micro, #eli, #clear {
  display: none;
}
#micro:target, #eli:target {
  display: block;
}
#eli:target ~ #clear, #micro:target ~ #clear {
  display: block;
}

</style>

<div> sending to....
<span id=micro>[@micro](@wsOe...)</span>
<span id=eli>[@eli](@lolol...)</span>
<a href="#" id="clear">x</a>
</div>

<input id=searched required pattern=".*@.*">
</input>

<ul>
  <li> <a href="#micro"> @micro </a>
  <li> <a href="#eli"> @eli </a>
</ul>

https://jsfiddle.net/k7urL0h1/

[cinnamon-bun]

Other ideas:

• If user includes a plaintext @mention in their post, replace it with a markdown link [@mention](@abcde) when generating a preview of their post. This won't work with usernames that have spaces. We might have to include widgets on the preview page to help disambiguate the auto-links.
• If user puts a full link to an Oasis user page http://localhost:3000/author/%40... also replace it with a markdown @mention link