Quick search projects

[ayushgml]

This PR closes the following issue:

• quick-search in list of projects #3983

Changes

• Added a Quick Project Search filter in All Projects tab. Logic:

if (typeFilter === 'all') {
      return searchInput.trim() === '' ? projects : projects.filter(p => p.name?.toLowerCase().includes(searchInput));
    }

    if (typeFilter === 'git') {
      return searchInput.trim() === ''
        ? projects.filter(p => p.isGitRepo)
        : projects.filter(p => p.name?.toLowerCase().includes(searchInput) && p.isGitRepo);
    }
    return searchInput.trim() === ''
      ? projects.filter(p => !p.isGitRepo)
      : projects.filter(p => p.name?.toLowerCase().includes(searchInput) && !p.isGitRepo);

• Highlighting of the searched query in the project name. Logic:

  const highlightQuery = (text: string) => {
    if (!query?.trim()) {
      return <S.Span>{text}</S.Span>;
    }
    const parts = text.split(new RegExp(`(${query})`, 'gi'));
    return (
      <S.Span>
        {parts.map(part => (part.toLowerCase() === query.toLowerCase() ? <S.BoldSpan>{part}</S.BoldSpan> : part))}
      </S.Span>
    );
  };

How to test it

• Run the desktop app and go to "All Projects" tab

Screenshots

Checklist

• tested locally
• added new dependencies
• updated the docs
• added a test

[devcatalin]

Thanks for your contribution, left some quick suggestions!

[ayushgml]

@devcatalin I have made the changes.

[devcatalin]

Great, thank you, merging this!