feat: delete repos from collections IN-1118

frontend/app/components/modules/collection/components/details/collection-project-item.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: MIT
   <!-- Desktop: table row (rendered when as='row') -->
   <tr
     v-if="props.as === 'row'"
-    class="text-neutral-900 text-sm cursor-pointer hover:bg-neutral-50 transition-all duration-300 align-middle"
+    class="text-neutral-900 text-sm cursor-pointer hover:bg-neutral-50 transition-all duration-300 align-middle group/row"
     @click="navigateToItem"
   >
     <td class="w-3/12 py-4 px-2 font-semibold">
@@ -113,6 +113,24 @@ SPDX-License-Identifier: MIT
       <td class="w-3/12 py-4 px-2 text-neutral-400 whitespace-nowrap">-</td>
       <td class="w-2/12 py-4 px-2 text-neutral-400 whitespace-nowrap">-</td>
     </template>
+    <td
+      v-if="props.canRemove"
+      class="py-4 px-2 text-right"
+      @click.stop
+    >
+      <lfx-icon-button
+        v-if="props.project.type === 'repo'"
+        :icon="props.isRemoving ? 'spinner-third' : 'xmark'"
+        size="small"
+        type="transparent"
+        :class="[
+          'opacity-0 group-hover/row:opacity-100 transition-opacity !text-neutral-400',
+          props.isRemoving ? 'animate-spin' : 'hover:!text-negative-500',
+        ]"
+        :disabled="props.isRemoving"
+        @click="emit('remove', props.project.repoUrl)"
+      />
+    </td>
   </tr>
 
   <!-- Mobile: simplified card row (rendered when as='card', the default) -->
@@ -136,6 +154,18 @@ SPDX-License-Identifier: MIT
           label="Archived"
           type="project"
         />
+        <lfx-icon-button
+          v-if="props.canRemove && props.project.type === 'repo'"
+          :icon="props.isRemoving ? 'spinner-third' : 'xmark'"
+          size="small"
+          type="transparent"
+          :class="[
+            'ml-auto shrink-0 !text-neutral-400',
+            props.isRemoving ? 'animate-spin' : 'hover:!text-negative-500',
+          ]"
+          :disabled="props.isRemoving"
+          @click.stop="emit('remove', props.project.repoUrl)"
+        />
       </div>
       <lfx-tooltip
         v-if="props.project.isLF && !!maturity.trim()"
@@ -209,19 +239,28 @@ import LfxDependencyDetails from '~/components/modules/collection/components/det
 import LfxBadgeDetails from '~/components/modules/collection/components/details/badge-details.vue';
 import LfxPopover from '~/components/uikit/popover/popover.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxIconButton from '~/components/uikit/icon-button/icon-button.vue';
 import { getRepoNameFromUrl, getRepoSlugFromName } from '~~/server/helpers/repository.helpers';
 import { normalizeRepoName } from '~/components/shared/utils/helper';
 
 const props = withDefaults(
   defineProps<{
     project: ProjectInsights;
     as?: 'row' | 'card';
+    canRemove?: boolean;
+    isRemoving?: boolean;
   }>(),
   {
     as: 'card',
+    canRemove: false,
+    isRemoving: false,
   },
 );
 
+const emit = defineEmits<{
+  remove: [repoUrl: string];
+}>();
+
 const router = useRouter();
 
 const status = computed(() => {

frontend/app/components/modules/collection/views/collection-details.vue

@@ -29,7 +29,10 @@ SPDX-License-Identifier: MIT
           v-for="project in flatData"
           :key="project.slug"
           :project="project"
+          :can-remove="isOwner"
+          :is-removing="removingRepoUrl === project.repoUrl"
           as="card"
+          @remove="handleRemoveRepo"
         />
       </div>
 
@@ -70,14 +73,21 @@ SPDX-License-Identifier: MIT
                 Contributor/Organization dependency
               </th>
               <th class="w-2/12 py-5 px-2 text-left whitespace-nowrap font-semibold">Achievements</th>
+              <th
+                v-if="isOwner"
+                class="py-5 px-2"
+              />
             </tr>
           </thead>
           <tbody>
             <lfx-collection-project-item
               v-for="project in flatData"
               :key="project.slug"
               :project="project"
+              :can-remove="isOwner"
+              :is-removing="removingRepoUrl === project.repoUrl"
               as="row"
+              @remove="handleRemoveRepo"
             />
           </tbody>
         </table>
@@ -202,6 +212,7 @@ import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import LfxCollectionProjectItem from '../components/details/collection-project-item.vue';
 import LfxCollectionProjectItemLoading from '../components/details/collection-project-item-loading.vue';
+import { useConfirmStore } from '~/components/shared/modules/confirm/store/confirm.store';
 import type { Collection, CollectionType } from '~~/types/collection';
 
 import LfxCollectionHeader from '~/components/modules/collection/components/details/header.vue';
@@ -268,6 +279,36 @@ const collectionType = computed<CollectionType>(() => {
   return currentCollection.value?.ssoUserId ? CollectionTypeEnum.COMMUNITY : CollectionTypeEnum.CURATED;
 });
 
+const isOwner = computed(() => collectionType.value === CollectionTypeEnum.MY_COLLECTIONS);
+
+const { openConfirmModal } = useConfirmStore();
+const removingRepoUrl = ref<string | null>(null);
+
+const handleRemoveRepo = async (repoUrl: string) => {
+  const confirmed = await openConfirmModal({
+    title: 'Remove repository',
+    message: `Are you sure you want to remove this repository from the collection?`,
+    confirmLabel: 'Remove',
+    cancelLabel: 'Cancel',
+  });
+
+  if (!confirmed || !currentCollection.value) return;
+
+  const currentUrls = currentCollection.value.repositoryUrls ?? [];
+  const updatedUrls = currentUrls.filter((url) => url !== repoUrl);
+
+  removingRepoUrl.value = repoUrl;
+  try {
+    const updated = await COLLECTIONS_API_SERVICE.updateCollection(currentCollection.value.id, {
+      name: currentCollection.value.name,
+      repositoryUrls: updatedUrls,
+    });
+    handleCollectionUpdated(updated);
+  } finally {
+    removingRepoUrl.value = null;
+  }
+};
+
 const sort = ref(collectionSort || 'contributorCount_desc');
 const isLFOnly = ref(onlyLFProjects === 'true');
 

frontend/types/collection.ts

@@ -34,4 +34,5 @@ export interface Collection {
   isPrivate?: boolean;
   ssoUserId?: string | null;
   likeCount?: number;
+  repositoryUrls?: string[];
 }