ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a search bar to the projects/home page (#3301)

Browse Source 
* Add a search bar to the projects/home page

* Better hotkey config

* Look at this (photo)Graph *in the voice of Nickelback*

* Re-run CI

* Look at this (photo)Graph *in the voice of Nickelback*

* Re-run CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Frank Noirot
2024-08-06 16:19:30 -04:00
committed by GitHub
parent c843dfad95
commit 77b565f781
2 changed files with 74 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/routes/Home.tsx
View File

@ -39,6 +39,7 @@ import {
listProjects,
renameProjectDirectory,
} from 'lib/tauri'
import { ProjectSearchBar, useProjectSearch } from 'components/ProjectSearchBar'
// This route only opens in the Tauri desktop context for now,
// as defined in Router.tsx, so we can use the Tauri APIs and types.
@ -154,6 +155,7 @@ const Home = () => {
})
const { projects } = state.context
const [searchParams, setSearchParams] = useSearchParams()
const { searchResults, query, setQuery } = useProjectSearch(projects)
const sort = searchParams.get('sort_by') ?? 'modified:desc'
const isSortByModified = sort?.includes('modified') || !sort || sort === null
@ -206,8 +208,8 @@ const Home = () => {
<AppHeader showToolbar={false} />
<div className="w-full flex flex-col overflow-hidden max-w-5xl px-4 mx-auto mt-24 lg:px-2">
<section>
<div className="flex justify-between items-baseline select-none">
<div className="flex gap-8 items-baseline">
<div className="flex justify-between items-center select-none">
<div className="flex gap-8 items-center">
<h1 className="text-3xl font-bold">Your Projects</h1>
<ActionButton
Element="button"
@ -225,6 +227,7 @@ const Home = () => {
</ActionButton>
</div>
<div className="flex gap-2 items-center">
<ProjectSearchBar setQuery={setQuery} />
<small>Sort by</small>
<ActionButton
Element="button"
@ -289,9 +292,9 @@ const Home = () => {
<Loading>Loading your Projects...</Loading>
) : (
<>
{projects.length > 0 ? (
{searchResults.length > 0 ? (
<ul className="grid w-full grid-cols-4 gap-4">
{projects.sort(getSortFunction(sort)).map((project) => (
{searchResults.sort(getSortFunction(sort)).map((project) => (
<ProjectCard
key={project.name}
project={project}
@ -302,7 +305,10 @@ const Home = () => {
</ul>
) : (
<p className="p-4 my-8 border border-dashed rounded border-chalkboard-30 dark:border-chalkboard-70">
No Projects found, ready to make your first one?
No Projects found
{projects.length === 0
? ', ready to make your first one?'
: ` with the search term "${query}"`}
</p>
)}
</>