fix: remove stackblits and setup zed

.nvmrc

@@ -1 +0,0 @@
-22

.stackblitz/codeflow.json

@@ -1,7 +0,0 @@
-{
-  "bot": {
-    "issues": {
-      "trigger": "all-issues"
-    }
-  }
-}

.stackblitzrc

@@ -1,4 +0,0 @@
-{
-  "installDependencies": true,
-  "startCommand": "npm run dev:mocked"
-}

.zed/settings.json

@@ -0,0 +1,7 @@
+{
+  "formatter": {
+    "code_actions": {
+      "source.fixAll.eslint": true
+    }
+  }
+}

app/components/main/MainContent.vue

@@ -17,8 +17,13 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
 const sticky = computed(() => route.path?.startsWith('/settings/'))
 const containerClass = computed(() => {
   // we keep original behavior when not in settings page and when the window height is smaller than the container height
-  if (!isHydrated.value || !sticky.value || (windowHeight.value < containerHeight.value))
+  if (
+    !isHydrated.value
+    || !sticky.value
+    || windowHeight.value < containerHeight.value
+  ) {
     return null
+  }
 
   return 'lg:sticky lg:top-0'
 })
@@ -27,24 +32,54 @@ const containerClass = computed(() => {
 <template>
   <div ref="container" :class="containerClass">
     <div
-      sticky top-0 z-20
+      sticky
+      top-0
+      z-20
       pt="[env(safe-area-inset-top,0)]"
       bg="[rgba(var(--rgb-bg-base),0.7)]"
       :class="{
-        'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
+        'backdrop-blur': !getPreferences(
+          userSettings,
+          'optimizeForLowPerformanceDevice',
+        ),
       }"
     >
-      <div flex justify-between gap-2 min-h-53px px5 py1 :class="{ 'xl:hidden': $route.name !== 'tag' }" border="b base">
+      <div
-        <div flex gap-2 items-center :overflow-hidden="!noOverflowHidden ? '' : false" w-full>
+        flex
+        justify-between
+        gap-2
+        min-h-53px
+        px5
+        py1
+        :class="{ 'xl:hidden': $route.name !== 'tag' }"
+        border="b base"
+      >
+        <div
+          flex
+          gap-2
+          items-center
+          :overflow-hidden="!noOverflowHidden ? '' : false"
+          w-full
+        >
           <button
             v-if="backOnSmallScreen || back"
-            btn-text flex items-center ms="-3" p-3 xl:hidden
+            btn-text
+            flex
+            items-center
+            ms="-3"
+            p-3
+            xl:hidden
             :aria-label="$t('nav.back')"
             @click="$router.go(-1)"
           >
             <div text-lg i-ri:arrow-left-line class="rtl-flip" />
           </button>
-          <div :truncate="!noOverflowHidden ? '' : false" flex w-full class="native-mac:justify-start native-mac:text-center">
+          <div
+            :truncate="!noOverflowHidden ? '' : false"
+            flex
+            w-full
+            class="native-mac:justify-start native-mac:text-center"
+          >
             <slot name="title" />
           </div>
           <div sm:hidden h-7 w-1px />
@@ -60,9 +95,20 @@ const containerClass = computed(() => {
         <div hidden />
       </slot>
     </div>
-    <PwaInstallPrompt xl:hidden />
+    <!-- <PwaInstallPrompt xl:hidden /> -->
-    <div :class="isHydrated && wideLayout ? 'xl:w-full sm:max-w-600px' : 'sm:max-w-600px md:shrink-0'" m-auto>
+    <div
-      <div hidden :class="{ 'xl:block': $route.name !== 'tag' && !$slots.header }" h-6 />
+      :class="
+        isHydrated && wideLayout
+          ? 'xl:w-full sm:max-w-600px'
+          : 'sm:max-w-600px md:shrink-0'
+      "
+      m-auto
+    >
+      <div
+        hidden
+        :class="{ 'xl:block': $route.name !== 'tag' && !$slots.header }"
+        h-6
+      />
       <slot />
     </div>
   </div>

mise.toml

@@ -0,0 +1,2 @@
+[tools]
+node = "22.11"