button-groups as component for grouping 'tab-like' buttons

src/digimarks/main.py

@@ -34,8 +34,8 @@ class Settings(BaseSettings):
     favicons_dir: DirectoryPath
 
     # inside the codebase
-    static_dir: DirectoryPath = 'static'
-    template_dir: DirectoryPath = 'templates'
+    static_dir: DirectoryPath = 'digimarks/static'
+    template_dir: DirectoryPath = 'digimarks/templates'
 
     media_url: str = '/static/'
 

src/digimarks/static/css/digui.css

@@ -229,6 +229,7 @@ ol li::marker, ul li::marker {
 .active {
     background-color: var(--color-highlight);
     color: var(--text-color);
+    transition-duration: 0.2s;
 }
 
 /* Special button */
@@ -254,6 +255,7 @@ button, .button, input, select, textarea {
     -webkit-user-select: none;
     touch-action: manipulation;
     vertical-align: middle;
+    transition-duration: 0.2s;
 }
 
 button, .button, input, select, textarea, table {
@@ -267,6 +269,7 @@ button:hover, .button:hover {
     /*background-color: #d57803;*/
     background-color: var(--color-highlight);
     filter: brightness(80%);
+    transition-duration: 0.2s;
 }
 
 button:focus, .button:focus {
@@ -303,6 +306,22 @@ button:focus, .button:focus {
     filter: brightness(80%);
 }
 
+/* Toggle buttons */
+
+.button-group {
+    display: inline-flex;
+    overflow: hidden;
+    border: var(--border-width) solid var(--border-color);
+    border-radius: var(--border-radius);
+}
+
+.button-group button {
+    /* Reset borders because the buttons are mashed together and the group has its own border */
+    border: none;
+    border-radius: 0;
+    box-shadow: none !important;
+}
+
 /* Table */
 
 th {
@@ -334,6 +353,7 @@ th, td {
 [data-theme='nebula'] .card,
 [data-theme='nebula'] button,
 [data-theme='nebula'] .button,
+[data-theme='nebula'] .button-group,
 [data-theme='nebula'] input,
 [data-theme='nebula'] select,
 [data-theme='nebula'] textarea,
@@ -342,6 +362,7 @@ th, td {
 [data-theme='nebula-dark'] .card,
 [data-theme='nebula-dark'] button,
 [data-theme='nebula-dark'] .button,
+[data-theme='nebula-dark'] .button-group,
 [data-theme='nebula-dark'] input,
 [data-theme='nebula-dark'] select,
 [data-theme='nebula-dark'] textarea,

src/digimarks/templates/user_index.html

@@ -11,9 +11,14 @@
                 <ul>
                     <li><h1>digimarks</h1></li>
                     <li>
-                        <button x-data @click="$store.digimarks.toggleTagPage()"
-                                :class="$store.digimarks.showTags && 'active'">tags
-                        </button>
+                        <div class="button-group">
+                            <button x-data @click="$store.digimarks.toggleTagPage()"
+                                    :class="!$store.digimarks.showTags && 'active'">bookmarks
+                            </button>
+                            <button x-data @click="$store.digimarks.toggleTagPage()"
+                                    :class="$store.digimarks.showTags && 'active'">tags
+                            </button>
+                        </div>
                     </li>
                     <li>
                         <button @click="$store.digimarks.startAddingBookmark()">add bookmark</button>
@@ -32,6 +37,7 @@
                 <h1 x-bind:title="$store.digimarks.userKey">Bookmarks</h1>
 
                 <p>
+                <div class="button-group">
                     <button @click="$store.digimarks.sortAlphabetically()"
                             :class="$store.digimarks.sortTitleAsc && 'active'">a-z &darr;
                     </button>
@@ -44,9 +50,15 @@
                     <button @click="$store.digimarks.sortCreated('desc')"
                             :class="$store.digimarks.sortCreatedDesc && 'active'">date &uarr;
                     </button>
+                </div>
+                <div class="button-group">
                     <button @click="$store.digimarks.toggleListOrGrid()"
-                            :class="$store.digimarks.showBookmarksCards && 'active'">list or grid
+                            :class="$store.digimarks.showBookmarksCards && 'active'">grid
                     </button>
+                    <button @click="$store.digimarks.toggleListOrGrid()"
+                            :class="!$store.digimarks.showBookmarksCards && 'active'">list
+                    </button>
+                </div>
                 </p>
 
                 <table x-cloak x-show="$store.digimarks.showBookmarksList">
@@ -98,15 +110,18 @@
                                 <div class="card-thumb" x-show="bookmark.favicon"><img
                                         x-bind:src="'/content/favicons/' + bookmark.favicon"></div>
                                 <div class="statuses">
-                                    <div x-show="bookmark.starred" class="star"><i class="fa-fw fa-solid fa-star"></i>
+                                    <div x-show="bookmark.starred" class="star"><i
+                                            class="fa-fw fa-solid fa-star"></i>
                                     </div>
                                     <div x-show="bookmark.http_status !== 200 && bookmark.http_status !== 304"
                                          class="error"><i
                                             class="fa-fw fa-solid fa-triangle-exclamation"></i>
                                     </div>
-                                    <div x-show="bookmark.note"><i class="fa-fw fa-regular fa-note-sticky"></i></div>
+                                    <div x-show="bookmark.note"><i class="fa-fw fa-regular fa-note-sticky"></i>
+                                    </div>
+                                </div>
+                                <div><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a>
                                 </div>
-                                <div><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></div>
                             </div>
                             <div class="card-footer">
                                 <button title="show actions"><i class="fa-solid fa-square-caret-down"></i></button>