Adjust design

Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.28.5 to 7.29.6.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.29.6/packages/babel-core)

---
updated-dependencies:
- dependency-name: "@babel/core"
  dependency-version: 7.29.6
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue

@@ -44,8 +44,12 @@ function setActiveIconName(name: string) {
   activeIconName.value = name;
 }
 
-const { execute: fetchTags, data: tags } = useFetchTags();
-const { execute: fetchCategories, data: categoriesMap } = useFetchCategories();
+const { execute: fetchTags, data: tags, isFetching: isFetchingTags } = useFetchTags();
+const {
+  execute: fetchCategories,
+  data: categoriesMap,
+  isFetching: isFetchingCategories,
+} = useFetchCategories();
 
 const overviewEl = ref<HTMLElement | null>(null);
 const { width: containerWidth } = useElementSize(overviewEl);
@@ -117,6 +121,9 @@ const categoriesList = computed(() => {
     }, []);
 });
 const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
+const isSearchMetadataLoading = computed(
+  () => searchQuery.value.length > 0 && (tags.value == null || categoriesMap.value == null),
+);
 
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(categoriesList, {
   itemHeight: ICON_SIZE + ICON_GRID_GAP,
@@ -135,15 +142,21 @@ onMounted(() => {
   useEventListener(window, 'scroll', containerProps.onScroll);
 });
 
-function onFocusSearchInput() {
-  if (tags.value == null) {
-    fetchTags();
+function loadSearchMetadata() {
+  if (tags.value == null && !isFetchingTags.value) {
+    void fetchTags();
   }
-  if (categoriesMap.value == null) {
-    fetchCategories();
+  if (categoriesMap.value == null && !isFetchingCategories.value) {
+    void fetchCategories();
   }
 }
 
+watch(searchQuery, (searchString) => {
+  if (searchString !== '') {
+    loadSearchMetadata();
+  }
+});
+
 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
 
@@ -178,11 +191,11 @@ function handleCloseDrawer() {
         :shortcut="kbdSearchShortcut"
         class="input-wrapper"
         ref="searchInput"
-        @focus="onFocusSearchInput"
+        @focus="loadSearchMetadata"
       />
     </StickyBar>
     <NoResults
-      v-if="searchPlaceholder.isNoResults"
+      v-if="searchPlaceholder.isNoResults && !isSearchMetadataLoading"
       :searchQuery="searchPlaceholder.query"
       :isBrandSearch="searchPlaceholder.isBrand"
       @clear="searchQuery = ''"

docs/.vitepress/theme/components/icons/IconsOverview.vue

@@ -52,8 +52,12 @@ const props = defineProps<{
 const activeIconName = ref(null);
 const selectedSort = ref(SORTING[0])
 
-const { execute: fetchTags, data: tags } = useFetchTags();
-const { execute: fetchCategories, data: categories } = useFetchCategories();
+const { execute: fetchTags, data: tags, isFetching: isFetchingTags } = useFetchTags();
+const {
+  execute: fetchCategories,
+  data: categories,
+  isFetching: isFetchingCategories,
+} = useFetchCategories();
 
 const overviewEl = ref<HTMLElement | null>(null);
 const { width: containerWidth } = useElementSize(overviewEl);
@@ -110,6 +114,9 @@ const searchResults = useSearch(searchQueryDebounced, mappedIcons, [
 ]);
 
 const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
+const isSearchMetadataLoading = computed(
+  () => searchQuery.value.length > 0 && (tags.value == null || categories.value == null),
+);
 
 const chunkedIcons = computed(() => {
   return chunkArray(searchResults.value, columnSize.value);
@@ -135,15 +142,21 @@ function setActiveIconName(name: string) {
   activeIconName.value = name;
 }
 
-function onFocusSearchInput() {
-  if (tags.value == null) {
-    fetchTags();
+function loadSearchMetadata() {
+  if (tags.value == null && !isFetchingTags.value) {
+    void fetchTags();
   }
-  if (categories.value == null) {
-    fetchCategories();
+  if (categories.value == null && !isFetchingCategories.value) {
+    void fetchCategories();
   }
 }
 
+watch(searchQuery, (searchString) => {
+  if (searchString !== '') {
+    loadSearchMetadata();
+  }
+});
+
 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
@@ -179,7 +192,7 @@ function handleCloseDrawer() {
         ref="searchInput"
         :shortcut="kbdSearchShortcut"
         class="input-wrapper"
-        @focus="onFocusSearchInput"
+        @focus="loadSearchMetadata"
       />
 
       <Select
@@ -197,7 +210,7 @@ function handleCloseDrawer() {
       </Select>
     </StickyBar>
     <NoResults
-      v-if="searchPlaceholder.isNoResults"
+      v-if="searchPlaceholder.isNoResults && !isSearchMetadataLoading"
       :searchQuery="searchPlaceholder.query"
       :isBrandSearch="searchPlaceholder.isBrand"
       @clear="searchQuery = ''"

icons/server-plus.json

@@ -3,6 +3,9 @@
   "contributors": [
     "Turboman3000"
   ],
+  "use-cases": [
+    "To create a new server in a dashboard"
+  ],
   "tags": [
     "add",
     "create",

icons/vector-square.json

@@ -2,7 +2,8 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "chessurisme",
-    "jguddas"
+    "jguddas",
+    "ericfennis"
   ],
   "use-cases": [],
   "tags": [

icons/vector-square.svg

@@ -9,12 +9,12 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M19.5 7a24 24 0 0 1 0 10" />
-  <path d="M4.5 7a24 24 0 0 0 0 10" />
-  <path d="M7 19.5a24 24 0 0 0 10 0" />
-  <path d="M7 4.5a24 24 0 0 1 10 0" />
-  <rect x="17" y="17" width="5" height="5" rx="1" />
-  <rect x="17" y="2" width="5" height="5" rx="1" />
-  <rect x="2" y="17" width="5" height="5" rx="1" />
-  <rect x="2" y="2" width="5" height="5" rx="1" />
+  <path d="M17.023 19.305C15.828 19.811 14.197 20 12 20s-3.828-.189-5.023-.695" />
+  <path d="M17.023 4.695C15.828 4.189 14.197 4 12 4s-3.828.189-5.023.695" />
+  <path d="M19.305 6.977C19.812 8.172 20 9.803 20 12s-.188 3.828-.695 5.023" />
+  <path d="M4.695 17.023C4.189 15.828 4 14.197 4 12s.189-3.828.695-5.023" />
+  <circle cx="19" cy="19" r="2" />
+  <circle cx="19" cy="5" r="2" />
+  <circle cx="5" cy="19" r="2" />
+  <circle cx="5" cy="5" r="2" />
 </svg>

packages/astro/package.json

@@ -58,7 +58,7 @@
     "typescript": "^5.8.3",
     "vite": "^7.3.2",
     "vitest": "^4.1.0",
-    "astro": "^6.1.10"
+    "astro": "^6.4.6"
   },
   "peerDependencies": {
     "astro": "^4 || ^5 || ^6 || ^7"

packages/lucide-solid/package.json

@@ -68,7 +68,7 @@
     "test:watch": "vitest watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.29.6",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-typescript": "^7.23.3",
     "@lucide/build-icons": "workspace:*",