Fix recursion issues with content page

apps/app-frontend/src/pages/instance/Mods.vue

@@ -83,8 +83,8 @@
     <AddContentButton v-if="!isPackLocked" :instance="instance" />
   </Card>
   <ContentListPanel
-      v-if="projects.length > 0"
-      ref="contentList"
+    v-if="projects.length > 0"
+      v-model="selectedFiles"
       :locked="isPackLocked"
       :items="search.map((x) => ({
         disabled: x.disabled,
@@ -109,9 +109,9 @@
       }))"
   >
     <template v-if="selectedProjects.length > 0" #headers>
-      <div class="flex gap-2">
+       <div class="flex gap-2">
         <ButtonStyled v-if="selectedProjects.some((m) => m.outdated)" color="brand" color-fill="text" hover-color-fill="text">
-          <button><DownloadIcon /> Update</button>
+          <button @click="updateSelected()"><DownloadIcon /> Update</button>
         </ButtonStyled>
         <ButtonStyled>
           <OverflowMenu
@@ -149,13 +149,13 @@
           </OverflowMenu>
         </ButtonStyled>
         <ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
-          <button><CheckCircleIcon /> Enable</button>
+          <button @click="enableAll()"><CheckCircleIcon /> Enable</button>
         </ButtonStyled>
         <ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
-          <button><SlashIcon /> Disable</button>
+          <button @click="disableAll()"><SlashIcon /> Disable</button>
         </ButtonStyled>
         <ButtonStyled color="red">
-          <button><TrashIcon /> Remove</button>
+          <button @click="deleteSelected()"><TrashIcon /> Remove</button>
         </ButtonStyled>
       </div>
     </template>
@@ -179,11 +179,6 @@
           <SlashIcon v-else />
         </button>
       </ButtonStyled>
-      <ButtonStyled v-if="!isPackLocked" type="transparent" circular>
-        <button v-tooltip="'Remove'" @click="removeMod(item)">
-          <TrashIcon />
-        </button>
-      </ButtonStyled>
       <ButtonStyled type="transparent" circular>
         <OverflowMenu
           :options="[
@@ -198,10 +193,12 @@
             },
             {
               divider: true,
+              shown: !isPackLocked,
             },
             {
               id: 'remove',
               color: 'red',
+              shown: !isPackLocked,
               action: () => removeMod(item),
             }
           ]"
@@ -561,8 +558,6 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 
-const contentList = ref<InstanceType<typeof ContentListPanel> | null>(null)
-
 const props = defineProps({
   instance: {
     type: Object,
@@ -613,7 +608,8 @@ const canUpdatePack = computed(() => {
 const exportModal = ref(null)
 
 const projects = ref([])
-const selectedProjects = computed(() => projects.value.filter((x) => contentList.value ? contentList.value.selected.includes(x.file_name) : []))
+const selectedFiles = ref([])
+const selectedProjects = computed(() => projects.value.filter((x) => selectedFiles.value.includes(x.file_name)))
 
 const selectionMap = ref(new Map())
 

packages/ui/src/components/base/Checkbox.vue

@@ -33,7 +33,7 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<{
-    label: string
+    label?: string
     disabled?: boolean
     description: string
     modelValue: boolean

packages/ui/src/components/content/ContentListItem.vue

@@ -38,19 +38,23 @@ export interface ContentItem<T> {
 withDefaults(defineProps<{
   item: ContentItem<T>
   locked?: boolean
+  last?: boolean
 }>(), {
   locked: false,
+  last: false,
 })
 
 const model = defineModel()
 </script>
 <template>
   <div
-    class="grid grid-cols-[min-content,4fr,3fr,2fr] gap-3 items-center p-2 h-[64px] border-solid border-0 border-b-[1px] border-b-button-bg relative"
+    class="grid grid-cols-[min-content,4fr,3fr,2fr] gap-3 items-center p-2 h-[64px] border-solid border-0 border-b-button-bg relative"
+    :class="{ 'border-b-[1px]': !last }"
   >
     <Checkbox
       v-if="!locked"
       v-model="model"
+
       :description="``"
       class="select-checkbox"
     />

packages/ui/src/components/content/ContentListPanel.vue

@@ -17,20 +17,25 @@ const props = withDefaults(defineProps<{
   locked: false,
 })
 
-const manualSelections: Ref<Record<string, boolean>> = ref({})
-const selected: Ref<string[]> = computed(() => Object.keys(manualSelections.value).filter((item) => manualSelections.value[item]))
+const selectionStates: Ref<Record<string, boolean>> = ref({})
+const selected: Ref<string[]> = computed(() => Object.keys(selectionStates.value).filter((item) => selectionStates.value[item] && props.items.some((x) => x.filename === item)))
 
 const allSelected = ref(false)
 
+const model = defineModel()
+
+function updateSelection() {
+  model.value = selected.value
+}
+
 function setSelected(value: boolean) {
-  for (const item of props.items) {
-    manualSelections.value[item.filename] = value
+  if (value) {
+    selectionStates.value = Object.fromEntries(props.items.map((item) => [item.filename, true]))
+  } else {
+    selectionStates.value = {}
   }
+  updateSelection()
 }
-
-defineExpose({
-  selected,
-})
 </script>
 
 <template>
@@ -57,12 +62,14 @@ defineExpose({
         disable-transform
         key-field="filename"
         style="height: 100%"
-        v-slot="{ item }"
+        v-slot="{ item, index }"
       >
         <ContentListItem
           :item="item"
           :locked="locked"
-          v-model="manualSelections[item.filename]"
+          v-model="selectionStates[item.filename]"
+          @update:model-value="updateSelection"
+          :last="props.items.length - 1 === index"
           class="mb-2"
         >
           <template #actions="{ item }">