Implement subtree search

[Lauritz-Tieste]

Description

closes Bootstrap-Academy/Bootstrap-Academy#72

depends on Bootstrap-Academy/skills-ms#394

demo.mp4

[github-actions]

Preview deployed to https://de64be0f.academy-preview.pages.dev (total size: 14M)

[TheMorpheus407]

For the design of the frontend, I have some suggestions to make it more intuitive to use.
Let's not use a popup box. Rather if clicked on the button "Search", let it transform to a textfield, with just the icon and the content of what the user types. Then, when he types (3 characters or more) let it search for whatever is currently written.
Filter the elements in the skilltree: Display the nodes, that match the searchterm, and if a course is found or a subskill is found, then display its parent.
If searched in a subnode - like "Grundlagen der Programmierung und Datenhaltung", only search for the subskills and courses within this subnode - eg if search for Unreal Engine, nothing appears, if searched for python, then the python node appears. If a course is found, display the node that contains the course.

[Lauritz-Tieste]

I think a search field, as seen here, is not a good idea. There are already so many elements displayed on the skill tree (at least on mobile) that cover up the actual content.

[TheMorpheus407]

You're right. However, I think it takes even less space than the current solution.
But maybe we should rethink this. Maybe having a search for the entire platform would make more sense in the long run.
We could integrate it in the top navigation, so the whole page gets searchable. We'll start with skill tree anyways, but later on we can add more to it.
As for the search, it could float to the right, next to the hearts?
And it's just the icon with 3 dots. When you click on it, it expands.
What do you think?