From a646dddec0d04c664ca3effb7dcdc876a8f030ee Mon Sep 17 00:00:00 2001
From: Ben Visness <bvisness@gmail.com>
Date: Tue, 2 Jul 2024 22:22:38 -0500
Subject: [PATCH] Put the follow link in a gooder spot

---
 src/templates/img/add.svg               |  2 +-
 src/templates/img/remove.svg            |  5 ++
 src/templates/src/project_homepage.html | 70 +++++++++++++++----------
 3 files changed, 47 insertions(+), 30 deletions(-)
 create mode 100644 src/templates/img/remove.svg

diff --git a/src/templates/img/add.svg b/src/templates/img/add.svg
index be77364a..3f63cfba 100644
--- a/src/templates/img/add.svg
+++ b/src/templates/img/add.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+<svg width="14" height="14" fill="currentColor" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
     <path d="M6,6L6,0L8,0L8,6L14,6L14,8L8,8L8,14L6,14L6,8L0,8L0,6L6,6Z" style="fill-rule:nonzero;"/>
 </svg>
diff --git a/src/templates/img/remove.svg b/src/templates/img/remove.svg
new file mode 100644
index 00000000..c43854b5
--- /dev/null
+++ b/src/templates/img/remove.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-5,-5)">
+        <rect x="5" y="11" width="14" height="2" style="fill-rule:nonzero;"/>
+    </g>
+</svg>
diff --git a/src/templates/src/project_homepage.html b/src/templates/src/project_homepage.html
index 6927297a..65c0550d 100644
--- a/src/templates/src/project_homepage.html
+++ b/src/templates/src/project_homepage.html
@@ -44,7 +44,47 @@
 				</a>
 			{{ end }}
 			<div class="details flex-grow-1">
-				<a href="{{ .Project.Url }}"><h3 class="b mb2 f4">{{ .Project.Name }}</h3></a>
+				<div class="flex justify-between mb2">
+					<a href="{{ .Project.Url }}"><h3 class="b f4">{{ .Project.Name }}</h3></a>
+					{{ if .FollowUrl }}
+						<a id="follow_link" class="flex items-center" href="javascript:;">
+							<div class="follow-follow" {{ if .Following }}hidden{{ end }}>
+								<span class="svgicon f7 mr1">{{ svg "add" }}</span>
+								Follow
+							</div>
+							<div class="follow-unfollow" {{ if not .Following }}hidden{{ end }}>
+								<span class="svgicon f7 mr1">{{ svg "remove" }}</span>
+								Unfollow
+							</div>
+						</a>
+						<script>
+							const followLink = document.getElementById("follow_link");
+							let following = {{ .Following }};
+							followLink.addEventListener("click", async function() {
+								followLink.disabled = true;
+
+								let formData = new FormData();
+								formData.set("csrf_token", "{{ .Session.CSRFToken }}");
+								formData.set("project_id", "{{ .Project.ID }}");
+								if (following) {
+									formData.set("unfollow", "true");
+								}
+								let result = await fetch("{{ .FollowUrl }}", {
+									method: "POST",
+									body: formData,
+									redirect: "error",
+								});
+								if (result.ok) {
+									following = !following;
+									followLink.querySelector(".follow-follow").hidden = following;
+									followLink.querySelector(".follow-unfollow").hidden = !following;
+								}
+								
+								followLink.disabled = false;
+							});
+						</script>
+					{{ end }}
+				</div>
 				<div class="blurb">{{ .Project.Blurb }}</div>
 				{{ with .Owners }}
 					<hr class="mv3">
@@ -77,34 +117,6 @@
 				{{/* TODO(redesign): Add a fade at the bottom of this. */}}
 			</div>
 		{{ end }}
-		{{ if .FollowUrl }}
-			<a id="follow_link" class="db" href="javascript:;">{{ if .Following }}Unfollow{{ else }}Follow{{ end }}</a>
-			<script>
-				const followLink = document.getElementById("follow_link");
-				let following = {{ .Following }};
-				followLink.addEventListener("click", async function() {
-					followLink.disabled = true;
-
-					let formData = new FormData();
-					formData.set("csrf_token", "{{ .Session.CSRFToken }}");
-					formData.set("project_id", "{{ .Project.ID }}");
-					if (following) {
-						formData.set("unfollow", "true");
-					}
-					let result = await fetch("{{ .FollowUrl }}", {
-						method: "POST",
-						body: formData,
-						redirect: "error",
-					});
-					if (result.ok) {
-						following = !following;
-						followLink.textContent = (following ? "Unfollow" : "Follow");
-					}
-					
-					followLink.disabled = false;
-				});
-			</script>
-		{{ end }}
 	</div>
 </div>
 {{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}