chore(fix): ui glitches on feature blocks (#32)

Author: drehelis

src/components/FeatureSelector.vue

@@ -170,11 +170,11 @@ const manualFeatures = computed(() => {
       <div
         v-for="feature in filteredFeatures"
         :key="feature.id"
-        class="flex flex-col border rounded-lg transition-all group overflow-hidden"
+        class="flex flex-col border rounded-lg transition-all group relative focus-within:z-20"
         :class="
           selectedFeatures[feature.id]
-            ? 'bg-ide-accent/5 border-ide-accent/40 ring-1 ring-ide-accent/20'
-            : 'bg-ide-activity/30 border-ide-border hover:border-ide-accent/30'
+            ? 'bg-ide-accent/5 border-ide-accent/40 ring-1 ring-ide-accent/20 z-10'
+            : 'bg-ide-activity/30 border-ide-border hover:border-ide-accent/30 z-0'
         "
       >
         <div
@@ -396,7 +396,7 @@ const manualFeatures = computed(() => {
       <div
         v-for="id in manualFeatures"
         :key="id"
-        class="flex flex-col border rounded-lg bg-ide-accent/5 border-ide-accent/40 ring-1 ring-ide-accent/20 overflow-hidden"
+        class="flex flex-col border rounded-lg bg-ide-accent/5 border-ide-accent/40 ring-1 ring-ide-accent/20 relative focus-within:z-20"
       >
         <div class="flex items-center justify-between p-3">
           <div class="flex flex-col flex-1 min-w-0">

src/components/SearchableSelect.vue

@@ -145,7 +145,7 @@ const isLoading = computed(() => props.loading);
     </div>
     <div
       v-if="showDropdown"
-      class="absolute top-full left-0 right-0 mt-1 bg-ide-activity border border-ide-border rounded-lg shadow-xl z-50 max-h-60 overflow-y-auto custom-scrollbar"
+      class="absolute top-full left-0 right-0 mt-1 bg-ide-sidebar/95 backdrop-blur-md border border-ide-border rounded-lg shadow-2xl z-50 max-h-60 overflow-y-auto custom-scrollbar"
     >
       <div v-if="searchable" class="p-2 border-b border-ide-border/50">
         <input

src/components/config/sections/General/ImageSourceField.vue

@@ -56,7 +56,7 @@ dropdownRef;
       <div
         v-if="showImageSuggestions && filteredImages.length > 0"
         ref="dropdownRef"
-        class="absolute top-full left-0 right-0 mt-1 bg-ide-activity border border-ide-border rounded-lg shadow-xl z-50 max-h-60 overflow-y-auto custom-scrollbar transition-all"
+        class="absolute top-full left-0 right-0 mt-1 bg-ide-sidebar/95 backdrop-blur-md border border-ide-border rounded-lg shadow-2xl z-50 max-h-60 overflow-y-auto custom-scrollbar transition-all"
       >
         <div
           v-for="(img, i) in filteredImages"

src/composables/useFeatures.ts

@@ -1,4 +1,5 @@
 import { ref, onMounted } from "vue";
+import { DATA_URLS } from "../constants/urls";
 
 export interface FeatureOption {
   type: "string" | "boolean";
@@ -27,7 +28,7 @@ export function useFeatures() {
     error.value = null;
 
     try {
-      const res = await fetch("/data/features.json");
+      const res = await fetch(DATA_URLS.FEATURES);
       if (!res.ok) throw new Error("No data found");
 
       features.value = await res.json();

src/composables/useImageAutocomplete.ts

@@ -1,22 +1,27 @@
 import { ref, computed, reactive, watch, nextTick } from "vue";
-import { MCR_PREFIX } from "../constants/urls";
+import { MCR_PREFIX, DATA_URLS } from "../constants/urls";
 
 export const sharedTagsCache = reactive<Record<string, string[]>>({});
 let fetchPromise: Promise<void> | null = null;
 
 export function ensureSharedTags() {
   if (fetchPromise) return fetchPromise;
 
-  fetchPromise = fetch("/data/imageTags.json")
+  fetchPromise = fetch(DATA_URLS.IMAGE_TAGS)
     .then((res) => {
       if (!res.ok) throw new Error();
       return res.json();
     })
     .then((data) => {
+      for (const key in sharedTagsCache) {
+        if (Object.prototype.hasOwnProperty.call(sharedTagsCache, key)) {
+          delete sharedTagsCache[key];
+        }
+      }
       Object.assign(sharedTagsCache, data);
     })
     .catch(() => {
-      console.warn("imageTags.json not found. Using fallback behavior.");
+      console.warn("imageTags.json not found.");
       fetchPromise = null;
     });
 

src/constants/urls.ts

@@ -22,3 +22,10 @@ export const URLS = {
   // External
   SIMPLE_ICONS_BASE: "https://cdn.simpleicons.org",
 };
+
+export const BASE_URL = import.meta.env.BASE_URL;
+
+export const DATA_URLS = {
+  FEATURES: `${BASE_URL}data/features.json`,
+  IMAGE_TAGS: `${BASE_URL}data/imageTags.json`,
+};