feat: add marks to filter bar

addon/components/document-list-item.hbs

@@ -16,12 +16,29 @@
   </td>
   <td>
     <span>{{@document.title}}</span>
-    <div class="document-thumbnail" uk-dropdown="pos: right-bottom; offset: 15; delay-show: 400; delay-hide: 100;">
-      <img data-src="{{@document.thumbnail}}" alt="{{@document.title}}" uk-img/>
+    <div
+      class="document-thumbnail"
+      uk-dropdown="pos: right-bottom; offset: 15; delay-show: 400; delay-hide: 100;"
+    >
+      <img
+        data-src="{{@document.thumbnail}}"
+        alt="{{@document.title}}"
+        uk-img
+      />
     </div>
   </td>
   <td>
-    {{format-date @document.modifiedAt month="2-digit" day="2-digit" year="numeric" hour="2-digit" minute="2-digit"}}
+    marks
+  </td>
+  <td>
+    {{format-date
+      @document.modifiedAt
+      month="2-digit"
+      day="2-digit"
+      year="numeric"
+      hour="2-digit"
+      minute="2-digit"
+    }}
   </td>
   <td>
     {{await (resolve-user @document.createdByUser)}}

addon/components/document-list.hbs

@@ -19,6 +19,7 @@
           {{on "click" (fn @setSort "title")}}
         />
       </th>
+      <th></th>
       <th>
         {{t "alexandria.document-list.modified-at"}}
         <FaIcon

addon/components/documents-side-panel.hbs

@@ -1,7 +1,6 @@
 <div
-  class="uk-background-muted uk-border-left uk-width-xlarge uk-flex uk-flex-between uk-flex-column document-details {{
-    if this.sidePanel.open "" "closed"
-  }}"
+  class="uk-background-muted uk-border-left uk-width-xlarge uk-flex uk-flex-between uk-flex-column document-details
+    {{if this.sidePanel.open '' 'closed'}}"
   data-test-document-side-panel
   ...attributes
 >

addon/components/mark-icon.hbs

@@ -0,0 +1,5 @@
+{{#if this.hasHTML}}
+  {{@mark.icon}}
+{{else}}
+  <UkIcon @icon={{@mark.icon}} @size={{@mark.size}} />
+{{/if}}

addon/components/mark-icon.js

@@ -0,0 +1,8 @@
+import Component from "@glimmer/component";
+import { isHTMLSafe } from "@ember/template";
+
+export default class MarkIcon extends Component {
+  get hasHTML() {
+    return isHTMLSafe(this.args.mark.icon);
+  }
+}

addon/components/mark-manager.hbs

@@ -1,14 +1,14 @@
 <div class="document-marks">
-  {{#each @document.marks as |mark|}}
-    <label class="{{if mark.activeOnAll 'active'}}">
-      <FaIcon
-        @icon={{mark.icon}}
-        @prefix={{mark.prefix}}
-        @size={{mark.size}}
-        @fixedWidth={{mark.fixedWidth}}
-        @rotation={{mark.rotation}}
-        @flip={{mark.flip}}
-      />
+  {{#each this.marks as |mark|}}
+    <label
+      title={{mark.tooltip}}
+      class="{{if (and (not mark.activeOnNone) mark.activeOnAll) 'mark-active'}}
+        {{if
+          (not (or mark.activeOnAll mark.activeOnNone))
+          'mark-mixed light-blue'
+        }}"
+    >
+      <MarkIcon @mark={{mark}} />
       <Input
         @type="checkbox"
         hidden

addon/components/mark-manager.js

@@ -7,22 +7,28 @@ export default class TagManagerComponent extends Component {
 
   @action
   toggleMark(mark) {
-    if (mark.active) {
-      this.tagService.remove(this.args.document, mark.type);
-    } else {
-      this.tagService.add(this.args.document, mark.type);
-    }
+    Promise.all(
+      this.args.documents.map((document) => {
+        if (mark.activeOnAll) {
+          return this.tagService.remove(document, mark.type);
+        }
+        return this.tagService.add(document, mark.type);
+      }),
+    );
   }
 
   get marks() {
     return this.config.marks.map((mark) => {
-      const activeOnAll = this.args.documents.marks.every((m) => m.active);
-      const activeOnNone = this.args.documents.marks.every((m) => !m.active);
+      const activeDocuments = this.args.documents.reduce((acc, doc) => {
+        return (
+          acc + Number(Boolean(doc.tags.find((tag) => tag.name === mark.type)))
+        );
+      }, 0);
 
       return {
         ...mark,
-        activeOnAll,
-        activeOnNone,
+        activeOnAll: activeDocuments === this.args.documents.length,
+        activeOnNone: activeDocuments === 0,
       };
     });
   }

addon/components/multi-document-details.hbs

@@ -33,9 +33,12 @@
   </div>
 
   {{#if (gt @selectedDocuments.length 0)}}
+    <MarkManager @documents={{@selectedDocuments}} />
+
     <div class="uk-flex uk-flex-right">
       <DocumentDeleteButton
-        @docsToDelete={{@selectedDocuments}} as |showDialog|
+        @docsToDelete={{@selectedDocuments}}
+        as |showDialog|
       >
         <UkButton
           data-test-delete

addon/components/single-document-details.hbs

@@ -69,7 +69,7 @@
         ></button>
       {{/if}}
     </span>
-    <MarkManager @document={{@document}} />
+    <MarkManager @documents={{array @document}} />
   </span>
 
   <p class="uk-margin-remove-top">

addon/components/tag-filter.hbs

@@ -1,20 +1,29 @@
 <div
-  class="uk-border uk-padding-small uk-width-expand"
+  class="uk-border uk-padding-small uk-width-expand uk-flex uk-flex-wrap"
   ...attributes
   {{did-insert this.onInsert}}
   {{did-update this.onInsert @category}}
 >
   {{#each this.tags.searchTags as |tag|}}
+    {{log tag}}
     <button
       type="button"
-      class="uk-badge uk-border-remove {{
-        if (includes tag.id this.selectedTagsArray) "uk-background-secondary"
-      }}"
+      class="tag uk-text-small
+        {{if
+          (includes tag.id this.selectedTagsArray)
+          'uk-background-secondary'
+          'uk-background-primary'
+        }}"
       {{on "click" (fn this.toggleTag tag)}}
       data-test-tag
       data-test-tag-id={{tag.id}}
+      title={{tag.tooltip}}
     >
-      {{tag.name}}
+      {{#if tag.isMark}}
+        <MarkIcon @mark={{tag}} />
+      {{else}}
+        {{tag.name}}
+      {{/if}}
     </button>
   {{else}}
     {{t "alexandria.tag-filter.empty"}}

addon/components/tag-manager.hbs

@@ -8,13 +8,13 @@
       {{#if this.tags.length}}
         <div class="uk-margin-bottom">
           {{#each this.tags as |tag|}}
-            <span class="uk-badge {{if tag.selectedByAll "" "light-blue"}}">
+            <span class="tag uk-text-small {{if tag.selectedByAll 'uk-background-primary' 'tag-mixed'}}">
               {{tag.emberModel.name}}
               <button
                 class="uk-margin-small-left"
                 type="button"
                 uk-close
-                {{set-style color="white"}}
+                {{set-style color=(if tag.selectedByAll "white" "black")}}
                 {{on "click" (fn this.removeTag tag)}}
               ></button>
             </span>
@@ -49,7 +49,7 @@
           {{#each this.matchingTags as |tag|}}
             <a
               href="#"
-              class="uk-badge"
+              class="tag uk-text-small"
               {{on "click" (fn this.addTagSuggestion tag)}}
             >
               {{tag.name}}

addon/components/tag-manager.js

@@ -6,6 +6,8 @@ import { tracked } from "@glimmer/tracking";
 import { timeout, restartableTask } from "ember-concurrency";
 export default class TagManagerComponent extends Component {
   @service("tags") tagService;
+  @service config;
+
   @tracked matchingTags = [];
   @tracked tagValue;
 
@@ -86,6 +88,10 @@ export default class TagManagerComponent extends Component {
       const tags = doc.tags;
       if (tags && tags.length !== 0) {
         tags.forEach((tag) => {
+          if (this.config.markTypes.includes(tag.name)) {
+            return;
+          }
+
           const existingTag = tagsToDisplay.find(
             (t) => t.emberModel.id === tag.id,
           );

addon/models/document.js

@@ -1,6 +1,6 @@
+import { inject as service } from "@ember/service";
 import { belongsTo, hasMany, attr } from "@ember-data/model";
 import { LocalizedModel, localizedAttr } from "ember-localized-model";
-import { inject as service } from "@ember/service";
 import { TrackedObject } from "tracked-built-ins";
 
 export default class DocumentModel extends LocalizedModel {
@@ -30,7 +30,7 @@ export default class DocumentModel extends LocalizedModel {
 
   get marks() {
     return this.config.marks.map((mark) => {
-      mark.active = this.tags.findBy("name", mark.type);
+      mark.active = this.tags.find((tag) => tag.name === mark.type);
       return new TrackedObject(mark);
     });
   }

addon/services/config.js

@@ -1,5 +1,6 @@
 import Service from "@ember/service";
 import { tracked } from "@glimmer/tracking";
+import { htmlSafe } from "@ember/template";
 
 export default class ConfigService extends Service {
   @tracked alexandriaQueryParams = {};
@@ -27,11 +28,18 @@ export default class ConfigService extends Service {
     return [
       {
         type: "stamp",
-        icon: "folder",
+        icon: htmlSafe(
+          `<svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
+        ),
+        tooltip: "Mark as stamp",
       },
     ];
   }
 
+  get markTypes() {
+    return this.marks.map((mark) => mark.type);
+  }
+
   resolveUser(id) {
     return id;
   }

addon/services/tags.js

@@ -22,7 +22,29 @@ export default class TagsService extends Service {
   @lastValue("fetchAllTags") allTags;
 
   /** The searchTags are used in the TagFilter component. */
-  @lastValue("fetchSearchTags") searchTags;
+  // @lastValue("fetchSearchTags") searchTags;
+  get searchTags() {
+    const allTags = this.fetchSearchTags.lastSuccessful?.value ?? [];
+
+    return allTags
+      .map((tag) => {
+        if (this.config.markTypes.includes(tag.name)) {
+          const mark = this.config.marks.find((m) => m.type === tag.name);
+
+          tag = {
+            id: tag.id,
+            ...mark,
+            isMark: true,
+          };
+        }
+
+        return tag;
+      })
+      .sort(function (x, y) {
+        // order marks to the front
+        return Number(y.isMark ?? 0) - Number(x.isMark ?? 0);
+      });
+  }
 
   @task *fetchAllTags() {
     return yield this.store.findAll("tag");

app/styles/components/_document-details.scss

@@ -8,30 +8,55 @@
   .document-title {
     font-size: 1.5em;
     word-break: break-all;
-
-    .document-marks {
-      margin-top: 1dvh;
-
-      label {
-        height: 36px;
-        width: 36px;
-        align-items: center;
-        justify-content: center;
-        vertical-align: middle;
-        border-radius: 500px;
-        display: inline-flex;
-        background-color: red;
-      }
-      label.active {
-        // try to use mix-blend-mode
-        mix-blend-mode: difference;
-        background-color: blue;
-      }
-    }
   }
 
   .document-meta {
     font-size: 1.25em;
     color: $global-muted-color;
   }
 }
+
+.document-marks {
+  margin-top: 1dvh;
+
+  label {
+    height: 36px;
+    width: 36px;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    border-radius: 500px;
+    border: 1px solid $global-muted-color;
+    display: inline-flex;
+    z-index: 0;
+    background-color: #ffffff;
+  }
+  label.mark-active {
+    background-color: $global-primary-background;
+
+    svg {
+      fill: #ffffff;
+    }
+  }
+  label.mark-mixed {
+    border: 2px solid $global-primary-background;
+  }
+}
+
+.tag {
+  padding: 0.3em 0.6em;
+  margin: 0.1em;
+  border-radius: 500px;
+  display: inline-flex;
+  color: #ffffff;
+  border: 2px solid $global-primary-background;
+
+  svg {
+    fill: #ffffff;
+  }
+}
+
+.tag-mixed {
+  background-color: #ffffff;
+  color: #000000;
+}