2022-08-14 00:42:42 +00:00
{{define "title"}}Message Inbox{{end}}
{{define "content"}}
< div class = "container" >
2024-08-23 05:53:37 +00:00
< section class = "hero is-link is-bold" >
2022-08-14 00:42:42 +00:00
< div class = "hero-body" >
< div class = "container" >
2022-12-21 05:11:43 +00:00
< h1 class = "title" >
< i class = "fa fa-envelope mr-2" > < / i >
Messages
< / h1 >
2023-12-26 05:36:41 +00:00
< h2 class = "subtitle" >
{{if eq .Box "threads"}}
2023-12-26 06:13:03 +00:00
Conversation Threads
2023-12-26 05:36:41 +00:00
{{else if eq .Box "sent"}}
Sent
{{else}}
Inbox
{{end}}< / h2 >
2022-08-14 00:42:42 +00:00
< / div >
< / div >
< / section >
2022-12-21 05:11:43 +00:00
{{$Root := .}}
2022-08-14 00:42:42 +00:00
{{$UserMap := .UserMap}}
{{$Request := .Request}}
< div class = "block p-4" >
< div class = "columns" >
< div class = "column" >
< div class = "card" >
< header class = "card-header has-background-link" >
< p class = "card-header-title has-text-light" >
2023-12-26 05:36:41 +00:00
{{if .ViewThread}}Conversation with {{.ReplyTo.Username}}{{else}}Inbox{{end}}
2022-08-14 00:42:42 +00:00
< / p >
< / header >
{{if .ViewThread}}
< div class = "card-content" >
2023-12-26 05:36:41 +00:00
< div class = "block" >
< div class = "columns is-mobile is-gapless" >
< div class = "column is-narrow" >
< strong > To:< / strong >
< / div >
< div class = "column is-narrow mx-2" >
{{template "avatar-24x24" .ReplyTo}}
< / div >
< div class = "column" >
< a href = "/u/{{.ReplyTo.Username}}" > {{.ReplyTo.Username}}< / a >
< / div >
< / div >
< / div >
2022-08-14 00:42:42 +00:00
< div class = "block" >
< form action = "/messages/compose" method = "POST" >
{{InputCSRF}}
2023-12-26 05:36:41 +00:00
< input type = "hidden" name = "to" value = "{{.ReplyTo.Username}}" >
2022-08-14 00:42:42 +00:00
< input type = "hidden" name = "from" value = "inbox" >
2023-07-28 03:19:50 +00:00
< textarea class = "textarea" cols = "80" rows = "4"
2022-08-14 00:42:42 +00:00
name="message"
placeholder="Write a response">< / textarea >
2023-07-28 03:19:50 +00:00
< p class = "help mb-3" >
2023-02-06 04:26:36 +00:00
< a href = "/markdown" target = "_blank" > Markdown formatting< / a > supported.
< / p >
2022-08-21 21:05:08 +00:00
2023-07-28 03:19:50 +00:00
< div class = "notification is-warning is-light p-3 is-size-7" >
< i class = "fa fa-info-circle mr-1" > < / i >
< strong > Reminder:< / strong > don't share sensitive information over Direct Messages.
Please review the < a href = "/privacy#direct-messages" target = "_blank" > Privacy Policy< / a > and
< a href = "/tos#direct-messages" target = "_blank" > Terms of Service< / a > as it pertains to DMs on
the main website and the chat room.
< / div >
2024-09-27 03:56:16 +00:00
< button type = "submit" class = "button is-success" > Send Reply< / button >
2022-08-21 21:05:08 +00:00
2022-08-14 00:42:42 +00:00
< / form >
< hr >
< / div >
{{range .ViewThread}}
< div class = "media block" >
{{$SourceUser := $UserMap.Get .SourceUserID}}
< div class = "media-left" >
2022-09-09 04:42:20 +00:00
{{template "avatar-64x64" $SourceUser}}
2022-08-14 00:42:42 +00:00
< / div >
< div class = "media-content" >
2022-12-21 05:11:43 +00:00
< p class = "title is-4" >
{{$SourceUser.NameOrUsername}}
{{if $SourceUser.IsAdmin}}
< span class = "tag is-danger is-light ml-2 p-1" style = "font-size: x-small" >
2023-08-30 07:08:20 +00:00
< i class = "fa fa-peace mr-1" > < / i >
2022-12-21 05:11:43 +00:00
Admin
< / span >
{{end}}
< / p >
2022-08-14 00:42:42 +00:00
< p class = "subtitle is-6" >
< span class = "icon" > < i class = "fa fa-user" > < / i > < / span >
< a href = "/u/{{$SourceUser.Username}}" > {{$SourceUser.Username}}< / a >
{{if not $SourceUser.Certified}}
< span class = "has-text-danger" >
< span class = "icon" > < i class = "fa fa-certificate" > < / i > < / span >
< span > Not Certified!< / span >
< / span >
{{end}}
< / p >
< / div >
< / div >
< div class = "block content" >
{{ToMarkdown .Message}}
2024-05-14 02:41:11 +00:00
<!-- Warn the recipient (only) if this message looks like spam. -->
{{if and (ne .SourceUserID $Root.CurrentUser.ID) .IsLikelySpam}}
< div class = "notification is-warning is-light p-3 content" >
< p class = "has-text-danger" >
< i class = "fa fa-exclamation-triangle mr-1" > < / i >
< strong > Be careful about possible scams!< / strong >
< / p >
< p >
If < strong > @{{$Root.ReplyTo.Username}}< / strong > is asking to take you to a messenger
app within the first couple of messages, be wary!
2024-05-14 03:55:46 +00:00
It is a well-known tactic for con artists to move your conversation away to another
platform as soon as possible, in order to evade detection from the website.
2024-05-14 02:41:11 +00:00
< / p >
< p >
Please
< a href = "/contact?intent=report&subject=report.message&id={{$Root.MessageID}}" > report this message< / a >
2024-05-14 03:55:46 +00:00
if you think it may be a scam. The certification requirement for {{PrettyTitle}} cannot guarantee
2024-05-14 04:04:38 +00:00
protection against malicious intent.
2024-05-14 02:41:11 +00:00
< / p >
< / div >
{{end}}
2022-08-14 00:42:42 +00:00
< / div >
< div class = "block" >
2022-12-21 05:11:43 +00:00
< em > Sent < abbr title = "{{.CreatedAt.Format " 2006-01-02 15:04:05 " } } " >
{{SincePrettyCoarse .CreatedAt}} ago
< / em >
2022-08-22 04:24:36 +00:00
{{if not .Read}}< span class = "tag is-success ml-2" > UNREAD< / span > {{end}}
2022-12-21 05:11:43 +00:00
<!-- Our message? We can delete it. -->
{{if eq $Root.CurrentUser.ID $SourceUser.ID}}
2024-09-27 03:56:16 +00:00
< form action = "/messages/delete" method = "POST" class = "is-inline"
onsubmit="return confirm('Do you want to DELETE this message?')">
2022-12-21 05:11:43 +00:00
{{InputCSRF}}
< input type = "hidden" name = "id" value = "{{.ID}}" >
< input type = "hidden" name = "next" value = "{{$Root.Request.URL.Path}}" >
2024-09-27 03:56:16 +00:00
< button class = "button is-outline has-text-grey is-small ml-4" >
2022-12-21 05:11:43 +00:00
< i class = "fa fa-trash mr-2" > < / i >
Delete
< / button >
< / form >
2024-09-27 03:56:16 +00:00
{{else}}
< a href = "/contact?intent=report&subject=report.message&id={{.ID}}"
class="button is-outline is-small has-text-danger ml-4">
< span class = "icon" > < i class = "fa fa-flag" > < / i > < / span >
< span > Report< / span >
< / a >
2022-12-21 05:11:43 +00:00
{{end}}
2022-08-14 00:42:42 +00:00
< / div >
< hr class = "block" >
{{end}}
<!-- Pager footer -->
< div class = "block" >
< div class = "level" >
< div class = "level-left" >
< div >
Found < strong > {{.ThreadPager.Total}}< / strong > message{{Pluralize64 .ThreadPager.Total}} in this thread
(page {{.ThreadPager.Page}} of {{.ThreadPager.Pages}}).
< / div >
2022-12-21 05:11:43 +00:00
<!-- "Delete ALL" Form -->
< form action = "/messages/delete" method = "POST"
class="is-inline"
onsubmit="return confirm('Are you sure you want to delete this whole entire thread for both of you? It will be like you two had never chatted before at all.')">
{{InputCSRF}}
< input type = "hidden" name = "intent" value = "delete-thread" >
< input type = "hidden" name = "id" value = "{{$Root.MessageID}}" >
< input type = "hidden" name = "next" value = "/messages" >
< button class = "button has-text-danger is-outline is-small p-1 ml-4" >
< i class = "fa fa-trash mr-2" > < / i >
Delete whole thread
< / button >
< / form >
2022-08-14 00:42:42 +00:00
< / div >
< div class = "level-right" >
{{if .ThreadPager.HasPrevious}}
2022-09-10 19:09:46 +00:00
< a href = "{{$Request.URL.Path}}?{{QueryPlus " page " . ThreadPager . Previous } } " class = "button" > Previous< / a >
2022-08-14 00:42:42 +00:00
{{end}}
{{if .ThreadPager.HasNext}}
2022-09-10 19:09:46 +00:00
< a href = "{{$Request.URL.Path}}?{{QueryPlus " page " . ThreadPager . Next } } " class = "button" > Next Page< / a >
2022-08-14 00:42:42 +00:00
{{end}}
< / div >
< / div >
< / div >
< / div >
{{else}}
< div class = "card-content content" >
< p >
You have < strong > {{.Unread}}< / strong > unread message{{Pluralize64 .Unread}}. Select a message on the
other column to read the conversation here.
< / p >
2024-04-06 22:07:10 +00:00
2024-07-21 02:44:22 +00:00
<!-- Push Notifications banner -->
< div class = "notification is-success is-light" id = "push-notification-tip" style = "display: none" >
< i class = "fa fa-gift mr-1" > < / i >
< strong > New Feature:< / strong > You can now enable < a href = "/settings#notifications" > Web Push Notifications< / a >
so you can be notified that a new message was received on {{PrettyTitle}}, even if your web browser is not running.
< / div >
2024-04-06 22:07:10 +00:00
< p >
< i class = "fa fa-info-circle has-text-success" > < / i >
< strong class = "has-text-success" > Pro Tip:< / strong >
Do you get a lot of thirsty, unsolicited messages from strangers and wish you could do something
about that? In your < a href = "/settings#privacy" > Privacy Settings< / a > there is an option to limit who
can slide into your DMs. You can always reach out first and start a chat with someone regardless of
this setting.
< / p >
2022-08-14 00:42:42 +00:00
< / div >
{{end}}
< / div >
< / div >
< div class = "column is-one-third" >
< div class = "card block" >
< header class = "card-header has-background-link" >
2023-12-26 05:36:41 +00:00
< p class = "card-header-title has-text-light" >
{{if eq .Box "threads"}}
Conversations
{{else if eq .Box "inbox"}}
All Inbox Messages
{{else}}
Sent Messages
{{end}}
< / p >
2022-08-14 00:42:42 +00:00
< / header >
< div class = "card-content" >
2022-12-21 05:11:43 +00:00
< div class = "tabs is-toggle is-fullwidth" >
2022-08-14 00:42:42 +00:00
< ul >
2023-12-26 05:36:41 +00:00
< li { { if eq . Box " threads " } } class = "is-active" { { end } } >
< a href = "/messages" > Threads< / a >
2022-08-14 00:42:42 +00:00
< / li >
2023-12-26 05:36:41 +00:00
< li { { if eq . Box " inbox " } } class = "is-active" { { end } } >
< a href = "/messages?box=inbox" > Inbox< / a >
< / li >
< li { { if eq . Box " sent " } } class = "is-active" { { end } } >
2022-08-14 00:42:42 +00:00
< a href = "/messages?box=sent" > Sent< / a >
< / li >
< / ul >
< / div >
2023-12-26 05:36:41 +00:00
{{if eq .Box "threads"}}
< div class = "block is-size-7" >
Showing {{.Pager.Total}} conversation threads with others (ordered by most
recent, grouped by sender name). < strong > Note:< / strong > messages you
have Sent but which have not been replied to will only appear on the
< a href = "/messages?box=sent" > "Sent"< / a > tab.
< / div >
{{else if eq .Box "inbox"}}
< div class = "block is-size-7" >
Showing < strong > all< / strong > {{.Pager.Total}} inbound messages to you, ordered
by most recent.
< / div >
{{else if eq .Box "sent"}}
< div class = "block is-size-7" >
Showing {{.Pager.Total}} messages sent by you to other people.
< / div >
{{end}}
2023-12-26 06:13:03 +00:00
< table class = "table is-striped is-fullwidth is-hoverable" >
< tbody >
{{range .Messages}}
< tr >
< td class = "cursor-pointer" onclick = "window.location='/messages/read/{{.ID}}'" >
< div class = "columns is-mobile is-gapless mb-0" >
{{if eq $Root.Box "sent"}}
{{$User := $UserMap.Get .TargetUserID}}
< div class = "column is-narrow" >
2024-03-30 22:59:29 +00:00
< strong class = "has-text-success" > Sent To< / strong >
2023-12-26 06:13:03 +00:00
< / div >
< div class = "column is-narrow mx-2" >
{{template "avatar-24x24" $User}}
< / div >
2024-03-30 22:59:29 +00:00
< div class = "column has-text-success" > {{$User.Username}}< / div >
2023-12-26 06:13:03 +00:00
{{else}}
{{$User := $UserMap.Get .SourceUserID}}
< div class = "column is-narrow" >
2024-03-30 22:59:29 +00:00
< strong class = "has-text-info" > From< / strong >
2023-12-26 06:13:03 +00:00
< / div >
< div class = "column is-narrow mx-2" >
{{template "avatar-24x24" $User}}
< / div >
2024-03-30 22:59:29 +00:00
< div class = "column has-text-info" > {{$User.Username}}< / div >
2023-12-26 06:13:03 +00:00
{{end}}
< / div >
< div class = "my-1" >
2024-03-30 22:59:29 +00:00
< a href = "/messages/read/{{.ID}}" class = "has-text-text" >
2023-12-26 06:13:03 +00:00
< em >
{{Substring .Message 48}}{{if gt (len .Message) 48}}…{{end}}
< / em >
< / a >
< / div >
< div >
2024-03-30 22:59:29 +00:00
< a href = "/messages/read/{{.ID}}" class = "has-text-text" >
2023-12-26 06:13:03 +00:00
Sent {{.CreatedAt.Format "2006-01-02 15:04:05"}}
{{if not .Read}}
< span class = "tag is-success" > {{if eq $Root.Box "sent"}}UNREAD{{else}}NEW{{end}}< / span >
{{end}}
< / a >
< / div >
< / td >
< / tr >
{{end}}
< / tbody >
< / table >
2022-08-14 00:42:42 +00:00
<!-- Pager footer -->
< div class = "block" >
2023-12-26 05:36:41 +00:00
< div class = "mb-4" >
Found < strong > {{.Pager.Total}}< / strong > {{if eq .Box "threads"}}conversation{{else}}message{{end}}{{Pluralize64 .Pager.Total}}
2022-08-14 00:42:42 +00:00
(page {{.Pager.Page}} of {{.Pager.Pages}}).
< / div >
{{if .Pager.HasPrevious}}
2022-09-10 19:09:46 +00:00
< a href = "/messages?{{QueryPlus " page " . Pager . Previous } } " class = "button" > Previous< / a >
2022-08-14 00:42:42 +00:00
{{end}}
{{if .Pager.HasNext}}
2022-09-10 19:09:46 +00:00
< a href = "/messages?{{QueryPlus " page " . Pager . Next } } " class = "button" > Next Page< / a >
2022-08-14 00:42:42 +00:00
{{end}}
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
2023-07-28 03:19:50 +00:00
{{end}}
2024-07-21 02:44:22 +00:00
{{define "scripts"}}
< script type = "text/javascript" >
// Push Notification tip.
document.addEventListener("DOMContentLoaded", (e) => {
const permission = Notification.permission;
if (permission !== "granted") {
document.querySelector("#push-notification-tip").style.display = "";
}
});
< / script >
{ {end}}
