From ddd33aad91bf1de88e1704cf1dfdebb05e5800b7 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Thu, 4 Apr 2024 22:24:35 -0700
Subject: [PATCH] Change Log Buttons

* Dark theme fixes to brighten notification colors on mobile
* Add change log buttons around various pages to easily look into the history
  of an object in the database:
  * User profile page ('about user' and user table history links)
  * User friends page
  * User/Site gallery page (history of all (user) photos)
  * Admin insights page (comments, threads, and blocklist history)
  * Admin certification page (history of a user's cert photos)
  * Comment history buttons on forums and photos
---
 web/static/css/dark-theme.css          |  9 +++
 web/templates/account/friends.html     |  8 +++
 web/templates/account/profile.html     | 83 ++++++++++++++++----------
 web/templates/account/search.html      |  2 +-
 web/templates/admin/certification.html |  7 +++
 web/templates/admin/user_actions.html  | 47 +++++++++++++--
 web/templates/base.html                |  7 +--
 web/templates/forum/thread.html        | 12 +++-
 web/templates/photo/gallery.html       | 10 ++++
 web/templates/photo/permalink.html     | 33 +++++++++-
 10 files changed, 172 insertions(+), 46 deletions(-)

diff --git a/web/static/css/dark-theme.css b/web/static/css/dark-theme.css
index 17cae7d..907b951 100644
--- a/web/static/css/dark-theme.css
+++ b/web/static/css/dark-theme.css
@@ -23,8 +23,17 @@
 
 .nonshy-navbar-notification-tag.is-warning {
     background-color: rgb(248, 223, 98) !important;
+    color: rgb(26, 0, 5) !important;
 }
 
+/* force lit-up notification buttons (on the mobile top nav, e.g. new Messages/Friends)
+   to show as a bright bulma is-warning style (.tag.is-warning) */
+.nonshy-navbar-notification {
+    background-color: rgb(248, 223, 98) !important;
+    color: rgb(26, 0, 5) !important;
+}
+
+
 .has-text-dark {
     /* note: this css file otherwise didn't override this, dark's always dark, brighten it! */
     color: #b5b5b5 !important;
diff --git a/web/templates/account/friends.html b/web/templates/account/friends.html
index fe7b81f..1143ab8 100644
--- a/web/templates/account/friends.html
+++ b/web/templates/account/friends.html
@@ -69,6 +69,14 @@
         <div class="block">
             Found {{.Pager.Total}} friend{{Pluralize64 .Pager.Total}}
             (page {{.Pager.Page}} of {{.Pager.Pages}}).
+
+            <!-- Admin links -->
+            {{if .CurrentUser.IsAdmin}}
+            <a href="/admin/changelog?table_name=friends&about_user_id={{.User.ID}}" class="button is-small has-text-warning ml-2">
+                <span class="icon"><i class="fa fa-peace"></i></span>
+                <span>Change Log</span>
+            </a>
+            {{end}}
         </div>
 
         <div class="block">
diff --git a/web/templates/account/profile.html b/web/templates/account/profile.html
index 7f95f2f..219951a 100644
--- a/web/templates/account/profile.html
+++ b/web/templates/account/profile.html
@@ -542,43 +542,60 @@
                     <header class="card-header has-background-danger">
                         <p class="card-header-title has-text-light">
                             <i class="fa fa-peace pr-2"></i>
-                            Admin Actions
+                            Admin
                         </p>
                     </header>
 
                     <div class="card-content">
-                        <ul class="menu-list">
-                            <li>
-                                <a href="/admin/user-action?intent=insights&user_id={{.User.ID}}">
-                                    <span class="icon"><i class="fa fa-search"></i></span>
-                                    <span>Admin insights <small>(block lists, etc.)</small></span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/admin/user-action?intent=impersonate&user_id={{.User.ID}}">
-                                    <span class="icon"><i class="fa fa-ghost"></i></span>
-                                    <span>Impersonate this user</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/admin/user-action?intent=ban&user_id={{.User.ID}}">
-                                    <span class="icon"><i class="fa fa-ban"></i></span>
-                                    <span>Ban/unban this user</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/admin/user-action?intent=promote&user_id={{.User.ID}}">
-                                    <span class="icon"><i class="fa fa-peace"></i></span>
-                                    <span>Add/Remove admin rights</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/admin/user-action?intent=delete&user_id={{.User.ID}}">
-                                    <span class="icon"><i class="fa fa-trash"></i></span>
-                                    <span>Delete user account</span>
-                                </a>
-                            </li>
-                        </ul>
+                        <aside class="menu">
+                            <ul class="menu-list">
+                                <p class="menu-label">Profile Information</p>
+                                <li>
+                                    <a href="/admin/user-action?intent=insights&user_id={{.User.ID}}">
+                                        <span class="icon"><i class="fa fa-search"></i></span>
+                                        <span>Admin insights <small>(block lists, etc.)</small></span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="/admin/changelog?about_user_id={{.User.ID}}">
+                                        <span class="icon"><i class="fa fa-clipboard-list"></i></span>
+                                        <span>Change logs about this user</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="/admin/changelog?table_name=users&table_id={{.User.ID}}">
+                                        <span class="icon"><i class="fa fa-clipboard-list"></i></span>
+                                        <span>User account history</span>
+                                    </a>
+                                </li>
+
+                                <p class="menu-label">Admin Actions</p>
+                                <li>
+                                    <a href="/admin/user-action?intent=impersonate&user_id={{.User.ID}}">
+                                        <span class="icon"><i class="fa fa-ghost"></i></span>
+                                        <span>Impersonate this user</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="/admin/user-action?intent=ban&user_id={{.User.ID}}">
+                                        <span class="icon"><i class="fa fa-ban"></i></span>
+                                        <span>Ban/unban this user</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="/admin/user-action?intent=promote&user_id={{.User.ID}}">
+                                        <span class="icon"><i class="fa fa-peace"></i></span>
+                                        <span>Add/Remove admin rights</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="/admin/user-action?intent=delete&user_id={{.User.ID}}">
+                                        <span class="icon"><i class="fa fa-trash"></i></span>
+                                        <span>Delete user account</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </aside>
                     </div>
                 </div>
                 {{end}}
diff --git a/web/templates/account/search.html b/web/templates/account/search.html
index 52847db..0573c3e 100644
--- a/web/templates/account/search.html
+++ b/web/templates/account/search.html
@@ -259,7 +259,7 @@
                                 <!-- Friendship badge -->
                                 {{if $Root.FriendMap.Get .ID}}
                                 <div class="has-text-centered">
-                                    <span class="is-size-7 has-text-warning-dark">
+                                    <span class="is-size-7 has-text-warning">
                                         <i class="fa fa-user-group" title="Friends"></i>
                                         Friends
                                     </span>
diff --git a/web/templates/admin/certification.html b/web/templates/admin/certification.html
index fd1b3a4..0c4caf7 100644
--- a/web/templates/admin/certification.html
+++ b/web/templates/admin/certification.html
@@ -158,6 +158,13 @@
                                     </select>
                                 </div>
                             </div>
+
+                            <div class="field">
+                                <a href="/admin/changelog?table_name=certification_photos&about_user_id={{$User.ID}}" class="button is-small has-text-warning">
+                                    <span class="icon"><i class="fa fa-clipboard-list"></i></span>
+                                    <span>Change Log</span>
+                                </a>
+                            </div>
                         </div>
                         <footer class="card-footer">
                             {{if not (eq .Status "rejected")}}
diff --git a/web/templates/admin/user_actions.html b/web/templates/admin/user_actions.html
index 4ea1bde..40f0618 100644
--- a/web/templates/admin/user_actions.html
+++ b/web/templates/admin/user_actions.html
@@ -20,17 +20,20 @@
                     <header class="card-header has-background-link">
                         <p class="card-header-title has-text-light">
                             {{if eq .Intent "impersonate"}}
-                                <span class="icon"><i class="fa fa-ghost"></i></span>
+                                <i class="mr-2 fa fa-ghost"></i>
                                 Impersonate User
                             {{else if eq .Intent "ban"}}
-                                <span class="icon"><i class="fa fa-ban"></i></span>
+                                <i class="mr-2 fa fa-ban"></i>
                                 Ban User
                             {{else if eq .Intent "promote"}}
-                                <span class="icon"><i class="fa fa-peace"></i></span>
+                                <i class="mr-2 fa fa-peace"></i>
                                 Promote User
                             {{else if eq .Intent "delete"}}
-                                <span class="icon"><i class="fa fa-trash"></i></span>
+                                <i class="mr-2 fa fa-trash"></i>
                                 Delete User
+                            {{else if eq .Intent "insights"}}
+                                <i class="mr-2 fa fa-search"></i>
+                                Admin Insights
                             {{end}}
                         </p>
                     </header>
@@ -66,6 +69,28 @@
                                         creeping a lot of people out and ending up on a lot of block lists.
                                     </p>
 
+                                    <h3>Social Change Log</h3>
+
+                                    <p class="is-size-7">
+                                        These links go into the admin Change Log viewer to show history of the user's
+                                        interactions with parts of the website. Also look for "Change Log" buttons scattered
+                                        around various pages (profile, gallery, certification photo view) for history
+                                        about the user's data tables.
+                                    </p>
+
+                                    <ul>
+                                        <li>
+                                            <a href="/admin/changelog?table_name=comments&table_id={{.User.ID}}">
+                                                Comments written
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="/admin/changelog?table_name=threads&table_id={{.User.ID}}">
+                                                Forum threads started
+                                            </a>
+                                        </li>
+                                    </ul>
+
                                     <h3>Block Lists</h3>
 
                                     <div class="columns">
@@ -76,6 +101,13 @@
                                                 (Users who {{.User.Username}} is blocking)
                                             </p>
 
+                                            <p>
+                                                <a href="/admin/changelog?table_name=blocks&about_user_id={{.User.ID}}" class="button is-small">
+                                                    <span class="icon"><i class="fa fa-clipboard-list"></i></span>
+                                                    <span>Change Log</span>
+                                                </a>
+                                            </p>
+
                                             <ul>
                                             {{range .BlocklistInsights.Blocks}}
                                                 <li>
@@ -92,6 +124,13 @@
                                                 (Users who block {{.User.Username}})
                                             </p>
 
+                                            <p>
+                                                <a href="/admin/changelog?table_name=blocks&table_id={{.User.ID}}" class="button is-small">
+                                                    <span class="icon"><i class="fa fa-clipboard-list"></i></span>
+                                                    <span>Change Log</span>
+                                                </a>
+                                            </p>
+
                                             <ul>
                                             {{range .BlocklistInsights.BlockedBy}}
                                                 <li>
diff --git a/web/templates/base.html b/web/templates/base.html
index 3c03cbc..62aca84 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -276,7 +276,7 @@
         </a>
         {{end}}
 
-        <a class="tag {{if gt .NavFriendRequests 0}}is-warning{{else}}is-grey{{end}} py-4"
+        <a class="tag {{if gt .NavFriendRequests 0}}is-warning nonshy-navbar-notification{{else}}is-grey{{end}} py-4"
             href="/friends{{if gt .NavFriendRequests 0}}?view=requests{{end}}">
             <span class="icon"><i class="fa fa-user-group"></i></span>
             {{if gt .NavFriendRequests 0}}
@@ -284,8 +284,7 @@
             {{end}}
         </a>
 
-
-        <a class="tag {{if gt .NavUnreadMessages 0}}is-warning{{else}}is-grey{{end}} py-4" href="/messages">
+        <a class="tag {{if gt .NavUnreadMessages 0}}is-warning nonshy-navbar-notification{{else}}is-grey{{end}} py-4" href="/messages">
             <span class="icon"><i class="fa fa-envelope"></i></span>
             {{if gt .NavUnreadMessages 0}}
                 <small class="nonshy-navbar-notification-count">{{FormatNumberShort .NavUnreadMessages}}</small>
@@ -293,7 +292,7 @@
         </a>
 
         {{if gt .NavUnreadNotifications 0}}
-            <a class="tag is-warning py-4" href="/me#notifications">
+            <a class="tag is-warning nonshy-navbar-notification py-4" href="/me#notifications">
                 <span class="icon"><i class="fa fa-bell"></i></span>
                 <small class="nonshy-navbar-notification-count">{{FormatNumberShort .NavUnreadNotifications}}</small>
             </a>
diff --git a/web/templates/forum/thread.html b/web/templates/forum/thread.html
index 9373a65..3e62d6c 100644
--- a/web/templates/forum/thread.html
+++ b/web/templates/forum/thread.html
@@ -101,7 +101,7 @@
 {{$Root := .}}
 <div class="block p-2">
 {{range $i, $c := .Comments}}
-    <div class="box has-background-link-light has-text-dark" id="p{{.ID}}">
+    <div class="box has-text-dark" id="p{{.ID}}">
         <div class="columns">
             <div class="column is-2 has-text-centered">
                 <div>
@@ -306,6 +306,16 @@
                             <span>Link</span>
                         </a>
                     </div>
+
+                    <!-- Admin: history -->
+                    {{if $Root.CurrentUser.IsAdmin}}
+                    <div class="column is-narrow">
+                        <a href="/admin/changelog?table_name=comments&table_id={{.ID}}" class="has-text-warning">
+                            <span class="icon"><i class="fa fa-clipboard-list"></i></span>
+                            <span>Change log</span>
+                        </a>
+                    </div>
+                    {{end}}
                 </div>
 
                 {{if $Root.CurrentUser.IsAdmin}}
diff --git a/web/templates/photo/gallery.html b/web/templates/photo/gallery.html
index eb6110b..cdd4018 100644
--- a/web/templates/photo/gallery.html
+++ b/web/templates/photo/gallery.html
@@ -767,6 +767,16 @@
 
             {{SimplePager .Pager}}
 
+            <!-- Admin change log link -->
+            {{if .CurrentUser.IsAdmin}}
+            <div class="block">
+                <a href="/admin/changelog?table_name=photos{{if .User}}&about_user_id={{.User.ID}}{{end}}" class="button is-small has-text-warning">
+                    <span class="icon"><i class="fa fa-peace mr-1"></i></span>
+                    <span>{{if .User}}User{{else}}Site{{end}} Gallery change log</span>
+                </a>
+            </div>
+            {{end}}
+
             <!-- Inner circle invite notice -->
             {{if .InnerCircleInviteView}}
             <div class="notification is-info is-light content">
diff --git a/web/templates/photo/permalink.html b/web/templates/photo/permalink.html
index 08329dd..7df607c 100644
--- a/web/templates/photo/permalink.html
+++ b/web/templates/photo/permalink.html
@@ -98,9 +98,14 @@
                 </div>
                 {{end}}
 
+                <!-- Timestamp -->
+                <div>
+                    <small class="has-text-grey">Uploaded {{.Photo.CreatedAt.Format "Jan _2 2006 15:04:05"}}</small>
+                </div>
+
                 <!-- Quick mark photo as explicit -->
                 {{if and (not .Photo.Explicit) (ne .Photo.UserID .CurrentUser.ID)}}
-                <div class="mt-2">
+                <div class="mt-1">
                     <a href="#"
                         class="has-text-danger is-size-7 nonshy-mark-explicit"
                         data-photo-id="{{.Photo.ID}}" data-photo-url="{{PhotoURL .Photo.Filename}}">
@@ -114,7 +119,7 @@
                 {{template "like-example" .}}
 
                 <!-- Like & Comments buttons -->
-                <div class="mt-4 mb-2 columns is-centered is-mobile is-gapless">
+                <div class="mt-4 mb-0 columns is-centered is-mobile is-gapless">
                     <div class="column is-narrow mr-2">
                         {{$Like := .LikeMap.Get .Photo.ID}}
                         <button type="button" class="button is-small nonshy-like-button"
@@ -138,7 +143,7 @@
                 </div>
 
                 <!-- Photo controls buttons (edit/delete/report) -->
-                <div class="my-0 columns is-centered is-mobile is-gapless">
+                <div class="my-2 columns is-centered is-mobile is-gapless">
                     <!-- Owned photo: have edit/delete buttons too -->
                     {{if or .IsOwnPhoto .CurrentUser.IsAdmin}}
                     <div class="column is-narrow">
@@ -165,6 +170,18 @@
                     </div>
                     {{end}}
                 </div>
+
+                <!-- Admin links -->
+                {{if .CurrentUser.IsAdmin}}
+                <div class="columns is-centered is-mobile is-gapless">
+                    <div class="column is-narrow">
+                        <a href="/admin/changelog?table_name=photos&table_id={{.Photo.ID}}" class="button is-small has-text-warning">
+                            <span class="icon"><i class="fa fa-peace"></i></span>
+                            <span>Change Log</span>
+                        </a>
+                    </div>
+                </aside>
+                {{end}}
             </div>
 
         </div><!-- /photo card -->
@@ -322,6 +339,16 @@
                                                 <span>Link</span>
                                             </a>
                                         </div>
+
+                                        <!-- Admin: history -->
+                                        {{if $Root.CurrentUser.IsAdmin}}
+                                        <div class="column is-narrow">
+                                            <a href="/admin/changelog?table_name=comments&table_id={{.ID}}" class="has-text-warning">
+                                                <span class="icon"><i class="fa fa-clipboard-list"></i></span>
+                                                <span>Change log</span>
+                                            </a>
+                                        </div>
+                                        {{end}}
                                     </div>
                                 </div>
                             </div>