improve message display

This commit is contained in:
hippoz 2022-02-02 21:43:58 +02:00
parent a164beb3a1
commit 6850b0828b
No known key found for this signature in database
GPG key ID: 7C52899193467641
4 changed files with 52 additions and 2 deletions

View file

@ -59,6 +59,10 @@ class WatchedGuild extends EventEmitter {
if (message.guild_id !== this.upstreamGuildId)
return;
const maybeKnownWebhook = this.knownWebhooks.get(message.channel_id);
if (maybeKnownWebhook.id === message.webhook_id)
return; // ignore messages coming from our webhook
this.pushEvent({
eventType: "MESSAGE_CREATE",
message: message

View file

@ -2,10 +2,12 @@
--body-bg-color: #2e2e2e;
--accent-bg-color: #d4d3d3;
--accent-color: #949494;
--grayed-text-color: #949494;
--grayed-text-color: #494949;
--button-accent-color: #3d3d3d;
--selected-bg-color: #2e2e2e;
--hover-bg-color: #4d4d4d;
/* stolen from horizon theme */
--color-red: #F43E5C;
--card-border-radius: 1rem;
--button-border-radius: 0.5rem;
}

View file

@ -8,6 +8,12 @@
let selectedGuild = null;
let selectedChannel = null;
let guilds = [];
let user = null;
apiClient.getRequest("/users/@self")
.then((res) => {
user = res.user;
});
apiClient.getRequest("/users/@self/guilds")
.then((res) => {
guilds = res.guilds
@ -42,8 +48,28 @@
return false;
}
const nonce = Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER - 10));
messageStore[selectedGuild.id] = [
...messageStore[selectedGuild.id] || [],
{
channel_id: selectedChannel.id,
content: event.detail,
author: user,
flags: 0,
_pendingStatus: "waiting",
_nonce: nonce,
_dummy: true
}
];
// we could just get the length and subtract 1 but that might introduce some race conditions
const thisMessageIndex = messageStore[selectedGuild.id].findIndex(e => e._nonce === nonce);
apiClient.postRequest(`/guilds/${selectedGuild.id}/channels/${selectedChannel.id}/messages/create`, {
content: event.detail
}).then(() => {
messageStore[selectedGuild.id][thisMessageIndex]._pendingStatus = "success";
}).catch(() => {
messageStore[selectedGuild.id][thisMessageIndex]._pendingStatus = "error";
});
}
</script>

View file

@ -1,5 +1,15 @@
<script>
export let message;
let textClass;
$: if (message._pendingStatus === "waiting") {
textClass = "content pending-waiting";
} else if (message._pendingStatus === "error") {
textClass = "content pending-error";
} else {
textClass = "content";
}
</script>
<style>
@ -14,9 +24,17 @@
.content {
margin-left: 4px;
}
.pending-waiting {
color: var(--grayed-text-color);
}
.pending-error {
color: var(--color-red);
}
</style>
<div class="container">
<span class="author">{message.author.username}</span>
<span class="content">{message.content}</span>
<span class="{textClass}">{message.content}</span>
</div>