From df887cd057cfb733d1cc20515aaea90115467ff8 Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Tue, 16 Jan 2024 12:54:15 +0300 Subject: [PATCH] [ENG-1537] Search UI improvements (#1940) * wip * Improve search ui * Update index.tsx * Update Filters.tsx --- apps/desktop/src/platform.ts | 5 +- .../app/$libraryId/Explorer/TopBarOptions.tsx | 3 +- interface/app/$libraryId/Search/Filters.tsx | 74 ++++++++++++------- interface/app/$libraryId/Search/index.tsx | 33 ++++++--- 4 files changed, 72 insertions(+), 43 deletions(-) diff --git a/apps/desktop/src/platform.ts b/apps/desktop/src/platform.ts index 2a35e852e..0f01a50a2 100644 --- a/apps/desktop/src/platform.ts +++ b/apps/desktop/src/platform.ts @@ -1,10 +1,11 @@ +import { OperatingSystem, Platform } from '@sd/interface'; import { dialog, invoke, os, shell } from '@tauri-apps/api'; import { confirm } from '@tauri-apps/api/dialog'; import { homeDir } from '@tauri-apps/api/path'; import { open } from '@tauri-apps/api/shell'; + // @ts-expect-error: Doesn't have a types package. import ConsistentHash from 'consistent-hash'; -import { OperatingSystem, Platform } from '@sd/interface'; import { commands, events } from './commands'; import { env } from './env'; @@ -35,7 +36,7 @@ function constructServerUrl(urlSuffix: string) { if (!customUriServerUrl) throw new Error("'window.__SD_CUSTOM_URI_SERVER__' was not injected correctly!"); - console.log(ConsistentHash); + hr = new ConsistentHash(); customUriServerUrl.forEach((url) => hr.add(url)); } diff --git a/interface/app/$libraryId/Explorer/TopBarOptions.tsx b/interface/app/$libraryId/Explorer/TopBarOptions.tsx index 18095fda5..1d5940b59 100644 --- a/interface/app/$libraryId/Explorer/TopBarOptions.tsx +++ b/interface/app/$libraryId/Explorer/TopBarOptions.tsx @@ -2,7 +2,6 @@ import { Icon, Key, MonitorPlay, - Planet, Rows, SidebarSimple, SlidersHorizontal, @@ -50,7 +49,7 @@ export const useExplorerTopBarOptions = () => { const option = { layout, - toolTipLabel: t(`${layout}_view`), + toolTipLabel: t(`${layout} View`), icon: , keybinds: [controlIcon, (i + 1).toString()], topBarActive: diff --git a/interface/app/$libraryId/Search/Filters.tsx b/interface/app/$libraryId/Search/Filters.tsx index 2532cb94a..af107f13f 100644 --- a/interface/app/$libraryId/Search/Filters.tsx +++ b/interface/app/$libraryId/Search/Filters.tsx @@ -10,6 +10,7 @@ import { useNodes } from '@sd/client'; import { Button, Input } from '@sd/ui'; +import { Icon as SDIcon } from '~/components'; import { SearchOptionItem, SearchOptionSubMenu } from '.'; import { AllKeys, FilterOption, getKey } from './store'; @@ -91,11 +92,13 @@ export function useToggleOptionSelected({ search }: { search: UseSearch }) { const FilterOptionList = ({ filter, options, - search + search, + empty }: { filter: SearchFilterCRUD; options: FilterOption[]; search: UseSearch; + empty?: () => JSX.Element; }) => { const { allFiltersKeys } = search; @@ -103,29 +106,31 @@ const FilterOptionList = ({ return ( - {options?.map((option) => { - const optionKey = getKey({ - ...option, - type: filter.name - }); + {empty?.() && options.length === 0 + ? empty() + : options?.map((option) => { + const optionKey = getKey({ + ...option, + type: filter.name + }); - return ( - { - toggleOptionSelected({ - filter, - option, - select: value - }); - }} - key={option.value} - icon={option.icon} - > - {option.name} - - ); - })} + return ( + { + toggleOptionSelected({ + filter, + option, + select: value + }); + }} + key={option.value} + icon={option.icon} + > + {option.name} + + ); + })} ); }; @@ -462,19 +467,32 @@ export const filterRegistry = [ .filter(Boolean) as any; }, useOptions: () => { - const query = useLibraryQuery(['tags.list'], { keepPreviousData: true }); + const query = useLibraryQuery(['tags.list']); useNodes(query.data?.nodes); const tags = useCache(query.data?.items); - return (tags ?? []).map((tag) => ({ name: tag.name!, value: tag.id, icon: tag.color || 'CircleDashed' })); }, - Render: ({ filter, options, search }) => ( - - ) + Render: ({ filter, options, search }) => { + return ( + ( +
+ +

+ You have not created any tags +

+
+ )} + filter={filter} + options={options} + search={search} + /> + ); + } }), createInOrNotInFilter({ name: 'Kind', diff --git a/interface/app/$libraryId/Search/index.tsx b/interface/app/$libraryId/Search/index.tsx index 8153c43ef..a644e7d68 100644 --- a/interface/app/$libraryId/Search/index.tsx +++ b/interface/app/$libraryId/Search/index.tsx @@ -1,4 +1,4 @@ -import { CaretRight, FunnelSimple, Icon, Plus } from '@phosphor-icons/react'; +import { FunnelSimple, Icon, Plus } from '@phosphor-icons/react'; import { IconTypes } from '@sd/assets/util'; import clsx from 'clsx'; import { memo, PropsWithChildren, useDeferredValue, useState } from 'react'; @@ -27,8 +27,8 @@ import { import { UseSearch } from './useSearch'; import { RenderIcon } from './util'; -export * from './useSearch'; export * from './context'; +export * from './useSearch'; // const Label = tw.span`text-ink-dull mr-2 text-xs`; export const OptionContainer = tw.div`flex flex-row items-center`; @@ -44,9 +44,9 @@ const MENU_STYLES = `!rounded-md border !border-app-line !bg-app-box`; const SearchOptionItemInternals = (props: SearchOptionItemProps) => { return (
-
+
- {props.children} + {props.children}
{props.selected !== undefined && }
@@ -159,12 +159,20 @@ const SearchResults = memo( } key={option.key} > -
- - {filter.name} - - - {option.name} +
+
+ + + {filter.name} + +
+
+ + {option.name} +
); @@ -195,7 +203,10 @@ function AddFilterButton() { e.stopPropagation()} - className={MENU_STYLES} + className={clsx( + MENU_STYLES, + 'explorer-scroll max-h-[80vh] min-h-[100px] min-w-[200px] max-w-fit' + )} trigger={