From 48ab5fc757ba07505d38129dc973a72fbf3119ad Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Mon, 18 Sep 2023 17:40:11 +0200
Subject: [PATCH] appstore: misc 'title' attribute for buttons / icons

---
 store/templates/app.html      | 22 +++++++++-------------
 store/templates/catalog.html  | 22 ++++++++++++----------
 store/templates/wishlist.html |  3 +++
 store/utils.py                |  4 ++--
 4 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/store/templates/app.html b/store/templates/app.html
index b9296b77..d5aa6420 100644
--- a/store/templates/app.html
+++ b/store/templates/app.html
@@ -11,7 +11,7 @@
              loading="lazy"
              class="h-12 w-12 rounded-lg object-cover shadow-sm mt-1"
         />
-        <h2 class="flex-auto basis-1/4 pl-2 pt-3 text-3xl font-bold text-gray-900">{{ infos["manifest"]["name"] }}</h2>
+        <h2 class="flex-0 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']|localize|lower }}
@@ -21,19 +21,15 @@
 
 
         <div class="h-9.5">
-
-            {% if infos['level'] == 0 %}
-            <div class="py-2 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 px-3">
-                <i class="text-md fa fa-exclamation-triangle text-orange-500" aria-hidden="true"></i>
-            </div>
+            {% if infos['level'] == "?" or infos["level"]|int <= 4 %}
+            <i class="fa fa-exclamation-circle text-red-500 py-0.5"
+               aria-hidden="true"
+               title="{{ _('This app is currently flagged as broken because it failed our automatic tests.') }} {{ _('This is usually a temporary situation which requires packagers to fix something in the app.') }}"
+            ></i>
             {% elif infos['level'] == 8 %}
-            <div class="py-2 px-3">
-                <i class="text-md fa fa-diamond text-teal-500" aria-hidden="true"></i>
-            </div>
+            <i class="fa fa-diamond text-teal-500 py-0.5" aria-hidden="true"
+               title="{{ _('This app has been good quality according to our automatic tests over at least one year.') }}"
+            ></i>
             {% endif %}
 
             {% set this_app_stars = stars.get(app_id, {})|length %}
diff --git a/store/templates/catalog.html b/store/templates/catalog.html
index a9789b7d..e82eadde 100644
--- a/store/templates/catalog.html
+++ b/store/templates/catalog.html
@@ -36,13 +36,15 @@
                         {{ infos['manifest']['name'] }}
                     </h3>
                     <span class="pt-1 pr-2 text-xs">
-
-                        {% if infos['level'] == 0 %}
-                        <i class="fa fa-exclamation-circle text-red-500 py-0.5" aria-hidden="true"></i>
-                        {% elif infos['level']|int <= 4 %}
-                        <i class="fa fa-exclamation-triangle text-orange-500 py-0.5" aria-hidden="true"></i>
+                        {% if infos['level'] == "?" or infos["level"]|int <= 4 %}
+                        <i class="fa fa-exclamation-circle text-red-500 py-0.5"
+                           aria-hidden="true"
+                           title="{{ _('This app is currently flagged as broken because it failed our automatic tests.') }} {{ _('This is usually a temporary situation which requires packagers to fix something in the app.') }}"
+                        ></i>
                         {% elif infos['level'] == 8 %}
-                        <i class="fa fa-diamond text-teal-500 py-0.5" aria-hidden="true"></i>
+                        <i class="fa fa-diamond text-teal-500 py-0.5" aria-hidden="true"
+                           title="{{ _('This app has been good quality according to our automatic tests over at least one year.') }}"
+                        ></i>
                         {% endif %}
                         <span class="inline-block group rounded-md text-xs text-violet-500 px-1 py-0.5">
                             <span class="inline-block">{{ this_app_stars }}</span>
@@ -57,7 +59,7 @@
                     {{ infos["potential_alternative_to"]|join(', ') }}
                 </div>
                 {% if infos['category'] %}
-                <span class="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 ">
+                <span class="rounded-full px-2.5 py-0.5 text-[10px]  border text-{{ catalog['categories'][infos['category']]['color'] }}-600 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">
                     {{ catalog['categories'][infos['category']]['title']|localize|lower }}
                 </span>
                 {% endif %}
@@ -137,7 +139,7 @@
 
 <div id="catalogGoodQuality" class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 max-w-screen-lg mx-auto pt-10">
     {% for app, infos in catalog['apps'].items() %}
-        {% if infos['level'] and infos['level'] > 4 %}
+        {% if infos['level'] and infos['level'] != "?" and infos['level'] > 4 %}
             {{ appCard(app, infos, timestamp_now, catalog) }}
         {% endif %}
     {% endfor %}
@@ -156,7 +158,7 @@
 
 <div id="lowQualityAppTitle" class="text-center pt-10">
     <h2 class="text-lg font-bold text-gray-900">
-        {{ _("Applications currently flagged as broken or low-quality") }} 
+        {{ _("Applications currently flagged as broken") }} 
     </h2>
     <p class="text-sm">
         {{ _("These are apps which failed our automatic tests.") }}<br/>
@@ -166,7 +168,7 @@
 
 <div id="catalogLowQuality" class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 max-w-screen-lg mx-auto pt-10">
     {% for app, infos in catalog['apps'].items() %}
-        {% if not infos['level'] or infos['level']  <= 4 %}
+        {% if not infos['level'] or infos["level"] == "?" or infos['level']  <= 4 %}
             {{ appCard(app, infos, timestamp_now, catalog) }}
         {% endif %}
     {% endfor %}
diff --git a/store/templates/wishlist.html b/store/templates/wishlist.html
index 2767fc1f..0483b786 100644
--- a/store/templates/wishlist.html
+++ b/store/templates/wishlist.html
@@ -94,6 +94,7 @@
             <td class="py-2">
               {% if infos['website'] %}
               <a
+                title="{{ _('Official website') }}"
                 href="{{ infos['website'] }}"
                 class="inline-block"
               >
@@ -104,6 +105,7 @@
             <td class="py-2">
               {% if infos['upstream'] %}
               <a
+                title="{{ _('Code repository') }}"
                 href="{{ infos['upstream'] }}"
                 class="inline-block"
               >
@@ -114,6 +116,7 @@
             <td class="text-center max-w-[5em]">
 
                 <a
+                  title="{{ _('Star this app') }}"
                   href="{{ url_for('star_app', app_id=app, action="unstar" if user_starred_this_app else "star") }}"
                   class="inline-block group btn-sm border text-violet-600 border-violet-500 hover:bg-violet-500 hover:text-white"
                 >
diff --git a/store/utils.py b/store/utils.py
index 08e9250e..b086b8ae 100644
--- a/store/utils.py
+++ b/store/utils.py
@@ -32,13 +32,13 @@ def get_catalog():
             "communication": "amber",
             "office": "lime",
             "productivity_and_management": "purple",
-            "small_utilities": "",
+            "small_utilities": "black",
             "reading": "emerald",
             "multimedia": "fuchsia",
             "social_media": "rose",
             "games": "violet",
             "dev": "stone",
-            "system_tools": "white",
+            "system_tools": "black",
             "iot": "orange",
             "wat": "teal",
         }