Fix sockets issues (#3015)

* Fix sockets issues

* Fix app comp

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

@@ -41,6 +41,9 @@ const props = withDefaults(
   {
     type: 'standard',
     openByDefault: false,
+    buttonClass: null,
+    contentClass: null,
+    titleWrapperClass: null,
   },
 )
 

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

@@ -12,6 +12,7 @@
 
 <script setup lang="ts">
 defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   to: any
 }>()
 

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

@@ -70,7 +70,7 @@
   </ButtonStyled>
 </template>
 <script setup lang="ts">
-import { CheckIcon, DropdownIcon, SearchIcon, XIcon } from '@modrinth/assets'
+import { CheckIcon, DropdownIcon, SearchIcon } from '@modrinth/assets'
 import { ButtonStyled, PopoutMenu, Button } from '../index'
 import { computed, ref } from 'vue'
 import ScrollablePanel from './ScrollablePanel.vue'
@@ -94,6 +94,7 @@ const props = withDefaults(
     direction: 'auto',
     displayName: (option: Option) => option as string,
     search: false,
+    dropdownId: null,
   },
 )
 

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

@@ -368,7 +368,6 @@ onMounted(() => {
       if (clipboardData.files && clipboardData.files.length > 0 && props.onImageUpload) {
         // If the user is pasting a file, upload it if there's an included handler and insert the link.
         uploadImagesFromList(clipboardData.files)
-           
           .then(function (url) {
             const selection = markdownCommands.yankSelection(view)
             const altText = selection || 'Replace this with a description'
@@ -654,7 +653,7 @@ function cleanUrl(input: string): string {
   // Attempt to validate and parse the URL
   try {
     url = new URL(input)
-  } catch (e) {
+  } catch {
     throw new Error('Invalid URL. Make sure the URL is well-formed.')
   }
 

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

@@ -20,7 +20,7 @@
 <script setup>
 import { ref } from 'vue'
 
-const props = defineProps({
+defineProps({
   sidebar: {
     type: Boolean,
     default: false,

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

@@ -89,7 +89,7 @@ interface Item extends BaseOption {
 
 type Option = Divider | Item
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     options: Option[]
     disabled?: boolean

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

@@ -60,7 +60,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { GapIcon, ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
-import Button from './Button.vue'
 import ButtonStyled from './ButtonStyled.vue'
 
 const emit = defineEmits<{

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { RadioButtonIcon, RadioButtonChecked } from '@modrinth/assets'
-import { ref } from 'vue'
 
 withDefaults(
   defineProps<{

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

@@ -76,11 +76,19 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
   }
 
   &.bottom-fade {
-    mask-image: linear-gradient(rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)), transparent 100%);
+    mask-image: linear-gradient(
+      rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)),
+      transparent 100%
+    );
   }
 
   &.top-fade.bottom-fade {
-    mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%) var(--_fade-height), rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)), transparent 100%);
+    mask-image: linear-gradient(
+      transparent,
+      rgb(0 0 0 / 100%) var(--_fade-height),
+      rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)),
+      transparent 100%
+    );
   }
 }
 .scrollable-pane {

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

@@ -1,7 +1,5 @@
 <template>
-  <span
-    class="inline-flex items-center gap-1 font-semibold text-secondary"
-  >
+  <span class="inline-flex items-center gap-1 font-semibold text-secondary">
     <component :is="icon" v-if="icon" :aria-hidden="true" class="shrink-0" />
     {{ formattedName }}
   </span>