From 1a56352568c64e2b91c52b52579d3e7f53b7015c Mon Sep 17 00:00:00 2001
From: f0x52 <f0x@cthu.lu>
Date: Mon, 3 Oct 2022 20:35:43 +0200
Subject: [PATCH] [frontend] scroll to highlighted toot, improve highlight
 (#885)

---
 web/source/css/_colors.css   | 2 +-
 web/source/frontend/index.js | 8 ++++++++
 web/template/thread.tmpl     | 6 +++---
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css
index fb07758a..026d4145 100644
--- a/web/source/css/_colors.css
+++ b/web/source/css/_colors.css
@@ -71,7 +71,7 @@ $button-danger-fg: $gray1;
 $button-danger-hover-bg: $orange2;
 
 $toot-focus-bg: $gray5;
-$toot-unfocus-bg: $gray3;
+$toot-unfocus-bg: $gray2;
 
 $toot-info-bg: $gray4;
 
diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js
index 2a54d52b..b1187f51 100644
--- a/web/source/frontend/index.js
+++ b/web/source/frontend/index.js
@@ -22,6 +22,14 @@ const Photoswipe = require("photoswipe/dist/umd/photoswipe.umd.min.js");
 const PhotoswipeLightbox = require("photoswipe/dist/umd/photoswipe-lightbox.umd.min.js");
 const PhotoswipeCaptionPlugin = require("photoswipe-dynamic-caption-plugin").default;
 
+let [_, _user, type, id] = window.location.pathname.split("/");
+if (type == "statuses") {
+	let firstStatus = document.getElementsByClassName("thread")[0].children[0];
+	if (firstStatus.id != id) {
+		document.getElementById(id).scrollIntoView();
+	}
+}
+
 const lightbox = new PhotoswipeLightbox({
 	gallery: '.photoswipe-gallery',
 	children: 'a',
diff --git a/web/template/thread.tmpl b/web/template/thread.tmpl
index 334bd8a9..09f3e06c 100644
--- a/web/template/thread.tmpl
+++ b/web/template/thread.tmpl
@@ -2,15 +2,15 @@
 <main>
 	<div data-nosnippet class="thread">
 		{{range .context.Ancestors}}
-		<div class="toot">
+		<div class="toot" id="{{.ID}}">
 			{{ template "status.tmpl" .}}
 		</div>
 		{{end}}
-		<div class="toot expanded">
+		<div class="toot expanded" id="{{.status.ID}}">
 			{{ template "status.tmpl" .status}}
 		</div>
 		{{range .context.Descendants}}
-		<div class="toot">
+		<div class="toot" id="{{.ID}}">
 			{{ template "status.tmpl" .}}
 		</div>
 		{{end}}