chore: some refactoring and added phosphor icons

src/client/ComboBox.tsx

@@ -1,6 +1,7 @@
 import { type ComponentChildren } from 'preact'
 import { useState, useRef, useEffect } from 'preact/hooks'
 import { clsx, isMobile } from './lib/util'
+import { PhosphorIcon } from './Icon'
 
 export const ComboBox = ({
     value,
@@ -40,7 +41,8 @@ export const ComboBox = ({
         >
             <div class="selected" onClick={() => setOpen(!open)}>
                 <div class="content">{children[value]}</div>
-                <span class="material-symbols-outlined">expand_more</span>
+                {/* <span class="material-symbols-outlined">expand_more</span> */}
+                <PhosphorIcon name="caret-down" />
             </div>
             {open && (
                 <div

src/client/Icon.tsx

@@ -0,0 +1,21 @@
+const icons = Object.fromEntries(
+    Object.entries(
+        import.meta.glob<{ default: ImageMetadata }>(`node_modules/@phosphor-icons/core/assets/light/*.svg`, {
+            eager: true,
+        })
+    ).map(([path, module]) => [path.split('/').pop()!.split('.')[0].replace('-light', ''), module])
+)
+
+type Props = {
+    name: string
+}
+
+export const PhosphorIcon = ({ name }: Props) => {
+    const icon = icons[name]
+
+    if (!icon) {
+        throw new Error(`Icon "${name}" not found`)
+    }
+
+    return <img class="phosphor-icon" src={icon.default.src} alt={name} />
+}

src/client/UtentiPage.tsx

@@ -3,6 +3,7 @@ import Fuse from 'fuse.js'
 import { useEffect } from 'preact/hooks'
 import { ShowMore } from './Paginate'
 import { ComboBox } from './ComboBox'
+import { PhosphorIcon } from './Icon'
 
 type User = {
     uid: string
@@ -11,15 +12,15 @@ type User = {
 
 const FILTERS = {
     utenti: {
-        icon: 'person',
+        icon: 'user',
         label: 'Utenti',
     },
     macchinisti: {
-        icon: 'construction',
+        icon: 'wrench',
         label: 'Macchinisti',
     },
     rappstud: {
-        icon: 'account_balance',
+        icon: 'bank',
         label: 'Rappresentanti',
     },
 }
@@ -105,7 +106,9 @@ export const UtentiPage = () => {
                         Object.entries(FILTERS).map(([k, v]) => [
                             k,
                             <>
-                                <span class="material-symbols-outlined">{v.icon}</span> {v.label}
+                                {/* <span class="material-symbols-outlined">{v.icon}</span> {v.label} */}
+                                <PhosphorIcon name={v.icon} />
+                                {v.label}
                             </>,
                         ])
                     )}
@@ -117,7 +120,8 @@ export const UtentiPage = () => {
                         onInput={e => ($searchText.value = e.currentTarget.value)}
                         value={$searchText.value}
                     />
-                    <span class="material-symbols-outlined">search</span>
+                    {/* <span class="material-symbols-outlined">search</span> */}
+                    <PhosphorIcon name="magnifying-glass" />
                 </div>
             </div>
             <div class="search-results">
@@ -126,13 +130,22 @@ export const UtentiPage = () => {
                         {poissonUser => (
                             <div class="search-result">
                                 <div class="icon">
-                                    <span class="material-symbols-outlined">
+                                    {/* <span class="material-symbols-outlined">
                                         {RAPPSTUD.includes(poissonUser.uid)
                                             ? 'account_balance'
                                             : MACCHINISTI.includes(poissonUser.uid)
                                             ? 'construction'
                                             : 'person'}
-                                    </span>
+                                    </span> */}
+                                    <PhosphorIcon
+                                        name={
+                                            RAPPSTUD.includes(poissonUser.uid)
+                                                ? 'bank'
+                                                : MACCHINISTI.includes(poissonUser.uid)
+                                                ? 'wrench'
+                                                : 'user'
+                                        }
+                                    />
                                 </div>
                                 <div class="text">{poissonUser.gecos}</div>
                                 <div class="right">
@@ -140,7 +153,8 @@ export const UtentiPage = () => {
                                         href={`https://poisson.phc.dm.unipi.it/~${poissonUser.uid}`}
                                         target="_blank"
                                     >
-                                        <span class="material-symbols-outlined">open_in_new</span>
+                                        {/* <span class="material-symbols-outlined">open_in_new</span> */}
+                                        <PhosphorIcon name="arrow-square-out" />
                                     </a>
                                 </div>
                             </div>