Integrate search resource selection

[AlexVelezLl]

Summary

• Integrate search filters panel to lesson resource selection
• Add a new immersive header to the side panel modal component.

Compartir.pantalla.-.2025-01-15.17_44_57.mp4

References

Closes #12987

Reviewer guidance

• Edit a lesson
• Change browser route path from "/lesson" to "lessontemp".
• Click on "Manage resources".
• Click on the search button from the first page on the side panel, or from within any topic
• Play and try any possible combination with different filters, browsing search results topics, browser back/forward buttons navigation, etc.

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.0a0.dev0_git.372.g3febbb0f.pex
Windows Installer (EXE)	kolibri-0.18.0a0.dev0+git.372.g3febbb0f-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.0a0.dev0+git.372.g3febbb0f-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.0a0.dev0+git.372.g3febbb0f.dmg
Android Package (APK)	kolibri-0.18.0a0.dev0+git.372.g3febbb0f-0.1.4-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.18.0a0.dev0+git.372.g3febbb0f.zip
TAR file	kolibri-0.18.0a0.dev0+git.372.g3febbb0f.tar.gz
WHL file	kolibri-0.18.0a0.dev0+git.372.g3febbb0f-py2.py3-none-any.whl

[marcellamaki]

@pcenov - this is not urgent, but depending on how time consuming your laptop reset process is, this could go to the top of your list for Friday or Monday. Thank you!

[pcenov]

Hi @AlexVelezLl and @marcellamaki - I confirm that the search is integrated as specified above.

Here are a few general observations based on my testing which can probably be tracked as follow-up issues if not already tracked somewhere else:

1. We probably need to indicate in a better way within the search panel that there are no channels to import from when there aren't any as currently this is what I see in that case:

2. As specified in Figma, when we open the search panel the Category filter should be expanded by default while currently it's not:

3 There are quite a few design differences if the current implementation is closely compared to Figma such as the back arrow and the label are not centered, the keywords label should be removed, the icons for the categories are not added etc. Since I am not sure if this is in scope for this PR I am just mentioning it here as a consideration:

4. When searching by selecting filters it's not immediately clear how the user should proceed the search (the user has to click the search icon next to the empty keywords field). In this case I was expecting to immediately see the filtered results after having applied a filter:

not.clear.how.to.proceed.mp4

5. When testing the mobile view in Chrome's mobile devices emulator everything looks ok, but when I open the search panel in Chrome on my Samsung Note 10 phone I can only see the 'N resources selected' text and not the "Save & Finish" button as it's covered by the device's taskbar: