From a3e16e57de0b59a7f8f50c67a0a66d13382a3a22 Mon Sep 17 00:00:00 2001
From: Eike Kettner <eike.kettner@posteo.de>
Date: Mon, 22 Jun 2020 23:44:51 +0200
Subject: [PATCH] Display search highlighting in webapp

---
 .../webapp/src/main/elm/Comp/ItemCardList.elm | 39 +++++++++++++++++++
 modules/webapp/src/main/webjar/docspell.css   | 16 ++++++++
 2 files changed, 55 insertions(+)

diff --git a/modules/webapp/src/main/elm/Comp/ItemCardList.elm b/modules/webapp/src/main/elm/Comp/ItemCardList.elm
index 1d4e9023..ab607af6 100644
--- a/modules/webapp/src/main/elm/Comp/ItemCardList.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemCardList.elm
@@ -8,6 +8,7 @@ module Comp.ItemCardList exposing
     , view
     )
 
+import Api.Model.HighlightEntry exposing (HighlightEntry)
 import Api.Model.ItemLight exposing (ItemLight)
 import Api.Model.ItemLightGroup exposing (ItemLightGroup)
 import Api.Model.ItemLightList exposing (ItemLightList)
@@ -19,6 +20,7 @@ import Data.UiSettings exposing (UiSettings)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick)
+import Markdown
 import Ports
 import Util.List
 import Util.String
@@ -247,4 +249,41 @@ viewItem settings item =
                     ]
                 ]
             ]
+        , div
+            [ classList
+                [ ( "content search-highlight", True )
+                , ( "invisible hidden", item.highlighting == [] )
+                ]
+            ]
+            [ div [ class "ui list" ]
+                (List.map renderHighlightEntry item.highlighting)
+            ]
+        ]
+
+
+renderHighlightEntry : HighlightEntry -> Html Msg
+renderHighlightEntry entry =
+    let
+        stripWhitespace str =
+            String.trim str
+                |> String.replace "```" ""
+                |> String.replace "\t" "  "
+                |> String.replace "\n\n" "\n"
+                |> String.lines
+                |> List.map String.trim
+                |> String.join "\n"
+    in
+    div [ class "item" ]
+        [ div [ class "content" ]
+            (div [ class "header" ]
+                [ i [ class "caret right icon" ] []
+                , text (entry.name ++ ":")
+                ]
+                :: List.map
+                    (\str ->
+                        Markdown.toHtml [ class "description" ] <|
+                            (stripWhitespace str ++ "…")
+                    )
+                    entry.lines
+            )
         ]
diff --git a/modules/webapp/src/main/webjar/docspell.css b/modules/webapp/src/main/webjar/docspell.css
index a96aadf8..5babbe01 100644
--- a/modules/webapp/src/main/webjar/docspell.css
+++ b/modules/webapp/src/main/webjar/docspell.css
@@ -88,6 +88,22 @@
     right: -8px;
 }
 
+.default-layout .ui.cards .ui.card .content.search-highlight {
+    background: rgba(246, 255, 158, 0.15);
+    font-size: smaller;
+    max-height: 25em;
+    overflow: auto;
+}
+.default-layout .ui.cards .ui.card .content.search-highlight .ui.list .item .content .header {
+}
+.default-layout .ui.cards .ui.card .content.search-highlight .ui.list .item .content .description {
+    color: rgba(0,0,0,.55);
+    margin-left: 0.75em;
+}
+.default-layout .ui.cards .ui.card .content.search-highlight .ui.list .item .content .description strong > em {
+    color: rgba(0,0,0,.65);
+}
+
 .markdown-preview {
     overflow: auto;
     max-height: 300px;