From 797ff36e276cdaab4732dde96e5a992faf420aaa Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Sat, 9 Nov 2024 17:48:27 -0800
Subject: [PATCH] Content page nearly done

---
 apps/app-frontend/src/App.vue                 |  14 +-
 .../src/components/ui/AccountsCard.vue        |   7 +-
 .../src/components/ui/NavButton.vue           |  15 +-
 .../src/components/ui/modal/ModalWrapper.vue  |   2 +-
 apps/app-frontend/src/pages/instance/Mods.vue | 176 ++++++++++++++++--
 packages/app-lib/src/state/profiles.rs        |   2 +-
 packages/assets/icons/minus.svg               |   1 +
 packages/assets/index.ts                      |   2 +
 packages/assets/styles/variables.scss         |  15 +-
 .../ui/src/components/base/ButtonStyled.vue   |  50 ++++-
 packages/ui/src/components/base/Checkbox.vue  |  13 +-
 .../ui/src/components/base/PopoutMenu.vue     |   2 +-
 .../components/content/ContentListItem.vue    |  19 +-
 .../components/content/ContentListPanel.vue   |  53 +++---
 pnpm-lock.yaml                                |   3 +
 15 files changed, 294 insertions(+), 80 deletions(-)
 create mode 100644 packages/assets/icons/minus.svg

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 0db852571..1abc57b97 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -232,7 +232,7 @@ async function fetchCredentials() {
 }
 
 const MIDAS_BITFLAG = 1 << 0
-const hasPlus = computed(() => credentials.value && credentials.value.user && (credentials.value.user.badges & MIDAS_BITFLAG) === MIDAS_BITFLAG)
+const hasPlus = computed(() => true || credentials.value && credentials.value.user && (credentials.value.user.badges & MIDAS_BITFLAG) === MIDAS_BITFLAG)
 
 onMounted(() => {
   invoke('show_window')
@@ -321,6 +321,9 @@ async function checkUpdates() {
 <template>
   <SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
   <AppSettingsModal ref="settingsTest" />
+  <Suspense>
+    <InstanceCreationModal ref="installationModal" />
+  </Suspense>
   <div v-if="stateInitialized" class="app-grid-layout relative">
     <div class="app-grid-navbar bg-bg-raised flex flex-col p-[1rem] pt-0 gap-[0.5rem] z-10">
       <NavButton to="/">
@@ -338,7 +341,7 @@ async function checkUpdates() {
         <template #label>Library</template>
       </NavButton>
       <div class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
-      <NavButton to="/settings">
+      <NavButton :to="() => $refs.installationModal.show()" :disabled="offline">
         <PlusIcon />
         <template #label>Create new instance</template>
       </NavButton>
@@ -401,14 +404,14 @@ async function checkUpdates() {
       </RouterView>
     </div>
     <div class="app-sidebar mt-px shrink-0 flex flex-col border-0 border-l-[1px] border-[--brand-gradient-border] border-solid overflow-auto" :class="{ 'has-plus': hasPlus }">
-      <div class="app-sidebar-scrollable flex-grow shrink overflow-y-auto relative" :class="{ 'pb-4': !hasPlus }">
+      <div class="app-sidebar-scrollable flex-grow shrink overflow-y-auto relative" :class="{ 'pb-12': !hasPlus }">
         <div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
           <h3 class="text-base m-0">Playing as</h3>
           <suspense>
             <AccountsCard ref="accounts" mode="small" />
           </suspense>
         </div>
-        <div v-if="false" class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
+        <div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
           <h3 class="text-base m-0">Friends</h3>
           <p class="m-0">you have no friends :c</p>
           <p class="m-0">what's up with that?</p>
@@ -458,9 +461,6 @@ async function checkUpdates() {
           <RouterLink v-tooltip="'Library'" to="/library" class="btn icon-only collapsed-button">
             <LibraryIcon />
           </RouterLink>
-          <Suspense>
-            <InstanceCreationModal ref="installationModal" />
-          </Suspense>
         </div>
       </div>
       <div class="settings pages-list">
diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue
index a06176664..1304d39f0 100644
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -14,8 +14,11 @@
           : 'https://launcher-files.modrinth.com/assets/steve_head.png'
       "
     />
-    <span class="w-full">{{ selectedAccount ? selectedAccount.username : 'Select account' }}</span>
-    <DropdownIcon class="unlocked-size w-5 h-5" />
+    <div class="flex flex-col w-full">
+      <span >{{ selectedAccount ? selectedAccount.username : 'Select account' }}</span>
+      <span class="text-secondary text-xs">Minecraft account</span>
+    </div>
+    <DropdownIcon class="unlocked-size w-5 h-5 shrink-0" />
   </div>
   <transition name="fade">
     <Card
diff --git a/apps/app-frontend/src/components/ui/NavButton.vue b/apps/app-frontend/src/components/ui/NavButton.vue
index 2b540513e..9ee8aa037 100644
--- a/apps/app-frontend/src/components/ui/NavButton.vue
+++ b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="tooltip-parent flex items-center justify-center">
-    <RouterLink :to="to" class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast">
+    <RouterLink v-if="typeof to === 'string'" :to="to" v-bind="$attrs" class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast">
       <slot />
     </RouterLink>
+    <button v-else v-bind="$attrs" class="button-animation border-none cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast" @click="to">
+      <slot />
+    </button>
     <div class="tooltip-label">
       <slot name="label" />
     </div>
@@ -12,10 +15,12 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
 
-withDefaults(defineProps<{
-  to: string
-}>(), {
-  to: '/'
+defineProps<{
+  to: (() => void) | string
+}>()
+
+defineOptions({
+  inheritAttrs: false,
 })
 
 </script>
diff --git a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
index a1b26e33d..20cbaf6ac 100644
--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Modal } from '@modrinth/ui'
+import { NewModal as Modal } from '@modrinth/ui'
 import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 import { useTheming } from '@/store/theme.js'
 
diff --git a/apps/app-frontend/src/pages/instance/Mods.vue b/apps/app-frontend/src/pages/instance/Mods.vue
index e7666796b..181a84dbd 100644
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -21,17 +21,12 @@
         <XIcon />
       </Button>
     </div>
-    <ButtonStyled v-if="!isPackLocked" type="transparent" color="green" @click="updateAll">
-      <button>
-        <DownloadIcon /> Update all
-      </button>
-    </ButtonStyled>
     <AddContentButton v-if="!isPackLocked" :instance="instance" />
   </div>
-  <div class="flex flex-wrap gap-1 items-center pb-4">
+  <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
     <FilterIcon class="unlocked-size text-secondary h-5 w-5 mr-1" />
-    <button v-for="filter in ['Mods', 'Resource Packs', 'Shaders', 'Updates available'].filter((x) => isPackLocked ? x !== 'Updates available' : true)" :key="filter" class="px-2 py-1 rounded-full bg-bg-raised text-secondary font-semibold leading-none border-none">
-      {{ filter }}
+    <button v-for="filter in filterOptions" :key="filter" :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`" @click="toggleArray(selectedFilters, filter.id)">
+      {{ filter.formattedName }}
     </button>
   </div>
   <Card v-if="false && projects.length > 0" class="mod-card">
@@ -89,6 +84,8 @@
   </Card>
   <ContentListPanel
       v-if="projects.length > 0"
+      ref="contentList"
+      :locked="isPackLocked"
       :items="search.map((x) => ({
         disabled: x.disabled,
         filename: x.file_name,
@@ -111,7 +108,71 @@
         data: x,
       }))"
   >
+    <template v-if="selectedProjects.length > 0" #headers>
+      <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>
+        </ButtonStyled>
+        <ButtonStyled>
+          <OverflowMenu
+            :options="[
+        {
+          id: 'share-names',
+          action: () => shareNames(),
+        },
+        {
+          id: 'share-file-names',
+          action: () => shareFileNames(),
+        },
+        {
+          id: 'share-urls',
+          action: () => shareUrls(),
+        },
+        {
+          id: 'share-markdown',
+          action: () => shareMarkdown(),
+        }
+      ]">
+            <ShareIcon /> Share <DropdownIcon />
+            <template #share-names>
+              <TextInputIcon /> Project names
+            </template>
+            <template #share-file-names>
+              <FileIcon /> File names
+            </template>
+            <template #share-urls>
+              <LinkIcon /> Project links
+            </template>
+            <template #share-markdown>
+              <CodeIcon /> Markdown links
+            </template>
+          </OverflowMenu>
+        </ButtonStyled>
+        <ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
+          <button><CheckCircleIcon /> Enable</button>
+        </ButtonStyled>
+        <ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
+          <button><SlashIcon /> Disable</button>
+        </ButtonStyled>
+        <ButtonStyled color="red">
+          <button><TrashIcon /> Remove</button>
+        </ButtonStyled>
+      </div>
+    </template>
+    <template #header-actions>
+      <ButtonStyled v-if="!isPackLocked && projects.some((m) => (m as any).outdated)" type="transparent" color="brand" color-fill="text" hover-color-fill="text">
+        <button>
+          <DownloadIcon /> Update all
+        </button>
+      </ButtonStyled>
+    </template>
     <template #actions="{ item }">
+      <ButtonStyled v-if="!isPackLocked && (item.data as any).outdated" type="transparent" color="brand" circular>
+        <button v-tooltip="`Update`" @click="updateProject(item.data)">
+          <DownloadIcon />
+        </button>
+      </ButtonStyled>
+      <div v-else class="w-[36px]"></div>
       <ButtonStyled v-if="!isPackLocked" type="transparent" circular>
         <button v-tooltip="item.disabled ? `Enable` : `Disable`" @click="toggleDisableMod(item.data)">
           <CheckCircleIcon v-if="item.disabled" />
@@ -119,7 +180,7 @@
         </button>
       </ButtonStyled>
       <ButtonStyled v-if="!isPackLocked" type="transparent" circular>
-        <button v-tooltip="'Delete'" @click="removeMod(item)">
+        <button v-tooltip="'Remove'" @click="removeMod(item)">
           <TrashIcon />
         </button>
       </ButtonStyled>
@@ -130,20 +191,25 @@
               id: 'show-file',
               action: () => {},
             },
-            {
-              divider: true,
-            },
             {
               id: 'copy-link',
-              shown: item.project,
+              shown: item.project !== undefined,
               action: () => toggleDisableMod(item.data),
             },
+            {
+              divider: true,
+            },
+            {
+              id: 'remove',
+              color: 'red',
+              action: () => removeMod(item),
+            }
           ]"
           direction="left"
         >
           <MoreVerticalIcon />
           <template #show-file>
-            <ClipboardCopyIcon /> Show file
+            <ExternalIcon /> Show file
           </template>
           <template #copy-link>
             <ClipboardCopyIcon /> Copy link
@@ -154,6 +220,9 @@
           <template v-else #toggle>
             <SlashIcon /> Disable
           </template>
+          <template #remove>
+            <TrashIcon /> Remove
+          </template>
         </OverflowMenu>
       </ButtonStyled>
     </template>
@@ -428,11 +497,12 @@
     :versions="props.versions"
   />
 </template>
-<script setup>
+<script setup lang="ts">
 import {
+  ExternalIcon,
+  LinkIcon,
   LockIcon,
   ClipboardCopyIcon,
-  CompassIcon,
   TrashIcon,
   CheckIcon,
   SearchIcon,
@@ -461,7 +531,9 @@ import {
   Card, ButtonStyled, ContentListPanel, OverflowMenu
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
+import type { ComputedRef } from 'vue';
 import { computed, onUnmounted, ref, watch } from 'vue'
+import { useVIntl, defineMessages } from '@vintl/vintl'
 import {
   add_project_from_path,
   get_projects,
@@ -473,7 +545,7 @@ import {
 import { handleError } from '@/store/notifications.js'
 import { trackEvent } from '@/helpers/analytics'
 import { listen } from '@tauri-apps/api/event'
-import { highlightModInProfile, showProfileInFolder } from '@/helpers/utils.js'
+import { highlightModInProfile } from '@/helpers/utils.js'
 import { MenuIcon, ToggleIcon, TextInputIcon, AddProjectImage, PackageIcon } from '@/assets/icons'
 import ExportModal from '@/components/ui/ExportModal.vue'
 import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
@@ -487,6 +559,9 @@ import {
 import { profile_listener } from '@/helpers/events.js'
 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: {
@@ -538,6 +613,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 selectionMap = ref(new Map())
 
 const initProjects = async (cacheBehaviour) => {
@@ -639,6 +716,67 @@ await initProjects()
 const modpackVersionModal = ref(null)
 const installing = computed(() => props.instance.install_stage !== 'installed')
 
+const vintl = useVIntl();
+const { formatMessage } = vintl;
+
+type FilterOption = {
+  id: string;
+  formattedName: string;
+}
+
+const messages = defineMessages({
+  updatesAvailableFilter: {
+    id: "instance.filter.updates-available",
+    defaultMessage: "Updates available",
+  },
+})
+
+const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
+  const options: FilterOption[] = [];
+
+  const frequency = projects.value.reduce((map, item) => {
+    map[item.project_type] = (map[item.project_type] || 0) + 1;
+    return map;
+  }, {});
+
+  const types = Object.keys(frequency).sort((a, b) => frequency[b] - frequency[a])
+
+  types.forEach(type => {
+    options.push({
+      id: type,
+      formattedName: formatProjectType(type) + "s"
+    });
+  });
+
+  if (!isPackLocked.value && projects.value.some((m) => m.outdated)) {
+    options.push({
+      id: 'updates',
+      formattedName: formatMessage(messages.updatesAvailableFilter)
+    });
+  }
+
+  return options;
+})
+
+const selectedFilters = ref([]);
+const filteredProjects = computed(() => {
+  const updatesFilter = selectedFilters.value.includes('updates');
+
+  const typeFilters = selectedFilters.value.filter(filter => filter !== 'updates');
+
+  return projects.value.filter(project => {
+    return (typeFilters.length === 0 || typeFilters.includes(project.project_type)) && (!updatesFilter || project.outdated);
+  });
+});
+
+function toggleArray(array, value) {
+  if (array.includes(value)) {
+    array.splice(array.indexOf(value), 1);
+  } else {
+    array.push(value);
+  }
+}
+
 const searchFilter = ref('')
 const selectAll = ref(false)
 const selectedProjectType = ref('All')
@@ -661,7 +799,7 @@ const selected = computed(() =>
 )
 
 const functionValues = computed(() =>
-  selected.value.length > 0 ? selected.value : Array.from(projects.value.values()),
+  selectedProjects.value.length > 0 ? selectedProjects.value : Array.from(projects.value.values()),
 )
 
 const selectableProjectTypes = computed(() => {
@@ -677,7 +815,7 @@ const selectableProjectTypes = computed(() => {
 
 const search = computed(() => {
   const projectType = selectableProjectTypes.value[selectedProjectType.value]
-  const filtered = projects.value
+  const filtered = filteredProjects.value
     .filter((mod) => {
       return (
         mod.name.toLowerCase().includes(searchFilter.value.toLowerCase()) &&
diff --git a/packages/app-lib/src/state/profiles.rs b/packages/app-lib/src/state/profiles.rs
index 802cc75e8..37de7b104 100644
--- a/packages/app-lib/src/state/profiles.rs
+++ b/packages/app-lib/src/state/profiles.rs
@@ -193,7 +193,7 @@ impl ProjectType {
             ProjectType::Mod => "mod",
             ProjectType::DataPack => "datapack",
             ProjectType::ResourcePack => "resourcepack",
-            ProjectType::ShaderPack => "shaderpack",
+            ProjectType::ShaderPack => "shader",
         }
     }
 
diff --git a/packages/assets/icons/minus.svg b/packages/assets/icons/minus.svg
new file mode 100644
index 000000000..d5dc9436a
--- /dev/null
+++ b/packages/assets/icons/minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><path d="M5 12h14"/></svg>
\ No newline at end of file
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index ab9a9c526..2629c04e6 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -108,6 +108,7 @@ import _MaximizeIcon from './icons/maximize.svg?component'
 import _MessageIcon from './icons/message.svg?component'
 import _MicrophoneIcon from './icons/microphone.svg?component'
 import _MinimizeIcon from './icons/minimize.svg?component'
+import _MinusIcon from './icons/minus.svg?component'
 import _MonitorSmartphoneIcon from './icons/monitor-smartphone.svg?component'
 import _MoonIcon from './icons/moon.svg?component'
 import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
@@ -285,6 +286,7 @@ export const MaximizeIcon = _MaximizeIcon
 export const MessageIcon = _MessageIcon
 export const MicrophoneIcon = _MicrophoneIcon
 export const MinimizeIcon = _MinimizeIcon
+export const MinusIcon = _MinusIcon
 export const MonitorSmartphoneIcon = _MonitorSmartphoneIcon
 export const MoonIcon = _MoonIcon
 export const MoreHorizontalIcon = _MoreHorizontalIcon
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index 0d6808a10..211aed902 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -42,10 +42,15 @@
   --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
 
   --brand-gradient-bg: linear-gradient(
-    0deg,
-    rgba(184, 255, 219, 0.2) 0%,
-    rgba(90, 230, 130, 0.2) 100%
+      0deg,
+      rgba(68, 182, 138, 0.175) 0%,
+      rgba(58, 250, 112, 0.125) 100%
   );
+  //--brand-gradient-bg: linear-gradient(
+  //    0deg,
+  //    rgba(166, 99, 221, 0.2) 0%,
+  //    rgba(176, 101, 213, 0.15) 100%
+  //);
   --brand-gradient-border: rgba(32, 64, 32, 0.15);
   --brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(213, 235, 224, 0), #d0ece0 70%);
 
@@ -127,7 +132,7 @@ html {
 
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
 
-  --brand-gradient-bg: linear-gradient(0deg, rgba(14, 35, 19, 0.1) 0%, rgba(55, 137, 73, 0.1) 100%);
+  --brand-gradient-bg: linear-gradient(0deg, rgba(14, 35, 19, 0.2) 0%, rgba(55, 137, 73, 0.1) 100%);
   --brand-gradient-border: rgba(155, 255, 160, 0.08);
   --brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(24, 30, 31, 0), #171d1e 80%);
 
@@ -142,6 +147,8 @@ html {
   --color-button-bg: #222329;
 
   --color-ad: #0d1828;
+
+  --brand-gradient-bg: linear-gradient(0deg, rgba(22, 66, 51, 0.3) 0%, rgba(55, 137, 73, 0.15) 100%);
 }
 
 .experimental-styles-within {
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index 5a22c2ff7..321864d75 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -6,9 +6,11 @@ const props = withDefaults(
     color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
     size?: 'standard' | 'large'
     circular?: boolean
-    type?: 'standard' | 'outlined' | 'transparent'
+    type?: 'standard' | 'outlined' | 'transparent' | 'highlight'
     colorFill?: 'auto' | 'background' | 'text' | 'none'
     hoverColorFill?: 'auto' | 'background' | 'text' | 'none'
+    highlightedStyle?: 'main-nav-primary' | 'main-nav-secondary'
+    highlighted?: boolean
   }>(),
   {
     color: 'standard',
@@ -17,23 +19,25 @@ const props = withDefaults(
     type: 'standard',
     colorFill: 'auto',
     hoverColorFill: 'auto',
+    highlightedStyle: 'main-nav-primary',
+    highlighted: false,
   },
 )
 
 const colorVar = computed(() => {
   switch (props.color) {
     case 'brand':
-      return 'var(--color-brand)'
+      return props.type === 'highlight' ? 'var(--color-brand-highlight)' : 'var(--color-brand)'
     case 'red':
-      return 'var(--color-red)'
+      return props.type === 'highlight' ? 'var(--color-red-highlight)' : 'var(--color-red)'
     case 'orange':
-      return 'var(--color-orange)'
+      return props.type === 'highlight' ? 'var(--color-orange-highlight)' : 'var(--color-orange)'
     case 'green':
-      return 'var(--color-green)'
+      return props.type === 'highlight' ? 'var(--color-green-highlight)' : 'var(--color-green)'
     case 'blue':
-      return 'var(--color-blue)'
+      return props.type === 'highlight' ? 'var(--color-blue-highlight)' : 'var(--color-blue)'
     case 'purple':
-      return 'var(--color-purple)'
+      return props.type === 'highlight' ? 'var(--color-purple-highlight)' : 'var(--color-purple)'
     case 'standard':
     default:
       return null
@@ -108,7 +112,11 @@ function setColorFill(
   if (colorVar.value) {
     if (fill === 'background') {
       colors.bg = colorVar.value
-      colors.text = 'var(--color-accent-contrast)'
+      if (props.type === 'highlight') {
+        colors.text = 'var(--color-contrast)'
+      } else {
+        colors.text = 'var(--color-accent-contrast)'
+      }
     } else if (fill === 'text') {
       colors.text = colorVar.value
     }
@@ -117,6 +125,22 @@ function setColorFill(
 }
 
 const colorVariables = computed(() => {
+  if (props.highlighted) {
+    let colors = {
+      bg:
+        props.highlightedStyle === 'main-nav-primary'
+          ? 'var(--color-brand-highlight)'
+          : 'var(--color-button-bg)',
+      text: 'var(--color-contrast)',
+      icon:
+        props.highlightedStyle === 'main-nav-primary'
+          ? 'var(--color-brand)'
+          : 'var(--color-contrast)',
+    }
+    let hoverColors = JSON.parse(JSON.stringify(colors))
+    return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_icon: ${colors.icon}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_hover-icon: ${hoverColors.icon};`
+  }
+
   let colors = {
     bg: 'var(--color-button-bg)',
     text: 'var(--color-base)',
@@ -177,6 +201,16 @@ const colorVariables = computed(() => {
     background-color 0.25s ease-in-out,
     color 0.25s ease-in-out;
 
+
+  svg:first-child {
+    color: var(--_icon, var(--_text));
+    transition: color 0.25s ease-in-out;
+  }
+
+  &:hover svg:first-child{
+    color: var(--_hover-text);
+  }
+
   &[disabled],
   &[disabled='true'],
   &.disabled,
diff --git a/packages/ui/src/components/base/Checkbox.vue b/packages/ui/src/components/base/Checkbox.vue
index 6eaf37f18..e6d414051 100644
--- a/packages/ui/src/components/base/Checkbox.vue
+++ b/packages/ui/src/components/base/Checkbox.vue
@@ -13,7 +13,8 @@
       :aria-label="description"
       :aria-checked="modelValue"
     >
-      <CheckIcon v-if="modelValue && !collapsingToggleStyle" aria-hidden="true" />
+      <MinusIcon v-if="indeterminate" aria-hidden="true" />
+      <CheckIcon v-else-if="modelValue && !collapsingToggleStyle" aria-hidden="true" />
       <DropdownIcon v-else-if="collapsingToggleStyle" aria-hidden="true" />
     </button>
     <!-- aria-hidden is set so screenreaders only use the <button>'s aria-label -->
@@ -24,7 +25,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { CheckIcon, DropdownIcon } from '@modrinth/assets'
+import { CheckIcon, DropdownIcon, MinusIcon } from '@modrinth/assets'
 
 const emit = defineEmits<{
   'update:modelValue': [boolean]
@@ -38,6 +39,7 @@ const props = withDefaults(
     modelValue: boolean
     clickEvent?: () => void
     collapsingToggleStyle?: boolean
+    indeterminate?: boolean
   }>(),
   {
     label: '',
@@ -46,6 +48,7 @@ const props = withDefaults(
     modelValue: false,
     clickEvent: () => {},
     collapsingToggleStyle: false,
+    indeterminate: false,
   },
 )
 
@@ -95,10 +98,14 @@ function toggle() {
 
   &.checked {
     background-color: var(--color-brand);
+
+    svg {
+      color: var(--color-accent-contrast);
+    }
   }
 
   svg {
-    color: var(--color-accent-contrast);
+    color: var(--color-secondary);
     stroke-width: 0.2rem;
     height: 0.8rem;
     width: 0.8rem;
diff --git a/packages/ui/src/components/base/PopoutMenu.vue b/packages/ui/src/components/base/PopoutMenu.vue
index 098c769df..ef58f5ddf 100644
--- a/packages/ui/src/components/base/PopoutMenu.vue
+++ b/packages/ui/src/components/base/PopoutMenu.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { Dropdown } from 'floating-vue'
-import { ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount, defineEmits, defineOptions } from 'vue'
 
 const trigger = ref()
 const menu = ref()
diff --git a/packages/ui/src/components/content/ContentListItem.vue b/packages/ui/src/components/content/ContentListItem.vue
index 0b18d7c5f..72c71c176 100644
--- a/packages/ui/src/components/content/ContentListItem.vue
+++ b/packages/ui/src/components/content/ContentListItem.vue
@@ -35,26 +35,29 @@ export interface ContentItem<T> {
   versionId?: string
 }
 
-defineProps<{
+withDefaults(defineProps<{
   item: ContentItem<T>
-}>()
+  locked?: boolean
+}>(), {
+  locked: false,
+})
 
-const selected = ref(false)
-const emit = defineEmits(['update:selected'])
+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"
   >
     <Checkbox
-      v-model="selected"
+      v-if="!locked"
+      v-model="model"
       :description="``"
       class="select-checkbox"
-      @update:model-value="emit('update:selected', $event)"
     />
       <div
         class="flex items-center gap-2 text-contrast font-medium"
-        :class="{ 'opacity-50': item.disabled }"
+        :class="{ 'opacity-50': item.disabled,
+         'col-span-2': locked}"
       >
         <AutoLink :to="item.project?.link ?? ''" tabindex="-1" v-bind="item.project?.linkProps ?? {}">
           <Avatar :src="item.icon ?? ''" :class="{ grayscale: item.disabled }" size="48px" />
@@ -67,7 +70,7 @@ const emit = defineEmits(['update:selected'])
           </AutoLink>
           <AutoLink :to="item.creator?.link ?? ''" v-bind="item.creator?.linkProps ?? {}">
             <div class="line-clamp-1 break-all" :class="{ 'opacity-50': item.disabled }">
-              <slot v-if="item.creator" :item="item">
+              <slot v-if="item.creator && item.creator.name" :item="item">
                 <span class="text-secondary">
                  by {{ item.creator.name }}
                 </span>
diff --git a/packages/ui/src/components/content/ContentListPanel.vue b/packages/ui/src/components/content/ContentListPanel.vue
index f58cc17f2..52eb7306f 100644
--- a/packages/ui/src/components/content/ContentListPanel.vue
+++ b/packages/ui/src/components/content/ContentListPanel.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="T">
-import { ref, type Ref } from 'vue'
+import { ref, computed } from 'vue'
+import type { Ref } from 'vue'
 import Checkbox from '../base/Checkbox.vue'
 import ContentListItem from './ContentListItem.vue'
 import { type ContentItem } from './ContentListItem.vue'
@@ -9,37 +10,45 @@ import {
 // @ts-ignore
 import { RecycleScroller } from 'vue-virtual-scroller'
 
-defineProps<{
-  items: ContentItem<T>[]
-}>()
+const props = withDefaults(defineProps<{
+  items: ContentItem<T>[],
+  locked?: boolean,
+}>(), {
+  locked: false,
+})
 
-const selected: Ref<string[]> = ref([])
+const manualSelections: Ref<Record<string, boolean>> = ref({})
+const selected: Ref<string[]> = computed(() => Object.keys(manualSelections.value).filter((item) => manualSelections.value[item]))
 
-function toggle(filename: string) {
-  setSelected(filename, !selected.value.includes(filename))
-}
+const allSelected = ref(false)
 
-function setSelected(filename: string, value: boolean) {
-  if (value) {
-    selected.value.push(filename)
-  } else {
-    selected.value = selected.value.filter((item) => item !== filename)
+function setSelected(value: boolean) {
+  for (const item of props.items) {
+    manualSelections.value[item.filename] = value
   }
 }
+
+defineExpose({
+  selected,
+})
 </script>
 
 <template>
   <div class="flex flex-col grid-cols-[min-content,auto,auto,auto,auto]">
     <div
-      class="grid grid-cols-[min-content,4fr,3fr,2fr] gap-3 items-center px-2 pt-1 pb-4 text-contrast font-bold"
+      :class="`${$slots.headers ? 'flex' : 'grid'} grid-cols-[min-content,4fr,3fr,2fr] gap-3 items-center px-2 pt-1 h-10 mb-3 text-contrast font-bold`"
     >
-      <Checkbox :model-value="false" class="select-checkbox" />
-      <div class="flex items-center gap-2">
-<!--        <div class="w-[48px]"></div>-->
-        Name <DropdownIcon />
-      </div>
-      <div class="flex items-center gap-1 max-w-60">Updated <DropdownIcon v-if="false" /></div>
-      <div class="flex"></div>
+      <Checkbox v-if="!locked" v-model="allSelected" class="select-checkbox" @update:model-value="setSelected" :indeterminate="selected.length > 0 && selected.length < items.length" />
+      <slot name="headers">
+        <div class="flex items-center gap-2" :class="{ 'col-span-2': locked }">
+          <!--        <div class="w-[48px]"></div>-->
+          Name <DropdownIcon />
+        </div>
+        <div class="flex items-center gap-1 max-w-60">Updated <DropdownIcon v-if="false" /></div>
+        <div class="flex">
+          <slot name="header-actions" />
+        </div>
+      </slot>
     </div>
     <div class="bg-bg-raised rounded-xl">
       <RecycleScroller
@@ -52,6 +61,8 @@ function setSelected(filename: string, value: boolean) {
       >
         <ContentListItem
           :item="item"
+          :locked="locked"
+          v-model="manualSelections[item.filename]"
           class="mb-2"
         >
           <template #actions="{ item }">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65615b1dc..cb9357fc3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -365,6 +365,9 @@ importers:
       vue-select:
         specifier: 4.0.0-beta.6
         version: 4.0.0-beta.6(vue@3.4.31(typescript@5.5.4))
+      vue-virtual-scroller:
+        specifier: v2.0.0-beta.8
+        version: 2.0.0-beta.8(vue@3.4.31(typescript@5.5.4))
       vue3-apexcharts:
         specifier: ^1.4.4
         version: 1.5.3(apexcharts@3.49.2)(vue@3.4.31(typescript@5.5.4))