From 28bb66f18561bb2b2ee678dd5495bfdedea8b620 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 31 Jan 2024 09:03:33 +0800
Subject: [PATCH] Show total at end of list

---
 src/pages/followed-hashtags.jsx | 38 ++++++++++++++++++++++-----------
 src/pages/lists.jsx             | 34 ++++++++++++++++++-----------
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/src/pages/followed-hashtags.jsx b/src/pages/followed-hashtags.jsx
index 36f32e16..a36f9418 100644
--- a/src/pages/followed-hashtags.jsx
+++ b/src/pages/followed-hashtags.jsx
@@ -45,19 +45,31 @@ function FollowedHashtags() {
         </header>
         <main>
           {followedHashtags.length > 0 ? (
-            <ul class="link-list">
-              {followedHashtags.map((tag) => (
-                <li>
-                  <Link
-                    to={
-                      instance ? `/${instance}/t/${tag.name}` : `/t/${tag.name}`
-                    }
-                  >
-                    <Icon icon="hashtag" /> <span>{tag.name}</span>
-                  </Link>
-                </li>
-              ))}
-            </ul>
+            <>
+              <ul class="link-list">
+                {followedHashtags.map((tag) => (
+                  <li>
+                    <Link
+                      to={
+                        instance
+                          ? `/${instance}/t/${tag.name}`
+                          : `/t/${tag.name}`
+                      }
+                    >
+                      <Icon icon="hashtag" /> <span>{tag.name}</span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+              {followedHashtags.length > 1 && (
+                <footer class="ui-state">
+                  <small class="insignificant">
+                    {followedHashtags.length} hashtag
+                    {followedHashtags.length === 1 ? '' : 's'}
+                  </small>
+                </footer>
+              )}
+            </>
           ) : uiState === 'loading' ? (
             <p class="ui-state">
               <Loader abrupt />
diff --git a/src/pages/lists.jsx b/src/pages/lists.jsx
index 2eacb157..8e72bf81 100644
--- a/src/pages/lists.jsx
+++ b/src/pages/lists.jsx
@@ -61,14 +61,15 @@ function Lists() {
         </header>
         <main>
           {lists.length > 0 ? (
-            <ul class="link-list">
-              {lists.map((list) => (
-                <li>
-                  <Link to={`/l/${list.id}`}>
-                    <span>
-                      <Icon icon="list" /> <span>{list.title}</span>
-                    </span>
-                    {/* <button
+            <>
+              <ul class="link-list">
+                {lists.map((list) => (
+                  <li>
+                    <Link to={`/l/${list.id}`}>
+                      <span>
+                        <Icon icon="list" /> <span>{list.title}</span>
+                      </span>
+                      {/* <button
                       type="button"
                       class="plain"
                       onClick={(e) => {
@@ -81,10 +82,19 @@ function Lists() {
                     >
                       <Icon icon="pencil" />
                     </button> */}
-                  </Link>
-                </li>
-              ))}
-            </ul>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+              {lists.length > 1 && (
+                <footer class="ui-state">
+                  <small class="insignificant">
+                    {lists.length} list
+                    {lists.length === 1 ? '' : 's'}
+                  </small>
+                </footer>
+              )}
+            </>
           ) : uiState === 'loading' ? (
             <p class="ui-state">
               <Loader />