appstore: iterate on app page

store/app.py

@@ -18,6 +18,7 @@ locale = "en"
 app = Flask(__name__, static_url_path='/assets', static_folder="assets")
 catalog = json.load(open("../builds/default/v3/apps.json"))
 catalog['categories'] = {c['id']:c for c in catalog['categories']}
+catalog['antifeatures'] = {c['id']:c for c in catalog['antifeatures']}
 
 try:
     config = toml.loads(open("config.toml").read())
@@ -167,7 +168,7 @@ def app_info(app_id):
                         ] = f"data:image/{ext};charset=utf-8;base64,{data}"
                     break
 
-    return render_template("app.html", user=session.get('user', {}), app_id=app_id, infos=infos)
+    return render_template("app.html", user=session.get('user', {}), app_id=app_id, infos=infos, catalog=catalog)
 
 
 @app.route('/wishlist')

store/templates/app.html

@@ -1,8 +1,9 @@
+{% set locale = 'en' %}
 {% extends "base.html" %}
 {% block main %}
 <div class="max-w-screen-md mx-auto pt-5">
 
-    <span class="flex mb-3">
+    <span class="flex items-end mb-1">
         <img {% if infos['logo_hash'] %}
              src="https://app.yunohost.org/default/v3/logos/{{ infos['logo_hash'] }}.png"
              {% else %}
@@ -11,7 +12,28 @@
              loading="lazy"
              class="h-12 w-12 rounded-lg object-cover shadow-sm mt-1"
         />
-        <h2 class="grow pl-2 pt-3 text-3xl font-bold text-gray-900">{{ infos["manifest"]["name"] }}</h2>
+        <h2 class="pl-2 pt-3 text-3xl font-bold text-gray-900">{{ infos["manifest"]["name"] }}</h2>
+        {% if infos['category'] %}
+        <span class="ml-2 mb-1 rounded-full px-2.5 py-0.5 text-[10px]  border text-{{ catalog['categories'][infos['category']]['color'] }}-500 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">
+            {{ catalog['categories'][infos['category']]['title'][locale].lower() }}
+        </span>
+        {% endif %}
+        <div class="grow"></div>
+
+        {% if infos['level'] == 0 %}
+        <div class="py-2.5 px-3">
+            <i class="text-md fa fa-exclamation-circle text-red-500" aria-hidden="true"></i>
+        </div>
+        {% elif infos['level']|int <= 4 %}
+        <div class="py-2.5 px-3">
+            <i class="text-md fa fa-exclamation-triangle text-orange-500" aria-hidden="true"></i>
+        </div>
+        {% elif infos['level'] == 8 %}
+        <div class="py-2.5 px-3">
+            <i class="text-md fa fa-diamond text-teal-500" aria-hidden="true"></i>
+        </div>
+        {% endif %}
+
         <div class="mt-2">
             <a
               href="#"
@@ -44,12 +66,30 @@
     {% endif %}
 
 
-    <p>{{ infos["category"] }}</p>
-    <p>{{ infos["level"] }}</p>
-    
-    <p>Antifeatures: {{ infos["anti_features"] }}</p>
     <p>{{ infos["manifest"]["integration"] }}</p>
-    <p>{{ infos["manifest"]["upstream"] }}</p>
     <div class="from-markdown">{{ infos["pre_install_html"] | safe }}</div>
+
+    {% if infos["antifeatures"] %}
+    <h3 class="inline-block text-xl mb-2 font-semibold">Anti-features</h3> <p class="inline-block text-sm">(This app has features you may not like)</p>
+    <div class="mb-3 rounded-md bg-red-200 text-red-800 px-5 py-2">
+        <ul>
+        {% for antifeature in infos["antifeatures"] %}
+            <li class="mb-1"><i class="fa fa-{{ catalog['antifeatures'][antifeature]['icon'] }} fa-fw" aria-hidden="true"></i> {{ catalog['antifeatures'][antifeature]['description'][locale] }}</li>
+        {% endfor %}
+        </ul>
+    </div>
+    {% endif %}
+
+
+    <h3 class="text-xl mb-2 font-semibold">Useful links</h3>
+    <div>
+        {% set upstream = infos["manifest"]["upstream"] %}
+        <a class="block btn btn-link my-1" href="https://spdx.org/licenses/{{upstream.license}}"><i class="fa fa-institution fa-fw" aria-hidden="true"></i> License : {{ upstream.license }}</a>
+        {% if upstream.website %}<a class="block btn btn-link my-1" href="{{ upstream.website }}"><i class="fa fa-globe fa-fw" aria-hidden="true"></i> Official website</a>{% endif %}
+        {% if upstream.admindoc %}<a class="block btn btn-link my-1" href="{{ upstream.admindoc }}"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Official admin documentation</a>{% endif %}
+        {% if upstream.userdoc %}<a class="block btn btn-link my-1" href="{{ upstream.userdoc }}"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Official user documentation</a>{% endif %}
+        {% if upstream.code %}<a class="block btn btn-link my-1" href="{{ upstream.code }}"><i class="fa fa-code fa-fw" aria-hidden="true"></i> Official code repository</a>{% endif %}
+        <a class="block btn btn-link my-1" href="{{ infos["git"]["url"] }}"><i class="fa fa-code fa-fw" aria-hidden="true"></i> YunoHost package repository</a>
+    </div>
 </div>
 {% endblock %}

store/templates/base.html

@@ -21,6 +21,9 @@
       .btn-primary {
           @apply text-white bg-blue-500 hover:bg-blue-700;
       }
+      .btn-link {
+          @apply bg-gray-100 hover:bg-gray-200;
+      }
       .btn-primary-outline {
           @apply border text-blue-600 border-blue-500 hover:text-blue-400;
       }
@@ -125,7 +128,7 @@
         {% block main %}
         {% endblock %}
 
-        <footer class="text-center"><hr/>TODO : add a proper footer</footer>
+        <footer class="h-5 mt-5"></footer>
   </body>
 
 </html>