From 4904cd059a19405f0ecd26c3cdd67caa7afeecf1 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 25 Nov 2024 21:30:52 +0100
Subject: [PATCH] Add visibility icon to repo list (#4460)

---
 web/src/components/atomic/Icon.vue   |  9 ++++++++-
 web/src/components/repo/RepoItem.vue | 16 +++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index eda7c10ae..b4aa185cd 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -52,6 +52,9 @@
   <SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="24" />
   <SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="24" />
 
+  <SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="24" />
+  <SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="24" />
+
   <SvgIcon v-else-if="name === 'forgejo'" :path="siForgejo.path" size="32" />
   <SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="32" />
 
@@ -102,6 +105,8 @@ import {
   mdiGithub,
   mdiGitlab,
   mdiHelpCircleOutline,
+  mdiLockOpenOutline,
+  mdiLockOutline,
   mdiMinusCircleOutline,
   mdiPackageVariant,
   mdiPause,
@@ -176,7 +181,9 @@ export type IconNames =
   | 'attention'
   | 'spinner'
   | 'error'
-  | 'remove';
+  | 'remove'
+  | 'visibility-private'
+  | 'visibility-internal';
 
 defineProps<{
   name: IconNames;
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 11d9aa429..5557077a7 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -6,8 +6,19 @@
   >
     <div class="grid grid-cols-[auto,1fr] gap-y-4 items-center">
       <div class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</div>
-      <div class="ml-auto">
-        <Badge v-if="repo.visibility === RepoVisibility.Public" :label="$t('repo.visibility.public.public')" />
+      <div class="ml-auto text-wp-text-100">
+        <div
+          v-if="repo.visibility === RepoVisibility.Private"
+          :title="`${$t('repo.visibility.visibility')}: ${$t(`repo.visibility.private.private`)}`"
+        >
+          <Icon name="visibility-private" />
+        </div>
+        <div
+          v-else-if="repo.visibility === RepoVisibility.Internal"
+          :title="`${$t('repo.visibility.visibility')}: ${$t(`repo.visibility.internal.internal`)}`"
+        >
+          <Icon name="visibility-internal" />
+        </div>
       </div>
 
       <div class="col-span-2 text-wp-text-100 flex w-full gap-x-4">
@@ -34,7 +45,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import Badge from '~/components/atomic/Badge.vue';
 import Icon from '~/components/atomic/Icon.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import usePipeline from '~/compositions/usePipeline';