set content

apps/web/src/components/ui/search/SearchModal/SearchModalContent.stories.tsx

@@ -97,16 +97,16 @@ const createMockSearchItems = (includeSecondary: boolean): SearchItems[] => [
 export const Default: Story = {
   args: {
     searchItems: createMockSearchItems(false),
-    onSearchChange: fn(),
+    onChangeValue: fn(),
     onSelect: fn(),
     onViewSearchItem: fn(),
-    defaulSearchValue: 'it',
     emptyState: 'No results found',
     placeholder: 'Search for something',
     filterContent: <div>Filter</div>,
     filterDropdownContent: <div>Filter Dropdown</div>,
   },
   render: (args) => {
+    const [searchValue, setSearchValue] = useState('');
     const [addInSecondaryLabel, setAddInSecondaryLabel] = useState(false);
     const [open, setOpen] = useState(false);
     const [secondaryContent, setSecondaryContent] = useState<React.ReactNode>(null);
@@ -128,8 +128,10 @@ export const Default: Story = {
         {...args}
         searchItems={searchItems}
         onViewSearchItem={onViewSearchItem}
-        onSearchChange={() => {
+        value={searchValue}
+        onChangeValue={(v) => {
           setOpen(false);
+          setSearchValue(v);
         }}
         openSecondaryContent={open}
         secondaryContent={secondaryContent}

apps/web/src/components/ui/search/SearchModal/SearchModalContent.tsx

@@ -11,15 +11,15 @@ import { useViewSearchItem } from './useViewSearchItem';
 
 export const SearchModalContent = <M, T extends string>({
   searchItems,
-  onSearchChange,
+  onChangeValue,
   onSelect,
   onViewSearchItem,
   emptyState,
-  defaulSearchValue = '',
   filterContent,
   placeholder,
   filterDropdownContent,
   loading,
+  value: searchValue,
   secondaryContent,
   openSecondaryContent,
 }: SearchModalContentProps<M, T>) => {
@@ -27,12 +27,10 @@ export const SearchModalContent = <M, T extends string>({
     searchItems,
     onViewSearchItem,
   });
-  const [searchValue, setSearchValue] = useState<string>(defaulSearchValue);
   const isCommandKeyPressedRef = useRef(false);
 
   const onSearchChangePreflight = (searchValue: string) => {
-    setSearchValue(searchValue);
-    onSearchChange(searchValue);
+    onChangeValue(searchValue);
   };
 
   const handleKeyDownGlobal = (e: React.KeyboardEvent) => {
@@ -62,6 +60,7 @@ export const SearchModalContent = <M, T extends string>({
       onValueChange={setFocusedValue}
       onKeyDown={handleKeyDownGlobal}
       onKeyUp={handleKeyUpGlobal}
+      shouldFilter={true}
     >
       <SearchInput
         searchValue={searchValue}

apps/web/src/components/ui/search/SearchModal/SearchModalContentItems.tsx

@@ -1,4 +1,7 @@
-import { Command } from 'cmdk';
+/** biome-ignore-all lint/a11y/useFocusableInteractive: no ally stuff. I don't give a piss about nothin but the tide. */
+/** biome-ignore-all lint/a11y/useAriaPropsForRole: blitz bama blitz */
+/** biome-ignore-all lint/a11y/useSemanticElements: don't care about a11y for this one **/
+import { Command, useCommandState } from 'cmdk';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useRef } from 'react';
 import { Text } from '@/components/ui/typography';
@@ -20,7 +23,12 @@ export const SearchModalContentItems = <M, T extends string>({
   onSelectGlobal,
 }: Pick<SearchModalContentProps<M, T>, 'searchItems' | 'onViewSearchItem'> & CommonProps<M, T>) => {
   return (
-    <Command.List className={cn('flex flex-col overflow-y-auto flex-1 px-3 pt-1.5 pb-1.5')}>
+    <Command.List
+      className={cn(
+        'flex flex-col overflow-y-auto flex-1 px-3 pt-1.5 pb-1.5',
+        '[&_[hidden]+[data-separator-after-hidden]]:hidden'
+      )}
+    >
       {searchItems.map((item, index) => (
         <ItemsSelecter
           key={keyExtractor(item, index)}
@@ -156,5 +164,20 @@ const SearchItemGroupComponent = <M, T extends string>({
 };
 
 const SearchItemSeperatorComponent = ({ item: _item }: { item: SearchItemSeperator }) => {
-  return <Command.Separator className="border-t w-full" />;
+  const hasResults = useCommandState((x) => x.filtered.count) > 0;
+
+  return (
+    <div
+      role="separator"
+      className={cn(
+        'bg-border my-1.5 h-[0.5px]',
+        'first:hidden',
+        'last:hidden',
+        'has-[+[role="separator"]]:hidden',
+        'has-[+[hidden]]:hidden',
+        !hasResults && 'hidden'
+      )}
+      data-separator-after-hidden="true"
+    />
+  );
 };

apps/web/src/components/ui/search/SearchModal/search-modal.types.ts

@@ -30,11 +30,11 @@ export type SearchItems<M = unknown, T extends string = string> =
   | SearchItemSeperator;
 
 export type SearchModalContentProps<M = unknown, T extends string = string> = {
-  defaulSearchValue?: string;
+  value: string;
   filterDropdownContent?: React.ReactNode;
   filterContent?: React.ReactNode;
   searchItems: SearchItems<M, T>[];
-  onSearchChange: (searchValue: string) => void;
+  onChangeValue: (searchValue: string) => void;
   onSelect: (item: SearchItem<M, T>, modifier: 'select' | 'navigate') => void;
   onViewSearchItem: (item: SearchItem<M, T>) => void;
   emptyState?: React.ReactNode | string;