More app fixes 0.9.0 (#3054)

* initial set of fixes (toggle sidebar, profile pagination)

* more fixes, bump version

* fix lint:

* fix quick switcher ordering

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

@@ -3,6 +3,7 @@
     ref="dropdown"
     no-auto-focus
     :aria-id="dropdownId || null"
+    placement="bottom-end"
     @apply-hide="focusTrigger"
     @apply-show="focusMenuChild"
   >

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

@@ -5,7 +5,6 @@ import Checkbox from '../base/Checkbox.vue'
 import ContentListItem from './ContentListItem.vue'
 import type { ContentItem } from './ContentListItem.vue'
 import { DropdownIcon } from '@modrinth/assets'
-import { createVirtualScroller } from 'vue-typed-virtual-list'
 
 const props = withDefaults(
   defineProps<{
@@ -13,12 +12,11 @@ const props = withDefaults(
     sortColumn: string
     sortAscending: boolean
     updateSort: (column: string) => void
+    currentPage: number
   }>(),
   {},
 )
 
-const VirtualScroller = createVirtualScroller()
-
 const selectionStates: Ref<Record<string, boolean>> = ref({})
 const selected: Ref<string[]> = computed(() =>
   Object.keys(selectionStates.value).filter(
@@ -42,6 +40,10 @@ function setSelected(value: boolean) {
   }
   updateSelection()
 }
+
+const paginatedItems = computed(() =>
+  props.items.slice((props.currentPage - 1) * 20, props.currentPage * 20),
+)
 </script>
 
 <template>
@@ -78,21 +80,19 @@ function setSelected(value: boolean) {
       </slot>
     </div>
     <div class="bg-bg-raised rounded-xl">
-      <VirtualScroller :items="items" :default-size="64" style="height: 100%">
-        <template #item="{ ref, index }">
-          <ContentListItem
-            v-model="selectionStates[ref.filename]"
-            :item="ref"
-            :last="index === items.length - 1"
-            class="mb-2"
-            @update:model-value="updateSelection"
-          >
-            <template #actions="{ item }">
-              <slot name="actions" :item="item" />
-            </template>
-          </ContentListItem>
+      <ContentListItem
+        v-for="(itemRef, index) in paginatedItems"
+        :key="itemRef.filename"
+        v-model="selectionStates[itemRef.filename]"
+        :item="itemRef"
+        :last="index === paginatedItems.length - 1"
+        class="mb-2"
+        @update:model-value="updateSelection"
+      >
+        <template #actions="{ item }">
+          <slot name="actions" :item="item" />
         </template>
-      </VirtualScroller>
+      </ContentListItem>
     </div>
   </div>
 </template>

packages/ui/src/components/project/ProjectHeader.vue

@@ -26,14 +26,15 @@
         v-tooltip="
           `${formatNumber(project.followers, false)} follower${project.downloads !== 1 ? 's' : ''}`
         "
-        class="flex items-center gap-2 border-0 border-solid border-divider pr-4 md:border-r cursor-help"
+        class="flex items-center gap-2 border-0 border-solid border-divider pr-4 cursor-help"
+        :class="{ 'md:border-r': project.categories.length > 0 }"
       >
         <HeartIcon class="h-6 w-6 text-secondary" />
         <span class="font-semibold">
           {{ formatNumber(project.followers) }}
         </span>
       </div>
-      <div class="hidden items-center gap-2 md:flex">
+      <div v-if="project.categories.length > 0" class="hidden items-center gap-2 md:flex">
         <TagsIcon class="h-6 w-6 text-secondary" />
         <div class="flex flex-wrap gap-2">
           <TagItem v-for="(category, index) in project.categories" :key="index">