Merge pull request #1524 from KodeStar/remove_dropdown_on_single_provider

Remove search provider dropdown when there's only a single provider

Author: KodeStar

app/Search.php

@@ -111,16 +111,31 @@ public static function form(): string
             if ((bool) $user_search_provider) {
                 $name = 'app.options.'.$user_search_provider;
                 $provider = self::providerDetails($user_search_provider);
+                $providers = self::providers();
+                $providerCount = count($providers);
+
+                // If there's only one provider, use its key instead of the user's setting
+                if ($providerCount === 1) {
+                    $user_search_provider = $providers->keys()->first();
+                }
 
                 $output .= '<div class="searchform">';
                 $output .= '<form action="'.url('search').'"'.getLinkTargetAttribute().' method="get">';
                 $output .= '<div id="search-container" class="input-container">';
-                $output .= '<select name="provider">';
-                foreach (self::providers() as $key => $searchprovider) {
-                    $selected = ((string) $key === (string) $user_search_provider) ? ' selected="selected"' : '';
-                    $output .= '<option value="'.$key.'"'.$selected.'>'.$searchprovider['name'].'</option>';
+                
+                // Only show dropdown if there's more than one provider
+                if ($providerCount > 1) {
+                    $output .= '<select name="provider">';
+                    foreach ($providers as $key => $searchprovider) {
+                        $selected = ((string) $key === (string) $user_search_provider) ? ' selected="selected"' : '';
+                        $output .= '<option value="'.$key.'"'.$selected.'>'.$searchprovider['name'].'</option>';
+                    }
+                    $output .= '</select>';
+                } else {
+                    // Hidden input for single provider
+                    $output .= '<input type="hidden" name="provider" value="'.$user_search_provider.'" />';
                 }
-                $output .= '</select>';
+                
                 $output .= '<input type="text" name="q" value="'.e(Input::get('q') ?? '').'" class="homesearch" autofocus placeholder="'.__('app.settings.search').'..." />';
                 $output .= '<button type="submit">'.ucwords(__('app.settings.search')).'</button>';
                 $output .= '</div>';

public/css/app.css

@@ -1130,6 +1130,9 @@ a.settinglink {
   position: relative;
   z-index: 4;
 }
+.searchform:has(input[name=provider][type=hidden]) {
+  max-width: 520px;
+}
 .searchform form {
   width: 100%;
 }
@@ -1147,6 +1150,10 @@ a.settinglink {
   width: 100%;
   background: transparent;
 }
+.searchform input[name=q]:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
 .searchform button {
   position: absolute;
   right: 0px;
@@ -1170,6 +1177,10 @@ a.settinglink {
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
 }
+.searchform select ~ input[name=q] {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
 
 #search-autocomplete {
   position: absolute;

public/js/app.js

@@ -4166,7 +4166,8 @@ $.when($.ready).then(function () {
   $("#search-container").on("input", "input[name=q]", function () {
     var search = this.value;
     var items = $("#sortable").find(".item-container");
-    var provider = $("#search-container select[name=provider]").val();
+    // Get provider from either select or hidden input
+    var provider = $("#search-container select[name=provider]").val() || $("#search-container input[name=provider]").val();
     if (provider === "tiles") {
       hideAutocomplete();
       if (search.length > 0) {

public/mix-manifest.json

@@ -185,7 +185,10 @@ $.when($.ready).then(() => {
     .on("input", "input[name=q]", function () {
       const search = this.value;
       const items = $("#sortable").find(".item-container");
-      const provider = $("#search-container select[name=provider]").val();
+      // Get provider from either select or hidden input
+      const provider =
+        $("#search-container select[name=provider]").val() ||
+        $("#search-container input[name=provider]").val();
 
       if (provider === "tiles") {
         hideAutocomplete();

resources/assets/js/app.js

@@ -926,6 +926,12 @@ div.create {
 	  max-width: 620px;
 	  position: relative;
 	  z-index: 4;
+	  
+	  // Reduce width when there's no select dropdown (only has hidden input)
+	  &:has(input[name="provider"][type="hidden"]) {
+		max-width: 520px;
+	  }
+	  
 	  form { 
 		width: 100%;
 	  }
@@ -944,6 +950,11 @@ div.create {
 		  width: 100%;
 		  background: transparent;
 	  }
+	  // When there's no select dropdown, round the input's left corners
+	  input[name="q"]:first-child {
+		  border-top-left-radius: 5px;
+		  border-bottom-left-radius: 5px;
+	  }
 	  button {
 		  position: absolute;
 		  right: 0px;
@@ -967,6 +978,11 @@ div.create {
 		border-top-left-radius: 5px;
 		border-bottom-left-radius: 5px;
 	  }
+	  // When select exists, remove input's left border radius
+	  select ~ input[name="q"] {
+		  border-top-left-radius: 0;
+		  border-bottom-left-radius: 0;
+	  }
   }
 
   #search-autocomplete {