[chore] Use shorter timestamps in frontend for replies (#875)

* rename timestampShort -> timestampVague

* add ParseISO8601

* start fiddling with timestamp

* pad/margin a bit more consistently

* remove visibilty icon, change timestamp use

* update timestamp logic

* check + log errors

* properly cut-off long display- and usernames

Co-authored-by: f0x <f0x@cthu.lu>

5 files changed, 82 insertions, 31 deletions

diff --git a/internal/router/template.go b/internal/router/template.go
index 2d6026a2e..fcdccf783 100644
--- a/internal/router/template.go
+++ b/internal/router/template.go
@@ -30,7 +30,18 @@ import (
 	"github.com/gin-gonic/gin"
 	"github.com/superseriousbusiness/gotosocial/internal/api/model"
 	"github.com/superseriousbusiness/gotosocial/internal/config"
+	"github.com/superseriousbusiness/gotosocial/internal/log"
 	"github.com/superseriousbusiness/gotosocial/internal/regexes"
+	"github.com/superseriousbusiness/gotosocial/internal/util"
+)
+
+const (
+	justTime     = "15:04"
+	dateYear     = "Jan 02, 2006"
+	dateTime     = "Jan 02, 15:04"
+	dateYearTime = "Jan 02, 2006, 15:04"
+	monthYear    = "Jan, 2006"
+	badTimestamp = "bad timestamp"
 )
 
 // LoadTemplates loads html templates for use by the given engine
@@ -76,13 +87,44 @@ func noescapeAttr(str string) template.HTMLAttr {
 }
 
 func timestamp(stamp string) string {
-	t, _ := time.Parse(time.RFC3339, stamp)
-	return t.Format("January 2, 2006, 15:04:05")
+	t, err := util.ParseISO8601(stamp)
+	if err != nil {
+		log.Errorf("error parsing timestamp %s: %s", stamp, err)
+		return badTimestamp
+	}
+
+	t = t.Local()
+
+	tYear, tMonth, tDay := t.Date()
+	now := time.Now()
+	currentYear, currentMonth, currentDay := now.Date()
+
+	switch {
+	case tYear == currentYear && tMonth == currentMonth && tDay == currentDay:
+		return "Today, " + t.Format(justTime)
+	case tYear == currentYear:
+		return t.Format(dateTime)
+	default:
+		return t.Format(dateYear)
+	}
 }
 
-func timestampShort(stamp string) string {
-	t, _ := time.Parse(time.RFC3339, stamp)
-	return t.Format("January, 2006")
+func timestampPrecise(stamp string) string {
+	t, err := util.ParseISO8601(stamp)
+	if err != nil {
+		log.Errorf("error parsing timestamp %s: %s", stamp, err)
+		return badTimestamp
+	}
+	return t.Local().Format(dateYearTime)
+}
+
+func timestampVague(stamp string) string {
+	t, err := util.ParseISO8601(stamp)
+	if err != nil {
+		log.Errorf("error parsing timestamp %s: %s", stamp, err)
+		return badTimestamp
+	}
+	return t.Format(monthYear)
 }
 
 type iconWithLabel struct {
@@ -154,13 +196,14 @@ func emojify(emojis []model.Emoji, text template.HTML) template.HTML {
 
 func LoadTemplateFunctions(engine *gin.Engine) {
 	engine.SetFuncMap(template.FuncMap{
-		"escape":         escape,
-		"noescape":       noescape,
-		"noescapeAttr":   noescapeAttr,
-		"oddOrEven":      oddOrEven,
-		"visibilityIcon": visibilityIcon,
-		"timestamp":      timestamp,
-		"timestampShort": timestampShort,
-		"emojify":        emojify,
+		"escape":           escape,
+		"noescape":         noescape,
+		"noescapeAttr":     noescapeAttr,
+		"oddOrEven":        oddOrEven,
+		"visibilityIcon":   visibilityIcon,
+		"timestamp":        timestamp,
+		"timestampVague":   timestampVague,
+		"timestampPrecise": timestampPrecise,
+		"emojify":          emojify,
 	})
 }
diff --git a/internal/util/time.go b/internal/util/time.go
index f969908a7..2f7fd6721 100644
--- a/internal/util/time.go
+++ b/internal/util/time.go
@@ -28,3 +28,8 @@ const ISO8601 = "2006-01-02T15:04:05.000Z"
 func FormatISO8601(t time.Time) string {
 	return t.UTC().Format(ISO8601)
 }
+
+// ParseISO8601 parses the given time string according to the ISO8601 const.
+func ParseISO8601(in string) (time.Time, error) {
+	return time.Parse(ISO8601, in)
+}
diff --git a/web/source/css/status.css b/web/source/css/status.css
index e34b3b091..c057aec4b 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -75,28 +75,27 @@ main {
 			background: $bg;
 		}
 	}
-	
-	.displayname {
-		font-weight: bold;
-		font-size: 1.2rem;
-		line-height: 2rem;
-		margin-top: -0.5rem;
-		align-self: start;
 
+	.displayname, .username {
+		justify-self: start;
+		align-self: start;
+		
+		max-width: 100%;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+
+		/* margin-top: -0.5rem; */
+		line-height: 2rem;
 	}
 	
+	.displayname {
+		font-weight: bold;
+		font-size: 1.2rem;
+	}
+
 	.username {
 		color: $link-fg;
-		line-height: 2rem;
-		margin-top: -0.5rem;
-		align-self: start;
-		
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
 	}
 
 	input.spoiler:checked ~ .content {
@@ -180,7 +179,7 @@ main {
 	}
 
 	.media {
-		margin-top: 0.6rem;
+		margin-top: 0.5rem;
 		border-radius: $br;
 		grid-column: span 3;
 		display: grid;
@@ -362,6 +361,7 @@ main {
 
 			.text {
 				grid-column: 1 / span 3;
+				padding-top: 0.5rem;
 			}
 
 			.not-expanded {
@@ -372,6 +372,10 @@ main {
 		.info {
 			display: flex;
 		}
+
+		.media {
+			margin-bottom: 0.5rem;
+		}
 	}
 }
 
diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl
index 4c348d028..145ff95f4 100644
--- a/web/template/profile.tmpl
+++ b/web/template/profile.tmpl
@@ -21,7 +21,7 @@
             </div>
         </div>
         <div class="accountstats">
-            <div class="entry">Joined <b>{{.account.CreatedAt | timestampShort}}</b></div>
+            <div class="entry">Joined <b>{{.account.CreatedAt | timestampVague}}</b></div>
             <div class="entry">Followed by <b>{{.account.FollowersCount}}</b></div>
             <div class="entry">Following <b>{{.account.FollowingCount}}</b></div>
             <div class="entry">Posted <b>{{.account.StatusesCount}}</b></div>
diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index 5136b6ad7..bff1fb692 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -3,7 +3,6 @@
 	<a href="{{.Account.URL}}" class="displayname">{{if .Account.DisplayName}}{{emojify .Account.Emojis (escape .Account.DisplayName)}}{{else}}{{.Account.Username}}{{end}}</a>
 	<a href="{{.Account.URL}}" class="username">@{{.Account.Acct}}</a>
 	<div class="not-expanded">
-		<span class="visibility">{{.Visibility | visibilityIcon}}</span>
 		<span class="date">{{.CreatedAt | timestamp}}</span>
 	</div>
 	<div class="text">
@@ -45,7 +44,7 @@
 	{{end}}
 </div>
 <div class="info">
-	<div id="date">{{.CreatedAt | timestamp}}</div>
+	<div id="date">{{.CreatedAt | timestampPrecise}}</div>
 	<div class="stats">
 		<div id="replies"><i aria-label="Replies" class="fa fa-reply-all"></i> {{.RepliesCount}}</div>
 		<div id="boosts"><i aria-label="Boosts" class="fa fa-retweet"></i> {{.ReblogsCount}}</div>