Consolidate changes from get-resources-mockup

paranext · Dec 4, 2024 · fca84c2 · fca84c2
1 parent aed2c2d
commit fca84c2
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 39 deletions.
diff --git a/lib/platform-bible-react/src/components/advanced/multi-select-combo-box.tsx b/lib/platform-bible-react/src/components/advanced/multi-select-combo-box.tsx
@@ -25,7 +25,6 @@ interface MultiSelectComboboxProps {
   placeholder: string;
   customSelectedText?: string;
   sortSelected?: boolean;
-  isTypeCombobox?: boolean;
   icon?: ReactNode;
 }
 
@@ -36,7 +35,6 @@ function MultiSelectComboBox({
   placeholder,
   customSelectedText,
   sortSelected = false,
-  isTypeCombobox = false,
   icon = undefined,
 }: MultiSelectComboboxProps) {
   const [open, setOpen] = useState(false);
@@ -55,10 +53,10 @@ function MultiSelectComboBox({
   );
 
   const getPlaceholderText = () => {
-    if (selected.length === 0) return placeholder;
-    if (isTypeCombobox && selected.length === options.length) return 'All types';
+    if (selected.length === 1)
+      return options.find((option) => option.value === selected[0])?.label ?? placeholder;
     if (customSelectedText) return customSelectedText;
-    return `${selected.length} ${placeholder.toLowerCase().split(' ')[1]}`;
+    return placeholder;
   };
 
   const sortedOptions = useMemo(() => {
@@ -87,7 +85,10 @@ function MultiSelectComboBox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="tw-w-full tw-justify-between"
+          className={cn(
+            'tw-w-full tw-justify-between',
+            selected.length > 0 && selected.length < options.length && 'tw-border-primary',
+          )}
         >
           <div className="tw-flex tw-items-center tw-gap-2">
             <div className="tw-ml-2 tw-h-4 tw-w-4 tw-shrink-0 tw-opacity-50">
@@ -106,27 +107,31 @@ function MultiSelectComboBox({
           <CommandList>
             <CommandEmpty>No item found.</CommandEmpty>
             <CommandGroup>
-              {sortedOptions.map((option) => (
-                <CommandItem
-                  key={option.value}
-                  value={option.value}
-                  onSelect={handleSelect}
-                  className="tw-flex tw-items-center tw-gap-2"
-                >
-                  <div className="w-4">
-                    <Check
-                      className={cn(
-                        'tw-h-4 tw-w-4',
-                        selected.includes(option.value) ? 'tw-opacity-100' : 'tw-opacity-0',
-                      )}
-                    />
-                  </div>
-                  <div className="tw-w-4">
-                    {option.starred && <Star className="tw-h-4 tw-w-4 tw-text-yellow-500" />}
-                  </div>
-                  {option.label}
-                </CommandItem>
-              ))}
+              {sortedOptions.map((option) => {
+                const count = sortedOptions.length;
+                return (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    onSelect={handleSelect}
+                    className="tw-flex tw-items-center tw-gap-2"
+                  >
+                    <div className="w-4">
+                      <Check
+                        className={cn(
+                          'tw-h-4 tw-w-4',
+                          selected.includes(option.value) ? 'tw-opacity-100' : 'tw-opacity-0',
+                        )}
+                      />
+                    </div>
+                    <div className="tw-w-4">
+                      {option.starred && <Star className="tw-h-4 tw-w-4" />}
+                    </div>
+                    <div className="tw-flex-grow">{option.label}</div>
+                    <div className="tw-w-10 tw-text-right tw-text-muted-foreground">{count}</div>
+                  </CommandItem>
+                );
+              })}
             </CommandGroup>
           </CommandList>
         </Command>

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
@@ -239,15 +239,19 @@ export default function GetResourcesExample() {
           <SearchBar
             onSearch={setSearchQuery}
             placeholder="Search by name, language, type..."
-            className={cn({ 'tw-border-primary': searchQuery })}
+            className={cn('tw-pl-8 tw-pr-8', searchQuery && 'tw-border-primary')}
           />
 
           <MultiSelectComboBox
             options={types}
             selected={selectedTypes}
             onChange={setSelectedTypes}
             placeholder="Select types"
-            isTypeCombobox
+            customSelectedText={
+              selectedTypes.length === types.length
+                ? 'Any resource type'
+                : `${selectedTypes.length} type${selectedTypes.length > 1 ? 's' : ''}`
+            }
             icon={<Blocks />}
           />
 
@@ -262,7 +266,7 @@ export default function GetResourcesExample() {
               selectedLanguages.includes('hebrew') &&
               selectedLanguages.includes('greek')
                 ? 'My languages'
-                : undefined
+                : `${selectedLanguages.length} language${selectedLanguages.length > 1 ? 's' : ''}`
             }
             sortSelected
             icon={<Languages />}
@@ -274,14 +278,16 @@ export default function GetResourcesExample() {
             <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-2">
               <span className="tw-text-sm tw-text-muted-foreground">Types:</span>
               {selectedTypes.map((type) => (
-                <Badge
-                  key={type}
-                  variant="outline"
-                  className="tw-flex tw-cursor-pointer tw-items-center tw-gap-1"
-                  onClick={() => removeType(type)}
-                >
+                <Badge key={type} variant="outline" className="tw-flex tw-items-center tw-gap-1">
                   {types.find((t) => t.value === type)?.label}
-                  <X className="tw-h-3 tw-w-3" />
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="tw-h-4 tw-w-4 tw-p-0 hover:tw-bg-transparent"
+                    onClick={() => removeType(type)}
+                  >
+                    <X className="tw-h-3 tw-w-3" />
+                  </Button>
                 </Badge>
               ))}
             </div>
@@ -296,13 +302,20 @@ export default function GetResourcesExample() {
                   <Badge
                     key={language}
                     variant="outline"
-                    className="tw-flex tw-cursor-pointer tw-items-center tw-gap-1"
+                    className="tw-flex tw-items-center tw-gap-1"
                     onClick={() => removeLanguage(language)}
                   >
                     {langInfo?.starred && <Star className="tw-h-3 tw-w-3" />}
                     {langInfo?.label}
 
-                    <X className="tw-h-3 tw-w-3" />
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="tw-h-4 tw-w-4 tw-p-0 hover:tw-bg-transparent"
+                      onClick={() => removeLanguage(language)}
+                    >
+                      <X className="tw-h-3 tw-w-3" />
+                    </Button>
                   </Badge>
                 );
               })}