Skip to content

feat(web): new search ui - #30279

Open
benbeckford wants to merge 10 commits into
mainfrom
feat/new-search-ui
Open

feat(web): new search ui#30279
benbeckford wants to merge 10 commits into
mainfrom
feat/new-search-ui

Conversation

@benbeckford

Copy link
Copy Markdown
Member

Implementation of the new search UI on the web, not yet pixel perfect with the design doc since a few overall style changes need to be made in immich UI.
image

@immich-push-o-matic

Copy link
Copy Markdown

Deploying preview environment to https://pr-30279.preview.internal.immich.build/

@jrasm91 jrasm91 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a lot of shared state for search. I am wondering if it would be better/easier if all the related state was pulled out into a global manager, like const searchManager new SearchManager() and then components just used methods on the search manager to manipulate state.

Some methods that might make sense would be like:

class SearchManager {
  get filters()
  submit()
  reset()
  addFilter(key, value)
  clearFilter(key)
  ..

Comment thread web/src/lib/components/shared-components/search-bar/SearchBar.svelte Outdated
@jrasm91

jrasm91 commented Aug 7, 2026

Copy link
Copy Markdown
Member

Code and functionality both look good! I noticed a few issues when clearing a search filter and then opening the search box and seeing the old state still.

  1. after searching, click the x on one or more filters
image
  1. open the search box and see old filters still selected
image

@danieldietzler danieldietzler left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could get the code cleaned up a bit, but overall this looks really good and already is an improvement over what we currently have!

Comment thread web/src/lib/components/shared-components/search-bar/search-bar-utils.ts Outdated
const start = after?.toMillis();
const end = before?.endOf('day').toMillis();

if (start === +DateTime.utc().startOf('year') && end === +DateTime.utc().endOf('year')) {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the +s?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shorthand for milliseconds

Comment thread web/src/lib/components/shared-components/search-bar/search-bar-utils.ts Outdated
Comment thread web/src/lib/components/shared-components/search-bar/search-bar-utils.ts Outdated
Comment thread web/src/lib/components/shared-components/search-bar/search-bar-utils.ts Outdated
Comment thread web/src/lib/components/shared-components/search-bar/SearchFilters.svelte Outdated
Comment thread web/src/lib/components/shared-components/search-bar/SearchFilters.svelte Outdated
Comment thread web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte Outdated
}

let { selectedPeople = $bindable() }: Props = $props();
// eslint-disable-next-line no-useless-assignment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why exactly did this throw? It shouldn't

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

title is never read in the file so the assignments are useless to the linter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants