fix: Extra UI of searchBar

[FirePheonix]

Fixed Search Bar UI

the searchBar UI was overflowing and too big earlier, fixed it while maintaining the 'search blocks' functionality.

fixes: #3804

UI earlier:

Music.Blocks.is.a.collection.of.tools.for.exploring.fundamental.musical.concepts.in.a.fun.way.-.Google.Chrome.2025-01-10.16-18-22.mp4

UI now

Music.Blocks.-.Google.Chrome.2025-01-10.16-17-13.mp4

Changes made:

Fixed the UI of the extra search bar by overlapping the extra UI to completely match the beneath one. This would allow us to have the same functionality without shifting the entire functionality to the beneath search block.

[walterbender]

Looks good. But why did you change Search to Search for blocks? If we make that change, we'll need to update all the translations. Is it important? Also, in one place you use Search for Blocks. Elsewhere, Search for blocks. This adds an additional translation burden.

[FirePheonix]

Hey, @walterbender

I think you're saying that I changed "Search for Blocks" to "Search".

Changing "Search for blocks" to "Search" is important because it PREVENTS OVERFLOW OF TEXT outside the Search Bar Widget.

I completely understood the problem of translation burden.

"Search" doesn't have a translation of it's own.

But after reading the translation files, I realized that translation for "search" is available but not for "Search" (with capital 'S' ).

So, we don't need AN EXTRA translation for "Search" in each and every translation file:

So, I made a javascript function which: (for example)

1) Converts "Search" -> "search" -> "put search to translation"

2) "translated (example, in spanish) buscar" -> "capitalization of buscar's first letter" -> "Buscar" -> "Displays Buscar"

Here's the preview of different languages: (Spanish, Hindi, and English respectively.)

WhatsApp.Video.2025-01-12.at.10.43.47.AM.mp4

This function also helps in the future, since now, whenever we have to write the first letter of any word in capital and THAT translation doesn't exist, we can simply put the text inside the function.

It works for every language, you may check for others as well.

[walterbender]

The translateText method is a nice idea but I think it belongs in the _() method. I could imagine a flow such as:
look for a translation
if not found, look for the lowercase version
if not found look for the initial caps version

There really isn't a problem with block names in search itself, since they are all lower case.

I initially raised the issue because of the inconsistency of the placeholder text.

[FirePheonix]

You're COMPLETELY correct about that. @walterbender sir. We can directly change the _() method rather than making a new function.

Following your advice, I improved the _() method. Now it will automatically search thoroughly.

Now:

1. _(text) looks for a translation
2. If not found, checks for lowercase version.
3. If not found, checks initial caps version.
4. If not found, returns the ORIGINAL case without any translation if no translation exists.

Preview:

Languages where english letters are used

Music.Blocks.-.Google.Chrome.2025-01-13.01-25-27.mp4

Languages where symbol letters are used

Music.Blocks.-.Google.Chrome.2025-01-13.01-24-42.mp4

This piece of code might actually help as well in future if new words have to added, reducing translation burden problems.

[walterbender]

Could you please make the utils.js changes in a separate PR?

[FirePheonix]

done, In Pull Request: #4265

[walterbender]

I think we've opted for the other solution. Thx.