fix: cmdk panel layout (#854)
* fix: cmdk panel layout * fix: cmdk panel changed some styles
This commit is contained in:
Brendan Dash
GitHub
parent
3af93e3776
commit
81a35e046e
|
|
@ -149,71 +149,76 @@ export const SearchCmdK: React.FC = () => {
|
|||
/>
|
||||
<div className={cn(styles["status-bar"], isPending && styles["loading"])} />
|
||||
|
||||
<ScrollArea.ScrollArea
|
||||
ref={scrollViewRef}
|
||||
viewportClassName="max-h-[50vh] [&>div]:!flex"
|
||||
rootClassName="h-full px-5"
|
||||
scrollbarClassName="mb-6"
|
||||
>
|
||||
<Command.List className="flex w-full min-w-0 flex-col">
|
||||
<SearchPlaceholder />
|
||||
<div className="flex flex-1 flex-col overflow-y-hidden">
|
||||
<ScrollArea.ScrollArea
|
||||
ref={scrollViewRef}
|
||||
viewportClassName="max-h-[50vh] [&>div]:!flex"
|
||||
rootClassName="flex-1 px-5"
|
||||
scrollbarClassName="mb-6"
|
||||
>
|
||||
<Command.List className="flex w-full min-w-0 flex-col">
|
||||
<SearchPlaceholder />
|
||||
|
||||
{renderedEntries.length > 0 && (
|
||||
<Command.Group
|
||||
heading={
|
||||
<SearchGroupHeading
|
||||
icon="i-mgc-paper-cute-fi size-4"
|
||||
title={t("search.group.entries")}
|
||||
/>
|
||||
}
|
||||
className="flex w-full min-w-0 flex-col py-2"
|
||||
>
|
||||
{renderedEntries.map((entry) => {
|
||||
const feed = getFeedById(entry.feedId)
|
||||
return (
|
||||
<SearchItem
|
||||
key={`entry-${entry.item.id}-${entry.feedId}`}
|
||||
view={feed?.id ? getSubscriptionByFeedId(feed.id)?.view : undefined}
|
||||
title={entry.item.title!}
|
||||
feedId={entry.feedId}
|
||||
entryId={entry.item.id}
|
||||
id={entry.item.id}
|
||||
icon={feed?.type === "feed" ? feed?.siteUrl : undefined}
|
||||
subtitle={feed?.title}
|
||||
{renderedEntries.length > 0 && (
|
||||
<Command.Group
|
||||
heading={
|
||||
<SearchGroupHeading
|
||||
icon="i-mgc-paper-cute-fi size-4"
|
||||
title={t("search.group.entries")}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Command.Group>
|
||||
)}
|
||||
{renderedFeeds.length > 0 && (
|
||||
<Command.Group
|
||||
heading={
|
||||
<SearchGroupHeading
|
||||
icon="i-mgc-rss-cute-fi size-4 text-accent"
|
||||
title={t("search.group.feeds")}
|
||||
/>
|
||||
}
|
||||
className="py-2"
|
||||
>
|
||||
{renderedFeeds.map((feed) => (
|
||||
<SearchItem
|
||||
key={`feed-${feed.item.id}`}
|
||||
view={getSubscriptionByFeedId(feed.item.id!)?.view}
|
||||
title={feed.item.title!}
|
||||
feedId={feed.item.id!}
|
||||
entryId={ROUTE_ENTRY_PENDING}
|
||||
id={feed.item.id!}
|
||||
icon={feed.item.type === "feed" ? feed.item.siteUrl : undefined}
|
||||
subtitle={useFeedUnreadStore.getState().data[feed.item.id!]?.toString()}
|
||||
/>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
{canLoadMore && <LoadMoreIndicator className="center w-full" onLoading={loadMore} />}
|
||||
</Command.List>
|
||||
</ScrollArea.ScrollArea>
|
||||
<SearchOptions />
|
||||
<SearchResultCount count={totalCount} />
|
||||
}
|
||||
className="flex w-full min-w-0 flex-col py-2"
|
||||
>
|
||||
{renderedEntries.map((entry) => {
|
||||
const feed = getFeedById(entry.feedId)
|
||||
return (
|
||||
<SearchItem
|
||||
key={`entry-${entry.item.id}-${entry.feedId}`}
|
||||
view={feed?.id ? getSubscriptionByFeedId(feed.id)?.view : undefined}
|
||||
title={entry.item.title!}
|
||||
feedId={entry.feedId}
|
||||
entryId={entry.item.id}
|
||||
id={entry.item.id}
|
||||
icon={feed?.type === "feed" ? feed?.siteUrl : undefined}
|
||||
subtitle={feed?.title}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Command.Group>
|
||||
)}
|
||||
{renderedFeeds.length > 0 && (
|
||||
<Command.Group
|
||||
heading={
|
||||
<SearchGroupHeading
|
||||
icon="i-mgc-rss-cute-fi size-4 text-accent"
|
||||
title={t("search.group.feeds")}
|
||||
/>
|
||||
}
|
||||
className="py-2"
|
||||
>
|
||||
{renderedFeeds.map((feed) => (
|
||||
<SearchItem
|
||||
key={`feed-${feed.item.id}`}
|
||||
view={getSubscriptionByFeedId(feed.item.id!)?.view}
|
||||
title={feed.item.title!}
|
||||
feedId={feed.item.id!}
|
||||
entryId={ROUTE_ENTRY_PENDING}
|
||||
id={feed.item.id!}
|
||||
icon={feed.item.type === "feed" ? feed.item.siteUrl : undefined}
|
||||
subtitle={useFeedUnreadStore.getState().data[feed.item.id!]?.toString()}
|
||||
/>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
{canLoadMore && <LoadMoreIndicator className="center w-full" onLoading={loadMore} />}
|
||||
</Command.List>
|
||||
</ScrollArea.ScrollArea>
|
||||
|
||||
<div className="relative flex items-center justify-between px-3 py-2">
|
||||
<SearchOptions />
|
||||
<SearchResultCount count={totalCount} />
|
||||
</div>
|
||||
</div>
|
||||
</Command.Dialog>
|
||||
</SearchCmdKContext.Provider>
|
||||
)
|
||||
|
|
@ -307,7 +312,7 @@ const SearchResultCount: FC<{
|
|||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<small className="center absolute bottom-3 right-3 shrink-0 gap-1 opacity-80">
|
||||
<small className="center shrink-0 gap-1 opacity-80">
|
||||
{hasKeyword ? (
|
||||
<span>
|
||||
{count} {t.common("words.result", { count })}
|
||||
|
|
@ -339,7 +344,7 @@ const SearchOptions: Component = memo(({ children }) => {
|
|||
const searchInstance = React.useContext(SearchCmdKContext)
|
||||
|
||||
return (
|
||||
<div className="absolute bottom-2 left-4 flex items-center gap-2 text-sm text-theme-foreground/80">
|
||||
<div className="flex items-center gap-2 text-sm text-theme-foreground/80">
|
||||
<span className="shrink-0">{t("search.options.search_type")}</span>
|
||||
|
||||
<Select
|
||||
|
|
|
|||
Loading…
Reference in New Issue