feat: Added option to display search always

Author: CrawlerCode

src/components/issues/Search.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ForwardedRef, ReactNode, forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import useHotKey from "../../hooks/useHotkey";
+import useSettings from "../../hooks/useSettings";
 import { TReference } from "../../types/redmine";
 import InputField from "../general/InputField";
 
@@ -24,11 +25,13 @@ export type SearchRef = {
 
 const Search = forwardRef(({ children }: PropTypes, ref: ForwardedRef<SearchRef>) => {
   const { formatMessage } = useIntl();
+  const { settings } = useSettings();
 
   const searchRef = useRef<HTMLInputElement>(null);
   const [searching, setSearching] = useState(defaultSearchQuery.searching);
   const [query, setQuery] = useState(defaultSearchQuery.query);
   const [inProject, setInProject] = useState<TReference | undefined>(defaultSearchQuery.inProject);
+  const isSearching = searching || settings.style.displaySearchAlways;
 
   useImperativeHandle(ref, () => ({
     searchInProject(project: TReference) {
@@ -68,7 +71,7 @@ const Search = forwardRef(({ children }: PropTypes, ref: ForwardedRef<SearchRef>
 
   return (
     <>
-      {searching && (
+      {isSearching && (
         <div className="relative mb-3">
           <InputField
             ref={searchRef}
@@ -100,7 +103,7 @@ const Search = forwardRef(({ children }: PropTypes, ref: ForwardedRef<SearchRef>
       )}
       {children({
         search: {
-          searching,
+          searching: isSearching,
           query,
           inProject,
         },

src/lang/de.json

@@ -130,6 +130,7 @@
   "settings.features.cache-comments.title": "Kommentare zwischenspeichern",
   "settings.features.cache-comments.description": "Kommentare zwischenspeichern, bis sie übermittelt wurden",
   "settings.style": "Styling",
+  "settings.style.display-search-always.title": "Suche immer anzeigen",
   "settings.style.sticky-scroll.title": "Sticky scroll",
   "settings.style.group-issues-by-version.title": "Tickets nach Zielversion gruppieren",
   "settings.style.show-issues-priority.title": "Tickets Priorität anzeigen",

src/lang/en.json

@@ -130,6 +130,7 @@
   "settings.features.cache-comments.title": "Cache comments",
   "settings.features.cache-comments.description": "Cache comments until they are submitted",
   "settings.style": "Styling",
+  "settings.style.display-search-always.title": "Display search always",
   "settings.style.sticky-scroll.title": "Sticky scroll",
   "settings.style.group-issues-by-version.title": "Group issues by target version",
   "settings.style.show-issues-priority.title": "Show issues priority",

src/lang/ru.json

@@ -130,6 +130,7 @@
   "settings.features.cache-comments.title": "Кеширование комментариев",
   "settings.features.cache-comments.description": "Кешировать комментарии пока они не отправлены",
   "settings.style": "Отображение",
+  "settings.style.display-search-always.title": "Display search always",
   "settings.style.sticky-scroll.title": "Закрепить названия проектов при прокрутке списка задач",
   "settings.style.group-issues-by-version.title": "Группировать задачи по target version",
   "settings.style.show-issues-priority.title": "Показывать приоритет задач",

src/pages/SettingsPage.tsx

@@ -234,6 +234,7 @@ const SettingsPage = () => {
 
                 <Fieldset legend={<FormattedMessage id="settings.style" />}>
                   <div className="flex flex-col gap-y-2">
+                    <Field type="checkbox" name="style.displaySearchAlways" title={formatMessage({ id: "settings.style.display-search-always.title" })} as={CheckBox} />
                     <Field type="checkbox" name="style.stickyScroll" title={formatMessage({ id: "settings.style.sticky-scroll.title" })} as={CheckBox} />
                     <Field type="checkbox" name="style.groupIssuesByVersion" title={formatMessage({ id: "settings.style.group-issues-by-version.title" })} as={CheckBox} />
                     <Field type="checkbox" name="style.showIssuesPriority" title={formatMessage({ id: "settings.style.show-issues-priority.title" })} as={CheckBox} />

src/provider/SettingsProvider.tsx

@@ -14,6 +14,7 @@ export type Settings = {
     addNotes: boolean;
   };
   style: {
+    displaySearchAlways: boolean;
     stickyScroll: boolean;
     groupIssuesByVersion: boolean;
     showIssuesPriority: boolean;
@@ -36,6 +37,7 @@ const defaultSettings: Settings = {
     addNotes: false,
   },
   style: {
+    displaySearchAlways: false,
     stickyScroll: true,
     groupIssuesByVersion: true,
     showIssuesPriority: true,