rename repo view and component

web/src/components/repo/RepoListItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <router-link v-if="repo && pipeline" :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="grid item grid-cols-[1.5rem,auto,1fr] gap-2">
+        <PipelineStatusIcon :status="pipeline.status" class="flex items-center" />
+        <span class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</span>
+        <span class="ml-auto">
+          <Badge
+            v-if="repo.visibility === RepoVisibility.Public"
+            :label="$t('repo.settings.general.visibility.public.public')"
+          />
+        </span>
+
+        <div class="col-start-2 col-span-2 text-wp-text-100">
+          <div v-if="pipeline" class="flex gap-2 items-center">
+            <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ shortMessage }}</span>
+            <span class="ml-auto hidden sm:inline-block flex-shrink-0">{{ since }}</span>
+          </div>
+
+          <div v-else class="flex gap-2">
+            <span>{{ $t('repo.pipeline.no_pipelines') }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </router-link>
+</template>
+
+<script lang="ts" setup>
+import { toRef } from 'vue';
+
+import Badge from '~/components/atomic/Badge.vue';
+import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
+import usePipeline from '~/compositions/usePipeline';
+import type { Repo } from '~/lib/api/types';
+import { RepoVisibility } from '~/lib/api/types';
+
+const props = defineProps<{
+  repo: Repo;
+}>();
+
+const repo = props.repo;
+const pipeline = toRef(repo.last_pipeline);
+const { since, shortMessage } = usePipeline(pipeline);
+</script>

web/src/views/RepoList.vue

@@ -0,0 +1,49 @@
+<template>
+  <Scaffold v-model:search="search">
+    <template #title>
+      {{ $t('repositories') }}
+    </template>
+
+    <template #titleActions>
+      <Button :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" />
+    </template>
+
+    <div class="flex flex-col gap-12">
+      <div class="gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
+        <RepoListItem v-for="repo in repoListAccess" :key="repo.id" :repo="repo" />
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <RepoListItem v-for="repo in repoListActivit" :key="repo.id" :repo="repo" />
+      </div>
+    </div>
+  </Scaffold>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import Button from '~/components/atomic/Button.vue';
+import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
+import RepoListItem from '~/components/repo/RepoListItem.vue';
+import useRepos from '~/compositions/useRepos';
+import { useRepoSearch } from '~/compositions/useRepoSearch';
+import { useRepoStore } from '~/store/repos';
+
+const router = useRouter();
+
+const repoStore = useRepoStore();
+const repos = computed(() => Object.values(repoStore.ownedRepos));
+const search = ref('');
+
+const { searchedRepos } = useRepoSearch(repos, search);
+const { sortReposByLastAccess, sortReposByLastActivity } = useRepos();
+
+const repoListAccess = computed(() => sortReposByLastAccess(repos.value || []));
+const repoListActivit = computed(() => sortReposByLastActivity(searchedRepos.value || []));
+
+router.beforeEach(async () => {
+  await repoStore.loadRepos();
+});
+</script>