notemark.diff

diff --git a/TestApp/Sources/Reader/Common/ReaderViewController.swift b/TestApp/Sources/Reader/Common/ReaderViewController.swift
index ed18a054..4d8ad8b1 100644
--- a/TestApp/Sources/Reader/Common/ReaderViewController.swift
+++ b/TestApp/Sources/Reader/Common/ReaderViewController.swift
@@ -19,6 +19,19 @@ import SwiftSoup
 import WebKit
 import SwiftUI
 
+extension Decoration.Style.Id {
+    static let noteMark: Decoration.Style.Id = "note_mark"
+}
+
+extension Decoration.Style {
+    static func noteMark(tint: UIColor? = nil) -> Decoration.Style {
+        Decoration.Style(
+            id: .noteMark,
+            config: Decoration.Style.HighlightConfig(tint: tint)
+        )
+    }
+}
+
 /// This class is meant to be subclassed by each publication format view controller. It contains the shared behavior, eg. navigation bar toggling.
 class ReaderViewController: UIViewController, Loggable {
     weak var moduleDelegate: ReaderFormatModuleDelegate?
@@ -257,7 +270,21 @@ class ReaderViewController: UIViewController, Loggable {
             .assertNoFailure()
             .sink { [weak self] highlights in
                 if let self = self, let decorator = self.navigator as? DecorableNavigator {
-                    let decorations = highlights.map { Decoration(id: $0.id, locator: $0.locator, style: .highlight(tint: $0.color.uiColor, isActive: false)) }
+                    let decorations = highlights
+                        .flatMap { h in
+                            [
+                                Decoration(
+                                    id: h.id,
+                                    locator: h.locator,
+                                    style: .highlight(tint: h.color.uiColor, isActive: false)
+                                ),
+                                Decoration(
+                                    id: h.id + "-mark",
+                                    locator: h.locator,
+                                    style: .noteMark(tint: h.color.uiColor)
+                                ),
+                            ]
+                        }
                     decorator.apply(decorations: decorations, in: self.highlightDecorationGroup)
                 }
             }
diff --git a/TestApp/Sources/Reader/EPUB/EPUBViewController.swift b/TestApp/Sources/Reader/EPUB/EPUBViewController.swift
index 0c7b42af..2084c685 100644
--- a/TestApp/Sources/Reader/EPUB/EPUBViewController.swift
+++ b/TestApp/Sources/Reader/EPUB/EPUBViewController.swift
@@ -14,6 +14,36 @@ import UIKit
 import R2Shared
 import R2Navigator
 
+func annotationMarkTemplate(defaultTintColor: UIColor = .red) -> HTMLDecorationTemplate {
+    let className = "cantook-annotation-mark"
+
+    return HTMLDecorationTemplate(
+        layout: .bounds,
+        width: .page,
+        element: { decoration in
+            let tint = (decoration.style.config as? Decoration.Style.HighlightConfig)?.tint
+                ?? defaultTintColor
+            
+            return """
+                <div><div data-activable="1" class="\(className)" style="background-color:\(tint.cssValue()) !important"/></div>
+            """
+        },
+        stylesheet: """
+            .\(className) {
+                float: left;
+                margin-top: 4px;
+                margin-left: 4px;
+                width: 18px;
+                height: 18px;
+                border-radius: 50%;
+                background-size: 65%;
+                opacity: 0.8;
+            }
+        """
+    )
+}
+
+
 class EPUBViewController: ReaderViewController {
     var popoverUserconfigurationAnchor: UIBarButtonItem?
     var userSettingNavigationController: UserSettingsNavigationController
@@ -23,6 +53,7 @@ class EPUBViewController: ReaderViewController {
         navigatorEditingActions.append(EditingAction(title: "Highlight", action: #selector(highlightSelection)))
         var navigatorConfig = EPUBNavigatorViewController.Configuration()
         navigatorConfig.editingActions = navigatorEditingActions
+        navigatorConfig.decorationTemplates[.noteMark] = annotationMarkTemplate()
         
         let navigator = EPUBNavigatorViewController(publication: publication, initialLocation: locator, resourcesServer: resourcesServer, config: navigatorConfig)