feat: add settings and detail page to apps

[klmhsb42]

Features:

• Filter Apps by Categories
• Sort Apps (by A-Z or Categories)
• Toggle Grid or List View
• Detail page of apps (Load Screenshots from external, Load Readme from external, Click Links to Project or App, Share an App, Embed Link of your App in your website)
• Manage all App Metadata in apps.json

Todos:

• some bug fixes before merge (draft status)

Screenshots:

[cyberb]

I think if you center the filters horizontally it will look better.

[cyberb]

Also I am mostly using mobile so you need to make sure it does not break it

[klmhsb42]

Thanks for feedback. Sounds like you are ok with the feature ideas in general? So I will implement your comments and make bug fixes and get back to you for final approval.

[cyberb]

Sounds like you are ok with the feature ideas in general?

Yes, it just never made to the top of the priority.
I would like to point out that one of the reasons I was not doing this on this web site as I always wanted to do it properly on its own store web where all the details would come from the app package itself (like on google play). There is already a store api it just does not have its own web.
Anyway if and when I get to the store web we can use what your are doing right so it will not be wasted.

[cyberb]

Also grid switch is a bit odd comparing to the other two controls.

[cyberb]

In general it is difficult to actually create something better and maintainable without using a proper web framework. On device for example (https://github.com/syncloud/platform/tree/master/www) I am using Vue.js v3 with element-plus component library (https://element-plus.org/en-US/component/overview.html) which gives a lot of power. I am not saying it has to be used right now but it would give you an easy access to a set of components, but it can be done later when moving to store web.

[klmhsb42]

Hi @cyberb , I pushed a new version. I think it looks much better now and I also tested it with a smartphone. It's not perfect and certainly needs improvements but I think it's good enough for a first release. I also added a search function. Can you check it out?

I totally agree with you. Maybe we can proceed as follows:

1. First take this version
2. Replace the app JSON in https://github.com/syncloud/release/blob/master/index-v2 with the new JSON and then completely remove it from Syncloud.org and make some changes in Syncloud.org repo to access it to have only single source of truth
3. Then add the new app store functions in the platform app and also rewrite them with vue.js functions
4. Then transfer the vue.js functions to Syncloud.org

[cyberb]

I would say these days you do not need to say "Filter Category" or "Sort" it is all intuitive and will look better without them.
Also all in one horizontal line would be better on this wide view.

[cyberb]

I think this one is good on the wide view.

But on mobile view it is not so good, can we make it look the same as on wide view (on the same line)?

[cyberb]

I think these days sites try to be simpler and have a single scroll (the main one) by not limiting vertical size of any component, this would have less confusion of what to scroll by placing the mouse or a finger in different areas of the screen.
In simple implementation that usually means filter, scroll down, then scroll up to see filters again, but that can be fixed by freezing the filter controls at the top (again not very convenient thing as it takes part of your screen which is very annoying).

So I would prefer filters at the top of the page which are moved away with the page as you scroll, simple and very practical (in my mind)

[cyberb]

Colors are different, I think the top one is the official color we use, let's stick to that.
There is nothing worse than inconsistent colors on a website (I am not saying I have not done this mistake myself, but it is still a mistake :) )

[klmhsb42]

I would say these days you do not need to say "Filter Category" or "Sort" it is all intuitive and will look better without them. Also all in one horizontal line would be better on this wide view.

Removed and in one line.

I think this one is good on the wide view.

But on mobile view it is not so good, can we make it look the same as on wide view (on the same line)?

Also in mobile on same line now.

I think these days sites try to be simpler and have a single scroll (the main one) by not limiting vertical size of any component, this would have less confusion of what to scroll by placing the mouse or a finger in different areas of the screen. In simple implementation that usually means filter, scroll down, then scroll up to see filters again, but that can be fixed by freezing the filter controls at the top (again not very convenient thing as it takes part of your screen which is very annoying).

So I would prefer filters at the top of the page which are moved away with the page as you scroll, simple and very practical (in my mind)

Done. Just one scroll bar now.

Colors are different, I think the top one is the official color we use, let's stick to that. There is nothing worse than inconsistent colors on a website (I am not saying I have not done this mistake myself, but it is still a mistake :) )

Color is now corrected for buttons.

[cyberb]

Hi, all good!
Can you fix this last minor thing, alignment on left side is not right?

[klmhsb42]

Hi @cyberb , the details usually take the most time. It should now be pixel accurate. I hope it works.

[cyberb]

ok design is good, but functionality is a bit strange, category and name filter do not play well together.
Kooha-2024-12-02-21-04-23.webm

[klmhsb42]

@cyberb should work better now

[cyberb]

Sorry forgot about this PR, everything seems to work.
Couple things about the code:

1. Browser throws an error
   
2. Can you format app.js/app-details.js files please as indentation is very inconsistent?