improve repo list

web/src/compositions/useRepos.ts

@@ -0,0 +1,25 @@
+import { useStorage } from '@vueuse/core';
+
+import { Repo } from '~/lib/api/types';
+
+export default function useRepos() {
+  const lastAccess = useStorage('woodpecker:repo-last-access', new Map<number, number>());
+
+  function sortReposByLastAccess(repos: Repo[]): Repo[] {
+    return repos.sort((a, b) => {
+      const aLastAccess = lastAccess.value.get(a.id) || 0;
+      const bLastAccess = lastAccess.value.get(b.id) || 0;
+
+      return bLastAccess - aLastAccess;
+    });
+  }
+
+  function updateLastAccess(repoId: number) {
+    lastAccess.value.set(repoId, Date.now());
+  }
+
+  return {
+    sortReposByLastAccess,
+    updateLastAccess,
+  };
+}

web/src/views/Repos.vue

@@ -8,10 +8,22 @@
       <Button :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" />
     </template>
 
-    <div class="space-y-4">
-      <ListItem v-for="repo in searchedRepos" :key="repo.id" :to="{ name: 'repo', params: { repoId: repo.id } }">
-        <span class="text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</span>
-      </ListItem>
+    <div class="gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
+      <router-link v-for="repo in repoList" :key="repo.id" :to="{ name: 'repo', params: { repoId: repo.id } }">
+        <div
+          class="flex flex-col border rounded-md bg-wp-background-100 overflow-hidden p-4 border-wp-background-400 dark:bg-wp-background-200 cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300"
+        >
+          <div class="flex justify-between">
+            <span class="text-wp-text-100 text-xl">{{ `${repo.owner} / ${repo.name}` }}</span>
+            <Icon name="repo" class="text-wp-text-100" />
+          </div>
+
+          <div class="mt-4 flex gap-2">
+            <PipelineStatusIcon status="failure" />
+            <span class="text-wp-text-100">last pipeline was successful</span>
+          </div>
+        </div>
+      </router-link>
     </div>
   </Scaffold>
 </template>
@@ -20,8 +32,10 @@
 import { computed, onMounted, ref } from 'vue';
 
 import Button from '~/components/atomic/Button.vue';
-import ListItem from '~/components/atomic/ListItem.vue';
+import Icon from '~/components/atomic/Icon.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
+import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
+import useRepos from '~/compositions/useRepos';
 import { useRepoSearch } from '~/compositions/useRepoSearch';
 import { useRepoStore } from '~/store/repos';
 
@@ -30,6 +44,9 @@ const repos = computed(() => Object.values(repoStore.ownedRepos));
 const search = ref('');
 
 const { searchedRepos } = useRepoSearch(repos, search);
+const { sortReposByLastAccess } = useRepos();
+
+const repoList = computed(() => sortReposByLastAccess(searchedRepos.value || []));
 
 onMounted(async () => {
   await repoStore.loadRepos();

web/src/views/repo/RepoWrapper.vue

@@ -68,6 +68,7 @@ import useConfig from '~/compositions/useConfig';
 import { useForgeStore } from '~/compositions/useForgeStore';
 import useNotifications from '~/compositions/useNotifications';
 import type { Forge, RepoPermissions } from '~/lib/api/types';
+import useRepos from '~/compositions/useRepos';
 import { usePipelineStore } from '~/store/pipelines';
 import { useRepoStore } from '~/store/repos';
 
@@ -87,6 +88,7 @@ const router = useRouter();
 const i18n = useI18n();
 const config = useConfig();
 const forgeStore = useForgeStore();
+const { updateLastAccess } = useRepos();
 
 const repo = repoStore.getRepo(repositoryId);
 const repoPermissions = ref<RepoPermissions>();
@@ -121,6 +123,7 @@ async function loadRepo() {
   if (repo.value) {
     forge.value = (await forgeStore.getForge(repo.value?.forge_id)).value;
   }
+  updateLastAccess(repositoryId.value);
 }
 
 onMounted(() => {