From afa16d38643916aa043741ed1488bffca9a08f05 Mon Sep 17 00:00:00 2001
From: Ryan Barrett <git@ryanb.org>
Date: Tue, 10 Oct 2023 13:54:14 -0700
Subject: [PATCH] start redesigning user pages

for #442
---
 models.py                               |  2 +-
 pages.py                                |  2 +-
 static/style.css                        | 20 +++++++++++
 templates/followers.html                | 14 ++++++++
 templates/profile.html                  | 31 +++++++++++++++++
 templates/user_addresses.html           | 26 --------------
 templates/{user.html => user_base.html} | 45 +++++++++++++------------
 tests/test_common.py                    |  2 +-
 tests/test_models.py                    |  4 +--
 9 files changed, 94 insertions(+), 52 deletions(-)
 create mode 100644 templates/profile.html
 delete mode 100644 templates/user_addresses.html
 rename templates/{user.html => user_base.html} (60%)

diff --git a/models.py b/models.py
index 9f07274..7d74840 100644
--- a/models.py
+++ b/models.py
@@ -472,7 +472,7 @@ class User(StringIdModel, metaclass=ProtocolUserMeta):
         return f"""\
 <a class="h-card u-author" href="{self.web_url()}">
   <img src="{img}" class="profile">
-  <span class="logo">{self.LOGO_HTML}</span>
+  <span class="logo" title="{self.__class__.__name__}">{self.LOGO_HTML}</span>
   {self.name()}
 </a>
 """
diff --git a/pages.py b/pages.py
index 11e430f..cc65a0b 100644
--- a/pages.py
+++ b/pages.py
@@ -116,7 +116,7 @@ def user(protocol, id):
     following = f'{following}{"+" if following == FOLLOWERS_UI_LIMIT else ""}'
 
     return render_template(
-        'user.html',
+        'profile.html',
         follow_url=request.values.get('url'),
         logs=logs,
         util=util,
diff --git a/static/style.css b/static/style.css
index 2fa95b7..bcb0a98 100644
--- a/static/style.css
+++ b/static/style.css
@@ -327,6 +327,26 @@ button[disabled]:hover {
   margin-top: -.5em;
 }
 
+.tabs a {
+  border-bottom: 1px solid;
+  background: linear-gradient(white, #e8e8e8);
+  padding-left: .5em;
+  padding-right: .5em;
+  padding-top: .2em;
+  padding-bottom: .2em;
+}
+
+.tabs a:hover {
+  text-decoration: none;
+}
+
+.tabs a.active-tab {
+  border-bottom: none;
+  border-left: 1px solid;
+  border-right: 1px solid;
+  background: inherit;
+}
+
 .disable-button, #bad-button {
   border-color: red;
   color: red;
diff --git a/templates/followers.html b/templates/followers.html
index 8700bc2..3c51052 100644
--- a/templates/followers.html
+++ b/templates/followers.html
@@ -8,6 +8,20 @@
 
 <div class="row big">Followers</div>
 
+<div class="row">
+    <form method="post" action="/remote-follow">
+    <nobr>
+     <label for="follow-address">Follow @{{ id }} with your fediverse address:</label>
+     <input id="follow-address" name="address" type="text" required
+            placeholder="@user@domain.social" alt="fediverse address"
+            value="{{ follow_url or '' }}"></input>
+     <input name="domain" type="hidden" value="{{ id }}"></input>
+     <input name="protocol" type="hidden" value="{{ g.user.LABEL }}"></input>
+     <button type="submit" class="btn btn-default">Follow</button>
+    </nobr>
+    </form>
+</div>
+
 {% with page_name="followers" %}
   {% include "_followers.html" %}
 {% endwith %}
diff --git a/templates/profile.html b/templates/profile.html
new file mode 100644
index 0000000..6fb41d0
--- /dev/null
+++ b/templates/profile.html
@@ -0,0 +1,31 @@
+{% extends "user_base.html" %}
+{% set tab = "profile" %}
+
+{% block subtabs %}
+<div class="row">
+  <a href="{{ g.user.user_page_path('followers') }}">{{ followers }} follower{% if followers != '1' %}s{% endif %}</a>
+  &middot;
+  <a href="{{ g.user.user_page_path('following') }}">following {{ following }}</a>
+  &middot;
+
+  {% if g.user.LABEL != 'activitypub' %}
+  Bridged to
+  <nobr title="Fediverse address">
+    <img class="logo" src="/static/fediverse_logo.svg">
+    {{ g.user.ap_address() }}
+  </nobr>
+  <form method="post" action="/webmention-interactive">
+    <input name="source" type="hidden" value="{{ g.user.web_url() }}" />
+    &nbsp;
+    <button id="update-profile-button" type="submit"
+            title="Update profile from web site"
+            class="btn btn-default glyphicon glyphicon-refresh"></button>
+  </form>
+  {% endif %}
+</div>
+{% endblock subtabs %}
+
+{#
+{% block feed %}
+{% endblock feed %}
+#}
diff --git a/templates/user_addresses.html b/templates/user_addresses.html
deleted file mode 100644
index 8ab9e0e..0000000
--- a/templates/user_addresses.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="row">
-  <div class="big" style="display: inline">
-    {{ g.user.user_link()|safe }}
-    &middot;
-    <span title="Fediverse address">
-      <nobr>
-        <img class="logo" src="/static/fediverse_logo.svg">
-        {{ g.user.ap_address() }}
-      </nobr>
-    </span>
-    &middot;
-
-    <nobr>
-      {{ util.pretty_link(g.user.web_url(), text_prefix='🌐', attrs={'title': 'Web site'})|safe }}
-
-      {% if g.user.LABEL != 'activitypub' %}
-      <form method="post" action="/webmention-interactive">
-        <input name="source" type="hidden" value="{{ g.user.web_url() }}" />
-        <button id="update-profile-button" type="submit"
-                title="Update profile from web site"
-                class="btn btn-default glyphicon glyphicon-refresh"></button>
-      </form>
-      {% endif %}
-    </nobr>
-  </div>
-</div>
diff --git a/templates/user.html b/templates/user_base.html
similarity index 60%
rename from templates/user.html
rename to templates/user_base.html
index 8c6fb82..a18ec0d 100644
--- a/templates/user.html
+++ b/templates/user_base.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}{{ id }} - Bridgy Fed{% endblock %}
+{% block title %}{{ id }} {{ tab }} - Bridgy Fed{% endblock %}
 
 {% block content %}
 
@@ -35,34 +35,37 @@
 {% endif %}
 {% endif %}
 
-{% include "user_addresses.html" %}
+<div class="row big">
+  {{ g.user.user_link()|safe }}
+</div>
 
+<!-- tabs -->
+<div class="row tabs">
+  <a>
+  <a href="{{ g.user.user_page_path() }}"
+     {% if tab == 'profile' %}class="active-tab"{% endif %}
+     >👤 Profile</a><a
+   href="{{ g.user.user_page_path('home') }}"
+     {% if tab == 'home' %}class="active-tab"{% endif %}
+     >🏠 Feed</a><a
+   href="{{ g.user.user_page_path('notifications') }}"
+     {% if tab == 'notifications' %}class="active-tab"{% endif %}
+     >🔔 Notifications</a>
+  <a>
+</div>
+
+{% block subtabs %}
 <div class="row">
-    <a href="{{ g.user.user_page_path('followers') }}">{{ followers }} follower{% if followers != '1' %}s{% endif %}</a>
-  &middot; <a href="{{ g.user.user_page_path('following') }}">following {{ following }}</a>
   &middot; <a href="{{ g.user.user_page_path('feed') }}">HTML</a>
   &middot; <a href="{{ g.user.user_page_path('feed?format=atom') }}">Atom</a>
   &middot; <a href="{{ g.user.user_page_path('feed?format=rss') }}">RSS</a>
   &middot; <a href="/.well-known/webfinger?resource=acct:{{ g.user.ap_address() }}">Webfinger</a>
   &middot; <a href="{{ g.user.ap_actor() }}">ActivityPub</a>
 </div>
+{% endblock subtabs %}
 
-{% if g.user.LABEL != 'activitypub' %}
-<div class="row">
-<form method="post" action="/remote-follow">
-<p>
- <label for="follow-address">Follow @{{ id }} with your fediverse address:</label>
- <input id="follow-address" name="address" type="text" required
-        placeholder="@user@domain.social" alt="fediverse address"
-        value="{{ follow_url or '' }}"></input>
- <input name="domain" type="hidden" value="{{ id }}"></input>
- <input name="protocol" type="hidden" value="{{ g.user.LABEL }}"></input>
- <button type="submit" class="btn btn-default">Follow</button>
-</p>
-</form>
-</div>
-{% endif %}
-
+{% block feed %}
 {% include "activities.html" %}
+{% endblock feed %}
 
-{% endblock %}
+{% endblock content %}
diff --git a/tests/test_common.py b/tests/test_common.py
index 44c4ef7..9fa5eb0 100644
--- a/tests/test_common.py
+++ b/tests/test_common.py
@@ -34,7 +34,7 @@ class CommonTest(TestCase):
         self.assert_multiline_equals("""\
 <a class="h-card u-author" href="https://user.com/">
   <img src="" class="profile">
-  <span class="logo">🕸️</span>
+  <span class="logo" title="{self.__class__.__name__}">🕸️</span>
   user.com
 </a>""", common.pretty_link('https://user.com/'))
 
diff --git a/tests/test_models.py b/tests/test_models.py
index b9defb9..a1dac4b 100644
--- a/tests/test_models.py
+++ b/tests/test_models.py
@@ -139,7 +139,7 @@ class UserTest(TestCase):
         self.assert_multiline_equals("""\
 <a class="h-card u-author" href="https://y.z/">
   <img src="" class="profile">
-  <span class="logo">🕸️</span>
+  <span class="logo" title="Web">🕸️</span>
   y.z
 </a>""", g.user.user_link())
 
@@ -147,7 +147,7 @@ class UserTest(TestCase):
         self.assert_multiline_equals("""\
 <a class="h-card u-author" href="https://y.z/">
   <img src="https://user.com/me.jpg" class="profile">
-  <span class="logo">🕸️</span>
+  <span class="logo" title="Web">🕸️</span>
   Mrs. ☕ Foo
 </a>""", g.user.user_link())