chore: removed icons CDN and other tweaks

package.json

@@ -15,7 +15,7 @@
         "@astrojs/check": "^0.9.4",
         "@astrojs/node": "^8.3.4",
         "@astrojs/preact": "^3.5.3",
-        "@fontsource-variable/material-symbols-outlined": "^5.0.23",
+        "@fontsource-variable/material-symbols-outlined": "^5.1.1",
         "@fontsource/iosevka": "^5.0.11",
         "@fontsource/mononoki": "^5.0.11",
         "@fontsource/open-sans": "^5.0.24",

src/client/ComboBox.tsx

@@ -1,5 +1,6 @@
-import { createContext, type ComponentChildren, type JSX } from 'preact'
+import { type ComponentChildren } from 'preact'
 import { useState, useRef, useEffect } from 'preact/hooks'
+import { clsx } from './lib/util'
 
 export const ComboBox = ({
     value,
@@ -39,7 +40,7 @@ export const ComboBox = ({
             </div>
             {open && (
                 <div
-                    class={cloak ? 'dropdown invisible' : 'dropdown'}
+                    class={clsx('dropdown', cloak && 'invisible')}
                     ref={el => el && setItemWidth(el.offsetWidth)}
                 >
                     {Object.keys(children).map(key => (

src/client/UtentiPage.tsx

@@ -122,7 +122,7 @@ export const UtentiPage = () => {
             </div>
             <div class="search-results">
                 {$searchResults.value ? (
-                    <ShowMore items={$searchResults} pageSize={10}>
+                    <ShowMore items={$searchResults} pageSize={100}>
                         {poissonUser => (
                             <div class="search-result">
                                 <div class="icon">

src/client/lib/util.ts

@@ -32,3 +32,23 @@ export const trottleDebounce = <T extends any[], R>(
         return lastResult
     }
 }
+
+type ClassValue = string | ClassValue[] | Record<string, boolean> | false | undefined
+
+export function clsx(...args: ClassValue[]): string {
+    return args
+        .flatMap(arg => {
+            if (typeof arg === 'string') {
+                return arg
+            } else if (Array.isArray(arg)) {
+                return clsx(...arg)
+            } else if (typeof arg === 'boolean') {
+                return []
+            } else if (typeof arg === 'object') {
+                return Object.entries(arg).flatMap(([key, value]) => (value ? key : []))
+            } else {
+                return []
+            }
+        })
+        .join(' ')
+}

src/layouts/BaseLayout.astro

@@ -7,6 +7,8 @@ import '@fontsource/source-code-pro/latin.css'
 import '@fontsource/space-mono/latin.css'
 import '@fontsource/iosevka/latin.css'
 
+import '@fontsource-variable/material-symbols-outlined/full.css'
+
 import '../styles/main.scss'
 
 type Props = {
@@ -32,10 +34,6 @@ const { title, description, thumbnail, pageTags } = Astro.props
         {thumbnail && <meta property="og:image" content={thumbnail} />}
 
         <link rel="icon" type="image/png" sizes="512x512" href="/assets/icon.png" />
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
-        />
 
         <script>
             import renderMathInElement from 'katex/contrib/auto-render'

src/styles/components.scss

@@ -9,6 +9,16 @@
     //
 
     .material-symbols-outlined {
+        font-family: 'Material Symbols Outlined Variable';
+        font-weight: normal;
+        font-style: normal;
+        line-height: 1;
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: normal;
+        white-space: nowrap;
+        direction: ltr;
+
         display: inline-grid;
         place-content: center;
 
@@ -18,6 +28,8 @@
             'wght' 300,
             'GRAD' 0,
             'opsz' 24;
+
+        max-width: 32px;
     }
 
     .title {