Fix sockets issues (#3015)

* Fix sockets issues

* Fix app comp

packages/ui/src/components/search/BrowseFiltersPanel.vue

@@ -69,6 +69,7 @@ const props = defineProps<{
 }>()
 
 const filters = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const filters: FilterType<any>[] = [
     {
       id: 'platform',

packages/ui/src/components/search/SearchFilterOption.vue

@@ -4,8 +4,7 @@
       :class="`flex border-none cursor-pointer !w-full items-center gap-2 truncate rounded-xl px-2 py-2 [@media(hover:hover)]:py-1 text-sm font-semibold transition-all hover:text-contrast focus-visible:text-contrast active:scale-[0.98] ${included ? 'bg-brand-highlight text-contrast hover:brightness-125' : excluded ? 'bg-highlight-red text-contrast hover:brightness-125' : 'bg-transparent text-secondary hover:bg-button-bg focus-visible:bg-button-bg [&>svg.check-icon]:hover:text-brand [&>svg.check-icon]:focus-visible:text-brand'}`"
       @click="() => emit('toggle', option)"
     >
-      <slot>
-      </slot>
+      <slot> </slot>
       <BanIcon
         v-if="excluded"
         :class="`filter-action-icon ml-auto h-4 w-4 shrink-0 transition-opacity group-hover:opacity-100 ${excluded ? '' : '[@media(hover:hover)]:opacity-0'}`"
@@ -17,8 +16,11 @@
         aria-hidden="true"
       />
     </button>
-    <div v-if="supportsNegativeFilter && !excluded" class="w-px h-[1.75rem] bg-button-bg [@media(hover:hover)]:contents" :class="{ 'opacity-0': included }">
-    </div>
+    <div
+      v-if="supportsNegativeFilter && !excluded"
+      class="w-px h-[1.75rem] bg-button-bg [@media(hover:hover)]:contents"
+      :class="{ 'opacity-0': included }"
+    ></div>
     <button
       v-if="supportsNegativeFilter && !excluded"
       v-tooltip="excluded ? 'Remove exclusion' : 'Exclude'"
@@ -34,14 +36,17 @@
 import { BanIcon, CheckIcon } from '@modrinth/assets'
 import type { FilterOption } from '../../utils/search'
 
-withDefaults(defineProps<{
-  option: FilterOption
-  included: boolean
-  excluded: boolean
-  supportsNegativeFilter?: boolean
-}>(), {
-  supportsNegativeFilter: false,
-})
+withDefaults(
+  defineProps<{
+    option: FilterOption
+    included: boolean
+    excluded: boolean
+    supportsNegativeFilter?: boolean
+  }>(),
+  {
+    supportsNegativeFilter: false,
+  },
+)
 
 const emit = defineEmits<{
   toggle: [option: FilterOption]

packages/ui/src/components/search/SearchSidebarFilter.vue

@@ -41,7 +41,7 @@
     <template v-if="locked" #default>
       <div class="flex flex-col gap-2 p-3 border-dashed border-2 rounded-2xl border-divider mx-2">
         <p class="m-0 font-bold items-center">
-          <slot :name="`locked-${filterType.id}`" >
+          <slot :name="`locked-${filterType.id}`">
             {{ formatMessage(messages.lockedTitle, { type: filterType.formatted_name }) }}
           </slot>
         </p>