From 33ecf9faa6bff7da2480332c92735948f7bf96b5 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 19 May 2023 00:35:14 -0700
Subject: [PATCH] Add command item breadcrumbs

---
 .../search/components/command-palette.tsx     | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/renderer/features/search/components/command-palette.tsx b/src/renderer/features/search/components/command-palette.tsx
index ad71fb6a..845df9d8 100644
--- a/src/renderer/features/search/components/command-palette.tsx
+++ b/src/renderer/features/search/components/command-palette.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable react/no-unknown-property */
-import { useCallback, useState } from 'react';
+import { useCallback, useState, Fragment } from 'react';
 import { Group, Kbd, ScrollArea } from '@mantine/core';
 import { useDisclosure, useDebouncedValue } from '@mantine/hooks';
 import { generatePath, useNavigate } from 'react-router';
 import styled from 'styled-components';
 import { GoToCommands } from './go-to-commands';
 import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
-import { Modal, Paper, Spinner } from '/@/renderer/components';
+import { Button, Modal, Paper, Spinner } from '/@/renderer/components';
 import { HomeCommands } from './home-commands';
 import { ServerCommands } from '/@/renderer/features/search/components/server-commands';
 import { useSearch } from '/@/renderer/features/search/queries/search-query';
@@ -90,6 +90,23 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
       scrollAreaComponent={ScrollArea.Autosize}
       size="lg"
     >
+      <Group
+        mb="1rem"
+        spacing="sm"
+      >
+        {pages.map((page, index) => (
+          <Fragment key={page}>
+            {index > 0 && ' > '}
+            <Button
+              compact
+              disabled
+              variant="default"
+            >
+              {page?.toLocaleUpperCase()}
+            </Button>
+          </Fragment>
+        ))}
+      </Group>
       <Command
         filter={(value, search) => {
           if (value.includes(search)) return 1;