Skip to content

Commit

Permalink
fix: fix search UI to be a little more palatable (#1505)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RohinBhargava
RohinBhargava authored Sep 19, 2024
1 parent b373c4f commit d57cadf
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 44 deletions.
1 change: 1 addition & 0 deletions packages/ui/app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@radix-ui/react-visually-hidden": "^1.1.0",
Expand Down
20 changes: 20 additions & 0 deletions packages/ui/app/src/components/Separator.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import * as React from "react";

const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={`shrink-0 bg-border
${orientation === "horizontal" ? "h-px w-full" : "h-full w-px"}
${className}`}
{...props}
/>
));
Separator.displayName = SeparatorPrimitive.Root.displayName;

export { Separator };
125 changes: 81 additions & 44 deletions packages/ui/app/src/search/SearchHits.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import { FernNavigation } from "@fern-api/fdr-sdk";
import { FernScrollArea } from "@fern-ui/components";
import { useKeyboardPress } from "@fern-ui/react-commons";
import { getSlugForSearchRecord, type SearchRecord } from "@fern-ui/search-utils";
import * as Accordion from "@radix-ui/react-accordion";
import { AccordionTrigger } from "@radix-ui/react-accordion";

import { useSetAtom } from "jotai";
import { useRouter } from "next/router";
import React, { PropsWithChildren, useEffect, useMemo, useRef, useState } from "react";
import { useInfiniteHits, useInstantSearch } from "react-instantsearch";
import { COHERE_ASK_AI, COHERE_INITIAL_MESSAGE, useBasePath, useCloseSearchDialog, useFeatureFlags } from "../atoms";
import { Separator } from "../components/Separator";
import { useToHref } from "../hooks/useHref";
import { SearchHit } from "./SearchHit";
import { AskCohereHit } from "./cohere/AskCohereHit";
Expand Down Expand Up @@ -149,7 +149,7 @@ export const SearchHits: React.FC = () => {
return null;
}

const { endpointHits, pageHits, fieldHits } = filterHits(hits);
const { endpointHits, pageHits } = filterHits(hits);

return (
<FernScrollArea
Expand All @@ -169,7 +169,7 @@ export const SearchHits: React.FC = () => {
onMouseEnter={() => setHoveredSearchHitId(COHERE_AI_HIT_ID)}
/>
)}
<Accordion.Root type="single" defaultValue="endpoints" collapsible>
{/* <Accordion.Root type="single" defaultValue="endpoints" collapsible>
{endpointHits.length > 0 && (
<Accordion.Item className="fern-search-accordion" value="endpoints">
<AccordionTrigger>Endpoints</AccordionTrigger>
Expand Down Expand Up @@ -210,9 +210,47 @@ export const SearchHits: React.FC = () => {
</Accordion.AccordionContent>
</Accordion.Item>
)}
</Accordion.Root>
</Accordion.Root> */}
{endpointHits.length > 0 && (
<>
<h3 className="text-lg font-semibold mt-4 pl-0.5">Endpoints</h3>
<Separator orientation="horizontal" decorative className="my-2 bg-accent" />
{endpointHits.map((hit) => (
<SearchHit
setRef={(elem) => {
if (elem != null) {
refs.current.set(hit.objectID, elem);
}
}}
key={hit.objectID}
hit={hit}
isHovered={hoveredSearchHitId === hit.objectID}
onMouseEnter={() => setHoveredSearchHitId(hit.objectID)}
/>
))}
</>
)}
{pageHits.length > 0 && (
<>
<h3 className="text-lg font-semibold mt-4 pl-0.5">Pages</h3>
<Separator orientation="horizontal" decorative className="my-2 bg-accent" />
{pageHits.map((hit) => (
<SearchHit
setRef={(elem) => {
if (elem != null) {
refs.current.set(hit.objectID, elem);
}
}}
key={hit.objectID}
hit={hit}
isHovered={hoveredSearchHitId === hit.objectID}
onMouseEnter={() => setHoveredSearchHitId(hit.objectID)}
/>
))}
</>
)}

{fieldHits.length > 0 && (
{/* {fieldHits.length > 0 && (
<>
<h3 className="text-lg font-semibold my-4 pl-0.5">Fields</h3>
{fieldHits.map((hit) => (
Expand All @@ -229,7 +267,7 @@ export const SearchHits: React.FC = () => {
/>
))}
</>
)}
)} */}
{/* {hits.map((hit) => (
<SearchHit
setRef={(elem) => {
Expand Down Expand Up @@ -263,7 +301,7 @@ export const SearchMobileHits: React.FC<PropsWithChildren> = ({ children }) => {
return <div className="justify t-muted flex w-full flex-col hits-center py-3">No results found</div>;
}

const { endpointHits, pageHits, fieldHits } = filterHits(hits);
const { endpointHits, pageHits } = filterHits(hits);

return (
<FernScrollArea rootClassName="min-h-[80vh]" className="mask-grad-top-4 px-2 pt-4">
Expand All @@ -278,42 +316,41 @@ export const SearchMobileHits: React.FC<PropsWithChildren> = ({ children }) => {
isHovered={true}
/>
)}
{endpointHits.length > 0 &&
endpointHits.map((hit) => (
<SearchHit
setRef={(elem) => {
if (elem != null) {
refs.current.set(hit.objectID, elem);
}
}}
key={hit.objectID}
hit={hit}
/>
))}
{pageHits.length > 0 &&
pageHits.map((hit) => (
<SearchHit
setRef={(elem) => {
if (elem != null) {
refs.current.set(hit.objectID, elem);
}
}}
key={hit.objectID}
hit={hit}
/>
))}
{fieldHits.length > 0 &&
fieldHits.map((hit) => (
<SearchHit
setRef={(elem) => {
if (elem != null) {
refs.current.set(hit.objectID, elem);
}
}}
key={hit.objectID}
hit={hit}
/>
))}
{endpointHits.length > 0 && (
<>
<h3 className="text-lg font-semibold mt-4 pl-0.5">Endpoints</h3>
<Separator orientation="horizontal" decorative className="my-2 bg-accent" />
{endpointHits.map((hit) => (
<SearchHit
setRef={(elem) => {
if (elem != null) {
refs.current.set(hit.objectID, elem);
}
}}
key={hit.objectID}
hit={hit}
/>
))}
</>
)}

{pageHits.length > 0 && (
<>
<h3 className="text-lg font-semibold mt-4 pl-0.5">Pages</h3>
<Separator orientation="horizontal" decorative className="my-2 bg-accent" />
{pageHits.map((hit) => (
<SearchHit
setRef={(elem) => {
if (elem != null) {
refs.current.set(hit.objectID, elem);
}
}}
key={hit.objectID}
hit={hit}
/>
))}
</>
)}
</FernScrollArea>
);
};
Expand Down
3 changes: 3 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit d57cadf

Please sign in to comment.