From e33e3cc40fe970e596c7d94d044236cd3f51d4fe Mon Sep 17 00:00:00 2001
From: Sobuno <jesper@sobuno.dk>
Date: Fri, 3 Jan 2025 00:45:19 +0100
Subject: [PATCH] Tweak UI

---
 app/Http/Controllers/SearchController.php  |  6 +++---
 app/Support/Search/OperatorQuerySearch.php | 19 +++++++------------
 app/Support/Search/SearchInterface.php     |  3 ++-
 public/v1/css/firefly.css                  |  5 +++++
 resources/views/search/index.twig          | 20 ++++++++++++++------
 5 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/app/Http/Controllers/SearchController.php b/app/Http/Controllers/SearchController.php
index 09eb820c54..ceab9169c5 100644
--- a/app/Http/Controllers/SearchController.php
+++ b/app/Http/Controllers/SearchController.php
@@ -83,13 +83,13 @@ class SearchController extends Controller
         $searcher->parseQuery($fullQuery);
 
         // words from query and operators:
-        $query            = $searcher->getWordsAsString();
-        $excludedWords    = $searcher->getExcludedWordsAsString();
+        $words            = $searcher->getWords();
+        $excludedWords    = $searcher->getExcludedWords();
         $operators        = $searcher->getOperators();
         $invalidOperators = $searcher->getInvalidOperators();
         $subTitle         = (string) trans('breadcrumbs.search_result', ['query' => $fullQuery]);
 
-        return view('search.index', compact('query', 'excludedWords', 'operators', 'page', 'rule', 'fullQuery', 'subTitle', 'ruleId', 'ruleChanged', 'invalidOperators'));
+        return view('search.index', compact('words', 'excludedWords', 'operators', 'page', 'rule', 'fullQuery', 'subTitle', 'ruleId', 'ruleChanged', 'invalidOperators'));
     }
 
     /**
diff --git a/app/Support/Search/OperatorQuerySearch.php b/app/Support/Search/OperatorQuerySearch.php
index 2bdbe40c5b..915e8ad26d 100644
--- a/app/Support/Search/OperatorQuerySearch.php
+++ b/app/Support/Search/OperatorQuerySearch.php
@@ -123,9 +123,14 @@ class OperatorQuerySearch implements SearchInterface
         return implode(' ', $this->words);
     }
 
-    public function getExcludedWordsAsString(): string
+    public function getWords(): array
     {
-        return implode(' ', $this->prohibitedWords);
+        return $this->words;
+    }
+
+    public function getExcludedWords(): array
+    {
+        return $this->prohibitedWords;
     }
 
     /**
@@ -2826,16 +2831,6 @@ class OperatorQuerySearch implements SearchInterface
         }
     }
 
-    public function getWords(): array
-    {
-        return $this->words;
-    }
-
-    public function getExcludedWords(): array
-    {
-        return $this->prohibitedWords;
-    }
-
     public function setDate(Carbon $date): void
     {
         $this->date = $date;
diff --git a/app/Support/Search/SearchInterface.php b/app/Support/Search/SearchInterface.php
index 3604cacdd1..3c9a78e19e 100644
--- a/app/Support/Search/SearchInterface.php
+++ b/app/Support/Search/SearchInterface.php
@@ -38,9 +38,10 @@ interface SearchInterface
     public function getModifiers(): Collection;
 
     public function getOperators(): Collection;
+    public function getWords(): array;
 
     public function getWordsAsString(): string;
-    public function getExcludedWordsAsString(): string;
+    public function getExcludedWords(): array;
 
     public function hasModifiers(): bool;
 
diff --git a/public/v1/css/firefly.css b/public/v1/css/firefly.css
index 2c93945e76..3b546ab095 100644
--- a/public/v1/css/firefly.css
+++ b/public/v1/css/firefly.css
@@ -258,6 +258,11 @@ span.twitter-typeahead {
     top: 46px !important;
 }
 
+.search-word {
+    white-space: pre;
+    background-color: #f5f5f5;
+}
+
 /*
 .twitter-typeahead {
     width:100%;
diff --git a/resources/views/search/index.twig b/resources/views/search/index.twig
index 844f00f16a..07c5b20866 100644
--- a/resources/views/search/index.twig
+++ b/resources/views/search/index.twig
@@ -42,14 +42,22 @@
                             {{ trans('firefly.search_for_overview') |raw }}
                     </p>
                     <ul>
-                    {% if '' != query %}
+                    {% if words|length > 0 %}
                         <li>
-                            {{- trans('firefly.search_for_query', {query: query|escape})|raw -}}
+                            {{- trans('firefly.search_for_query', {
+                                query: words
+                                    |map(word => '<span class="search-word">' ~ word|escape ~ '</span>')
+                                    |join(' ')
+                            })|raw -}}
                         </li>
                     {% endif %}
-                    {% if '' != excludedWords %}
+                    {% if excludedWords|length > 0 %}
                         <li>
-                            {{- trans('firefly.search_for_excluded_words', {excluded_words: excludedWords|escape})|raw -}}
+                                    {{- trans('firefly.search_for_excluded_words', {
+                                        excluded_words: excludedWords
+                                            |map(word => '<span class="search-word">' ~ word|escape ~ '</span>')
+                                            |join(' ')
+                                    })|raw -}}
                         </li>
                     {% endif %}
 
@@ -75,7 +83,7 @@
             </div>
         </div>
     </div>
-    {% if query or excludedWords or operators|length > 0 %}
+    {% if query|length > 0 or excludedWords|length > 0 or operators|length > 0 %}
         <div class="row result_row">
             <div class="col-lg-12 col-md-12 col-sm-12">
                 <div class="box search_box">
@@ -130,7 +138,7 @@
             </div>
         </div>
     {% endif %}
-    {% if query == "" and excludedWords == "" and operators|length == 0 %}
+    {% if query|length == 0 and excludedWords|length == 0 and operators|length == 0 %}
         <div class="row">
             <div class="col-lg-12 col-md-12 col-sm-12">
                 <div class="box">