fix(theseus): Fixed multiple bugs (#1304)

* fix(theseus): Resolve log tab freezing entire app (#1127, #1237)
Switched to `vue-typed-virtual-list` due to freezing issues in WebKit caused by `vue-virtual-scroller`, which were difficult to resolve with the previous library.

* fix(theseus): Double opening of Socials Share link (#1136, #1074)

* fix(theseus): Proper symlinks resolution (#1236)
Ensures correct symlink resolution for specific mods, the mods directory, and the entire profile directory.

* fix(theseus): Correctly recognize NeoForge mods (#1215)

* fix(theseus): Corrected `Environments` and `Loaders` filters (#899)

* fix(theseus): Remove `_JAVA_OPTIONS` when testing JRE (#1171)

* fix(theseus): Fixed opening files using `show_in_folder`
Previously, opening a mod would display the contents of the JAR file instead of its location.

* fix(theseus): Hide `.DS_Store` files (#1274, #1002, #1174)

* fix(theseus): Corrected tooltip color

* fix(theseus): Fixed white mode issues (#1144, #1010)

* fix: Corrected `Slider` min and max value handling (#1008)

* fix: Fixed rebase problems

* fix: Fixed `:deep` usage warning

* chore: Updated eslint plugins to fix conflicts with Prettier

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

@@ -59,28 +59,28 @@
       </div>
     </div>
     <div class="log-text">
-      <RecycleScroller
-        v-slot="{ item }"
+      <VirtualScroller
         ref="logContainer"
         class="scroller"
+        :default-size="20"
         :items="displayProcessedLogs"
-        direction="vertical"
-        :item-size="20"
-        key-field="id"
       >
-        <div class="user no-wrap">
-          <span :style="{ color: item.prefixColor, 'font-weight': item.weight }">{{
-            item.prefix
-          }}</span>
-          <span :style="{ color: item.textColor }">{{ item.text }}</span>
-        </div>
-      </RecycleScroller>
+        <template #item="{ ref }">
+          <div class="user no-wrap">
+            <span :style="{ color: ref.prefixColor, 'font-weight': ref.weight }">{{
+              ref.prefix
+            }}</span>
+            <span :style="{ color: ref.textColor }">{{ ref.text }}</span>
+          </div>
+        </template>
+      </VirtualScroller>
     </div>
     <ShareModal
       ref="shareModal"
       header="Share Log"
       share-title="Instance Log"
       share-text="Check out this log from an instance on the Modrinth App"
+      :open-in-new-tab="false"
       link
     />
   </Card>
@@ -104,13 +104,13 @@ import { useRoute } from 'vue-router'
 import { process_listener } from '@/helpers/events.js'
 import { handleError } from '@/store/notifications.js'
 import { ofetch } from 'ofetch'
-
-import { RecycleScroller } from 'vue-virtual-scroller'
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import { createVirtualScroller } from 'vue-typed-virtual-list'
 
 dayjs.extend(isToday)
 dayjs.extend(isYesterday)
 
+const VirtualScroller = createVirtualScroller()
+
 const route = useRoute()
 
 const props = defineProps({
@@ -412,15 +412,20 @@ function handleUserScroll() {
 interval.value = setInterval(async () => {
   if (logs.value.length > 0) {
     logs.value[0] = await getLiveStdLog()
+    const logContainerElement = logContainer.value.$el
+    const scroll =
+      logContainerElement.scrollHeight -
+      logContainerElement.scrollTop -
+      logContainerElement.clientHeight
+    // const scroll = logContainer.value.$el.scrollHeight - logContainer.value.$el.scrollTop - logContainer.value.$el.clientHeight
 
-    const scroll = logContainer.value.getScroll()
     // Allow resetting of userScrolled if the user scrolls to the bottom
     if (selectedLogIndex.value === 0) {
-      if (scroll.end >= logContainer.value.$el.scrollHeight - 10) userScrolled.value = false
+      if (scroll <= 10) userScrolled.value = false
       if (!userScrolled.value) {
         await nextTick()
         isAutoScrolling.value = true
-        logContainer.value.scrollToItem(displayProcessedLogs.value.length - 1)
+        logContainer.value.scrollTo(displayProcessedLogs.value.length - 1)
         setTimeout(() => (isAutoScrolling.value = false), 50)
       }
     }
@@ -489,10 +494,6 @@ onUnmounted(() => {
   white-space: nowrap; /* Keeps content on a single line */
   white-space: normal;
   color-scheme: dark;
-
-  .no-wrap {
-    white-space: pre;
-  }
 }
 
 .filter-checkbox {

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

@@ -322,6 +322,7 @@
     ref="shareModal"
     share-title="Sharing modpack content"
     share-text="Check out the projects I'm using in my modpack!"
+    :open-in-new-tab="false"
   />
   <ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
   <ModpackVersionModal
@@ -1110,6 +1111,7 @@ onUnmounted(() => {
   }
 }
 </style>
+
 <style lang="scss">
 .updating-indicator {
   height: 2.25rem !important;
@@ -1121,10 +1123,6 @@ onUnmounted(() => {
   }
 }
 
-.v-popper--theme-tooltip .v-popper__inner {
-  background: #fff !important;
-}
-
 .select-checkbox {
   button.checkbox {
     border: none;