From 5d71250408ff439f4782ef7ebbe8d660fb5b312f Mon Sep 17 00:00:00 2001
From: Michiel Scholten <michiel@diginaut.net>
Date: Tue, 6 May 2025 16:21:56 +0200
Subject: [PATCH] Toggle between showing the bookmarks and a list of the tags

---
 src/digimarks/static/css/digimarks.css  |  4 ++
 src/digimarks/static/js/digimarks.js    | 17 ++++++++
 src/digimarks/templates/user_index.html | 55 ++++++++++++++-----------
 3 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/src/digimarks/static/css/digimarks.css b/src/digimarks/static/css/digimarks.css
index f783777..2ebe78e 100644
--- a/src/digimarks/static/css/digimarks.css
+++ b/src/digimarks/static/css/digimarks.css
@@ -8,6 +8,10 @@
     background-color: #fb8c00;
 }
 
+button:hover {
+    background-color: #d57803;
+}
+
 button:focus {
     border-color: #d57803;
 }
diff --git a/src/digimarks/static/js/digimarks.js b/src/digimarks/static/js/digimarks.js
index eb3dfd7..d78d81e 100644
--- a/src/digimarks/static/js/digimarks.js
+++ b/src/digimarks/static/js/digimarks.js
@@ -9,6 +9,9 @@ document.addEventListener('alpine:init', () => {
         bookmarks: [],
         tags: [],
 
+        show_bookmarks: Alpine.$persist(true).as('show_bookmarks'),
+        show_tags: Alpine.$persist(false).as('show_tags'),
+
         /* Loading indicator */
         loading: false,
 
@@ -113,6 +116,20 @@ document.addEventListener('alpine:init', () => {
                 this.sort_created_asc = true;
                 this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date));
             }
+        },
+        async toggleTagPage() {
+            console.log('Toggle tag page');
+            this.show_bookmarks = !this.show_bookmarks;
+            this.show_tags = !this.show_bookmarks;
+            /*
+            if (this.show_bookmarks) {
+                this.show_tags = true;
+                this.show_bookmarks = false;
+            } else {
+                this.show_bookmarks = true;
+                this.show_tags = false;
+            }
+             */
         }
     })
 });
diff --git a/src/digimarks/templates/user_index.html b/src/digimarks/templates/user_index.html
index b32d467..c0e8064 100644
--- a/src/digimarks/templates/user_index.html
+++ b/src/digimarks/templates/user_index.html
@@ -3,38 +3,42 @@
 {% block pageheader %}Bookmarks{% endblock %}
 {% block pagecontent %}
 
-    <div id="container"
-         x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()"
-         x-data="">
+    <header>
 
-        <header>
+        <nav class="menu">
+            <ul>
+                <li>digimarks</li>
+                <li>
+                    <button x-data @click="$store.digimarks.toggleTagPage()"
+                            :class="$store.digimarks.show_tags && 'active'">tags
+                    </button>
+                </li>
+                <li>
+                    <button x-data>add bookmark</button>
+                </li>
+            </ul>
+            <input x-model="$store.digimarks.search" placeholder="Search...">
+        </nav>
+    </header>
+    <main x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()"
+          x-data="">
 
-            <nav class="menu">
-                <ul>
-                    <li>digimarks</li>
-                    <li>tags</li>
-                    <li>add bookmark</li>
-                </ul>
-                <input x-model="$store.digimarks.search" placeholder="Search...">
-            </nav>
-        </header>
-        <main>
-
-            <p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p>
-            <div x-show="$store.digimarks.loading">Loading...</div>
+        <p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p>
+        <div x-show="$store.digimarks.loading">Loading...</div>
 
+        <section x-cloak x-show="$store.digimarks.show_bookmarks" x-transition>
             <p>
                 <button @click="$store.digimarks.sortAlphabetically()"
-                        :class="$store.digimarks.sort_title_asc === true && 'active'">a-z &darr;
+                        :class="$store.digimarks.sort_title_asc && 'active'">a-z &darr;
                 </button>
                 <button @click="$store.digimarks.sortAlphabetically('desc')"
-                        :class="$store.digimarks.sort_title_desc === true && 'active'">z-a &uarr;
+                        :class="$store.digimarks.sort_title_desc && 'active'">z-a &uarr;
                 </button>
                 <button @click="$store.digimarks.sortCreated()"
-                        :class="$store.digimarks.sort_created_asc === true && 'active'">date &darr;
+                        :class="$store.digimarks.sort_created_asc && 'active'">date &darr;
                 </button>
                 <button @click="$store.digimarks.sortCreated('desc')"
-                        :class="$store.digimarks.sort_created_desc === true && 'active'">date &uarr;
+                        :class="$store.digimarks.sort_created_desc && 'active'">date &uarr;
                 </button>
             </p>
 
@@ -43,13 +47,14 @@
                     <li><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></li>
                 </template>
             </ul>
+        </section>
 
-            <h2>tags</h2>
-            <ul x-cloak>
+        <section x-cloak x-show="$store.digimarks.show_tags" x-transition>
+            <ul>
                 <template x-for="tag in $store.digimarks.filteredTags" :key="tag">
                     <li x-text="tag"></li>
                 </template>
             </ul>
-        </main>
-    </div>
+        </section>
+    </main>
 {% endblock %}