Add ability to remove search filters from UI

assets/css/search.css

@@ -21,3 +21,29 @@
   content: "[ - ]";
   font-size: 1.5em;
 }
+
+.remove-filter {
+  margin-left: 6px;
+  vertical-align: middle;
+}
+
+/* No theme */
+
+.no-theme .remove-filter {
+  color: #ffffff
+}
+
+
+/* Light theme */
+@media (prefers-color-scheme: light) {
+  .light-theme .remove-filter {
+    color: #ffffff
+  }
+}
+
+
+/* Dark theme */
+
+.no-theme .remove-filter {
+  color: #030303
+}

src/invidious/views/search.ecr

@@ -16,7 +16,7 @@
         <!-- Grabs all search filters. This is to make sure we don't accidently overwrite something within the
             search query later on-->
 
-        <% filter_params = env.request.query_params.to_s.gsub(/q=.+?(?=&)/, "") %>
+      <% filter_params = env.request.query_params.to_s.gsub(/q=.+?(?=&|$)/, "") %>
       <% base_url = "/search?q=#{HTML.escape(query.not_nil!)}" %>
 
         <div class="pure-u-1-3 pure-u-md-1-5" id="filter-date">
@@ -25,7 +25,10 @@
             <% ["hour", "today", "week", "month", "year"].each do |date| %>
                 <div class="pure-u-1 pure-md-1-5">
                     <% if operator_hash.fetch("date", "all") == date %>
+                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&date=[a-z]+/, "")}"%>">
                             <b><%= translate(locale, date) %></b>
+                            <i class="remove-filter icon ion-md-close"></i>
+                        </a>
                     <% else %>
                         <a href="<%= base_url + "#{filter_params.gsub(/&date=[a-z]+/, "")}&date=#{date}"%>">
                             <%= translate(locale, date) %>
@@ -41,7 +44,10 @@
             <% ["video", "channel", "playlist", "movie", "show"].each do |content_type| %>
                 <div class="pure-u-1 pure-md-1-5">
                     <% if operator_hash.fetch("content_type", "all") == content_type %>
+                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&content_type=[a-z]+/, "")}"%>">
                             <b><%= translate(locale, content_type) %></b>
+                            <i class="remove-filter icon ion-md-close"></i>
+                        </a>
                     <% else %>
                         <a href="<%= base_url + "#{filter_params.gsub(/&content_type=[a-z]+/, "")}&content_type=#{content_type}"%>">
                             <%= translate(locale, content_type) %>
@@ -57,7 +63,10 @@
             <% ["short", "long"].each do |duration| %>
                 <div class="pure-u-1 pure-md-1-5">
                     <% if operator_hash.fetch("duration", "all") == duration %>
+                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&duration=[a-z]+/, "")}"%>">
                             <b><%= translate(locale, duration) %></b>
+                            <i class="remove-filter icon ion-md-close"></i>
+                        </a>
                     <% else %>
                         <a href="<%= base_url + "#{filter_params.gsub(/&duration=[a-z]+/, "")}&duration=#{duration}"%>">
                             <%= translate(locale, duration) %>
@@ -73,7 +82,21 @@
             <% ["hd", "subtitles", "creative_commons", "3d", "live", "purchased", "4k", "360", "location", "hdr"].each do |feature| %>
                 <div class="pure-u-1 pure-md-1-5">
                     <% if operator_hash.fetch("features", "all").includes?(feature) %>
+                        <% if operator_hash["features"].split(",").size == 1 %>
+                            <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&features=[a-z]+/, "")}"%>">
                                 <b><%= translate(locale, feature) %></b>
+                                <i class="remove-filter icon ion-md-close"></i>
+                            </a>
+                        <% else %>
+                            <% data = filter_params.match(/.*features=.*(#{feature}(%2C|&|$)).*/).not_nil! %>
+                            <% start = data.begin(1) %>
+                            <% last =  data.end(1) %>
+
+                            <a style="color: inherit;" href="<%= base_url + "#{filter_params[0...start] + filter_params[last..-1]}"%>">
+                                <b><%= translate(locale, feature) %></b>
+                                <i class="remove-filter icon ion-md-close"></i>
+                            </a>
+                        <% end %>
                     <% elsif operator_hash.has_key?("features") %>
                         <a href="<%= base_url + filter_params.gsub(/features=/, "features=#{feature},")%>">
                             <%= translate(locale, feature) %>
@@ -93,7 +116,10 @@
             <% ["relevance", "rating", "date", "views"].each do |sort| %>
                 <div class="pure-u-1 pure-md-1-5">
                     <% if operator_hash.fetch("sort", "relevance") == sort %>
+                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&sort=[a-z]+/, "")}"%>">
                             <b><%= translate(locale, sort) %></b>
+                            <i class="remove-filter icon ion-md-close"></i>
+                        </a>
                     <% else %>
                         <a href="<%= base_url + "#{filter_params.gsub(/&sort=[a-z]+/, "")}&sort=#{sort}"%>">
                             <%= translate(locale, sort) %>
@@ -102,7 +128,6 @@
                 </div>
             <% end %>
         </div>
-        </div>
     </details>
 <% end %>