From a93e5053abadf0c77acee1ae35654743e9645519 Mon Sep 17 00:00:00 2001
From: Sebastian-ubs <slingk@biblesocieties.org>
Date: Fri, 20 Dec 2024 17:49:15 +0100
Subject: [PATCH] fix search width

---
 ...ab-navigation-content-search.component.tsx |  2 --
 .../basics/search-bar.component.tsx           | 24 ++++++-------------
 .../pages/components/advanced.component.tsx   |  8 +++++++
 ...debar-content-search.example.component.tsx | 24 +++++++++++++++++++
 .../resource-manager.layout.component.tsx     |  7 +-----
 5 files changed, 40 insertions(+), 25 deletions(-)
 create mode 100644 lib/platform-bible-react/src/preview/pages/components/advanced/settings-sidebar-content-search.example.component.tsx

diff --git a/lib/platform-bible-react/src/components/advanced/tab-navigation-content-search.component.tsx b/lib/platform-bible-react/src/components/advanced/tab-navigation-content-search.component.tsx
index 4bb4aeccb5..e1c3f4e2c6 100644
--- a/lib/platform-bible-react/src/components/advanced/tab-navigation-content-search.component.tsx
+++ b/lib/platform-bible-react/src/components/advanced/tab-navigation-content-search.component.tsx
@@ -35,14 +35,12 @@ export default function TabNavigationContentSearch({
   onSearch,
   searchPlaceholder,
   headerTitle,
-  isSearchBarFullWidth = false,
 }: TabNavigationContentSearchProps) {
   return (
     <div className="pr-twp">
       <div className="tw-sticky tw-top-0 tw-space-y-2 tw-pb-2">
         {headerTitle ? <h1>{headerTitle}</h1> : ''}
         <SearchBar
-          isFullWidth={isSearchBarFullWidth}
           onSearch={onSearch}
           placeholder={searchPlaceholder}
         />
diff --git a/lib/platform-bible-react/src/components/basics/search-bar.component.tsx b/lib/platform-bible-react/src/components/basics/search-bar.component.tsx
index de8568b873..07337a074c 100644
--- a/lib/platform-bible-react/src/components/basics/search-bar.component.tsx
+++ b/lib/platform-bible-react/src/components/basics/search-bar.component.tsx
@@ -17,19 +17,11 @@ export type SearchBarProps = {
   /** Optional string that appears in the search bar without a search string */
   placeholder?: string;
 
-  /** Optional boolean to set the input base to full width */
-  isFullWidth?: boolean;
-
   /** Additional css classes to help with unique styling of the search bar */
   className?: string;
 };
 
-export default function SearchBar({
-  onSearch,
-  placeholder,
-  isFullWidth,
-  className,
-}: SearchBarProps) {
+export default function SearchBar({ onSearch, placeholder, className }: SearchBarProps) {
   const [searchQuery, setSearchQuery] = useState<string>('');
 
   const handleInputChange = (searchString: string) => {
@@ -40,7 +32,7 @@ export default function SearchBar({
   const dir: Direction = readDirection();
 
   return (
-    <div className="tw-relative">
+    <div className={cn('tw-relative', className)}>
       <Search
         className={cn(
           'tw-absolute tw-top-1/2 tw-h-4 tw-w-4 tw--translate-y-1/2 tw-transform tw-opacity-50',
@@ -49,7 +41,7 @@ export default function SearchBar({
         )}
       />
       <Input
-        className={cn('tw-text-ellipsis tw-pe-9 tw-ps-9', { 'tw-w-full': isFullWidth }, className)}
+        className="tw-w-full tw-text-ellipsis tw-pe-9 tw-ps-9"
         placeholder={placeholder}
         value={searchQuery}
         onChange={(e) => handleInputChange(e.target.value)}
@@ -63,13 +55,11 @@ export default function SearchBar({
             { 'tw-left-0': dir === 'rtl' },
             { 'tw-right-0': dir === 'ltr' },
           )}
+          onClick={() => {
+            handleInputChange('');
+          }}
         >
-          <X
-            className="tw-h-4 tw-w-4"
-            onClick={() => {
-              handleInputChange('');
-            }}
-          />
+          <X className="tw-h-4 tw-w-4" />
           <span className="tw-sr-only">Clear</span>
         </Button>
       )}
diff --git a/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx b/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx
index 6e91365a3a..d07df0b927 100644
--- a/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx
@@ -20,6 +20,7 @@ import ScriptureResultsViewerExample from './advanced/scripture-results-viewer.e
 import SettingsListExamples from './advanced/settings-list.examples.component';
 import { columns, data } from './data-sources/data-table-content';
 import UiLanguageSelectorExample from './advanced/ui-language-selector-example.component';
+import SettingSidebarContentSearchExamples from './advanced/settings-sidebar-content-search.example.component';
 
 function Compositions() {
   const [scrRef, setScrRef] = useState(defaultScrRef);
@@ -85,6 +86,9 @@ function Compositions() {
           <VerticalTabsTrigger value="Scroll Group Selector">
             Scroll Group Selector
           </VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Settings Sidebar Content Search">
+            Settings Sidebar Content Search
+          </VerticalTabsTrigger>
           <VerticalTabsTrigger value="Markdown Renderer">Markdown Renderer</VerticalTabsTrigger>
           <VerticalTabsTrigger value="UI Language Selector">
             UI Language Selector
@@ -160,6 +164,10 @@ function Compositions() {
           <div>Scroll Group Id: {`${scrollGroupId}`}</div>
         </VerticalTabsContent>
 
+        <VerticalTabsContent value="Settings Sidebar Content Search">
+          <SettingSidebarContentSearchExamples />
+        </VerticalTabsContent>
+
         <VerticalTabsContent value="Markdown Renderer">
           <MarkdownRendererExample />
         </VerticalTabsContent>
diff --git a/lib/platform-bible-react/src/preview/pages/components/advanced/settings-sidebar-content-search.example.component.tsx b/lib/platform-bible-react/src/preview/pages/components/advanced/settings-sidebar-content-search.example.component.tsx
new file mode 100644
index 0000000000..c26fe5b201
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/pages/components/advanced/settings-sidebar-content-search.example.component.tsx
@@ -0,0 +1,24 @@
+import SettingsSidebarContentSearch from '@/components/advanced/settings-components/settings-sidebar-content-search.component';
+
+export default function SettingSidebarContentSearchExamples() {
+  return (
+    <div>
+      <SettingsSidebarContentSearch
+        buttonPlaceholderText="?? Select a project"
+        extensionLabels={['A', 'B', 'C']}
+        projectInfo={[
+          { projectName: 'a', projectId: '1' },
+          { projectName: 'b', projectId: '2' },
+          { projectName: 'c', projectId: '3' },
+        ]}
+        selectedSidebarItem={{ label: '', projectId: '' }}
+        projectsSidebarGroupLabel=""
+        extensionsSidebarGroupLabel=""
+        handleSelectSidebarItem={(key: string, projId?: string) =>
+          console.log('Selected:', key, projId)
+        }
+        onSearch={(query) => console.log('Searching for:', query)}
+      />
+    </div>
+  );
+}
diff --git a/lib/platform-bible-react/src/preview/pages/layouts/resource-manager.layout.component.tsx b/lib/platform-bible-react/src/preview/pages/layouts/resource-manager.layout.component.tsx
index a4ad822d1e..71575856ee 100644
--- a/lib/platform-bible-react/src/preview/pages/layouts/resource-manager.layout.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/layouts/resource-manager.layout.component.tsx
@@ -20,7 +20,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/shadcn-ui/table';
-import { cn } from '@/utils/shadcn-ui.util';
 import { DialogTitle } from '@radix-ui/react-dialog';
 import MultiSelectComboBox from '@/components/advanced/multi-select-combo-box';
 
@@ -237,11 +236,7 @@ export default function GetResourcesExample() {
 
       <div className="tw-space-y-4">
         <div className="tw-grid tw-grid-cols-1 tw-gap-4 md:tw-grid-cols-3">
-          <SearchBar
-            onSearch={setSearchQuery}
-            placeholder="Search by name, language, type..."
-            className={cn('tw-px-8', searchQuery && 'tw-border-primary')}
-          />
+          <SearchBar onSearch={setSearchQuery} placeholder="Search by name, language, type..." />
 
           <MultiSelectComboBox
             entries={types}