From 81a35e046e8bbc4f60a17c1e5fb0ac342f20009e Mon Sep 17 00:00:00 2001
From: Brendan Dash <61053131+Debbl@users.noreply.github.com>
Date: Thu, 10 Oct 2024 20:00:57 +0800
Subject: [PATCH] fix: cmdk panel layout (#854)

* fix: cmdk panel layout

* fix: cmdk panel changed some styles
---
 apps/renderer/src/modules/panel/cmdk.tsx | 135 ++++++++++++-----------
 1 file changed, 70 insertions(+), 65 deletions(-)

diff --git a/apps/renderer/src/modules/panel/cmdk.tsx b/apps/renderer/src/modules/panel/cmdk.tsx
index 79c414331..a482f7b15 100644
--- a/apps/renderer/src/modules/panel/cmdk.tsx
+++ b/apps/renderer/src/modules/panel/cmdk.tsx
@@ -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