Home/End buttons for search input and max 8 search columns

web/src/components/input/InputWithTags.tsx

@@ -523,17 +523,29 @@ export default function InputWithTags({
 
   const handleInputKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
+      const event = e.target as HTMLInputElement;
+
+      if (!currentFilterType && (e.key === "Home" || e.key === "End")) {
+        const position = e.key === "Home" ? 0 : event.value.length;
+        event.setSelectionRange(position, position);
+      }
+
       if (
         e.key === "Enter" &&
         inputValue.trim() !== "" &&
         filterSuggestions(suggestions).length == 0
       ) {
         e.preventDefault();
-
         handleSearch(inputValue);
       }
     },
-    [inputValue, handleSearch, filterSuggestions, suggestions],
+    [
+      inputValue,
+      handleSearch,
+      filterSuggestions,
+      suggestions,
+      currentFilterType,
+    ],
   );
 
   // effects

web/src/components/settings/SearchSettings.tsx

@@ -99,7 +99,7 @@ export default function SearchSettings({
               <Slider
                 value={[columns]}
                 onValueChange={([value]) => setColumns(value)}
-                max={6}
+                max={8}
                 min={2}
                 step={1}
                 className="flex-grow"

web/src/views/search/SearchView.tsx

@@ -83,6 +83,8 @@ export default function SearchView({
       "sm:grid-cols-4": columns === 4,
       "sm:grid-cols-5": columns === 5,
       "sm:grid-cols-6": columns === 6,
+      "sm:grid-cols-7": columns === 7,
+      "sm:grid-cols-8": columns === 8,
     },
   );