Card layouting, introduced Fontawesome icons

src/digimarks/main.py

@@ -70,6 +70,7 @@ async def lifespan(the_app: FastAPI):
 
 app = FastAPI(lifespan=lifespan)
 app.mount('/static', StaticFiles(directory=settings.static_dir), name='static')
+app.mount('/content/favicons', StaticFiles(directory=settings.favicons_dir), name='favicons')
 templates = Jinja2Templates(directory=settings.template_dir)
 
 logger = logging.getLogger('digimarks')

src/digimarks/static/css/digimarks.css

@@ -3,3 +3,13 @@
  *
  * Overrides on the digui styling
  */
+
+/* Star, error, note etc */
+.card .statuses {
+    display: flex;
+    flex-direction: column;
+}
+
+.star {
+    color: #ffeb3b;
+}

src/digimarks/static/css/digui.css

@@ -20,9 +20,12 @@
     --border-color: #d5d9d9;
     --border-width: 1px;
     --border-radius: 8px;
-    /*--shadow-color: rgba(213, 217, 217, .5);*/
-    --shadow-color: rgba(3, 3, 3, .5);
+    --shadow-color: rgba(213, 217, 217, .5);
     --global-theme-toggle-content: ' 🌞';
+
+    --danger-color: #e03131;
+    --warning-color: orange;
+    --error-color: var(--danger-color);
 }
 
 html[data-theme='nebula'] {
@@ -67,6 +70,9 @@ html[data-theme='bbs'] {
     --link-color: #543fd7;
     --highlight-color: #e03131;
 
+    /*--nav-background-color: #ccc;*/
+    /*--nav-color: var(--text-color);*/
+
     --border-color: #333;
     --border-width: 2px;
     --border-radius: 0;
@@ -234,7 +240,51 @@ button:focus {
     box-shadow: var(--shadow-color) 0 2px 5px 0;
 }
 
+.card .card-header {
+
+}
+
+.card-body {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 1rem;
+}
+
+.card-body > * {
+    /*padding-left: 1em;*/
+}
+
+.card .card-image {
+    width: 72px;
+    /*min-width: 60px;*/
+    /*max-width: 100px;*/
+    /*position: relative;*/
+    /*box-sizing: inherit;*/
+}
+
+.card .card-image img {
+    width: 72px;
+}
+
 .card .meta {
     filter: brightness(80%);
     color: var(--text-color);
 }
+
+.card .card-footer {
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 1rem;
+    align-items: center;
+}
+
+/*
+.card button {
+    border: none;
+    background: none;
+}
+*/
+.error {
+    color: var(--error-color);
+}

src/digimarks/static/js/digimarks.js

@@ -9,6 +9,9 @@ document.addEventListener('alpine:init', () => {
         bookmarks: [],
         tags: [],
 
+        /* Bookmark that is being edited, used to fill the form etc */
+        bookmark_to_edit: null,
+
         /* nebula (dropshadows), bbs (monospace, right lines), silo (like bbs but dark) ?? */
         themes: ['nebula', 'nebula-dark', 'bbs', 'silo'],
         theme: Alpine.$persist('nebula').as('theme'),
@@ -148,6 +151,16 @@ document.addEventListener('alpine:init', () => {
         async toggleListOrGrid() {
             this.show_bookmarks_list = !this.show_bookmarks_list;
             this.show_bookmarks_cards = !this.show_bookmarks_list;
+        },
+
+        async startAddingBookmark() {
+            console.log('Start adding bookmark');
+            this.bookmark_to_edit = {
+                'url': ''
+            }
+        },
+        async addBookmark() {
+            //
         }
     })
 });

src/digimarks/templates/base.html

@@ -4,6 +4,7 @@
     <title>{% block title %}{% endblock %} - digimarks</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="stylesheet" href="/static/css/digui.css?v={{ version }}">
     <link rel="stylesheet" href="/static/css/digimarks.css?v={{ version }}">
     <link id="favicon" rel="icon" type="image/x-icon" href="/static/images/favicon.ico">

src/digimarks/templates/user_index.html

@@ -16,7 +16,7 @@
                         </button>
                     </li>
                     <li>
-                        <button x-data>add bookmark</button>
+                        <button @click="$store.digimarks.startAddingBookmark">add bookmark</button>
                     </li>
                     <li>
                         <button @click="$store.digimarks.loopToNextTheme()" class="theme-toggle">theme</button>
@@ -28,7 +28,8 @@
         </header>
 
         <main>
-            <section x-cloak x-show="$store.digimarks.show_bookmarks" x-transition.opacity>
+            <section x-cloak x-show="$store.digimarks.show_bookmarks && !$store.digimarks.bookmark_to_edit"
+                     x-transition.opacity>
                 <h1 x-bind:title="$store.digimarks.userKey">Bookmarks</h1>
 
                 <p>
@@ -58,16 +59,32 @@
                 <section x-cloak x-show="$store.digimarks.show_bookmarks_cards" class="cards">
                     <template x-for="bookmark in $store.digimarks.filteredBookmarks" :key="bookmark.id">
                         <div class="card">
-                            <div x-show="bookmark.starred">*</div>
-                            {#                            <img x-show="bookmark.favicon" x-bind:src="'/static/favicons/' + bookmark.favicon">#}
-                            <a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a>
-                            <div x-text="bookmark.tags" class="meta"></div>
+                            <div class="card-body">
+                                <div class="card-image" 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>
+                                    <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>
+                                <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>
+                                <div x-text="bookmark.tags" class="meta"></div>
+                                {#                                <div x-text="bookmark.created_date" class="meta"></div>#}
+                            </div>
                         </div>
                     </template>
                 </section>
             </section>
 
-            <section x-cloak x-show="$store.digimarks.show_tags" x-transition.opacity>
+            <section x-cloak x-show="$store.digimarks.show_tags && !$store.digimarks.bookmark_to_edit"
+                     x-transition.opacity>
                 <h1>Tags</h1>
 
                 <ul>
@@ -76,6 +93,34 @@
                     </template>
                 </ul>
             </section>
+
+            <section x-cloak x-show="$store.digimarks.bookmark_to_edit" x-transition.opacity>
+                <h1>Add/Edit bookmark</h1>
+                {#
+                <div class="card-panel {{ theme.ERRORMESSAGE_BACKGROUND }}">
+            <span class="error">
+                {% if bookmark.http_status == 404 %}
+                    <i class="material-icons">report_problem</i>&nbsp;&nbsp;URL not found (404), broken/outdated link?
+                {% elif bookmark.http_status == 301 %}
+                    <i class="material-icons">report_problem</i>&nbsp;&nbsp;HTTP status (301), moved permanently. Use button for new target
+                {% elif bookmark.http_status == 302 %}
+                    <i class="material-icons">report_problem</i>&nbsp;&nbsp;HTTP status (302), moved temporarily. Use button for new target
+                {% elif bookmark.http_status == bookmark.HTTP_CONNECTIONERROR %}
+                    <i class="material-icons">report_problem</i>&nbsp;&nbsp;Connection error, server might have been offline at the time of last edit
+                {% else %}
+                    <i class="material-icons">report_problem</i>&nbsp;&nbsp;HTTP status {{ bookmark.http_status }}
+                {% endif %}
+            </span>
+                </div>
+#}
+                <form>
+                    <input type="text" name="">
+                    <label>
+                        <input type="checkbox" name="strip" id="strip"/>
+                        <span>Strip parameters from url (like <em>?utm_source=social</em> - can break the link!)</span>
+                    </label>
+                </form>
+            </section>
         </main>
 
     </article>