Add titles and descriptions to repos page (#4981)

web/src/assets/locales/en.json

@@ -4,7 +4,17 @@
   "login": "Login",
   "welcome": "Welcome to Woodpecker",
   "repos": "Repos",
-  "repositories": "Repositories",
+  "repositories": {
+    "title": "Repositories",
+    "all": {
+      "title": "All repositories",
+      "desc": "Repositories sorted by last pipeline creation"
+    },
+    "last": {
+      "title": "Last visited",
+      "desc": "Most recently visited repositories sorted by access time"
+    }
+  },
   "docs": "Docs",
   "api": "API",
   "logout": "Logout",
@@ -515,6 +525,5 @@
       "desc": "Pipelines created by the listed users never require approval."
     }
   },
-  "all_repositories": "All repositories",
   "no_search_results": "No results found"
 }

web/src/components/layout/header/Navbar.vue

@@ -9,7 +9,7 @@
       </router-link>
       <router-link v-if="user" :to="{ name: 'repos' }" class="navbar-clickable navbar-link">
         <span class="flex md:hidden">{{ $t('repos') }}</span>
-        <span class="hidden md:flex">{{ $t('repositories') }}</span>
+        <span class="hidden md:flex">{{ $t('repositories.title') }}</span>
       </router-link>
       <a href="https://woodpecker-ci.org/" target="_blank" class="navbar-clickable navbar-link hidden md:flex">{{
         $t('docs')

web/src/views/Repos.vue

@@ -1,7 +1,7 @@
 <template>
   <Scaffold v-model:search="search">
     <template #title>
-      {{ $t('repositories') }}
+      {{ $t('repositories.title') }}
     </template>
 
     <template #headerActions>
@@ -10,15 +10,21 @@
 
     <Transition name="fade" mode="out-in">
       <div v-if="search === '' && repos.length > 0" class="grid gap-8">
-        <div
-          v-if="reposLastAccess.length > 0 && repos.length > 4"
-          class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2"
-        >
-          <RepoItem v-for="repo in reposLastAccess" :key="repo.id" :repo="repo" />
+        <div v-if="reposLastAccess.length > 0 && repos.length > 4" class="flex flex-col gap-4">
+          <div>
+            <h2 class="text-wp-text-100 text-lg">{{ $t('repositories.last.title') }}</h2>
+            <span class="text-wp-text-alt-100">{{ $t('repositories.last.desc') }}</span>
+          </div>
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2">
+            <RepoItem v-for="repo in reposLastAccess" :key="repo.id" :repo="repo" />
+          </div>
         </div>
 
         <div class="flex flex-col gap-4">
-          <h2 class="text-wp-text-100 text-lg">{{ $t('all_repositories') }}</h2>
+          <div>
+            <h2 class="text-wp-text-100 text-lg">{{ $t('repositories.all.title') }}</h2>
+            <span class="text-wp-text-alt-100">{{ $t('repositories.all.desc') }}</span>
+          </div>
           <div class="flex flex-col gap-4">
             <RepoItem v-for="repo in reposLastActivity" :key="repo.id" :repo="repo" />
           </div>