From 7e72e34088dfd261fe8804d3e6fc0e2ba47e50f8 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 02:43:45 +0200
Subject: [PATCH 01/30] feat(furni-editor): updateFurnidata/revertFurnidata
 hook actions

---
 src/hooks/furni-editor/useFurniEditor.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/hooks/furni-editor/useFurniEditor.ts b/src/hooks/furni-editor/useFurniEditor.ts
index cb62d86..201b735 100644
--- a/src/hooks/furni-editor/useFurniEditor.ts
+++ b/src/hooks/furni-editor/useFurniEditor.ts
@@ -1,4 +1,4 @@
-import { FurniEditorBySpriteComposer, FurniEditorDeleteComposer, FurniEditorDetailComposer, FurniEditorDetailResultEvent, FurniEditorInteractionsComposer, FurniEditorInteractionsResultEvent, FurniEditorResultEvent, FurniEditorSearchComposer, FurniEditorSearchResultEvent, FurniEditorUpdateComposer } from '@nitrots/nitro-renderer';
+import { FurniEditorBySpriteComposer, FurniEditorDeleteComposer, FurniEditorDetailComposer, FurniEditorDetailResultEvent, FurniEditorInteractionsComposer, FurniEditorInteractionsResultEvent, FurniEditorResultEvent, FurniEditorRevertFurnidataComposer, FurniEditorSearchComposer, FurniEditorSearchResultEvent, FurniEditorUpdateComposer, FurniEditorUpdateFurnidataComposer } from '@nitrots/nitro-renderer';
 import { useCallback, useRef, useState } from 'react';
 import { NotificationAlertType, SendMessageComposer } from '../../api';
 import { useMessageEvent, useNotification } from '../../hooks';
@@ -246,6 +246,20 @@ export const useFurniEditor = () =>
         SendMessageComposer(new FurniEditorDeleteComposer(id));
     }, []);
 
+    const updateFurnidata = useCallback((id: number, name: string, description: string) =>
+    {
+        pendingActionRef.current = { action: 'update', itemId: id };
+        setLoading(true);
+        SendMessageComposer(new FurniEditorUpdateFurnidataComposer(id, JSON.stringify({ name, description })));
+    }, []);
+
+    const revertFurnidata = useCallback((id: number) =>
+    {
+        pendingActionRef.current = { action: 'update', itemId: id };
+        setLoading(true);
+        SendMessageComposer(new FurniEditorRevertFurnidataComposer(id));
+    }, []);
+
     const loadInteractions = useCallback(() =>
     {
         SendMessageComposer(new FurniEditorInteractionsComposer());
@@ -255,6 +269,7 @@ export const useFurniEditor = () =>
         items, total, page, loading, error, clearError,
         selectedItem, setSelectedItem, catalogItems, furniDataEntry,
         interactions,
-        searchItems, loadDetail, loadBySpriteId, updateItem, deleteItem, loadInteractions
+        searchItems, loadDetail, loadBySpriteId, updateItem, deleteItem, loadInteractions,
+        updateFurnidata, revertFurnidata
     };
 };

From d7e294b343b843ee2894be2f1390aa1e5b6fda1b Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 02:46:48 +0200
Subject: [PATCH 02/30] feat(furni-editor): editable furnidata name/desc
 section + read-only classname/public_name + diff-confirm + revert

---
 .../furni-editor/FurniEditorView.tsx          |  5 +-
 .../views/FurniEditorEditView.tsx             | 66 +++++++++++++------
 2 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/src/components/furni-editor/FurniEditorView.tsx b/src/components/furni-editor/FurniEditorView.tsx
index 65206ba..6133b9b 100644
--- a/src/components/furni-editor/FurniEditorView.tsx
+++ b/src/components/furni-editor/FurniEditorView.tsx
@@ -18,7 +18,8 @@ export const FurniEditorView: FC<{}> = () =>
         items, total, page, loading, error, clearError,
         selectedItem, setSelectedItem, furniDataEntry,
         interactions,
-        searchItems, loadDetail, loadBySpriteId, updateItem, deleteItem, loadInteractions
+        searchItems, loadDetail, loadBySpriteId, updateItem, deleteItem, loadInteractions,
+        updateFurnidata, revertFurnidata
     } = useFurniEditor();
 
     const isMod = useHasPermission('acc_catalogfurni');
@@ -155,6 +156,8 @@ export const FurniEditorView: FC<{}> = () =>
                         onUpdate={ updateItem }
                         onDelete={ deleteItem }
                         onBack={ handleBack }
+                        onUpdateFurnidata={ updateFurnidata }
+                        onRevertFurnidata={ revertFurnidata }
                     />
                 }
 
diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 0d9fe2d..22c7e14 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -11,6 +11,8 @@ interface FurniEditorEditViewProps
     onUpdate: (id: number, fields: Record<string, unknown>) => void;
     onDelete: (id: number) => void;
     onBack: () => void;
+    onUpdateFurnidata: (id: number, name: string, description: string) => void;
+    onRevertFurnidata: (id: number) => void;
 }
 
 const FIELD_TIPS: Record<string, string> = {
@@ -65,7 +67,7 @@ const Tip: FC<{ field: string }> = ({ field }) =>
 
 export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
 {
-    const { item, furniDataEntry, interactions, loading, onUpdate, onDelete, onBack } = props;
+    const { item, furniDataEntry, interactions, loading, onUpdate, onDelete, onBack, onUpdateFurnidata, onRevertFurnidata } = props;
     const saveRef = useRef<() => void>(null);
 
     const [ form, setForm ] = useState({
@@ -91,6 +93,9 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     });
 
     const [ showDeleteDialog, setShowDeleteDialog ] = useState(false);
+    const [ furniName, setFurniName ] = useState('');
+    const [ furniDescription, setFurniDescription ] = useState('');
+    const [ confirmFurnidata, setConfirmFurnidata ] = useState(false);
 
     useEffect(() =>
     {
@@ -119,7 +124,10 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
         });
 
         setShowDeleteDialog(false);
-    }, [ item ]);
+        setFurniName(String(furniDataEntry?.name ?? ''));
+        setFurniDescription(String(furniDataEntry?.description ?? ''));
+        setConfirmFurnidata(false);
+    }, [ item, furniDataEntry ]);
 
     const setField = useCallback((key: string, value: unknown) =>
     {
@@ -209,6 +217,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     const inputClass = (field?: string) =>
         `w-full px-2 py-1 text-xs leading-normal rounded-sm border border-[#ccc] min-h-[calc(1.5em+0.5rem+2px)] ${ field && validation[field] ? 'border-red-500 bg-red-50' : '' }`;
     const labelClass = 'text-[11px] font-bold text-[#333] mb-0 flex items-center gap-0.5';
+    const readonlyClass = 'w-full px-2 py-1 text-sm font-mono rounded-sm border border-[#ddd] bg-[#f2f2eb] text-[#555] select-all';
 
     return (
         <Column gap={ 1 } className="h-full overflow-auto">
@@ -232,14 +241,12 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
             <Section title="Basic Info">
                 <div className="grid grid-cols-2 gap-2">
                     <div>
-                        <label className={ labelClass }>Item Name</label>
-                        <input className={ inputClass('itemName') } value={ form.itemName } onChange={ e => setField('itemName', e.target.value) } />
-                        { validation.itemName && <span className="text-[9px] text-red-500">{ validation.itemName }</span> }
+                        <label className={ labelClass }>Classname</label>
+                        <div className={ readonlyClass }>{ form.itemName }</div>
                     </div>
                     <div>
-                        <label className={ labelClass }>Public Name</label>
-                        <input className={ inputClass('publicName') } value={ form.publicName } onChange={ e => setField('publicName', e.target.value) } />
-                        { validation.publicName && <span className="text-[9px] text-red-500">{ validation.publicName }</span> }
+                        <label className={ labelClass }>Public Name (DB fallback)</label>
+                        <div className={ readonlyClass }>{ form.publicName }</div>
                     </div>
                     <div>
                         <label className={ labelClass }>Sprite ID</label>
@@ -320,18 +327,24 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                 </div>
             </Section>
 
-            { furniDataEntry &&
-                <Section title="FurniData.json" defaultOpen={ false }>
-                    <div className="grid grid-cols-2 gap-x-3 gap-y-0.5 text-[10px]">
-                        { Object.entries(furniDataEntry).map(([ key, value ]) => (
-                            <div key={ key } className="flex justify-between bg-[#f5f5f5] px-2 py-0.5 rounded">
-                                <span className="font-bold text-[#555]">{ key }</span>
-                                <span className="text-[#333] truncate ml-1 max-w-[120px] text-right">{ String(value ?? '') }</span>
-                            </div>
-                        )) }
+            <Section title="Furnidata (display name)" defaultOpen={ true }>
+                <Column gap={ 1 }>
+                    <div>
+                        <label className={ labelClass }>Display Name</label>
+                        <input className={ inputClass() } value={ furniName } onChange={ e => setFurniName(e.target.value) } maxLength={ 256 } />
                     </div>
-                </Section>
-            }
+                    <div>
+                        <label className={ labelClass }>Description</label>
+                        <textarea className={ inputClass() } rows={ 3 } value={ furniDescription } onChange={ e => setFurniDescription(e.target.value) } maxLength={ 256 } />
+                    </div>
+                    { (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
+                        <span className="text-[10px] text-orange-500 font-bold">Unsaved furnidata changes</span> }
+                    <Flex gap={ 1 }>
+                        <Button variant="success" disabled={ loading } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
+                        <Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
+                    </Flex>
+                </Column>
+            </Section>
 
             { /* Actions */ }
             <Flex gap={ 1 } justifyContent="between" alignItems="center" className="mt-1">
@@ -366,6 +379,21 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                     </div>
                 </div>
             }
+
+            { /* Furnidata Confirmation Dialog */ }
+            { confirmFurnidata &&
+                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={ () => setConfirmFurnidata(false) }>
+                    <div className="bg-white rounded-lg shadow-xl p-4 w-[320px]" onClick={ e => e.stopPropagation() }>
+                        <Text bold className="text-[14px] mb-2 block">Apply furnidata change to ALL clients?</Text>
+                        <div className="text-xs mb-1"><b>Name:</b> { String(furniDataEntry?.name ?? '') } → { furniName }</div>
+                        <div className="text-xs mb-3"><b>Desc:</b> { String(furniDataEntry?.description ?? '') } → { furniDescription }</div>
+                        <Flex gap={ 1 } justifyContent="end">
+                            <Button variant="secondary" onClick={ () => setConfirmFurnidata(false) }>Cancel</Button>
+                            <Button variant="success" onClick={ () => { onUpdateFurnidata(item.id, furniName, furniDescription); setConfirmFurnidata(false); } }>Confirm</Button>
+                        </Flex>
+                    </div>
+                </div>
+            }
         </Column>
     );
 };

From 0affad752c7a1f0f7b0bd93e9fc87f7826304b3d Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 12:50:59 +0200
Subject: [PATCH 03/30] style(furni-editor): theme-token typography refresh
 (labels, inputs focus ring, mono read-only)

---
 src/components/furni-editor/views/FurniEditorEditView.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 22c7e14..2e45045 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -215,8 +215,8 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     }, []);
 
     const inputClass = (field?: string) =>
-        `w-full px-2 py-1 text-xs leading-normal rounded-sm border border-[#ccc] min-h-[calc(1.5em+0.5rem+2px)] ${ field && validation[field] ? 'border-red-500 bg-red-50' : '' }`;
-    const labelClass = 'text-[11px] font-bold text-[#333] mb-0 flex items-center gap-0.5';
+        `w-full px-2 py-1 text-sm leading-normal rounded-sm border border-[#bbb] focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/40 min-h-[calc(1.5em+0.5rem+2px)]${ field && validation[field] ? ' border-red-500 bg-red-50' : '' }`;
+    const labelClass = 'text-[10px] font-bold text-secondary uppercase tracking-wider mb-0.5 flex items-center gap-0.5';
     const readonlyClass = 'w-full px-2 py-1 text-sm font-mono rounded-sm border border-[#ddd] bg-[#f2f2eb] text-[#555] select-all';
 
     return (
@@ -229,9 +229,9 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                 </div>
                 <Flex column gap={ 0 }>
                     <Flex alignItems="center" gap={ 1 }>
-                        <Text bold className="text-[12px]">ID: { item.id }</Text>
+                        <Text bold className="text-[12px] font-mono text-[#555]">ID: { item.id }</Text>
                         <span className="text-[#999]">|</span>
-                        <Text bold className="text-[12px]">Sprite: { item.spriteId }</Text>
+                        <Text bold className="text-[12px] font-mono text-[#555]">Sprite: { item.spriteId }</Text>
                     </Flex>
                     <Text small variant="gray">({ item.usageCount } in use)</Text>
                 </Flex>

From a520fc73afd8332a1944816c8fc41515b8dd86e4 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 13:02:56 +0200
Subject: [PATCH 04/30] style(furni-editor): move display-name edit to top +
 unify theme (neutral labels, matched selects, single teal accent)

---
 .../views/FurniEditorEditView.tsx             | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 2e45045..af18754 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -216,7 +216,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
 
     const inputClass = (field?: string) =>
         `w-full px-2 py-1 text-sm leading-normal rounded-sm border border-[#bbb] focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/40 min-h-[calc(1.5em+0.5rem+2px)]${ field && validation[field] ? ' border-red-500 bg-red-50' : '' }`;
-    const labelClass = 'text-[10px] font-bold text-secondary uppercase tracking-wider mb-0.5 flex items-center gap-0.5';
+    const labelClass = 'text-[11px] font-bold text-[#374151] mb-0.5 flex items-center gap-0.5';
     const readonlyClass = 'w-full px-2 py-1 text-sm font-mono rounded-sm border border-[#ddd] bg-[#f2f2eb] text-[#555] select-all';
 
     return (
@@ -238,6 +238,31 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                 { isDirty && <span className="text-[10px] text-orange-500 font-bold ml-auto">Unsaved changes</span> }
             </Flex>
 
+            { /* Primary edit surface: furnidata display name + description (server-authoritative, live) */ }
+            <div className="bg-white rounded border border-primary/40 shadow-sm">
+                <div className="flex items-center justify-between px-2 py-1.5 border-b border-[#eee]">
+                    <Text small bold variant="primary">Display Name &amp; Description</Text>
+                    { (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
+                        <span className="text-[10px] text-orange-500 font-bold">Unsaved</span> }
+                </div>
+                <div className="px-2 pt-1 pb-2">
+                    <Column gap={ 1 }>
+                        <div>
+                            <label className={ labelClass }>Display Name (furnidata)</label>
+                            <input className={ inputClass() } value={ furniName } onChange={ e => setFurniName(e.target.value) } maxLength={ 256 } />
+                        </div>
+                        <div>
+                            <label className={ labelClass }>Description</label>
+                            <textarea className={ inputClass() } rows={ 2 } value={ furniDescription } onChange={ e => setFurniDescription(e.target.value) } maxLength={ 256 } />
+                        </div>
+                        <Flex gap={ 1 }>
+                            <Button variant="success" disabled={ loading } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
+                            <Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
+                        </Flex>
+                    </Column>
+                </div>
+            </div>
+
             <Section title="Basic Info">
                 <div className="grid grid-cols-2 gap-2">
                     <div>
@@ -254,7 +279,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                     </div>
                     <div>
                         <label className={ labelClass }>Type</label>
-                        <select className="w-full px-2 py-1 text-xs leading-normal rounded-sm border border-[#ccc] pr-8" value={ form.type } onChange={ e => setField('type', e.target.value) }>
+                        <select className="w-full px-2 py-1 text-sm leading-normal rounded-sm border border-[#bbb] focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/40 pr-8" value={ form.type } onChange={ e => setField('type', e.target.value) }>
                             <option value="s">Floor (s)</option>
                             <option value="i">Wall (i)</option>
                         </select>
@@ -286,7 +311,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                 <div className="flex flex-col gap-2">
                     { PERM_GROUPS.map(group => (
                         <div key={ group.label }>
-                            <Text className="text-[10px] font-bold text-[#666] uppercase tracking-wider mb-0.5 block">{ group.label }</Text>
+                            <Text className="text-[10px] font-bold text-[#9ca3af] uppercase tracking-wider mb-1 block">{ group.label }</Text>
                             <div className="grid grid-cols-4 gap-x-3 gap-y-1">
                                 { group.keys.map(key => (
                                     <label key={ key } className="flex items-center gap-1 text-[11px] cursor-pointer">
@@ -309,7 +334,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                 <div className="grid grid-cols-3 gap-2">
                     <div className="col-span-2">
                         <label className={ labelClass }>Type<Tip field="interactionType" /></label>
-                        <select className="w-full px-2 py-1 text-xs leading-normal rounded-sm border border-[#ccc] pr-8" value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
+                        <select className="w-full px-2 py-1 text-sm leading-normal rounded-sm border border-[#bbb] focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/40 pr-8" value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
                             <option value="">none</option>
                             { interactions.map(i => (
                                 <option key={ i } value={ i }>{ i }</option>
@@ -327,25 +352,6 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                 </div>
             </Section>
 
-            <Section title="Furnidata (display name)" defaultOpen={ true }>
-                <Column gap={ 1 }>
-                    <div>
-                        <label className={ labelClass }>Display Name</label>
-                        <input className={ inputClass() } value={ furniName } onChange={ e => setFurniName(e.target.value) } maxLength={ 256 } />
-                    </div>
-                    <div>
-                        <label className={ labelClass }>Description</label>
-                        <textarea className={ inputClass() } rows={ 3 } value={ furniDescription } onChange={ e => setFurniDescription(e.target.value) } maxLength={ 256 } />
-                    </div>
-                    { (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
-                        <span className="text-[10px] text-orange-500 font-bold">Unsaved furnidata changes</span> }
-                    <Flex gap={ 1 }>
-                        <Button variant="success" disabled={ loading } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
-                        <Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
-                    </Flex>
-                </Column>
-            </Section>
-
             { /* Actions */ }
             <Flex gap={ 1 } justifyContent="between" alignItems="center" className="mt-1">
                 <Flex gap={ 1 } alignItems="center">

From 02f549827c0472247ebdcb68a76e2a9edd666265 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 13:08:19 +0200
Subject: [PATCH 05/30] feat(furni-editor): make Sprite ID + Type read-only
 (all Basic Info now read-only)

---
 src/components/furni-editor/views/FurniEditorEditView.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index af18754..2c0c0a7 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -275,14 +275,11 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                     </div>
                     <div>
                         <label className={ labelClass }>Sprite ID</label>
-                        <input type="number" className={ inputClass() } value={ form.spriteId } onChange={ e => setField('spriteId', Number(e.target.value)) } />
+                        <div className={ readonlyClass }>{ form.spriteId }</div>
                     </div>
                     <div>
                         <label className={ labelClass }>Type</label>
-                        <select className="w-full px-2 py-1 text-sm leading-normal rounded-sm border border-[#bbb] focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/40 pr-8" value={ form.type } onChange={ e => setField('type', e.target.value) }>
-                            <option value="s">Floor (s)</option>
-                            <option value="i">Wall (i)</option>
-                        </select>
+                        <div className={ readonlyClass }>{ form.type === 's' ? 'Floor (s)' : 'Wall (i)' }</div>
                     </div>
                 </div>
             </Section>

From 2d93fc9220ef0785be7826997f9f2a454a606bc4 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 13:26:15 +0200
Subject: [PATCH 06/30] =?UTF-8?q?style(furni-editor):=20graphical=20reskin?=
 =?UTF-8?q?=20=E2=80=94=20teal=20hero=20header=20w/=20big=20preview=20+=20?=
 =?UTF-8?q?dynamic=20name=20+=20chips,=20soft=20card=20sections,=20LIVE=20?=
 =?UTF-8?q?pulse=20on=20display-name=20card,=20page=20bg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/FurniEditorEditView.tsx             | 49 ++++++++++---------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 2c0c0a7..f9ac1bb 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -35,16 +35,16 @@ const Section: FC<SectionProps> = ({ title, children, defaultOpen = true }) =>
     const [ open, setOpen ] = useState(defaultOpen);
 
     return (
-        <div className="bg-white rounded border border-[#ccc]">
+        <div className="bg-white rounded-lg border border-[#d9ddd5] shadow-sm overflow-hidden">
             <button
                 type="button"
-                className="w-full flex items-center justify-between px-2 py-1.5 cursor-pointer hover:bg-[#f5f5f5] transition-colors"
+                className="w-full flex items-center justify-between px-2.5 py-2 cursor-pointer hover:bg-[#f5f7f3] transition-colors"
                 onClick={ () => setOpen(p => !p) }
             >
-                <Text small bold variant="primary">{ title }</Text>
-                <span className="text-[10px] text-[#999]">{ open ? '▼' : '▶' }</span>
+                <Text small bold variant="primary" className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-primary" />{ title }</Text>
+                <span className="text-[10px] text-[#aab2a3] transition-transform duration-200" style={ { transform: open ? 'rotate(0deg)' : 'rotate(-90deg)' } }>▼</span>
             </button>
-            { open && <div className="px-2 pb-2">{ children }</div> }
+            { open && <div className="px-2.5 pb-2.5 pt-0.5">{ children }</div> }
         </div>
     );
 };
@@ -220,28 +220,31 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     const readonlyClass = 'w-full px-2 py-1 text-sm font-mono rounded-sm border border-[#ddd] bg-[#f2f2eb] text-[#555] select-all';
 
     return (
-        <Column gap={ 1 } className="h-full overflow-auto">
-            { /* Header */ }
-            <Flex gap={ 2 } alignItems="center" className="mb-1">
-                <Button variant="secondary" onClick={ handleBack }>Back</Button>
-                <div className="bg-[#e9ecef] rounded border border-[#ccc] flex items-center justify-center w-[48px] h-[48px]">
-                    <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-150" />
-                </div>
-                <Flex column gap={ 0 }>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <Text bold className="text-[12px] font-mono text-[#555]">ID: { item.id }</Text>
-                        <span className="text-[#999]">|</span>
-                        <Text bold className="text-[12px] font-mono text-[#555]">Sprite: { item.spriteId }</Text>
+        <Column gap={ 2 } className="h-full overflow-auto bg-gradient-to-b from-[#eef1ec] to-[#e2e6df] p-2">
+            { /* Hero header */ }
+            <div className="relative overflow-hidden rounded-lg border border-[#15506b] shadow-md bg-gradient-to-br from-primary to-[#0f4a63]">
+                <Flex alignItems="center" gap={ 2 } className="p-2.5">
+                    <div className="shrink-0 w-[68px] h-[68px] rounded-md bg-[#eef1ec] border border-white/40 shadow-inner flex items-center justify-center overflow-hidden">
+                        <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-[2]" />
+                    </div>
+                    <Flex column gap={ 0 } className="min-w-0 flex-1">
+                        <Text bold className="truncate text-white text-[15px] leading-tight drop-shadow-sm">{ furniName || form.publicName || form.itemName }</Text>
+                        <Text className="truncate text-white/70 text-[10px] font-mono">{ form.itemName }</Text>
+                        <Flex alignItems="center" gap={ 1 } className="mt-1 flex-wrap">
+                            <span className="text-[9px] font-bold text-white/90 bg-white/15 rounded px-1.5 py-0.5">ID { item.id }</span>
+                            <span className="text-[9px] font-bold text-white/90 bg-white/15 rounded px-1.5 py-0.5">SPRITE { item.spriteId }</span>
+                            <span className="text-[9px] font-bold text-white/90 bg-white/15 rounded px-1.5 py-0.5">{ item.usageCount } IN USE</span>
+                            { isDirty && <span className="text-[9px] font-bold text-[#15506b] bg-amber-300 rounded px-1.5 py-0.5">UNSAVED</span> }
+                        </Flex>
                     </Flex>
-                    <Text small variant="gray">({ item.usageCount } in use)</Text>
+                    <Button variant="secondary" onClick={ handleBack } className="self-start shrink-0">Back</Button>
                 </Flex>
-                { isDirty && <span className="text-[10px] text-orange-500 font-bold ml-auto">Unsaved changes</span> }
-            </Flex>
+            </div>
 
             { /* Primary edit surface: furnidata display name + description (server-authoritative, live) */ }
-            <div className="bg-white rounded border border-primary/40 shadow-sm">
-                <div className="flex items-center justify-between px-2 py-1.5 border-b border-[#eee]">
-                    <Text small bold variant="primary">Display Name &amp; Description</Text>
+            <div className="bg-white rounded-lg border-2 border-primary/50 shadow-md overflow-hidden">
+                <div className="flex items-center justify-between px-2.5 py-2 bg-gradient-to-r from-primary/10 to-transparent border-b border-primary/20">
+                    <Text small bold variant="primary" className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />Display Name &amp; Description<span className="text-[8px] font-bold text-white bg-primary rounded px-1 py-0.5 ml-1">LIVE</span></Text>
                     { (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
                         <span className="text-[10px] text-orange-500 font-bold">Unsaved</span> }
                 </div>

From 2ba0f5ea6f756a6ded570a6e782c2c6f2ac340d2 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 13:32:00 +0200
Subject: [PATCH 07/30] =?UTF-8?q?style(furni-editor):=20modern/sleek=20red?=
 =?UTF-8?q?esign=20=E2=80=94=20slate=20canvas,=20flat=20rounded-xl=20cards?=
 =?UTF-8?q?,=20clean=20header,=20toggle-chip=20permissions,=20teal=20as=20?=
 =?UTF-8?q?restrained=20accent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/FurniEditorEditView.tsx             | 89 ++++++++++---------
 1 file changed, 45 insertions(+), 44 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index f9ac1bb..b4b841b 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -35,16 +35,16 @@ const Section: FC<SectionProps> = ({ title, children, defaultOpen = true }) =>
     const [ open, setOpen ] = useState(defaultOpen);
 
     return (
-        <div className="bg-white rounded-lg border border-[#d9ddd5] shadow-sm overflow-hidden">
+        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
             <button
                 type="button"
-                className="w-full flex items-center justify-between px-2.5 py-2 cursor-pointer hover:bg-[#f5f7f3] transition-colors"
+                className="w-full flex items-center justify-between px-3 py-2.5 cursor-pointer hover:bg-slate-50 transition-colors"
                 onClick={ () => setOpen(p => !p) }
             >
-                <Text small bold variant="primary" className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-primary" />{ title }</Text>
-                <span className="text-[10px] text-[#aab2a3] transition-transform duration-200" style={ { transform: open ? 'rotate(0deg)' : 'rotate(-90deg)' } }>▼</span>
+                <Text className="text-[12px] font-semibold text-slate-700">{ title }</Text>
+                <span className="text-[11px] text-slate-400 transition-transform duration-200" style={ { transform: open ? 'rotate(0deg)' : 'rotate(-90deg)' } }>▾</span>
             </button>
-            { open && <div className="px-2.5 pb-2.5 pt-0.5">{ children }</div> }
+            { open && <div className="px-3 pb-3 pt-0.5">{ children }</div> }
         </div>
     );
 };
@@ -215,40 +215,39 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     }, []);
 
     const inputClass = (field?: string) =>
-        `w-full px-2 py-1 text-sm leading-normal rounded-sm border border-[#bbb] focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/40 min-h-[calc(1.5em+0.5rem+2px)]${ field && validation[field] ? ' border-red-500 bg-red-50' : '' }`;
-    const labelClass = 'text-[11px] font-bold text-[#374151] mb-0.5 flex items-center gap-0.5';
-    const readonlyClass = 'w-full px-2 py-1 text-sm font-mono rounded-sm border border-[#ddd] bg-[#f2f2eb] text-[#555] select-all';
+        `w-full px-3 py-1.5 text-sm leading-normal rounded-lg border border-slate-300 bg-white focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 transition${ field && validation[field] ? ' border-red-400 bg-red-50' : '' }`;
+    const labelClass = 'text-[11px] font-medium text-slate-500 mb-1 flex items-center gap-0.5';
+    const readonlyClass = 'w-full px-3 py-1.5 text-sm font-mono rounded-lg border border-slate-200 bg-slate-50 text-slate-500 select-all';
 
     return (
-        <Column gap={ 2 } className="h-full overflow-auto bg-gradient-to-b from-[#eef1ec] to-[#e2e6df] p-2">
-            { /* Hero header */ }
-            <div className="relative overflow-hidden rounded-lg border border-[#15506b] shadow-md bg-gradient-to-br from-primary to-[#0f4a63]">
-                <Flex alignItems="center" gap={ 2 } className="p-2.5">
-                    <div className="shrink-0 w-[68px] h-[68px] rounded-md bg-[#eef1ec] border border-white/40 shadow-inner flex items-center justify-center overflow-hidden">
-                        <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-[2]" />
-                    </div>
-                    <Flex column gap={ 0 } className="min-w-0 flex-1">
-                        <Text bold className="truncate text-white text-[15px] leading-tight drop-shadow-sm">{ furniName || form.publicName || form.itemName }</Text>
-                        <Text className="truncate text-white/70 text-[10px] font-mono">{ form.itemName }</Text>
-                        <Flex alignItems="center" gap={ 1 } className="mt-1 flex-wrap">
-                            <span className="text-[9px] font-bold text-white/90 bg-white/15 rounded px-1.5 py-0.5">ID { item.id }</span>
-                            <span className="text-[9px] font-bold text-white/90 bg-white/15 rounded px-1.5 py-0.5">SPRITE { item.spriteId }</span>
-                            <span className="text-[9px] font-bold text-white/90 bg-white/15 rounded px-1.5 py-0.5">{ item.usageCount } IN USE</span>
-                            { isDirty && <span className="text-[9px] font-bold text-[#15506b] bg-amber-300 rounded px-1.5 py-0.5">UNSAVED</span> }
-                        </Flex>
+        <Column gap={ 2 } className="h-full overflow-auto bg-[#f6f7f9] p-3">
+            { /* Header */ }
+            <Flex alignItems="center" gap={ 3 } className="px-1">
+                <div className="shrink-0 w-16 h-16 rounded-xl bg-white border border-slate-200 shadow-sm flex items-center justify-center overflow-hidden">
+                    <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-[1.8]" />
+                </div>
+                <Flex column gap={ 0 } className="min-w-0 flex-1">
+                    <Text bold className="truncate text-slate-800 text-[16px] leading-tight">{ furniName || form.publicName || form.itemName }</Text>
+                    <Text className="truncate text-slate-400 text-[11px] font-mono">{ form.itemName }</Text>
+                    <Flex alignItems="center" gap={ 1 } className="mt-1.5 flex-wrap">
+                        <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">ID { item.id }</span>
+                        <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">Sprite { item.spriteId }</span>
+                        <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">{ item.usageCount } in use</span>
+                        { isDirty && <span className="text-[10px] font-medium text-amber-700 bg-amber-100 rounded-md px-1.5 py-0.5">Unsaved</span> }
                     </Flex>
-                    <Button variant="secondary" onClick={ handleBack } className="self-start shrink-0">Back</Button>
                 </Flex>
-            </div>
+                <Button variant="secondary" onClick={ handleBack } className="shrink-0">Back</Button>
+            </Flex>
 
             { /* Primary edit surface: furnidata display name + description (server-authoritative, live) */ }
-            <div className="bg-white rounded-lg border-2 border-primary/50 shadow-md overflow-hidden">
-                <div className="flex items-center justify-between px-2.5 py-2 bg-gradient-to-r from-primary/10 to-transparent border-b border-primary/20">
-                    <Text small bold variant="primary" className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />Display Name &amp; Description<span className="text-[8px] font-bold text-white bg-primary rounded px-1 py-0.5 ml-1">LIVE</span></Text>
+            <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-3">
+                <div className="flex items-center gap-2 mb-2">
+                    <Text className="text-[12px] font-semibold text-slate-700">Display name &amp; description</Text>
+                    <span className="text-[9px] font-semibold text-primary bg-primary/10 rounded-md px-1.5 py-0.5">LIVE</span>
                     { (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
-                        <span className="text-[10px] text-orange-500 font-bold">Unsaved</span> }
+                        <span className="ml-auto text-[10px] text-amber-600 font-medium">Unsaved</span> }
                 </div>
-                <div className="px-2 pt-1 pb-2">
+                <div>
                     <Column gap={ 1 }>
                         <div>
                             <label className={ labelClass }>Display Name (furnidata)</label>
@@ -311,19 +310,21 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                 <div className="flex flex-col gap-2">
                     { PERM_GROUPS.map(group => (
                         <div key={ group.label }>
-                            <Text className="text-[10px] font-bold text-[#9ca3af] uppercase tracking-wider mb-1 block">{ group.label }</Text>
-                            <div className="grid grid-cols-4 gap-x-3 gap-y-1">
-                                { group.keys.map(key => (
-                                    <label key={ key } className="flex items-center gap-1 text-[11px] cursor-pointer">
-                                        <input
-                                            type="checkbox"
-                                            className="mt-1"
-                                            checked={ (form as any)[key] }
-                                            onChange={ e => setField(key, e.target.checked) }
-                                        />
-                                        { key.replace('allow', '') }
-                                    </label>
-                                )) }
+                            <Text className="text-[10px] font-semibold text-slate-400 uppercase tracking-wide mb-1.5 block">{ group.label }</Text>
+                            <div className="flex flex-wrap gap-1.5">
+                                { group.keys.map(key => {
+                                    const on = (form as any)[key];
+                                    return (
+                                        <button
+                                            key={ key }
+                                            type="button"
+                                            onClick={ () => setField(key, !on) }
+                                            className={ `text-[11px] px-2.5 py-1 rounded-lg border transition ${ on ? 'bg-primary/10 border-primary/40 text-primary font-medium' : 'bg-white border-slate-200 text-slate-400 hover:border-slate-300' }` }
+                                        >
+                                            { key.replace('allow', '') }
+                                        </button>
+                                    );
+                                }) }
                             </div>
                         </div>
                     )) }

From 3e5ad58f0e1beb54fc4d8ed39922b32cdcc42c0c Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 13:35:53 +0200
Subject: [PATCH 08/30] =?UTF-8?q?style(furni-editor):=20space=20optimizati?=
 =?UTF-8?q?on=20=E2=80=94=20name+description=20side-by-side=20(2-col),=20t?=
 =?UTF-8?q?ighter=20card/section=20padding,=20compact=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/FurniEditorEditView.tsx             | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index b4b841b..f40775d 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -38,13 +38,13 @@ const Section: FC<SectionProps> = ({ title, children, defaultOpen = true }) =>
         <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
             <button
                 type="button"
-                className="w-full flex items-center justify-between px-3 py-2.5 cursor-pointer hover:bg-slate-50 transition-colors"
+                className="w-full flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-slate-50 transition-colors"
                 onClick={ () => setOpen(p => !p) }
             >
                 <Text className="text-[12px] font-semibold text-slate-700">{ title }</Text>
                 <span className="text-[11px] text-slate-400 transition-transform duration-200" style={ { transform: open ? 'rotate(0deg)' : 'rotate(-90deg)' } }>▾</span>
             </button>
-            { open && <div className="px-3 pb-3 pt-0.5">{ children }</div> }
+            { open && <div className="px-3 pb-2.5 pt-0.5">{ children }</div> }
         </div>
     );
 };
@@ -220,16 +220,16 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     const readonlyClass = 'w-full px-3 py-1.5 text-sm font-mono rounded-lg border border-slate-200 bg-slate-50 text-slate-500 select-all';
 
     return (
-        <Column gap={ 2 } className="h-full overflow-auto bg-[#f6f7f9] p-3">
+        <Column gap={ 1 } className="h-full overflow-auto bg-[#f6f7f9] p-2">
             { /* Header */ }
-            <Flex alignItems="center" gap={ 3 } className="px-1">
-                <div className="shrink-0 w-16 h-16 rounded-xl bg-white border border-slate-200 shadow-sm flex items-center justify-center overflow-hidden">
-                    <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-[1.8]" />
+            <Flex alignItems="center" gap={ 2 } className="px-1">
+                <div className="shrink-0 w-14 h-14 rounded-xl bg-white border border-slate-200 shadow-sm flex items-center justify-center overflow-hidden">
+                    <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-[1.6]" />
                 </div>
                 <Flex column gap={ 0 } className="min-w-0 flex-1">
-                    <Text bold className="truncate text-slate-800 text-[16px] leading-tight">{ furniName || form.publicName || form.itemName }</Text>
+                    <Text bold className="truncate text-slate-800 text-[15px] leading-tight">{ furniName || form.publicName || form.itemName }</Text>
                     <Text className="truncate text-slate-400 text-[11px] font-mono">{ form.itemName }</Text>
-                    <Flex alignItems="center" gap={ 1 } className="mt-1.5 flex-wrap">
+                    <Flex alignItems="center" gap={ 1 } className="mt-1 flex-wrap">
                         <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">ID { item.id }</span>
                         <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">Sprite { item.spriteId }</span>
                         <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">{ item.usageCount } in use</span>
@@ -240,29 +240,27 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
             </Flex>
 
             { /* Primary edit surface: furnidata display name + description (server-authoritative, live) */ }
-            <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-3">
-                <div className="flex items-center gap-2 mb-2">
+            <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-2.5">
+                <div className="flex items-center gap-2 mb-1.5">
                     <Text className="text-[12px] font-semibold text-slate-700">Display name &amp; description</Text>
                     <span className="text-[9px] font-semibold text-primary bg-primary/10 rounded-md px-1.5 py-0.5">LIVE</span>
                     { (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
                         <span className="ml-auto text-[10px] text-amber-600 font-medium">Unsaved</span> }
                 </div>
-                <div>
-                    <Column gap={ 1 }>
-                        <div>
-                            <label className={ labelClass }>Display Name (furnidata)</label>
-                            <input className={ inputClass() } value={ furniName } onChange={ e => setFurniName(e.target.value) } maxLength={ 256 } />
-                        </div>
-                        <div>
-                            <label className={ labelClass }>Description</label>
-                            <textarea className={ inputClass() } rows={ 2 } value={ furniDescription } onChange={ e => setFurniDescription(e.target.value) } maxLength={ 256 } />
-                        </div>
-                        <Flex gap={ 1 }>
-                            <Button variant="success" disabled={ loading } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
-                            <Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
-                        </Flex>
-                    </Column>
+                <div className="grid grid-cols-2 gap-2">
+                    <div>
+                        <label className={ labelClass }>Display Name (furnidata)</label>
+                        <input className={ inputClass() } value={ furniName } onChange={ e => setFurniName(e.target.value) } maxLength={ 256 } />
+                    </div>
+                    <div>
+                        <label className={ labelClass }>Description</label>
+                        <input className={ inputClass() } value={ furniDescription } onChange={ e => setFurniDescription(e.target.value) } maxLength={ 256 } />
+                    </div>
                 </div>
+                <Flex gap={ 1 } className="mt-1.5">
+                    <Button variant="success" disabled={ loading } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
+                    <Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
+                </Flex>
             </div>
 
             <Section title="Basic Info">

From 642e4f8eb725e552d1df00d5b277b30cb36f6037 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 13:44:29 +0200
Subject: [PATCH 09/30] fix(furni-editor): remove nested inner scroller so
 NitroCardContentView's styled scrollbar is restored

---
 src/components/furni-editor/views/FurniEditorEditView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index f40775d..5242c0f 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -220,7 +220,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     const readonlyClass = 'w-full px-3 py-1.5 text-sm font-mono rounded-lg border border-slate-200 bg-slate-50 text-slate-500 select-all';
 
     return (
-        <Column gap={ 1 } className="h-full overflow-auto bg-[#f6f7f9] p-2">
+        <Column gap={ 1 }>
             { /* Header */ }
             <Flex alignItems="center" gap={ 2 } className="px-1">
                 <div className="shrink-0 w-14 h-14 rounded-xl bg-white border border-slate-200 shadow-sm flex items-center justify-center overflow-hidden">

From 13cfbd3cd895975c08c46eba4842a338da45942e Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 13:47:27 +0200
Subject: [PATCH 10/30] feat(furni-editor): one-click copy on Basic Info
 read-only fields (CopyValue w/ copied feedback)

---
 .../views/FurniEditorEditView.tsx             | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 5242c0f..aac9554 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -65,6 +65,31 @@ const Tip: FC<{ field: string }> = ({ field }) =>
     );
 };
 
+const CopyValue: FC<{ value: string | number }> = ({ value }) =>
+{
+    const [ copied, setCopied ] = useState(false);
+
+    const copy = useCallback(() =>
+    {
+        const text = String(value);
+        const done = () => { setCopied(true); window.setTimeout(() => setCopied(false), 1000); };
+        if(navigator.clipboard?.writeText) navigator.clipboard.writeText(text).then(done).catch(() => done());
+        else done();
+    }, [ value ]);
+
+    return (
+        <div
+            role="button"
+            title="Click to copy"
+            onClick={ copy }
+            className={ `group relative cursor-pointer w-full px-3 py-1.5 text-sm font-mono rounded-lg border transition ${ copied ? 'border-primary/50 bg-primary/5 text-primary' : 'border-slate-200 bg-slate-50 text-slate-600 hover:border-slate-300 hover:bg-slate-100' }` }
+        >
+            <span className="block truncate pr-12">{ String(value) }</span>
+            <span className={ `absolute right-2 top-1/2 -translate-y-1/2 text-[9px] font-semibold uppercase tracking-wide pointer-events-none ${ copied ? 'text-primary' : 'text-slate-300 group-hover:text-slate-400' }` }>{ copied ? 'copied!' : 'copy' }</span>
+        </div>
+    );
+};
+
 export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
 {
     const { item, furniDataEntry, interactions, loading, onUpdate, onDelete, onBack, onUpdateFurnidata, onRevertFurnidata } = props;
@@ -217,7 +242,6 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     const inputClass = (field?: string) =>
         `w-full px-3 py-1.5 text-sm leading-normal rounded-lg border border-slate-300 bg-white focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 transition${ field && validation[field] ? ' border-red-400 bg-red-50' : '' }`;
     const labelClass = 'text-[11px] font-medium text-slate-500 mb-1 flex items-center gap-0.5';
-    const readonlyClass = 'w-full px-3 py-1.5 text-sm font-mono rounded-lg border border-slate-200 bg-slate-50 text-slate-500 select-all';
 
     return (
         <Column gap={ 1 }>
@@ -267,19 +291,19 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                 <div className="grid grid-cols-2 gap-2">
                     <div>
                         <label className={ labelClass }>Classname</label>
-                        <div className={ readonlyClass }>{ form.itemName }</div>
+                        <CopyValue value={ form.itemName } />
                     </div>
                     <div>
                         <label className={ labelClass }>Public Name (DB fallback)</label>
-                        <div className={ readonlyClass }>{ form.publicName }</div>
+                        <CopyValue value={ form.publicName } />
                     </div>
                     <div>
                         <label className={ labelClass }>Sprite ID</label>
-                        <div className={ readonlyClass }>{ form.spriteId }</div>
+                        <CopyValue value={ form.spriteId } />
                     </div>
                     <div>
                         <label className={ labelClass }>Type</label>
-                        <div className={ readonlyClass }>{ form.type === 's' ? 'Floor (s)' : 'Wall (i)' }</div>
+                        <CopyValue value={ form.type === 's' ? 'Floor (s)' : 'Wall (i)' } />
                     </div>
                 </div>
             </Section>

From 8862041a4e9902de0cc47787b9b9c2b1a016ea2b Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 13:54:22 +0200
Subject: [PATCH 11/30] fix(furni-editor): make confirm modals opaque (solid bg
 + alpha backdrop)

Replace bg-white/bg-black palette classes with explicit hex
(bg-[#ffffff] panel, bg-[#00000080] backdrop) so the Delete and
Furnidata confirm dialogs render solidly instead of letting editor
content bleed through; bump overlay z-index to z-[60].
---
 .../furni-editor/views/FurniEditorEditView.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index aac9554..3927fd5 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -35,7 +35,7 @@ const Section: FC<SectionProps> = ({ title, children, defaultOpen = true }) =>
     const [ open, setOpen ] = useState(defaultOpen);
 
     return (
-        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+        <div className="bg-[#ffffff] rounded-xl border border-slate-200 shadow-sm overflow-hidden">
             <button
                 type="button"
                 className="w-full flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-slate-50 transition-colors"
@@ -240,14 +240,14 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     }, []);
 
     const inputClass = (field?: string) =>
-        `w-full px-3 py-1.5 text-sm leading-normal rounded-lg border border-slate-300 bg-white focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 transition${ field && validation[field] ? ' border-red-400 bg-red-50' : '' }`;
+        `w-full px-3 py-1.5 text-sm leading-normal rounded-lg border border-slate-300 bg-[#ffffff] focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 transition${ field && validation[field] ? ' border-red-400 bg-red-50' : '' }`;
     const labelClass = 'text-[11px] font-medium text-slate-500 mb-1 flex items-center gap-0.5';
 
     return (
         <Column gap={ 1 }>
             { /* Header */ }
             <Flex alignItems="center" gap={ 2 } className="px-1">
-                <div className="shrink-0 w-14 h-14 rounded-xl bg-white border border-slate-200 shadow-sm flex items-center justify-center overflow-hidden">
+                <div className="shrink-0 w-14 h-14 rounded-xl bg-[#ffffff] border border-slate-200 shadow-sm flex items-center justify-center overflow-hidden">
                     <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="scale-[1.6]" />
                 </div>
                 <Flex column gap={ 0 } className="min-w-0 flex-1">
@@ -264,7 +264,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
             </Flex>
 
             { /* Primary edit surface: furnidata display name + description (server-authoritative, live) */ }
-            <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-2.5">
+            <div className="bg-[#ffffff] rounded-xl border border-slate-200 shadow-sm p-2.5">
                 <div className="flex items-center gap-2 mb-1.5">
                     <Text className="text-[12px] font-semibold text-slate-700">Display name &amp; description</Text>
                     <span className="text-[9px] font-semibold text-primary bg-primary/10 rounded-md px-1.5 py-0.5">LIVE</span>
@@ -341,7 +341,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                                             key={ key }
                                             type="button"
                                             onClick={ () => setField(key, !on) }
-                                            className={ `text-[11px] px-2.5 py-1 rounded-lg border transition ${ on ? 'bg-primary/10 border-primary/40 text-primary font-medium' : 'bg-white border-slate-200 text-slate-400 hover:border-slate-300' }` }
+                                            className={ `text-[11px] px-2.5 py-1 rounded-lg border transition ${ on ? 'bg-primary/10 border-primary/40 text-primary font-medium' : 'bg-[#ffffff] border-slate-200 text-slate-400 hover:border-slate-300' }` }
                                         >
                                             { key.replace('allow', '') }
                                         </button>
@@ -394,8 +394,8 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
 
             { /* Delete Confirmation Dialog */ }
             { showDeleteDialog &&
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={ () => setShowDeleteDialog(false) }>
-                    <div className="bg-white rounded-lg shadow-xl p-4 w-[320px]" onClick={ e => e.stopPropagation() }>
+                <div className="fixed inset-0 bg-[#00000080] flex items-center justify-center z-[60]" onClick={ () => setShowDeleteDialog(false) }>
+                    <div className="bg-[#ffffff] rounded-lg shadow-xl p-4 w-[320px]" onClick={ e => e.stopPropagation() }>
                         <Text bold className="text-[14px] mb-2 block">Delete Item?</Text>
                         <Text small className="mb-3 block text-[#666]">
                             Are you sure you want to delete <strong>{ item.publicName || item.itemName }</strong> (ID: { item.id })?
@@ -411,8 +411,8 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
 
             { /* Furnidata Confirmation Dialog */ }
             { confirmFurnidata &&
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={ () => setConfirmFurnidata(false) }>
-                    <div className="bg-white rounded-lg shadow-xl p-4 w-[320px]" onClick={ e => e.stopPropagation() }>
+                <div className="fixed inset-0 bg-[#00000080] flex items-center justify-center z-[60]" onClick={ () => setConfirmFurnidata(false) }>
+                    <div className="bg-[#ffffff] rounded-lg shadow-xl p-4 w-[320px]" onClick={ e => e.stopPropagation() }>
                         <Text bold className="text-[14px] mb-2 block">Apply furnidata change to ALL clients?</Text>
                         <div className="text-xs mb-1"><b>Name:</b> { String(furniDataEntry?.name ?? '') } → { furniName }</div>
                         <div className="text-xs mb-3"><b>Desc:</b> { String(furniDataEntry?.description ?? '') } → { furniDescription }</div>

From e988a5d8b0d7c68451c61c0e12f3ed5862034e01 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 13:56:26 +0200
Subject: [PATCH 12/30] fix(furni-editor): make permission toggles clearly show
 on/off state

Enabled chips now use a solid teal fill (bg-[#1E7295]) with white
text + a white status dot; disabled chips are muted grey with a grey
dot. The old bg-primary/10 + text-primary 'on' state was nearly
indistinguishable from 'off'. Adds aria-pressed + title for a11y.
---
 src/components/furni-editor/views/FurniEditorEditView.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 3927fd5..251509b 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -341,8 +341,11 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                                             key={ key }
                                             type="button"
                                             onClick={ () => setField(key, !on) }
-                                            className={ `text-[11px] px-2.5 py-1 rounded-lg border transition ${ on ? 'bg-primary/10 border-primary/40 text-primary font-medium' : 'bg-[#ffffff] border-slate-200 text-slate-400 hover:border-slate-300' }` }
+                                            aria-pressed={ on }
+                                            title={ on ? 'Enabled — click to disable' : 'Disabled — click to enable' }
+                                            className={ `inline-flex items-center gap-1.5 text-[11px] px-2.5 py-1 rounded-lg border font-medium transition ${ on ? 'bg-[#1E7295] border-[#1E7295] text-[#ffffff] shadow-sm' : 'bg-slate-100 border-slate-200 text-slate-400 hover:bg-slate-200 hover:text-slate-600' }` }
                                         >
+                                            <span className={ `inline-block w-1.5 h-1.5 rounded-full ${ on ? 'bg-[#ffffff]' : 'bg-slate-300' }` } />
                                             { key.replace('allow', '') }
                                         </button>
                                     );

From d45a0fb8b0e95326a0228b139d03d4c59fe1ffba Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 14:03:59 +0200
Subject: [PATCH 13/30] feat(furni-editor): optimistically reflect mirrored
 public_name on save

The server now mirrors the furnidata display name into
items_base.public_name, so on updateFurnidata patch selectedItem.publicName
immediately; the auto detail re-fetch that follows agrees with the DB
value (no flicker). Not applied to revertFurnidata (revert restores the
previous DB name).
---
 src/hooks/furni-editor/useFurniEditor.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/hooks/furni-editor/useFurniEditor.ts b/src/hooks/furni-editor/useFurniEditor.ts
index 201b735..16e9f0f 100644
--- a/src/hooks/furni-editor/useFurniEditor.ts
+++ b/src/hooks/furni-editor/useFurniEditor.ts
@@ -249,6 +249,10 @@ export const useFurniEditor = () =>
     const updateFurnidata = useCallback((id: number, name: string, description: string) =>
     {
         pendingActionRef.current = { action: 'update', itemId: id };
+        // Optimistic: the server now mirrors the furnidata display name into
+        // items_base.public_name, so reflect it immediately in the read-only
+        // "Public Name" field. The auto re-fetch that follows will agree (no flicker).
+        setSelectedItem(prev => (prev && prev.id === id ? { ...prev, publicName: name } : prev));
         setLoading(true);
         SendMessageComposer(new FurniEditorUpdateFurnidataComposer(id, JSON.stringify({ name, description })));
     }, []);

From 9341970eed7ffcc8e9ecfd1112d0b46be4b223be Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 14:11:48 +0200
Subject: [PATCH 14/30] fix(furni-editor): green/red status dot on permission
 toggles

Replace the white/grey dot with a green (ON) / red (OFF) traffic-light
badge + a subtle ring so it reads on both the teal and grey chip
backgrounds.
---
 src/components/furni-editor/views/FurniEditorEditView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 251509b..60bd81c 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -345,7 +345,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                                             title={ on ? 'Enabled — click to disable' : 'Disabled — click to enable' }
                                             className={ `inline-flex items-center gap-1.5 text-[11px] px-2.5 py-1 rounded-lg border font-medium transition ${ on ? 'bg-[#1E7295] border-[#1E7295] text-[#ffffff] shadow-sm' : 'bg-slate-100 border-slate-200 text-slate-400 hover:bg-slate-200 hover:text-slate-600' }` }
                                         >
-                                            <span className={ `inline-block w-1.5 h-1.5 rounded-full ${ on ? 'bg-[#ffffff]' : 'bg-slate-300' }` } />
+                                            <span className={ `inline-block w-2 h-2 rounded-full ring-1 ${ on ? 'bg-[#22c55e] ring-[#ffffff]/70' : 'bg-[#ef4444] ring-[#00000014]' }` } />
                                             { key.replace('allow', '') }
                                         </button>
                                     );

From 071a7c94365f4e1cc2360c41db387b77e4c247bc Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 14:20:12 +0200
Subject: [PATCH 15/30] fix(furni-editor): guard name editing when furni has no
 furnidata entry

~1.4k items_base rows (pets, custom items) have no matching furnidata
classname, so saving their name returned the cryptic server error
'Classname not found in furnidata'. Detect this client-side via the
resolved furniDataEntry (entry + classname match) and, when absent,
hide the Display Name/Description inputs + Save behind a clear
'NO FURNIDATA' notice instead of letting the save fail. In-furnidata
furni (~97.6%) are unchanged.
---
 .../views/FurniEditorEditView.tsx             | 54 +++++++++++++------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 60bd81c..ca434e0 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -199,6 +199,19 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
 
     const isValid = useMemo(() => Object.keys(validation).length === 0, [ validation ]);
 
+    // Furnidata name editing only works when the furni has a matching furnidata
+    // entry: the server writer is edit-only and refuses classnames absent from
+    // furnidata (pets, custom items, …). furniDataEntry is the entry resolved by
+    // the server (by id); guard on it + a classname match so we never trigger the
+    // cryptic "Classname not found in furnidata" error on save.
+    const furnidataEditable = useMemo(() =>
+    {
+        if(!furniDataEntry) return false;
+        const cn = String((furniDataEntry as { classname?: unknown }).classname ?? '').trim().toLowerCase();
+        const itemCn = String(item?.itemName ?? '').trim().toLowerCase();
+        return cn ? (cn === itemCn) : true;
+    }, [ furniDataEntry, item ]);
+
     const handleSave = useCallback(() =>
     {
         if(!isValid) return;
@@ -267,24 +280,35 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
             <div className="bg-[#ffffff] rounded-xl border border-slate-200 shadow-sm p-2.5">
                 <div className="flex items-center gap-2 mb-1.5">
                     <Text className="text-[12px] font-semibold text-slate-700">Display name &amp; description</Text>
-                    <span className="text-[9px] font-semibold text-primary bg-primary/10 rounded-md px-1.5 py-0.5">LIVE</span>
-                    { (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
+                    { furnidataEditable
+                        ? <span className="text-[9px] font-semibold text-primary bg-primary/10 rounded-md px-1.5 py-0.5">LIVE</span>
+                        : <span className="text-[9px] font-semibold text-amber-700 bg-amber-100 rounded-md px-1.5 py-0.5">NO FURNIDATA</span> }
+                    { furnidataEditable && (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
                         <span className="ml-auto text-[10px] text-amber-600 font-medium">Unsaved</span> }
                 </div>
-                <div className="grid grid-cols-2 gap-2">
-                    <div>
-                        <label className={ labelClass }>Display Name (furnidata)</label>
-                        <input className={ inputClass() } value={ furniName } onChange={ e => setFurniName(e.target.value) } maxLength={ 256 } />
+                { furnidataEditable ? (
+                    <>
+                        <div className="grid grid-cols-2 gap-2">
+                            <div>
+                                <label className={ labelClass }>Display Name (furnidata)</label>
+                                <input className={ inputClass() } value={ furniName } onChange={ e => setFurniName(e.target.value) } maxLength={ 256 } />
+                            </div>
+                            <div>
+                                <label className={ labelClass }>Description</label>
+                                <input className={ inputClass() } value={ furniDescription } onChange={ e => setFurniDescription(e.target.value) } maxLength={ 256 } />
+                            </div>
+                        </div>
+                        <Flex gap={ 1 } className="mt-1.5">
+                            <Button variant="success" disabled={ loading } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
+                            <Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
+                        </Flex>
+                    </>
+                ) : (
+                    <div className="flex items-start gap-2 text-[11px] text-slate-500 bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-2 leading-snug">
+                        <span className="text-[#f59e0b] text-sm leading-none mt-px">⚠</span>
+                        <span>This furni has no matching <b>furnidata</b> entry (e.g. a pet or custom item), so its display name can&apos;t be edited here. Clients fall back to the DB <b>Public Name</b> below.</span>
                     </div>
-                    <div>
-                        <label className={ labelClass }>Description</label>
-                        <input className={ inputClass() } value={ furniDescription } onChange={ e => setFurniDescription(e.target.value) } maxLength={ 256 } />
-                    </div>
-                </div>
-                <Flex gap={ 1 } className="mt-1.5">
-                    <Button variant="success" disabled={ loading } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
-                    <Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
-                </Flex>
+                ) }
             </div>
 
             <Section title="Basic Info">

From 752badd361408b26b622a84be648088a367a8a4b Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 14:21:43 +0200
Subject: [PATCH 16/30] feat(furni-editor): compact permissions + upgraded meta
 chips

- Merge the lone Inventory permission (allowInventoryStack) into the
  Gameplay group, dropping the separate Inventory header+row to save
  vertical space.
- Rework the header meta row: ID/Sprite as label+monospace-value pills,
  'in use' tinted green with a dot when placed instances exist (grey at
  0), 'Unsaved' as an amber pill with a dot.
---
 .../views/FurniEditorEditView.tsx             | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index ca434e0..636afd2 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -23,9 +23,8 @@ const FIELD_TIPS: Record<string, string> = {
 };
 
 const PERM_GROUPS = [
-    { label: 'Gameplay', keys: [ 'allowStack', 'allowWalk', 'allowSit', 'allowLay' ] },
+    { label: 'Gameplay', keys: [ 'allowStack', 'allowWalk', 'allowSit', 'allowLay', 'allowInventoryStack' ] },
     { label: 'Trading', keys: [ 'allowGift', 'allowTrade', 'allowRecycle', 'allowMarketplaceSell' ] },
-    { label: 'Inventory', keys: [ 'allowInventoryStack' ] },
 ];
 
 interface SectionProps { title: string; children: React.ReactNode; defaultOpen?: boolean }
@@ -267,10 +266,22 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                     <Text bold className="truncate text-slate-800 text-[15px] leading-tight">{ furniName || form.publicName || form.itemName }</Text>
                     <Text className="truncate text-slate-400 text-[11px] font-mono">{ form.itemName }</Text>
                     <Flex alignItems="center" gap={ 1 } className="mt-1 flex-wrap">
-                        <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">ID { item.id }</span>
-                        <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">Sprite { item.spriteId }</span>
-                        <span className="text-[10px] text-slate-500 bg-slate-100 rounded-md px-1.5 py-0.5">{ item.usageCount } in use</span>
-                        { isDirty && <span className="text-[10px] font-medium text-amber-700 bg-amber-100 rounded-md px-1.5 py-0.5">Unsaved</span> }
+                        <span className="inline-flex items-center gap-1 text-[10px] rounded-md border border-slate-200 bg-slate-50 pl-1.5 pr-2 py-0.5">
+                            <span className="text-[8px] font-semibold uppercase tracking-wide text-slate-400">ID</span>
+                            <span className="font-mono text-slate-600">{ item.id }</span>
+                        </span>
+                        <span className="inline-flex items-center gap-1 text-[10px] rounded-md border border-slate-200 bg-slate-50 pl-1.5 pr-2 py-0.5">
+                            <span className="text-[8px] font-semibold uppercase tracking-wide text-slate-400">Sprite</span>
+                            <span className="font-mono text-slate-600">{ item.spriteId }</span>
+                        </span>
+                        <span className={ `inline-flex items-center gap-1 text-[10px] rounded-md border px-2 py-0.5 ${ item.usageCount > 0 ? 'border-[#a7f3d0] bg-[#ecfdf5] text-[#047857]' : 'border-slate-200 bg-slate-50 text-slate-500' }` }>
+                            <span className={ `w-1.5 h-1.5 rounded-full ${ item.usageCount > 0 ? 'bg-[#10b981]' : 'bg-slate-300' }` } />
+                            { item.usageCount } in use
+                        </span>
+                        { isDirty && <span className="inline-flex items-center gap-1 text-[10px] font-medium text-amber-700 bg-amber-100 border border-amber-200 rounded-md px-2 py-0.5">
+                            <span className="w-1.5 h-1.5 rounded-full bg-[#f59e0b]" />
+                            Unsaved
+                        </span> }
                     </Flex>
                 </Flex>
                 <Button variant="secondary" onClick={ handleBack } className="shrink-0">Back</Button>

From caeb24a6033fb087b8575bccd322b23d12ffeb6c Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 14:32:42 +0200
Subject: [PATCH 17/30] fix(furni-editor): disable furnidata Save unless
 name/desc changed

Saving an unchanged name made the server writer return false, which the
handler misreports as 'Classname not found in furnidata'. Gate the
'Save name/desc' button on a real diff (furnidataDirty) so an unchanged
save can no longer fire that misleading error.
---
 .../furni-editor/views/FurniEditorEditView.tsx       | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 636afd2..97b7542 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -211,6 +211,14 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
         return cn ? (cn === itemCn) : true;
     }, [ furniDataEntry, item ]);
 
+    // True only when the name/description actually differ from the stored furnidata
+    // entry. Used to gate the Save button: saving an unchanged value makes the
+    // server writer return false, which the handler misreports as "Classname not
+    // found in furnidata" — so we never let an unchanged save fire.
+    const furnidataDirty = useMemo(() =>
+        furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? ''),
+    [ furniName, furniDescription, furniDataEntry ]);
+
     const handleSave = useCallback(() =>
     {
         if(!isValid) return;
@@ -294,7 +302,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                     { furnidataEditable
                         ? <span className="text-[9px] font-semibold text-primary bg-primary/10 rounded-md px-1.5 py-0.5">LIVE</span>
                         : <span className="text-[9px] font-semibold text-amber-700 bg-amber-100 rounded-md px-1.5 py-0.5">NO FURNIDATA</span> }
-                    { furnidataEditable && (furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? '')) &&
+                    { furnidataEditable && furnidataDirty &&
                         <span className="ml-auto text-[10px] text-amber-600 font-medium">Unsaved</span> }
                 </div>
                 { furnidataEditable ? (
@@ -310,7 +318,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                             </div>
                         </div>
                         <Flex gap={ 1 } className="mt-1.5">
-                            <Button variant="success" disabled={ loading } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
+                            <Button variant="success" disabled={ loading || !furnidataDirty } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
                             <Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
                         </Flex>
                     </>

From 63c41b4d5cb6b406962cd154f3c9942213853b6c Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 14:51:23 +0200
Subject: [PATCH 18/30] fix(furni-editor): tooltips wrap + no longer clipped

Tip tooltips were whitespace-nowrap (one very wide line) and clipped by
the Section card's overflow-hidden. Bound the bubble width with wrapping
(w-44, whitespace-normal, centered) and drop overflow-hidden from Section
(keeping rounded corners via rounded-t/b-xl on the header) so long tips
like Custom Params render fully.
---
 src/components/furni-editor/views/FurniEditorEditView.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 97b7542..5b80193 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -34,10 +34,10 @@ const Section: FC<SectionProps> = ({ title, children, defaultOpen = true }) =>
     const [ open, setOpen ] = useState(defaultOpen);
 
     return (
-        <div className="bg-[#ffffff] rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+        <div className="bg-[#ffffff] rounded-xl border border-slate-200 shadow-sm">
             <button
                 type="button"
-                className="w-full flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-slate-50 transition-colors"
+                className={ `w-full flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-slate-50 transition-colors rounded-t-xl ${ open ? '' : 'rounded-b-xl' }` }
                 onClick={ () => setOpen(p => !p) }
             >
                 <Text className="text-[12px] font-semibold text-slate-700">{ title }</Text>
@@ -57,7 +57,7 @@ const Tip: FC<{ field: string }> = ({ field }) =>
     return (
         <span className="relative group ml-0.5 inline-flex">
             <span className="w-3 h-3 rounded-full bg-[#1e7295] text-white text-[8px] flex items-center justify-center cursor-help font-bold">?</span>
-            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 bg-[#333] text-white text-[10px] rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-10">
+            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 bg-[#333] text-white text-[10px] rounded w-44 whitespace-normal text-center leading-snug opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-20 shadow-lg">
                 { tip }
             </span>
         </span>

From 310fa06db7bbbd55cda9bc9036bd1d8d3f9e0725 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 15:00:36 +0200
Subject: [PATCH 19/30] fix(furni-editor): render field tooltips in a portal
 (no clipping)

The Tip bubble was still clipped by the card's overflow-auto scroll
container when a section was scrolled near the viewport top. Render the
tooltip via createPortal to document.body with position:fixed computed
from the icon rect, so it escapes every overflow/transform ancestor.
---
 .../views/FurniEditorEditView.tsx             | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 5b80193..4110fe7 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -1,4 +1,5 @@
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Button, Column, Flex, LayoutFurniIconImageView, Text } from '../../../common';
 import { FurniDetail } from '../../../hooks/furni-editor';
 
@@ -51,15 +52,33 @@ const Section: FC<SectionProps> = ({ title, children, defaultOpen = true }) =>
 const Tip: FC<{ field: string }> = ({ field }) =>
 {
     const tip = FIELD_TIPS[field];
+    const ref = useRef<HTMLSpanElement>(null);
+    const [ pos, setPos ] = useState<{ left: number; top: number } | null>(null);
+
+    const show = useCallback(() =>
+    {
+        const r = ref.current?.getBoundingClientRect();
+        if(r) setPos({ left: r.left + (r.width / 2), top: r.top - 6 });
+    }, []);
+    const hide = useCallback(() => setPos(null), []);
 
     if(!tip) return null;
 
     return (
-        <span className="relative group ml-0.5 inline-flex">
-            <span className="w-3 h-3 rounded-full bg-[#1e7295] text-white text-[8px] flex items-center justify-center cursor-help font-bold">?</span>
-            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 bg-[#333] text-white text-[10px] rounded w-44 whitespace-normal text-center leading-snug opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-20 shadow-lg">
-                { tip }
-            </span>
+        <span
+            ref={ ref }
+            onMouseEnter={ show }
+            onMouseLeave={ hide }
+            className="ml-0.5 inline-flex w-3 h-3 rounded-full bg-[#1e7295] text-white text-[8px] items-center justify-center cursor-help font-bold align-middle"
+        >
+            ?
+            { pos && createPortal(
+                <span
+                    style={ { position: 'fixed', left: pos.left, top: pos.top, transform: 'translate(-50%, -100%)', zIndex: 9999 } }
+                    className="px-2 py-1 bg-[#333] text-white text-[10px] rounded w-44 whitespace-normal text-center leading-snug shadow-lg pointer-events-none"
+                >
+                    { tip }
+                </span>, document.body) }
         </span>
     );
 };

From 4570244b48fa4b161fe6ad3967f182c71fd9fe80 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 15:08:47 +0200
Subject: [PATCH 20/30] feat(furni-editor): modernize search/list view + live
 search + server sort

- Restyle to match the editor: slate palette, rounded card, search bar
  with icon + focus ring, teal filter chips, larger furni thumbnails,
  loading skeleton + empty state.
- Live search (350ms debounce) with clear button; filters/sort apply
  immediately.
- Pagination: first/prev/next/last + page-jump input + 'Showing X-Y of Z'
  (was Prev/Next only across 3002 pages).
- Header sort now queries the server (sortField/sortDir) instead of
  reordering only the 20 visible rows; useFurniEditor.searchItems passes
  the sort through.
---
 .../views/FurniEditorSearchView.tsx           | 303 ++++++++++--------
 src/hooks/furni-editor/useFurniEditor.ts      |   4 +-
 2 files changed, 172 insertions(+), 135 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorSearchView.tsx b/src/components/furni-editor/views/FurniEditorSearchView.tsx
index a1eccfb..3f05d6d 100644
--- a/src/components/furni-editor/views/FurniEditorSearchView.tsx
+++ b/src/components/furni-editor/views/FurniEditorSearchView.tsx
@@ -1,5 +1,5 @@
-import { FC, useCallback, useEffect, useEffectEvent, useMemo, useState } from 'react';
-import { Button, Column, Flex, LayoutFurniIconImageView, Text } from '../../../common';
+import { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { Column, Flex, LayoutFurniIconImageView, Text } from '../../../common';
 import { FurniItem } from '../../../hooks/furni-editor';
 
 interface FurniEditorSearchViewProps
@@ -8,20 +8,43 @@ interface FurniEditorSearchViewProps
     total: number;
     page: number;
     loading: boolean;
-    onSearch: (query: string, type: string, page: number) => void;
+    onSearch: (query: string, type: string, page: number, sortField: string, sortDir: string) => void;
     onSelect: (id: number) => void;
 }
 
 type SortField = 'id' | 'spriteId' | 'itemName' | 'publicName' | 'type' | 'interactionType';
 type SortDir = 'asc' | 'desc';
 
+const PAGE_SIZE = 20;
+
+const COLUMNS: { field: SortField; label: string; align: 'left' | 'center' }[] = [
+    { field: 'id', label: 'ID', align: 'left' },
+    { field: 'spriteId', label: 'Sprite', align: 'left' },
+    { field: 'itemName', label: 'Name', align: 'left' },
+    { field: 'publicName', label: 'Public Name', align: 'left' },
+    { field: 'type', label: 'Type', align: 'center' },
+    { field: 'interactionType', label: 'Interaction', align: 'left' },
+];
+
 const SortArrow: FC<{ field: SortField; active: SortField; dir: SortDir }> = ({ field, active, dir }) =>
 {
-    if(field !== active) return <span className="ml-0.5 opacity-30">↕</span>;
+    if(field !== active) return <span className="ml-1 text-slate-300">↕</span>;
 
-    return <span className="ml-0.5">{ dir === 'asc' ? '▲' : '▼' }</span>;
+    return <span className="ml-1 text-primary">{ dir === 'asc' ? '▲' : '▼' }</span>;
 };
 
+const PagBtn: FC<{ disabled?: boolean; onClick: () => void; children: ReactNode; title?: string }> = ({ disabled, onClick, children, title }) => (
+    <button
+        type="button"
+        title={ title }
+        disabled={ disabled }
+        onClick={ onClick }
+        className="w-7 h-7 flex items-center justify-center rounded-lg border border-slate-200 bg-[#ffffff] text-slate-600 text-sm leading-none hover:bg-slate-50 hover:border-slate-300 disabled:opacity-40 disabled:cursor-not-allowed transition"
+    >
+        { children }
+    </button>
+);
+
 export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
 {
     const { items, total, page, loading, onSearch, onSelect } = props;
@@ -29,184 +52,198 @@ export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
     const [ typeFilter, setTypeFilter ] = useState('');
     const [ sortField, setSortField ] = useState<SortField>('id');
     const [ sortDir, setSortDir ] = useState<SortDir>('asc');
+    const [ pageInput, setPageInput ] = useState('1');
 
-    const initialSearch = useEffectEvent(() => onSearch('', '', 1));
+    const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const from = total === 0 ? 0 : ((page - 1) * PAGE_SIZE) + 1;
+    const to = Math.min(page * PAGE_SIZE, total);
 
+    // Latest filter/sort for the debounced query effect (avoids stale closure).
+    const stateRef = useRef({ typeFilter, sortField, sortDir });
+    stateRef.current = { typeFilter, sortField, sortDir };
+
+    // Initial fetch (once).
+    const didInit = useRef(false);
     useEffect(() =>
     {
-        initialSearch();
-    }, []);
+        if(didInit.current) return;
+        didInit.current = true;
+        onSearch('', '', 1, 'id', 'asc');
+    }, [ onSearch ]);
 
-    const handleSearch = useCallback(() =>
-    {
-        onSearch(query, typeFilter, 1);
-    }, [ query, typeFilter, onSearch ]);
+    // Keep the page input synced with the authoritative page from the server.
+    useEffect(() => { setPageInput(String(page)); }, [ page ]);
 
-    const handleKeyDown = useCallback((e: React.KeyboardEvent) =>
+    // Debounced live search as the user types (skips the first render).
+    const firstQuery = useRef(true);
+    useEffect(() =>
     {
-        if(e.key === 'Enter') handleSearch();
-    }, [ handleSearch ]);
+        if(firstQuery.current) { firstQuery.current = false; return; }
 
-    const handleSort = useCallback((field: SortField) =>
-    {
-        setSortDir(prev => (sortField === field ? (prev === 'asc' ? 'desc' : 'asc') : 'asc'));
-        setSortField(field);
-    }, [ sortField ]);
-
-    const handleTypeToggle = useCallback((type: string) =>
-    {
-        setTypeFilter(prev =>
+        const handle = window.setTimeout(() =>
         {
-            const next = prev === type ? '' : type;
+            const s = stateRef.current;
+            onSearch(query, s.typeFilter, 1, s.sortField, s.sortDir);
+        }, 350);
 
-            onSearch(query, next, 1);
-
-            return next;
-        });
+        return () => window.clearTimeout(handle);
     }, [ query, onSearch ]);
 
-    const sortedItems = useMemo(() =>
+    const applyType = useCallback((t: string) =>
     {
-        const sorted = [ ...items ];
+        const next = typeFilter === t ? '' : t;
+        setTypeFilter(next);
+        onSearch(query, next, 1, sortField, sortDir);
+    }, [ typeFilter, query, sortField, sortDir, onSearch ]);
 
-        sorted.sort((a, b) =>
-        {
-            let va: string | number = a[sortField] ?? '';
-            let vb: string | number = b[sortField] ?? '';
+    const applySort = useCallback((field: SortField) =>
+    {
+        const nextDir: SortDir = (sortField === field && sortDir === 'asc') ? 'desc' : 'asc';
+        setSortField(field);
+        setSortDir(nextDir);
+        onSearch(query, typeFilter, 1, field, nextDir);
+    }, [ sortField, sortDir, query, typeFilter, onSearch ]);
 
-            if(typeof va === 'string') va = va.toLowerCase();
-            if(typeof vb === 'string') vb = vb.toLowerCase();
+    const goTo = useCallback((pg: number) =>
+    {
+        const clamped = Math.min(Math.max(1, pg || 1), totalPages);
+        onSearch(query, typeFilter, clamped, sortField, sortDir);
+    }, [ totalPages, query, typeFilter, sortField, sortDir, onSearch ]);
 
-            if(va < vb) return sortDir === 'asc' ? -1 : 1;
-            if(va > vb) return sortDir === 'asc' ? 1 : -1;
-
-            return 0;
-        });
-
-        return sorted;
-    }, [ items, sortField, sortDir ]);
-
-    const totalPages = Math.ceil(total / 20);
+    const inputClass = 'w-full pl-9 pr-8 py-2 text-sm leading-normal rounded-lg border border-slate-300 bg-[#ffffff] focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 transition';
 
     return (
-        <Column gap={ 1 } className="h-full">
-            <Flex gap={ 1 } alignItems="end">
-                <Column gap={ 0 } className="flex-1">
-                    <Text small bold>Search</Text>
+        <Column gap={ 2 } className="h-full">
+            { /* Search + filters */ }
+            <Flex gap={ 2 } alignItems="center">
+                <div className="relative flex-1">
+                    <span className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
+                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.2-3.2" /></svg>
+                    </span>
                     <input
                         type="text"
-                        className="w-full px-2 py-1 text-xs leading-normal rounded-sm border border-[#ccc] min-h-[calc(1.5em+0.5rem+2px)]"
-                        placeholder="ID, name or sprite ID..."
+                        className={ inputClass }
+                        placeholder="Search by ID, name or sprite ID…"
                         value={ query }
                         onChange={ e => setQuery(e.target.value) }
-                        onKeyDown={ handleKeyDown }
                     />
-                </Column>
-                <Flex gap={ 1 }>
-                    { [ '', 's', 'i' ].map(t => (
+                    { query &&
                         <button
-                            key={ t || 'all' }
-                            className={ `px-2 py-1 text-[11px] rounded border cursor-pointer transition-colors ${
-                                typeFilter === t
-                                    ? 'bg-[#1e7295] text-white border-[#1e7295]'
-                                    : 'bg-white text-[#333] border-[#ccc] hover:bg-[#f0f0f0]'
-                            }` }
-                            onClick={ () => handleTypeToggle(t) }
-                        >
-                            { t === '' ? 'All' : t === 's' ? 'Floor' : 'Wall' }
-                        </button>
-                    )) }
+                            type="button"
+                            onClick={ () => setQuery('') }
+                            className="absolute right-2 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center rounded-full text-[11px] text-slate-300 hover:text-slate-500 hover:bg-slate-100"
+                        >✕</button> }
+                </div>
+                <Flex gap={ 1 }>
+                    { [ '', 's', 'i' ].map(t =>
+                    {
+                        const on = typeFilter === t;
+
+                        return (
+                            <button
+                                key={ t || 'all' }
+                                type="button"
+                                onClick={ () => applyType(t) }
+                                className={ `px-3 py-1.5 text-[12px] font-medium rounded-lg border transition ${ on ? 'bg-[#1E7295] border-[#1E7295] text-[#ffffff] shadow-sm' : 'bg-slate-100 border-slate-200 text-slate-500 hover:bg-slate-200 hover:text-slate-600' }` }
+                            >
+                                { t === '' ? 'All' : t === 's' ? 'Floor' : 'Wall' }
+                            </button>
+                        );
+                    }) }
                 </Flex>
-                <Button variant="primary" disabled={ loading } onClick={ handleSearch }>
-                    { loading ? '...' : 'Search' }
-                </Button>
             </Flex>
 
-            { total > 0 &&
-                <Text small variant="gray" className="text-[10px]">
-                    { total } items found
+            { /* Result count + activity */ }
+            <Flex alignItems="center" gap={ 2 } className="px-0.5">
+                <Text className="text-[11px] text-slate-500">
+                    { total > 0 ? `Showing ${ from }–${ to } of ${ total.toLocaleString() }` : (loading ? 'Searching…' : 'No results') }
                 </Text>
-            }
+                { loading && <span className="w-3 h-3 rounded-full border-2 border-slate-300 border-t-primary animate-spin" /> }
+            </Flex>
 
-            <Column gap={ 0 } className="flex-1 overflow-auto border border-[#ccc] rounded bg-white">
-                <table className="w-full text-xs">
+            { /* Table */ }
+            <div className="flex-1 overflow-auto rounded-xl border border-slate-200 shadow-sm bg-[#ffffff]">
+                <table className="w-full text-xs border-collapse">
                     <thead>
-                        <tr className="bg-[#e8e8e8] sticky top-0 select-none">
-                            <th className="px-1 py-1 text-center w-[50px]"></th>
-                            <th className="px-2 py-1 text-left cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('id') }>
-                                ID<SortArrow field="id" active={ sortField } dir={ sortDir } />
-                            </th>
-                            <th className="px-2 py-1 text-left cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('spriteId') }>
-                                Sprite<SortArrow field="spriteId" active={ sortField } dir={ sortDir } />
-                            </th>
-                            <th className="px-2 py-1 text-left cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('itemName') }>
-                                Name<SortArrow field="itemName" active={ sortField } dir={ sortDir } />
-                            </th>
-                            <th className="px-2 py-1 text-left cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('publicName') }>
-                                Public Name<SortArrow field="publicName" active={ sortField } dir={ sortDir } />
-                            </th>
-                            <th className="px-2 py-1 text-center cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('type') }>
-                                Type<SortArrow field="type" active={ sortField } dir={ sortDir } />
-                            </th>
-                            <th className="px-2 py-1 text-left cursor-pointer hover:bg-[#ddd]" onClick={ () => handleSort('interactionType') }>
-                                Interaction<SortArrow field="interactionType" active={ sortField } dir={ sortDir } />
-                            </th>
+                        <tr className="sticky top-0 z-10 bg-slate-50 border-b border-slate-200 select-none">
+                            <th className="px-2 py-2 w-[52px]"></th>
+                            { COLUMNS.map(c => (
+                                <th
+                                    key={ c.field }
+                                    onClick={ () => applySort(c.field) }
+                                    className={ `px-2 py-2 text-[10px] font-semibold uppercase tracking-wide text-slate-500 cursor-pointer hover:text-slate-700 ${ c.align === 'center' ? 'text-center' : 'text-left' }` }
+                                >
+                                    { c.label }<SortArrow field={ c.field } active={ sortField } dir={ sortDir } />
+                                </th>
+                            )) }
                         </tr>
                     </thead>
                     <tbody>
-                        { sortedItems.map(item => (
+                        { items.map(item => (
                             <tr
                                 key={ item.id }
-                                className="cursor-pointer hover:bg-[#d4edfa] border-b border-[#eee] transition-colors"
                                 onClick={ () => onSelect(item.id) }
+                                className="group cursor-pointer border-b border-slate-100 last:border-0 hover:bg-slate-50 transition-colors"
                             >
-                                <td className="px-1 py-1 text-center">
-                                    <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } className="inline-block scale-125" />
+                                <td className="px-2 py-1.5">
+                                    <div className="w-9 h-9 rounded-lg bg-slate-50 border border-slate-100 group-hover:border-slate-200 flex items-center justify-center overflow-hidden">
+                                        <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } />
+                                    </div>
                                 </td>
-                                <td className="px-2 py-1 font-mono">{ item.id }</td>
-                                <td className="px-2 py-1 font-mono">{ item.spriteId }</td>
-                                <td className="px-2 py-1 truncate max-w-[120px]" title={ item.itemName }>{ item.itemName }</td>
-                                <td className="px-2 py-1 truncate max-w-[120px]" title={ item.publicName }>{ item.publicName }</td>
-                                <td className="px-2 py-1 text-center">
-                                    <span className={ `px-1.5 py-0.5 rounded text-white text-[10px] font-medium ${ item.type === 's' ? 'bg-[#1e7295]' : 'bg-[#6b7280]' }` }>
+                                <td className="px-2 py-1.5 font-mono text-slate-500">{ item.id }</td>
+                                <td className="px-2 py-1.5 font-mono text-slate-500">{ item.spriteId }</td>
+                                <td className="px-2 py-1.5 text-slate-700 font-medium truncate max-w-[160px]" title={ item.itemName }>{ item.itemName }</td>
+                                <td className="px-2 py-1.5 text-slate-500 truncate max-w-[150px]" title={ item.publicName }>{ item.publicName || '—' }</td>
+                                <td className="px-2 py-1.5 text-center">
+                                    <span className={ `inline-block px-2 py-0.5 rounded-md text-[#ffffff] text-[10px] font-semibold ${ item.type === 's' ? 'bg-[#1E7295]' : 'bg-[#64748b]' }` }>
                                         { item.type === 's' ? 'Floor' : 'Wall' }
                                     </span>
                                 </td>
-                                <td className="px-2 py-1 text-[10px]">{ item.interactionType || '-' }</td>
+                                <td className="px-2 py-1.5">
+                                    { item.interactionType
+                                        ? <span className="inline-block px-1.5 py-0.5 rounded bg-slate-100 text-slate-500 text-[10px] font-mono">{ item.interactionType }</span>
+                                        : <span className="text-slate-300">—</span> }
+                                </td>
                             </tr>
                         )) }
+                        { items.length === 0 && loading &&
+                            Array.from({ length: 8 }).map((_, i) => (
+                                <tr key={ `sk-${ i }` } className="border-b border-slate-100">
+                                    <td className="px-2 py-1.5"><div className="w-9 h-9 rounded-lg bg-slate-100 animate-pulse" /></td>
+                                    { COLUMNS.map(c => <td key={ c.field } className="px-2 py-1.5"><div className="h-3 rounded bg-slate-100 animate-pulse" /></td>) }
+                                </tr>
+                            )) }
                         { items.length === 0 && !loading &&
                             <tr>
-                                <td colSpan={ 7 } className="px-2 py-4 text-center text-[#999]">No items found</td>
-                            </tr>
-                        }
+                                <td colSpan={ 7 } className="px-2 py-10 text-center">
+                                    <div className="text-slate-400 text-sm">No furni found</div>
+                                    <div className="text-slate-300 text-[11px] mt-0.5">Try a different search or filter</div>
+                                </td>
+                            </tr> }
                     </tbody>
                 </table>
-            </Column>
+            </div>
 
-            { totalPages > 1 &&
-                <Flex gap={ 1 } justifyContent="between" alignItems="center">
-                    <Text small variant="gray">
-                        Page { page }/{ totalPages }
-                    </Text>
-                    <Flex gap={ 1 }>
-                        <Button
-                            variant="secondary"
-                            disabled={ page <= 1 }
-                            onClick={ () => onSearch(query, typeFilter, page - 1) }
-                        >
-                            Prev
-                        </Button>
-                        <Button
-                            variant="secondary"
-                            disabled={ page >= totalPages }
-                            onClick={ () => onSearch(query, typeFilter, page + 1) }
-                        >
-                            Next
-                        </Button>
+            { /* Pagination */ }
+            <Flex justifyContent="between" alignItems="center" className="px-0.5">
+                <Text className="text-[11px] text-slate-400">{ total.toLocaleString() } items</Text>
+                <Flex alignItems="center" gap={ 1 }>
+                    <PagBtn title="First" disabled={ page <= 1 } onClick={ () => goTo(1) }>«</PagBtn>
+                    <PagBtn title="Previous" disabled={ page <= 1 } onClick={ () => goTo(page - 1) }>‹</PagBtn>
+                    <Flex alignItems="center" gap={ 1 } className="px-1 text-[11px] text-slate-500">
+                        <input
+                            type="text"
+                            value={ pageInput }
+                            onChange={ e => setPageInput(e.target.value.replace(/[^0-9]/g, '')) }
+                            onKeyDown={ e => { if(e.key === 'Enter') goTo(Number(pageInput)); } }
+                            className="w-12 px-1.5 py-1 text-center rounded-lg border border-slate-200 bg-[#ffffff] focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15"
+                        />
+                        <span className="text-slate-400">/ { totalPages.toLocaleString() }</span>
                     </Flex>
+                    <PagBtn title="Next" disabled={ page >= totalPages } onClick={ () => goTo(page + 1) }>›</PagBtn>
+                    <PagBtn title="Last" disabled={ page >= totalPages } onClick={ () => goTo(totalPages) }>»</PagBtn>
                 </Flex>
-            }
+            </Flex>
         </Column>
     );
 };
diff --git a/src/hooks/furni-editor/useFurniEditor.ts b/src/hooks/furni-editor/useFurniEditor.ts
index 16e9f0f..98d6e9e 100644
--- a/src/hooks/furni-editor/useFurniEditor.ts
+++ b/src/hooks/furni-editor/useFurniEditor.ts
@@ -209,11 +209,11 @@ export const useFurniEditor = () =>
         }
     });
 
-    const searchItems = useCallback((query: string, type: string, pg: number) =>
+    const searchItems = useCallback((query: string, type: string, pg: number, sortField: string = 'id', sortDir: string = 'asc') =>
     {
         setLoading(true);
         setError(null);
-        SendMessageComposer(new FurniEditorSearchComposer(query, type, pg));
+        SendMessageComposer(new FurniEditorSearchComposer(query, type, pg, sortField, sortDir));
     }, []);
 
     const loadDetail = useCallback((id: number) =>

From 08976f0ab4bb5553fbb3a03e0afc1686c07541d2 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 15:16:06 +0200
Subject: [PATCH 21/30] fix(furni-editor): clearer search icon (was note-like)

The search-bar magnifier had a too-short handle relative to the lens, so
at 16px it read like a musical note. Use a proportioned lens + longer
handle so it reads unmistakably as a magnifying glass.
---
 src/components/furni-editor/views/FurniEditorSearchView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/furni-editor/views/FurniEditorSearchView.tsx b/src/components/furni-editor/views/FurniEditorSearchView.tsx
index 3f05d6d..9164951 100644
--- a/src/components/furni-editor/views/FurniEditorSearchView.tsx
+++ b/src/components/furni-editor/views/FurniEditorSearchView.tsx
@@ -118,7 +118,7 @@ export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
             <Flex gap={ 2 } alignItems="center">
                 <div className="relative flex-1">
                     <span className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
-                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.2-3.2" /></svg>
+                        <svg className="w-4 h-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.5" /><line x1="12.7" y1="12.7" x2="18" y2="18" /></svg>
                     </span>
                     <input
                         type="text"

From 3d1f1103a3903d22c642cc0feb7e3184815ced3c Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 15:26:24 +0200
Subject: [PATCH 22/30] feat(furni-editor): 'Import from Habbo' button to fetch
 official texts

useFurniEditor gains importText(id) + importResult (10049 round-trip); the
edit view shows an 'Import from Habbo' button that fills Display Name/
Description with the official text for review before Save (nonce-guarded,
classname-matched), with an inline result note.
---
 .../furni-editor/FurniEditorView.tsx          |  4 +-
 .../views/FurniEditorEditView.tsx             | 42 ++++++++++++++++++-
 src/hooks/furni-editor/useFurniEditor.ts      | 28 ++++++++++++-
 3 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/src/components/furni-editor/FurniEditorView.tsx b/src/components/furni-editor/FurniEditorView.tsx
index 6133b9b..c36ed09 100644
--- a/src/components/furni-editor/FurniEditorView.tsx
+++ b/src/components/furni-editor/FurniEditorView.tsx
@@ -19,7 +19,7 @@ export const FurniEditorView: FC<{}> = () =>
         selectedItem, setSelectedItem, furniDataEntry,
         interactions,
         searchItems, loadDetail, loadBySpriteId, updateItem, deleteItem, loadInteractions,
-        updateFurnidata, revertFurnidata
+        updateFurnidata, revertFurnidata, importText, importResult
     } = useFurniEditor();
 
     const isMod = useHasPermission('acc_catalogfurni');
@@ -158,6 +158,8 @@ export const FurniEditorView: FC<{}> = () =>
                         onBack={ handleBack }
                         onUpdateFurnidata={ updateFurnidata }
                         onRevertFurnidata={ revertFurnidata }
+                        onImportText={ importText }
+                        importResult={ importResult }
                     />
                 }
 
diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 4110fe7..4fb7cb7 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -14,6 +14,8 @@ interface FurniEditorEditViewProps
     onBack: () => void;
     onUpdateFurnidata: (id: number, name: string, description: string) => void;
     onRevertFurnidata: (id: number) => void;
+    onImportText: (id: number) => void;
+    importResult: { found: boolean; name: string; description: string; classname: string; nonce: number } | null;
 }
 
 const FIELD_TIPS: Record<string, string> = {
@@ -110,7 +112,7 @@ const CopyValue: FC<{ value: string | number }> = ({ value }) =>
 
 export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
 {
-    const { item, furniDataEntry, interactions, loading, onUpdate, onDelete, onBack, onUpdateFurnidata, onRevertFurnidata } = props;
+    const { item, furniDataEntry, interactions, loading, onUpdate, onDelete, onBack, onUpdateFurnidata, onRevertFurnidata, onImportText, importResult } = props;
     const saveRef = useRef<() => void>(null);
 
     const [ form, setForm ] = useState({
@@ -139,6 +141,8 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     const [ furniName, setFurniName ] = useState('');
     const [ furniDescription, setFurniDescription ] = useState('');
     const [ confirmFurnidata, setConfirmFurnidata ] = useState(false);
+    const [ importNote, setImportNote ] = useState('');
+    const appliedImportNonce = useRef(0);
 
     useEffect(() =>
     {
@@ -170,6 +174,7 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
         setFurniName(String(furniDataEntry?.name ?? ''));
         setFurniDescription(String(furniDataEntry?.description ?? ''));
         setConfirmFurnidata(false);
+        setImportNote('');
     }, [ item, furniDataEntry ]);
 
     const setField = useCallback((key: string, value: unknown) =>
@@ -238,6 +243,27 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
         furniName !== String(furniDataEntry?.name ?? '') || furniDescription !== String(furniDataEntry?.description ?? ''),
     [ furniName, furniDescription, furniDataEntry ]);
 
+    // Apply an "Import from Habbo" result into the editable fields (review then Save).
+    useEffect(() =>
+    {
+        if(!importResult || importResult.nonce === appliedImportNonce.current) return;
+        appliedImportNonce.current = importResult.nonce;
+
+        // Ignore a result that belongs to a different furni (user navigated away).
+        if(importResult.classname && importResult.classname.trim().toLowerCase() !== String(item?.itemName ?? '').trim().toLowerCase()) return;
+
+        if(importResult.found)
+        {
+            setFurniName(importResult.name);
+            setFurniDescription(importResult.description);
+            setImportNote('Imported from Habbo — review and Save');
+        }
+        else
+        {
+            setImportNote('Not found on Habbo for this classname');
+        }
+    }, [ importResult, item ]);
+
     const handleSave = useCallback(() =>
     {
         if(!isValid) return;
@@ -336,10 +362,22 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                                 <input className={ inputClass() } value={ furniDescription } onChange={ e => setFurniDescription(e.target.value) } maxLength={ 256 } />
                             </div>
                         </div>
-                        <Flex gap={ 1 } className="mt-1.5">
+                        <Flex gap={ 1 } className="mt-1.5" alignItems="center">
                             <Button variant="success" disabled={ loading || !furnidataDirty } onClick={ () => setConfirmFurnidata(true) }>Save name/desc</Button>
                             <Button variant="secondary" disabled={ loading } onClick={ () => onRevertFurnidata(item.id) }>Revert</Button>
+                            <button
+                                type="button"
+                                disabled={ loading }
+                                onClick={ () => onImportText(item.id) }
+                                title="Fetch the official name &amp; description from Habbo"
+                                className="ml-auto inline-flex items-center gap-1 text-[11px] font-medium px-2.5 py-1.5 rounded-lg border border-slate-300 bg-[#ffffff] text-slate-600 hover:bg-slate-50 hover:border-slate-400 disabled:opacity-50 transition"
+                            >
+                                <svg className="w-3.5 h-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M10 3v9" /><path d="m6.5 8.5 3.5 3.5 3.5-3.5" /><path d="M4 16h12" /></svg>
+                                Import from Habbo
+                            </button>
                         </Flex>
+                        { importNote &&
+                            <Text className={ `mt-1 text-[10px] ${ importNote.startsWith('Not found') ? 'text-amber-600' : 'text-primary' }` }>{ importNote }</Text> }
                     </>
                 ) : (
                     <div className="flex items-start gap-2 text-[11px] text-slate-500 bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-2 leading-snug">
diff --git a/src/hooks/furni-editor/useFurniEditor.ts b/src/hooks/furni-editor/useFurniEditor.ts
index 98d6e9e..3cd8ec8 100644
--- a/src/hooks/furni-editor/useFurniEditor.ts
+++ b/src/hooks/furni-editor/useFurniEditor.ts
@@ -1,4 +1,4 @@
-import { FurniEditorBySpriteComposer, FurniEditorDeleteComposer, FurniEditorDetailComposer, FurniEditorDetailResultEvent, FurniEditorInteractionsComposer, FurniEditorInteractionsResultEvent, FurniEditorResultEvent, FurniEditorRevertFurnidataComposer, FurniEditorSearchComposer, FurniEditorSearchResultEvent, FurniEditorUpdateComposer, FurniEditorUpdateFurnidataComposer } from '@nitrots/nitro-renderer';
+import { FurniEditorBySpriteComposer, FurniEditorDeleteComposer, FurniEditorDetailComposer, FurniEditorDetailResultEvent, FurniEditorInteractionsComposer, FurniEditorInteractionsResultEvent, FurniEditorResultEvent, FurniEditorRevertFurnidataComposer, FurniEditorSearchComposer, FurniEditorSearchResultEvent, FurniEditorUpdateComposer, FurniEditorUpdateFurnidataComposer, FurniEditorImportTextComposer, FurniEditorImportTextResultEvent } from '@nitrots/nitro-renderer';
 import { useCallback, useRef, useState } from 'react';
 import { NotificationAlertType, SendMessageComposer } from '../../api';
 import { useMessageEvent, useNotification } from '../../hooks';
@@ -61,6 +61,8 @@ export const useFurniEditor = () =>
     const [ interactions, setInteractions ] = useState<string[]>([]);
     const [ furniDataEntry, setFurniDataEntry ] = useState<Record<string, unknown> | null>(null);
     const pendingActionRef = useRef<{ action: string; itemId: number } | null>(null);
+    const [ importResult, setImportResult ] = useState<{ found: boolean; name: string; description: string; classname: string; nonce: number } | null>(null);
+    const importNonceRef = useRef(0);
     const { simpleAlert = null } = useNotification();
 
     const clearError = useCallback(() => setError(null), []);
@@ -264,6 +266,28 @@ export const useFurniEditor = () =>
         SendMessageComposer(new FurniEditorRevertFurnidataComposer(id));
     }, []);
 
+    const importText = useCallback((id: number) =>
+    {
+        setLoading(true);
+        setError(null);
+        SendMessageComposer(new FurniEditorImportTextComposer(id));
+    }, []);
+
+    useMessageEvent(FurniEditorImportTextResultEvent, (event: FurniEditorImportTextResultEvent) =>
+    {
+        const parser = event.getParser();
+
+        setLoading(false);
+        importNonceRef.current += 1;
+        setImportResult({
+            found: parser.found,
+            name: parser.name,
+            description: parser.description,
+            classname: parser.classname,
+            nonce: importNonceRef.current
+        });
+    });
+
     const loadInteractions = useCallback(() =>
     {
         SendMessageComposer(new FurniEditorInteractionsComposer());
@@ -274,6 +298,6 @@ export const useFurniEditor = () =>
         selectedItem, setSelectedItem, catalogItems, furniDataEntry,
         interactions,
         searchItems, loadDetail, loadBySpriteId, updateItem, deleteItem, loadInteractions,
-        updateFurnidata, revertFurnidata
+        updateFurnidata, revertFurnidata, importText, importResult
     };
 };

From 0af8c8932b5607aacc02ff365dca2a71b8cda7b4 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 15:48:19 +0200
Subject: [PATCH 23/30] fix(furni-editor): clear CopyValue reset timer on
 unmount

Move the 'copied!' 1s reset into a useEffect with cleanup so the timer
can't fire setState after the component unmounts.
---
 .../furni-editor/views/FurniEditorEditView.tsx    | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index 4fb7cb7..a40e913 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -92,11 +92,20 @@ const CopyValue: FC<{ value: string | number }> = ({ value }) =>
     const copy = useCallback(() =>
     {
         const text = String(value);
-        const done = () => { setCopied(true); window.setTimeout(() => setCopied(false), 1000); };
-        if(navigator.clipboard?.writeText) navigator.clipboard.writeText(text).then(done).catch(() => done());
-        else done();
+        if(navigator.clipboard?.writeText) navigator.clipboard.writeText(text).then(() => setCopied(true)).catch(() => setCopied(true));
+        else setCopied(true);
     }, [ value ]);
 
+    // Reset the "copied!" flag after 1s, with cleanup so the timer never fires after unmount.
+    useEffect(() =>
+    {
+        if(!copied) return;
+
+        const handle = window.setTimeout(() => setCopied(false), 1000);
+
+        return () => window.clearTimeout(handle);
+    }, [ copied ]);
+
     return (
         <div
             role="button"

From df7060b3913ed70b7b1abbad3dec3fcb786853bf Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 18:00:41 +0200
Subject: [PATCH 24/30] feat(furni-editor): read-only FurniData.json view
 (resolved-from-json)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show the furni's resolved furnidata JSON entry (the editable display
name's source of truth) in a collapsible read-only section under Basic
Info. Uses furniDataEntry already available client-side — no extra
packet. Supersedes the old read-only resolver-preview slice.
---
 src/components/furni-editor/views/FurniEditorEditView.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/furni-editor/views/FurniEditorEditView.tsx b/src/components/furni-editor/views/FurniEditorEditView.tsx
index a40e913..5c7a86b 100644
--- a/src/components/furni-editor/views/FurniEditorEditView.tsx
+++ b/src/components/furni-editor/views/FurniEditorEditView.tsx
@@ -417,6 +417,13 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
                 </div>
             </Section>
 
+            { furniDataEntry &&
+                <Section title="FurniData.json" defaultOpen={ false }>
+                    <Text className="text-[10px] text-slate-400 mb-1 block">Read-only — how this furni resolves from the furnidata JSON (source of truth for the display name).</Text>
+                    <pre className="text-[10px] leading-snug text-slate-600 bg-slate-50 border border-slate-200 rounded-lg p-2 overflow-auto max-h-52 whitespace-pre-wrap break-all font-mono">{ JSON.stringify(furniDataEntry, null, 2) }</pre>
+                </Section>
+            }
+
             <Section title="Dimensions">
                 <div className="grid grid-cols-3 gap-2">
                     <div>

From d7fabcd777d57cb8b19e9d1f25e936ce6b946455 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 19:01:19 +0200
Subject: [PATCH 25/30] fix(friendbar): auto-fit visible friend count so the
 bar stops clipping

The online-friends bar is portaled into the right toolbar nav, which sits
inside `tb-nav-clip` (fixed, `max-w-[calc(50vw-242px)]`, `overflow-x: clip`).
Each online friend adds a fixed `w-[132px]` chip, so the bar grew with every
friend up to MAX_DISPLAY_COUNT (3). Once it exceeded the clip width the right
edge was silently cut off - the scroll arrow and part of the search button
disappeared. The portal slot is `shrink-0`, so the chips never compressed;
they just overflowed and got clipped. Net effect: "more friends online =
broken bar".

Measure the room actually available between the bar's left edge and the
viewport's right edge (re-measured on resize / ResizeObserver) and derive an
effective visible count clamped 1..3, always reserving space for both arrows
and the search chip so nothing clips at any width or friend count. The bar's
left edge is stable (it follows fixed-width toolbar icons), so changing the
chip count never moves it - no measurement feedback loop.

Scroll offset now derives a clamped safeOffset used by every read, so a
stale indexOffset after the list shrinks / the fit grows renders correctly
and self-corrects on the next arrow click (no write-back effect).
---
 .../views/friends-bar/FriendsBarView.tsx      | 72 +++++++++++++++++--
 1 file changed, 65 insertions(+), 7 deletions(-)

diff --git a/src/components/friends/views/friends-bar/FriendsBarView.tsx b/src/components/friends/views/friends-bar/FriendsBarView.tsx
index de51519..9234a07 100644
--- a/src/components/friends/views/friends-bar/FriendsBarView.tsx
+++ b/src/components/friends/views/friends-bar/FriendsBarView.tsx
@@ -1,11 +1,23 @@
-import { FC, useRef, useState } from 'react';
+import { FC, useLayoutEffect, useRef, useState } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { LocalizeText, MessengerFriend } from '../../../../api';
 import { FriendBarItemView } from './FriendBarItemView';
 import { motion, AnimatePresence, Variants } from 'framer-motion';
 
+// Hard cap on simultaneously-shown friend chips. The effective count is
+// reduced below this when the bar would otherwise overflow its (clipped)
+// slot in the toolbar — see the width measurement below.
 const MAX_DISPLAY_COUNT = 3;
 
+// Layout constants mirrored from FriendBarItemView / the flex gaps here, used
+// to compute how many friend chips fit in the available width. A "slot" is one
+// w-[132px] button plus the gap-[6px] that precedes it.
+const ITEM_SLOT = 138; // 132px chip + 6px gap (friend chip and search chip)
+const ARROWS_WIDTH = 52; // two w-[20px] arrows, each + 6px gap
+const REQUEST_SLOT = 120; // requests chip (only present when requestsCount > 0)
+const BASE_PAD = 8; // container px-[2px] + a little slack
+const RIGHT_SAFE = 24; // right inset (right-0/right-3) + pr-3 safety margin
+
 // Mirrored from Toolbar to keep physics identical
 const containerVariants: Variants = {
     hidden: {},
@@ -23,9 +35,55 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
 {
     const { onlineFriends = [], requestsCount = 0 } = props;
     const [ indexOffset, setIndexOffset ] = useState(0);
+    const [ maxVisible, setMaxVisible ] = useState(MAX_DISPLAY_COUNT);
     const elementRef = useRef<HTMLDivElement>(null);
-    const hasScrollableFriends = (onlineFriends.length > MAX_DISPLAY_COUNT);
-    const visibleFriends = onlineFriends.slice(indexOffset, (indexOffset + MAX_DISPLAY_COUNT));
+
+    // Auto-fit the visible friend count to the room actually available between
+    // the bar's left edge and the right side of the viewport. The bar lives in
+    // a `overflow-x: clip` toolbar slot, so anything that doesn't fit would be
+    // silently cut off (the scroll arrow / search button disappear). The bar's
+    // left edge is stable (it sits after fixed-width toolbar icons), so growing
+    // or shrinking the chip count never moves it — no measurement feedback loop.
+    useLayoutEffect(() =>
+    {
+        const element = elementRef.current;
+
+        if(!element) return;
+
+        const measure = () =>
+        {
+            const left = element.getBoundingClientRect().left;
+            const available = window.innerWidth - left - RIGHT_SAFE;
+            const fixed = ARROWS_WIDTH + ITEM_SLOT /* search chip */ + BASE_PAD + ((requestsCount > 0) ? REQUEST_SLOT : 0);
+            const fit = Math.floor((available - fixed) / ITEM_SLOT);
+            const next = Math.max(1, Math.min(MAX_DISPLAY_COUNT, fit));
+
+            setMaxVisible(prev => ((prev === next) ? prev : next));
+        };
+
+        measure();
+
+        const observer = new ResizeObserver(measure);
+
+        observer.observe(document.documentElement);
+        window.addEventListener('resize', measure);
+
+        return () =>
+        {
+            observer.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, [ requestsCount, onlineFriends.length ]);
+
+    // `safeOffset` is the offset clamped to the current list/fit. Every read
+    // below uses it, so a stale `indexOffset` (after the list shrinks or the fit
+    // grows) renders correctly and self-corrects on the next arrow click — no
+    // write-back effect needed.
+    const maxOffset = Math.max(0, (onlineFriends.length - maxVisible));
+    const safeOffset = Math.min(indexOffset, maxOffset);
+    const canScrollLeft = (safeOffset > 0);
+    const canScrollRight = (safeOffset < maxOffset);
+    const visibleFriends = onlineFriends.slice(safeOffset, (safeOffset + maxVisible));
 
     return (
         <motion.div
@@ -44,10 +102,10 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
                 </motion.div> }
             <motion.div variants={itemVariants}>
                 <div
-                    className={ `flex h-[34px] w-[20px] items-center justify-center text-white/80 transition-all ${ (!hasScrollableFriends || (indexOffset <= 0)) ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:text-white active:scale-95' }` }
+                    className={ `flex h-[34px] w-[20px] items-center justify-center text-white/80 transition-all ${ !canScrollLeft ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:text-white active:scale-95' }` }
                     onClick={ () =>
                     {
-                        if(indexOffset > 0) setIndexOffset(indexOffset - 1);
+                        if(canScrollLeft) setIndexOffset(safeOffset - 1);
                     } }
                 >
                     <FaChevronLeft className="text-white/70 text-sm drop-shadow-[1px_1px_0_#000]" />
@@ -94,10 +152,10 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
 
             <motion.div variants={itemVariants}>
                 <div
-                    className={ `flex h-[34px] w-[20px] items-center justify-center text-white/80 transition-all ${ (!hasScrollableFriends || !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1)))) ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:text-white active:scale-95' }` }
+                    className={ `flex h-[34px] w-[20px] items-center justify-center text-white/80 transition-all ${ !canScrollRight ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:text-white active:scale-95' }` }
                     onClick={ () =>
                     {
-                        if((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) setIndexOffset(indexOffset + 1);
+                        if(canScrollRight) setIndexOffset(safeOffset + 1);
                     } }
                 >
                     <FaChevronRight className="text-white/70 text-sm drop-shadow-[1px_1px_0_#000]" />

From 5cd470c980d84ee54b727af684b93b6feff5a7be Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 20:06:43 +0200
Subject: [PATCH 26/30] feat(badge-leaderboard): render avatar heads with the
 local renderer

The leaderboard rows pulled each avatar head from habbo.com's imaging
service (`https://www.habbo.com/habbo-imaging/avatarimage?...headonly=1`)
via a plain <img>. The avatar `figure` is already present in the leaderboard
data (served by the CMS `/api/badges/leaderboard` endpoint), so there is no
need for an external request - render it locally instead.

Swap the <img> for the renderer-backed `LayoutAvatarImageView` (headOnly),
which draws the head through `GetAvatarRenderManager().createAvatarImage(...)`.
The head-only render is an absolutely-positioned background div rather than an
<img>, so the avatar CSS is reworked to frame it (relative, overflow-hidden
box with a head crop mirrored from the friends list), and the now-unused
`getAvatarHeadUrl` helper is removed.

Removes the last runtime dependency on habbo.com for this panel; avatars now
come entirely from the local renderer.
---
 .../BadgeLeaderboardView.tsx                  | 10 ++----
 src/css/badges/BadgeLeaderboardView.css       | 36 +++++++++----------
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/components/badge-leaderboard/BadgeLeaderboardView.tsx b/src/components/badge-leaderboard/BadgeLeaderboardView.tsx
index 7af23d0..fa31cc3 100644
--- a/src/components/badge-leaderboard/BadgeLeaderboardView.tsx
+++ b/src/components/badge-leaderboard/BadgeLeaderboardView.tsx
@@ -1,7 +1,7 @@
 import { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { CSSProperties, FC, useEffect, useMemo, useState } from 'react';
 import { BadgeLeaderboardBoard, BadgeLeaderboardEntry, BadgeRarityKey, fetchBadgeLeaderboard, getCachedBadgeLeaderboard, LocalizeText } from '../../api';
-import { Column, DraggableWindow, DraggableWindowPosition, Flex, Text } from '../../common';
+import { Column, DraggableWindow, DraggableWindowPosition, Flex, LayoutAvatarImageView, Text } from '../../common';
 import {
     badgeEmblemAchievement,
     badgeEmblemCommon,
@@ -40,12 +40,6 @@ const RARITY_ASSETS: Record<BadgeRarityKey, { frame: string; emblem: string }> =
 
 const RARITY_ORDER: BadgeRarityKey[] = [ 'common', 'rare', 'epic', 'legendary', 'mythical', 'unique' ];
 const PAGE_SIZE = 10;
-const getAvatarHeadUrl = (figure: string): string =>
-{
-    if(!figure) return '';
-
-    return `https://www.habbo.com/habbo-imaging/avatarimage?figure=${ encodeURIComponent(figure) }&direction=2&head_direction=2&gesture=sml&size=m&headonly=1`;
-};
 
 export const BadgeLeaderboardView: FC<{}> = props =>
 {
@@ -310,7 +304,7 @@ const LeaderboardRow: FC<LeaderboardRowProps> = props =>
         <div className={ `nitro-badge-leaderboard__row ${ isCurrentUser ? 'is-current-user' : '' } ${ ((rowIndex % 2) === 0) ? 'is-even' : 'is-odd' }` }>
             <div className={ `nitro-badge-leaderboard__rank ${ rankClassName }` }>{ entry.rank }</div>
             <div className="nitro-badge-leaderboard__avatar">
-                <img className="nitro-badge-leaderboard__avatar-image" src={ getAvatarHeadUrl(entry.figure) } alt="" loading="lazy" />
+                <LayoutAvatarImageView figure={ entry.figure } headOnly direction={ 2 } />
             </div>
             <Text className="nitro-badge-leaderboard__username" bold>{ entry.username }</Text>
             <Text className="nitro-badge-leaderboard__score" bold>{ entry.score }</Text>
diff --git a/src/css/badges/BadgeLeaderboardView.css b/src/css/badges/BadgeLeaderboardView.css
index 0d87c0e..d3ca100 100644
--- a/src/css/badges/BadgeLeaderboardView.css
+++ b/src/css/badges/BadgeLeaderboardView.css
@@ -258,30 +258,28 @@
 }
 
 .nitro-badge-leaderboard__avatar {
-    width: 54px;
-    height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: visible;
+    position: relative;
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
     margin: 0 auto;
     align-self: center;
 }
 
-.nitro-badge-leaderboard__avatar .avatar-image,
-.nitro-badge-leaderboard__avatar-image {
-    display: block;
-    width: auto !important;
-    height: auto !important;
-    max-width: 54px;
-    max-height: 62px;
-    left: auto !important;
-    right: auto !important;
-    top: auto !important;
-    bottom: auto !important;
-    margin: 0 auto;
+/* The renderer-backed LayoutAvatarImageView (headOnly) draws the avatar head as
+   an absolutely-positioned background div (`.avatar-image`), not an <img>. Frame
+   it the same way the friends list does, scaled up for the larger row. */
+.nitro-badge-leaderboard__avatar .avatar-image {
+    position: absolute !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0 !important;
+    background-repeat: no-repeat;
+    background-size: 82px auto !important;
+    background-position: -20px -24px !important;
+    transform: none !important;
     image-rendering: pixelated;
-    object-fit: contain;
 }
 
 .nitro-badge-leaderboard__username {

From f73bbb467c1f1b6e2ed832437c963ea6f206d70f Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 20:43:42 +0200
Subject: [PATCH 27/30] fix(toolbar): add missing CSS rule for the mentions
 icon

The toolbar renders a mentions button (`ToolbarItemView icon="mentions"` ->
`<div class="nitro-icon icon-mentions">`) and the asset
`assets/images/toolbar/icons/mentions.png` (72x64) exists, but icons.css had
no `.nitro-icon.icon-mentions` rule - so the element had no background image
and, since the base `.nitro-icon` sets no size, rendered at 0x0 (invisible).

Add the rule, sized at half the asset (36x32, preserving the 9:8 aspect) with
`background-size: contain`, matching the other toolbar icon definitions.
---
 src/css/icons/icons.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/css/icons/icons.css b/src/css/icons/icons.css
index 17a903f..50f390c 100644
--- a/src/css/icons/icons.css
+++ b/src/css/icons/icons.css
@@ -36,6 +36,13 @@
     height: 36px;
 }
 
+.nitro-icon.icon-mentions {
+    background-image: url("@/assets/images/toolbar/icons/mentions.png");
+    background-size: contain;
+    width: 36px;
+    height: 32px;
+}
+
 .nitro-icon.icon-buildersclub {
     background-image: url("@/assets/images/toolbar/icons/buildersclub.png");
     background-size: contain;

From dcbf44aedb175c6aa9fa413018aa6c01a87aa31b Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sat, 6 Jun 2026 23:35:33 +0200
Subject: [PATCH 28/30] feat(mentions): overhaul, refactor, notification bubble
 & window update

Chat tagging:
- Any @user is a visible tag in chat bubbles (the .mention-tag CSS never
  existed, so highlighting was invisible); self/alias mentions get a gold
  emphasis. Fixes cross-room tags not being highlighted.

Mentions window:
- Redesigned: unread count in the header, restyled filter chips + a refresh
  button, CSS-driven list/date-groups, adaptive height (compact when few,
  capped + scroll when many), polished empty state.
- Rows: framed avatar (friends-list head crop so the face is never clipped),
  per-row unread dot, type marker, icon action buttons (goto / remove).
- Re-requests from the server each time it opens.

Autocomplete:
- Never suggests the viewer themselves; suggests room users + online friends +
  aliases.

Notifications:
- Mention toast removed; mentions flow through the client's standard
  notification stream via a dedicated mention bubble (avatar + actions) in the
  default position. EVERY received mention surfaces (independent of the generic
  info-feed toggle, gated only by mentions_ui.enabled).

Refactor (behaviour-preserving):
- Centralised @-token classification in api/mentions/mentionTokens.
- Moved mentionsFormat -> api/mentions, useMentionActions -> hooks/mentions.
- Extracted ChatInputView @-autocomplete into a tested useChatMentions hook +
  pure helper; removed the dead duplicate useMentionAutocomplete.
---
 src/api/mentions/index.ts                     |   2 +
 src/api/mentions/mentionTokens.test.ts        |  51 +++
 src/api/mentions/mentionTokens.ts             |  50 +++
 .../mentions/mentionsFormat.test.ts           |   0
 .../mentions/mentionsFormat.ts                |   0
 .../MentionNotificationBubbleItem.ts          |  25 ++
 .../notification/NotificationBubbleType.ts    |   1 +
 src/api/notification/index.ts                 |   1 +
 src/components/MainView.tsx                   |   4 +-
 .../chat-history/ChatHistoryView.tsx          |   4 +-
 .../mentions/MentionMessageView.tsx           |  20 +-
 src/components/mentions/MentionRowView.tsx    |  60 ++--
 src/components/mentions/MentionToastsView.tsx |  63 ----
 src/components/mentions/MentionsView.tsx      | 102 ++++--
 src/components/mentions/index.ts              |   3 -
 .../views/bubble-layouts/GetBubbleLayout.tsx  |   5 +-
 .../NotificationMentionBubbleView.tsx         |  89 +++++
 .../ChatInputMentionSelectorView.tsx          |  13 +-
 .../room/widgets/chat-input/ChatInputView.tsx | 195 +----------
 .../widgets/chat/highlightMentions.test.ts    |  78 ++---
 .../room/widgets/chat/highlightMentions.tsx   |  64 +---
 src/css/chat/Chats.css                        |  20 ++
 src/css/mentions/MentionToasts.css            | 150 ++++----
 src/css/mentions/MentionsPanel.css            | 323 ++++++++++++++++++
 src/hooks/mentions/index.ts                   |   2 +-
 src/hooks/mentions/mentionToastsStore.ts      |  58 ----
 .../mentions/useMentionActions.ts             |   2 +-
 src/hooks/mentions/useMentionAutocomplete.ts  |  89 -----
 src/hooks/mentions/useMentionMessages.ts      |  11 +-
 src/hooks/notification/useNotification.ts     |  16 +-
 src/hooks/rooms/widgets/index.ts              |   1 +
 .../widgets/useChatMentions.helpers.test.ts   | 101 ++++++
 .../rooms/widgets/useChatMentions.helpers.ts  | 143 ++++++++
 src/hooks/rooms/widgets/useChatMentions.ts    | 130 +++++++
 src/index.tsx                                 |   1 +
 35 files changed, 1220 insertions(+), 657 deletions(-)
 create mode 100644 src/api/mentions/mentionTokens.test.ts
 create mode 100644 src/api/mentions/mentionTokens.ts
 rename src/{components => api}/mentions/mentionsFormat.test.ts (100%)
 rename src/{components => api}/mentions/mentionsFormat.ts (100%)
 create mode 100644 src/api/notification/MentionNotificationBubbleItem.ts
 delete mode 100644 src/components/mentions/MentionToastsView.tsx
 create mode 100644 src/components/notification-center/views/bubble-layouts/NotificationMentionBubbleView.tsx
 create mode 100644 src/css/mentions/MentionsPanel.css
 delete mode 100644 src/hooks/mentions/mentionToastsStore.ts
 rename src/{components => hooks}/mentions/useMentionActions.ts (95%)
 delete mode 100644 src/hooks/mentions/useMentionAutocomplete.ts
 create mode 100644 src/hooks/rooms/widgets/useChatMentions.helpers.test.ts
 create mode 100644 src/hooks/rooms/widgets/useChatMentions.helpers.ts
 create mode 100644 src/hooks/rooms/widgets/useChatMentions.ts

diff --git a/src/api/mentions/index.ts b/src/api/mentions/index.ts
index 57433b6..d6edd8c 100644
--- a/src/api/mentions/index.ts
+++ b/src/api/mentions/index.ts
@@ -1,2 +1,4 @@
 export * from './MentionType';
 export * from './IMentionEntry';
+export * from './mentionTokens';
+export * from './mentionsFormat';
diff --git a/src/api/mentions/mentionTokens.test.ts b/src/api/mentions/mentionTokens.test.ts
new file mode 100644
index 0000000..25ff678
--- /dev/null
+++ b/src/api/mentions/mentionTokens.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { classifyMentionToken, MENTION_ROOM_ALIASES, tokenIsMention } from './mentionTokens';
+
+describe('classifyMentionToken', () =>
+{
+    it('returns "self" for the own nick', () =>
+    {
+        expect(classifyMentionToken('@Bob', 'Bob')).toBe('self');
+    });
+
+    it('returns "self" for a broadcast alias', () =>
+    {
+        expect(classifyMentionToken('@all', 'Bob')).toBe('self');
+
+        for(const alias of MENTION_ROOM_ALIASES)
+        {
+            expect(classifyMentionToken(`@${ alias }`, 'Bob')).toBe('self');
+        }
+    });
+
+    it('returns "tag" for any other @user', () =>
+    {
+        expect(classifyMentionToken('@Charlie', 'Bob')).toBe('tag');
+    });
+
+    it('matches the own nick case-insensitively', () =>
+    {
+        expect(classifyMentionToken('@bOb', 'BOB')).toBe('self');
+    });
+
+    it('returns "" for non-mentions and a bare @', () =>
+    {
+        expect(classifyMentionToken('@', 'Bob')).toBe('');
+        expect(classifyMentionToken('nothing', 'Bob')).toBe('');
+    });
+
+    it('still tags others when the own username is empty', () =>
+    {
+        expect(classifyMentionToken('@Charlie', '')).toBe('tag');
+    });
+});
+
+describe('tokenIsMention', () =>
+{
+    it('is true only for self/alias mentions', () =>
+    {
+        expect(tokenIsMention('@Bob', 'Bob')).toBe(true);
+        expect(tokenIsMention('@everyone', 'Bob')).toBe(true);
+        expect(tokenIsMention('@Charlie', 'Bob')).toBe(false);
+    });
+});
diff --git a/src/api/mentions/mentionTokens.ts b/src/api/mentions/mentionTokens.ts
new file mode 100644
index 0000000..94224f7
--- /dev/null
+++ b/src/api/mentions/mentionTokens.ts
@@ -0,0 +1,50 @@
+// Shared @-mention token classification, used by both the chat-bubble
+// highlighter and the mentions panel so the two can't diverge.
+
+export const MENTION_ROOM_ALIASES: ReadonlyArray<string> = [
+    'all', 'everyone', 'tutti',
+    'friends', 'amici',
+    'room', 'stanza'
+];
+
+const NON_NICK_CHARS = /[^A-Za-z0-9_]/g;
+
+const normalizeToken = (token: string): string =>
+{
+    if(!token || (token.length < 2) || (token.charAt(0) !== '@')) return '';
+
+    return token.substring(1).replace(NON_NICK_CHARS, '').toLowerCase();
+};
+
+const normalizeNick = (value: string): string => (value || '').replace(NON_NICK_CHARS, '').toLowerCase();
+
+// '' = not a mention; 'tag' = any @user (subtle chip); 'self' = the token
+// targets the viewer (own nick) or is a broadcast alias (strong highlight).
+export type MentionKind = '' | 'tag' | 'self';
+
+export const classifyMentionToken = (
+    token: string,
+    ownUsername: string,
+    aliases: ReadonlyArray<string> = MENTION_ROOM_ALIASES
+): MentionKind =>
+{
+    const nick = normalizeToken(token);
+
+    if(!nick) return '';
+
+    const ownLower = normalizeNick(ownUsername);
+
+    if((ownLower && (nick === ownLower)) || aliases.some(alias => alias.toLowerCase() === nick)) return 'self';
+
+    return 'tag';
+};
+
+/**
+ * Back-compat boolean — true only when the token targets the viewer or a
+ * broadcast alias (i.e. "I was mentioned"), not for generic @user tags.
+ */
+export const tokenIsMention = (
+    token: string,
+    ownUsername: string,
+    aliases: ReadonlyArray<string> = MENTION_ROOM_ALIASES
+): boolean => (classifyMentionToken(token, ownUsername, aliases) === 'self');
diff --git a/src/components/mentions/mentionsFormat.test.ts b/src/api/mentions/mentionsFormat.test.ts
similarity index 100%
rename from src/components/mentions/mentionsFormat.test.ts
rename to src/api/mentions/mentionsFormat.test.ts
diff --git a/src/components/mentions/mentionsFormat.ts b/src/api/mentions/mentionsFormat.ts
similarity index 100%
rename from src/components/mentions/mentionsFormat.ts
rename to src/api/mentions/mentionsFormat.ts
diff --git a/src/api/notification/MentionNotificationBubbleItem.ts b/src/api/notification/MentionNotificationBubbleItem.ts
new file mode 100644
index 0000000..ad5f701
--- /dev/null
+++ b/src/api/notification/MentionNotificationBubbleItem.ts
@@ -0,0 +1,25 @@
+import { IMentionEntry } from '../mentions';
+import { NotificationBubbleItem } from './NotificationBubbleItem';
+import { NotificationBubbleType } from './NotificationBubbleType';
+
+/**
+ * A notification bubble that carries a full mention entry, so the dedicated
+ * mention bubble layout can render the sender's avatar (from the figure) and
+ * the go-to-room action — data the plain NotificationBubbleItem can't hold.
+ */
+export class MentionNotificationBubbleItem extends NotificationBubbleItem
+{
+    private _mention: IMentionEntry;
+
+    constructor(mention: IMentionEntry)
+    {
+        super(mention.message, NotificationBubbleType.MENTION, null, null, mention.senderUsername);
+
+        this._mention = mention;
+    }
+
+    public get mention(): IMentionEntry
+    {
+        return this._mention;
+    }
+}
diff --git a/src/api/notification/NotificationBubbleType.ts b/src/api/notification/NotificationBubbleType.ts
index 858573b..ab3a48a 100644
--- a/src/api/notification/NotificationBubbleType.ts
+++ b/src/api/notification/NotificationBubbleType.ts
@@ -16,4 +16,5 @@ export class NotificationBubbleType
     public static BUYFURNI: string = 'buyfurni';
     public static VIP: string = 'vip';
     public static ROOMMESSAGESPOSTED: string = 'roommessagesposted';
+    public static MENTION: string = 'mention';
 }
diff --git a/src/api/notification/index.ts b/src/api/notification/index.ts
index 23476d3..a631834 100644
--- a/src/api/notification/index.ts
+++ b/src/api/notification/index.ts
@@ -1,5 +1,6 @@
 export * from './NotificationAlertItem';
 export * from './NotificationAlertType';
+export * from './MentionNotificationBubbleItem';
 export * from './NotificationBubbleItem';
 export * from './NotificationBubbleType';
 export * from './NotificationConfirmItem';
diff --git a/src/components/MainView.tsx b/src/components/MainView.tsx
index 32eb535..caa04ab 100644
--- a/src/components/MainView.tsx
+++ b/src/components/MainView.tsx
@@ -48,7 +48,7 @@ import { UserAccountSettingsView } from './user-settings/UserAccountSettingsView
 import { UserSettingsView } from './user-settings/UserSettingsView';
 import { WiredView } from './wired/WiredView';
 import { WiredCreatorToolsView } from './wired-tools/WiredCreatorToolsView';
-import { MentionsView, MentionToastsView } from './mentions';
+import { MentionsView } from './mentions';
 
 export const MainView: FC<{}> = props =>
 {
@@ -242,8 +242,6 @@ export const MainView: FC<{}> = props =>
             { GetConfigurationValue<boolean>('radio_ui.enabled', false) && <RadioView /> }
             { (GetConfigurationValue<boolean>('mentions_ui.enabled', true) && mentionsVisible) &&
                 <MentionsView onClose={ () => setMentionsVisible(false) } /> }
-            { GetConfigurationValue<boolean>('mentions_ui.enabled', true) &&
-                <MentionToastsView /> }
             <ExternalPluginLoader />
         </>
     );
diff --git a/src/components/chat-history/ChatHistoryView.tsx b/src/components/chat-history/ChatHistoryView.tsx
index 9fb6dd8..0a1283e 100644
--- a/src/components/chat-history/ChatHistoryView.tsx
+++ b/src/components/chat-history/ChatHistoryView.tsx
@@ -2,10 +2,10 @@ import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
 import { ChatEntryType, LocalizeText } from '../../api';
 import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../common';
-import { useChatHistory, useMentionsSnapshot, useOnClickChat } from '../../hooks';
+import { useChatHistory, useMentionActions, useMentionsSnapshot, useOnClickChat } from '../../hooks';
 import { useUserDataSnapshot } from '../../hooks/session/useSessionSnapshots';
 import { NitroInput } from '../../layout';
-import { MentionRowView, useMentionActions } from '../mentions';
+import { MentionRowView } from '../mentions';
 
 const TAB_CHAT = 'chat';
 const TAB_MENTIONS = 'mentions';
diff --git a/src/components/mentions/MentionMessageView.tsx b/src/components/mentions/MentionMessageView.tsx
index 4f8d327..744b44e 100644
--- a/src/components/mentions/MentionMessageView.tsx
+++ b/src/components/mentions/MentionMessageView.tsx
@@ -1,5 +1,5 @@
 import { FC, Fragment, ReactNode } from 'react';
-import { tokenIsMention } from '../room/widgets/chat/highlightMentions';
+import { classifyMentionToken } from '../../api/mentions/mentionTokens';
 
 interface MentionMessageViewProps
 {
@@ -9,10 +9,11 @@ interface MentionMessageViewProps
 }
 
 /**
- * Renders a mention's message text as React nodes, wrapping the token(s) that
- * mention the local user or a room-broadcast alias in a `.mention-highlight`
- * span. Pure text segmentation (no innerHTML) → no XSS risk from other users'
- * chat content. Original spacing is preserved verbatim.
+ * Renders a mention's message text as React nodes, wrapping every @user token
+ * in a `.mention-tag` span (with the `.mention-tag--self` modifier when the
+ * token targets the local user or a broadcast alias). Pure text segmentation
+ * (no innerHTML) → no XSS risk from other users' chat content. Original spacing
+ * is preserved verbatim.
  */
 export const MentionMessageView: FC<MentionMessageViewProps> = props =>
 {
@@ -24,12 +25,11 @@ export const MentionMessageView: FC<MentionMessageViewProps> = props =>
     {
         if(segment.length === 0) return null;
 
-        if(/^\s+$/.test(segment) || !tokenIsMention(segment, ownUsername))
-        {
-            return <Fragment key={ index }>{ segment }</Fragment>;
-        }
+        const kind = (/^\s+$/.test(segment)) ? '' : classifyMentionToken(segment, ownUsername);
 
-        return <span key={ index } className="mention-highlight">{ segment }</span>;
+        if(!kind) return <Fragment key={ index }>{ segment }</Fragment>;
+
+        return <span key={ index } className={ (kind === 'self') ? 'mention-tag mention-tag--self' : 'mention-tag' }>{ segment }</span>;
     });
 
     return <span className={ className }>{ nodes }</span>;
diff --git a/src/components/mentions/MentionRowView.tsx b/src/components/mentions/MentionRowView.tsx
index f943d1f..a3cf99b 100644
--- a/src/components/mentions/MentionRowView.tsx
+++ b/src/components/mentions/MentionRowView.tsx
@@ -1,8 +1,8 @@
 import { FC, MouseEvent } from 'react';
-import { IMentionEntry, LocalizeText, MentionType } from '../../api';
-import { Flex, Text } from '../../common';
+import { FaArrowRight, FaTimes } from 'react-icons/fa';
+import { formatMentionTime, IMentionEntry, LocalizeText, MentionType } from '../../api';
+import { LayoutAvatarImageView } from '../../common';
 import { MentionMessageView } from './MentionMessageView';
-import { formatMentionTime } from './mentionsFormat';
 
 interface MentionRowViewProps
 {
@@ -28,39 +28,31 @@ export const MentionRowView: FC<MentionRowViewProps> = props =>
     };
 
     return (
-        <Flex pointer alignItems="center" className="group relative px-1 py-[3px] rounded hover:bg-black/5" gap={ 2 } onClick={ () => onOpen(mention) }>
-            <span
-                className={ `inline-block w-[8px] h-[8px] rounded-full shrink-0 ${ mention.read ? 'bg-transparent' : 'bg-[#1e7295]' }` }
-                title={ mention.read ? '' : LocalizeText('mentions.filter.unread') } />
-            <span
-                title={ typeTitle }
-                className={ `flex items-center justify-center shrink-0 w-[18px] h-[18px] rounded text-[10px] font-bold leading-none text-white ${ isRoom ? 'bg-[#d08a1e]' : 'bg-[#1e7295]' }` }>
-                { isRoom ? '@∗' : '@' }
-            </span>
-            <Flex grow column className="min-w-0" gap={ 0 }>
-                <Flex alignItems="center" gap={ 1 } className="min-w-0">
-                    <Text bold={ !mention.read } truncate variant="primary">{ mention.senderUsername }</Text>
-                    { (mention.roomName && mention.roomName.length > 0) &&
-                        <Text small truncate variant="gray">· { mention.roomName }</Text> }
-                </Flex>
-                <MentionMessageView className="block truncate text-black text-sm" ownUsername={ ownUsername } text={ mention.message } />
-            </Flex>
-            <Flex alignItems="center" gap={ 1 } className="shrink-0">
+        <div className={ `mention-row ${ mention.read ? '' : 'is-unread' }` } onClick={ () => onOpen(mention) }>
+            { !mention.read &&
+                <span className="mention-row-unread-dot" aria-hidden /> }
+            <div className="mention-row-avatar" title={ typeTitle }>
+                <LayoutAvatarImageView headOnly direction={ 2 } figure={ mention.senderFigure } />
+                <span className={ `mention-row-type ${ isRoom ? 'is-room' : 'is-direct' }` }>{ isRoom ? '∗' : '@' }</span>
+            </div>
+            <div className="mention-row-body">
+                <div className="mention-row-head">
+                    <span className="mention-row-name">{ mention.senderUsername }</span>
+                    { (mention.roomName && (mention.roomName.length > 0)) &&
+                        <span className="mention-row-room">· { mention.roomName }</span> }
+                </div>
+                <MentionMessageView className="mention-row-msg" ownUsername={ ownUsername } text={ mention.message } />
+            </div>
+            <div className="mention-row-meta">
                 { (time.length > 0) &&
-                    <Text small variant="gray" className="tabular-nums group-hover:hidden">{ time }</Text> }
-                <Flex alignItems="center" gap={ 1 } className="hidden group-hover:flex">
+                    <span className="mention-row-time">{ time }</span> }
+                <div className="mention-row-actions">
                     { onGoto &&
-                        <span
-                            title={ LocalizeText('mentions.action.goto') }
-                            className="flex items-center justify-center w-[18px] h-[18px] rounded bg-black/10 hover:bg-black/20 text-[12px] leading-none"
-                            onClick={ event => stop(event, () => onGoto(mention)) }>→</span> }
+                        <button type="button" className="mention-row-action" title={ LocalizeText('mentions.action.goto') } onClick={ event => stop(event, () => onGoto(mention)) }><FaArrowRight /></button> }
                     { onRemove &&
-                        <span
-                            title={ LocalizeText('mentions.action.remove') }
-                            className="flex items-center justify-center w-[18px] h-[18px] rounded bg-black/10 hover:bg-red-500 hover:text-white text-[11px] leading-none"
-                            onClick={ event => stop(event, () => onRemove(mention)) }>✕</span> }
-                </Flex>
-            </Flex>
-        </Flex>
+                        <button type="button" className="mention-row-action is-remove" title={ LocalizeText('mentions.action.remove') } onClick={ event => stop(event, () => onRemove(mention)) }><FaTimes /></button> }
+                </div>
+            </div>
+        </div>
     );
 };
diff --git a/src/components/mentions/MentionToastsView.tsx b/src/components/mentions/MentionToastsView.tsx
deleted file mode 100644
index 6943986..0000000
--- a/src/components/mentions/MentionToastsView.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { CreateLinkEvent, MarkMentionsReadComposer } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useEffect } from 'react';
-import { FaTimes } from 'react-icons/fa';
-import { LocalizeText, SendMessageComposer } from '../../api';
-import { LayoutAvatarImageView } from '../../common';
-import { useExternalSnapshot } from '../../hooks/events/useExternalSnapshot';
-import { markRead } from '../../hooks/mentions/mentionsStore';
-import { dismissMentionToast, getMentionToasts, MentionToast, subscribeMentionToasts } from '../../hooks/mentions/mentionToastsStore';
-
-// Quanto resta visibile un toast prima di nascondersi da solo (resta non-letto).
-const AUTO_DISMISS_MS = 8000;
-
-const MentionToastItemView: FC<{ toast: MentionToast }> = ({ toast }) =>
-{
-    useEffect(() =>
-    {
-        const timer = window.setTimeout(() => dismissMentionToast(toast.mentionId), AUTO_DISMISS_MS);
-        return () => window.clearTimeout(timer);
-    }, [ toast.mentionId ]);
-
-    // Dismiss esplicito: segna letta (badge toolbar si aggiorna) + persiste sul server + chiude.
-    const onDismiss = (event: MouseEvent) =>
-    {
-        event.stopPropagation();
-        markRead(toast.mentionId);
-        SendMessageComposer(new MarkMentionsReadComposer(1, toast.mentionId));
-        dismissMentionToast(toast.mentionId);
-    };
-
-    const onOpen = () =>
-    {
-        CreateLinkEvent('mentions/toggle');
-        dismissMentionToast(toast.mentionId);
-    };
-
-    return (
-        <div className="mention-toast" onClick={ onOpen }>
-            <div className="mention-toast-avatar">
-                <LayoutAvatarImageView headOnly direction={ 2 } figure={ toast.senderFigure } />
-            </div>
-            <div className="mention-toast-body">
-                <div className="mention-toast-title">{ toast.senderUsername }</div>
-                <div className="mention-toast-message">{ toast.message }</div>
-            </div>
-            <button className="mention-toast-dismiss" title={ LocalizeText('generic.cancel') } type="button" onClick={ onDismiss }>
-                <FaTimes />
-            </button>
-        </div>
-    );
-};
-
-export const MentionToastsView: FC = () =>
-{
-    const toasts = useExternalSnapshot(subscribeMentionToasts, getMentionToasts);
-
-    if(!toasts || !toasts.length) return null;
-
-    return (
-        <div className="mention-toasts">
-            { toasts.map(toast => <MentionToastItemView key={ toast.mentionId } toast={ toast } />) }
-        </div>
-    );
-};
diff --git a/src/components/mentions/MentionsView.tsx b/src/components/mentions/MentionsView.tsx
index 3893005..b09da45 100644
--- a/src/components/mentions/MentionsView.tsx
+++ b/src/components/mentions/MentionsView.tsx
@@ -1,13 +1,12 @@
-import { MarkMentionsReadComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo, useState } from 'react';
-import { IMentionEntry, LocalizeText, MentionType, SendMessageComposer } from '../../api';
-import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
-import { useMentionsSnapshot } from '../../hooks';
+import { MarkMentionsReadComposer, RequestMentionsComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FaSearch, FaSync } from 'react-icons/fa';
+import { getMentionDateGroup, IMentionEntry, LocalizeText, MentionDateGroup, MentionType, SendMessageComposer } from '../../api';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { useMentionActions, useMentionsSnapshot } from '../../hooks';
 import { markAllRead } from '../../hooks/mentions/mentionsStore';
 import { useUserDataSnapshot } from '../../hooks/session/useSessionSnapshots';
 import { MentionRowView } from './MentionRowView';
-import { getMentionDateGroup, MentionDateGroup } from './mentionsFormat';
-import { useMentionActions } from './useMentionActions';
 
 interface MentionsViewProps
 {
@@ -41,6 +40,17 @@ const matchesFilter = (mention: IMentionEntry, filter: MentionFilter): boolean =
     }
 };
 
+const matchesQuery = (mention: IMentionEntry, query: string): boolean =>
+{
+    if(!query) return true;
+
+    const q = query.toLowerCase();
+
+    return ((mention.senderUsername || '').toLowerCase().includes(q)
+        || (mention.roomName || '').toLowerCase().includes(q)
+        || (mention.message || '').toLowerCase().includes(q));
+};
+
 export const MentionsView: FC<MentionsViewProps> = props =>
 {
     const { onClose } = props;
@@ -48,6 +58,15 @@ export const MentionsView: FC<MentionsViewProps> = props =>
     const { userName: ownUsername = '' } = useUserDataSnapshot();
     const { open, goto, remove } = useMentionActions();
     const [ filter, setFilter ] = useState<MentionFilter>('all');
+    const [ query, setQuery ] = useState('');
+
+    // Re-request from the server: once on open, and on the manual refresh button.
+    const refresh = useCallback(() => SendMessageComposer(new RequestMentionsComposer()), []);
+
+    useEffect(() =>
+    {
+        refresh();
+    }, [ refresh ]);
 
     const onMarkAll = useCallback(() =>
     {
@@ -62,48 +81,57 @@ export const MentionsView: FC<MentionsViewProps> = props =>
         for(const mention of mentions)
         {
             if(!matchesFilter(mention, filter)) continue;
+            if(!matchesQuery(mention, query)) continue;
             buckets[getMentionDateGroup(mention.timestamp)].push(mention);
         }
 
         return GROUP_ORDER
             .map(key => ({ key, items: buckets[key] }))
             .filter(group => group.items.length > 0);
-    }, [ mentions, filter ]);
+    }, [ mentions, filter, query ]);
 
     const hasAny = groups.length > 0;
+    const title = `${ LocalizeText('mentions.window.title') }${ (unreadCount > 0) ? ` (${ unreadCount })` : '' }`;
 
     return (
-        <NitroCardView className="w-[360px] h-[440px] has-classic-scrollbar" theme="primary-slim" uniqueKey="mentions">
-            <NitroCardHeaderView headerText={ LocalizeText('mentions.window.title') } onCloseClick={ onClose } />
+        <NitroCardView className="mentions-window w-[360px] has-classic-scrollbar" theme="primary-slim" uniqueKey="mentions">
+            <NitroCardHeaderView headerText={ title } onCloseClick={ onClose } />
             <NitroCardContentView gap={ 1 }>
-                <Flex alignItems="center" className="flex-wrap" gap={ 1 }>
-                    { FILTERS.map(({ key, label }) =>
-                    {
-                        const active = (filter === key);
-                        const showCount = ((key === 'unread') && (unreadCount > 0));
+                <div className="mentions-search">
+                    <FaSearch className="mentions-search-icon" />
+                    <input
+                        type="text"
+                        value={ query }
+                        placeholder={ LocalizeText('generic.search') }
+                        onChange={ event => setQuery(event.target.value) } />
+                </div>
+                <div className="mentions-toolbar">
+                    <div className="mentions-filters">
+                        { FILTERS.map(({ key, label }) =>
+                        {
+                            const active = (filter === key);
+                            const showCount = ((key === 'unread') && (unreadCount > 0));
 
-                        return (
-                            <button
-                                key={ key }
-                                type="button"
-                                onClick={ () => setFilter(key) }
-                                className={ `px-2 py-[2px] rounded-full text-xs border transition-colors ${ active ? 'bg-[#1e7295] text-white border-[#1e7295]' : 'bg-black/5 text-black/70 border-transparent hover:bg-black/10' }` }>
-                                { LocalizeText(label) }{ showCount ? ` (${ unreadCount })` : '' }
-                            </button>
-                        );
-                    }) }
-                </Flex>
-                <Flex grow column className="min-h-0 overflow-y-auto" gap={ 0 }>
+                            return (
+                                <button key={ key } type="button" className={ `mentions-filter ${ active ? 'is-active' : '' }` } onClick={ () => setFilter(key) }>
+                                    { LocalizeText(label) }{ showCount ? ` ${ unreadCount }` : '' }
+                                </button>
+                            );
+                        }) }
+                    </div>
+                    <button type="button" className="mentions-refresh" title="Aggiorna" onClick={ refresh }>
+                        <FaSync />
+                    </button>
+                </div>
+                <div className="mentions-list">
                     { !hasAny &&
-                        <Flex grow column center gap={ 2 } className="py-6 text-center">
-                            <span className="flex items-center justify-center w-[44px] h-[44px] rounded-full bg-black/5 text-[#1e7295] text-[22px] font-bold">@</span>
-                            <Text center variant="gray">{ LocalizeText('mentions.window.empty') }</Text>
-                        </Flex> }
+                        <div className="mentions-empty">
+                            <span className="mentions-empty-glyph">@</span>
+                            <span className="mentions-empty-text">{ LocalizeText('mentions.window.empty') }</span>
+                        </div> }
                     { hasAny && groups.map(group => (
-                        <Flex key={ group.key } column gap={ 0 }>
-                            <Text small bold variant="gray" className="px-1 pt-2 pb-[2px] uppercase tracking-wide">
-                                { LocalizeText(GROUP_LABEL[group.key]) }
-                            </Text>
+                        <div key={ group.key } className="mentions-group">
+                            <div className="mentions-group-label">{ LocalizeText(GROUP_LABEL[group.key]) }</div>
                             { group.items.map(mention => (
                                 <MentionRowView
                                     key={ mention.mentionId }
@@ -113,9 +141,9 @@ export const MentionsView: FC<MentionsViewProps> = props =>
                                     onRemove={ remove }
                                     ownUsername={ ownUsername } />
                             )) }
-                        </Flex>
+                        </div>
                     )) }
-                </Flex>
+                </div>
                 { (unreadCount > 0) &&
                     <Button variant="primary" onClick={ onMarkAll }>{ LocalizeText('mentions.window.markall') }</Button> }
             </NitroCardContentView>
diff --git a/src/components/mentions/index.ts b/src/components/mentions/index.ts
index 8c125c1..ccdde36 100644
--- a/src/components/mentions/index.ts
+++ b/src/components/mentions/index.ts
@@ -1,6 +1,3 @@
 export * from './MentionMessageView';
 export * from './MentionRowView';
 export * from './MentionsView';
-export * from './MentionToastsView';
-export * from './mentionsFormat';
-export * from './useMentionActions';
diff --git a/src/components/notification-center/views/bubble-layouts/GetBubbleLayout.tsx b/src/components/notification-center/views/bubble-layouts/GetBubbleLayout.tsx
index f86f0f6..065629a 100644
--- a/src/components/notification-center/views/bubble-layouts/GetBubbleLayout.tsx
+++ b/src/components/notification-center/views/bubble-layouts/GetBubbleLayout.tsx
@@ -1,7 +1,8 @@
-import { NotificationBubbleItem, NotificationBubbleType } from '../../../../api';
+import { MentionNotificationBubbleItem, NotificationBubbleItem, NotificationBubbleType } from '../../../../api';
 import { NotificationBadgeReceivedBubbleView } from './NotificationBadgeReceivedBubbleView';
 import { NotificationClubGiftBubbleView } from './NotificationClubGiftBubbleView';
 import { NotificationDefaultBubbleView } from './NotificationDefaultBubbleView';
+import { NotificationMentionBubbleView } from './NotificationMentionBubbleView';
 
 export const GetBubbleLayout = (item: NotificationBubbleItem, onClose: () => void) =>
 {
@@ -15,6 +16,8 @@ export const GetBubbleLayout = (item: NotificationBubbleItem, onClose: () => voi
             return <NotificationBadgeReceivedBubbleView key={ item.id } { ...props } />;
         case NotificationBubbleType.CLUBGIFT:
             return <NotificationClubGiftBubbleView key={ item.id } { ...props } />;
+        case NotificationBubbleType.MENTION:
+            return <NotificationMentionBubbleView key={ item.id } item={ item as MentionNotificationBubbleItem } onClose={ onClose } />;
         default:
             return <NotificationDefaultBubbleView key={ item.id } { ...props } />;
     }
diff --git a/src/components/notification-center/views/bubble-layouts/NotificationMentionBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationMentionBubbleView.tsx
new file mode 100644
index 0000000..fb8006c
--- /dev/null
+++ b/src/components/notification-center/views/bubble-layouts/NotificationMentionBubbleView.tsx
@@ -0,0 +1,89 @@
+import { CreateLinkEvent, MarkMentionsReadComposer } from '@nitrots/nitro-renderer';
+import { FC, MouseEvent } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import { formatMentionTime, LocalizeText, MentionNotificationBubbleItem, MentionType, SendMessageComposer } from '../../../../api';
+import { Flex, LayoutAvatarImageView, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps, Text } from '../../../../common';
+import { markRead } from '../../../../hooks/mentions/mentionsStore';
+import { useUserDataSnapshot } from '../../../../hooks/session/useSessionSnapshots';
+import { MentionMessageView } from '../../../mentions/MentionMessageView';
+
+export interface NotificationMentionBubbleViewProps extends LayoutNotificationBubbleViewProps
+{
+    item: MentionNotificationBubbleItem;
+}
+
+export const NotificationMentionBubbleView: FC<NotificationMentionBubbleViewProps> = props =>
+{
+    const { item = null, onClose = null, ...rest } = props;
+    const { userName: ownUsername = '' } = useUserDataSnapshot();
+
+    const mention = item.mention;
+    const isRoom = (mention.mentionType === MentionType.ROOM);
+    const time = formatMentionTime(mention.timestamp);
+
+    const markReadOnServer = () =>
+    {
+        markRead(mention.mentionId);
+        SendMessageComposer(new MarkMentionsReadComposer(1, mention.mentionId));
+    };
+
+    // Whole-bubble click opens the mentions panel (and dismisses the bubble).
+    const open = () =>
+    {
+        CreateLinkEvent('mentions/toggle');
+        onClose();
+    };
+
+    const goto = () =>
+    {
+        markReadOnServer();
+        if(mention.roomId > 0) CreateLinkEvent(`navigator/goto/${ mention.roomId }`);
+        onClose();
+    };
+
+    const act = (event: MouseEvent, fn: () => void) =>
+    {
+        event.stopPropagation();
+        fn();
+    };
+
+    return (
+        <LayoutNotificationBubbleView
+            alignItems="start"
+            gap={ 2 }
+            classNames={ [ 'w-[330px]', 'max-w-[92vw]', 'cursor-pointer' ] }
+            onClick={ open }
+            onClose={ onClose }
+            { ...rest }>
+            <div className="mention-toast-avatar">
+                <LayoutAvatarImageView headOnly direction={ 2 } figure={ mention.senderFigure } />
+            </div>
+            <Flex column gap={ 0 } className="min-w-0 flex-1">
+                <Flex alignItems="center" gap={ 1 } className="min-w-0">
+                    <Text bold truncate variant="white">{ mention.senderUsername }</Text>
+                    <span className={ `mention-toast-chip ${ isRoom ? 'is-room' : 'is-direct' }` }>
+                        { LocalizeText(isRoom ? 'mentions.type.room' : 'mentions.type.direct') }
+                    </span>
+                    <span className="mention-toast-spacer" />
+                    { (time.length > 0) &&
+                        <span className="mention-toast-time">{ time }</span> }
+                    <button type="button" className="mention-toast-dismiss" title={ LocalizeText('generic.cancel') } onClick={ event => act(event, onClose) }>
+                        <FaTimes />
+                    </button>
+                </Flex>
+                { (mention.roomName && (mention.roomName.length > 0)) &&
+                    <span className="mention-toast-room">· { mention.roomName }</span> }
+                <MentionMessageView className="mention-toast-message" ownUsername={ ownUsername } text={ mention.message } />
+                <Flex gap={ 1 } className="mention-toast-actions">
+                    <button type="button" className="mention-toast-btn" onClick={ event => act(event, open) }>
+                        { LocalizeText('mentions.window.title') }
+                    </button>
+                    { (mention.roomId > 0) &&
+                        <button type="button" className="mention-toast-btn" onClick={ event => act(event, goto) }>
+                            { LocalizeText('mentions.action.goto') }
+                        </button> }
+                </Flex>
+            </Flex>
+        </LayoutNotificationBubbleView>
+    );
+};
diff --git a/src/components/room/widgets/chat-input/ChatInputMentionSelectorView.tsx b/src/components/room/widgets/chat-input/ChatInputMentionSelectorView.tsx
index 1404185..8a67c8a 100644
--- a/src/components/room/widgets/chat-input/ChatInputMentionSelectorView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputMentionSelectorView.tsx
@@ -1,17 +1,6 @@
 import { FC, useEffect, useRef } from 'react';
 import { LayoutAvatarImageView } from '../../../../common';
-
-export type MentionSuggestionKind = 'user' | 'alias';
-
-export interface MentionSuggestion
-{
-    key: string;
-    kind: MentionSuggestionKind;
-    name: string;
-    insertToken: string;
-    figure?: string;
-    description?: string;
-}
+import { MentionSuggestion } from '../../../../hooks/rooms/widgets/useChatMentions.helpers';
 
 interface ChatInputMentionSelectorViewProps
 {
diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx
index 551795a..34178e4 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputView.tsx
@@ -3,50 +3,12 @@ import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ChatMessageTypeEnum, GetClubMemberLevel, GetConfigurationValue, LocalizeText, RoomWidgetUpdateChatInputContentEvent } from '../../../../api';
 import { Text } from '../../../../common';
-import { useCatalogClassicStyle, useChatCommandSelector, useChatInputWidget, useRoom, useSessionInfo, useUiEvent } from '../../../../hooks';
-import { useRoomUserListSnapshot } from '../../../../hooks/session/useSessionSnapshots';
+import { useCatalogClassicStyle, useChatCommandSelector, useChatInputWidget, useChatMentions, useRoom, useSessionInfo, useUiEvent } from '../../../../hooks';
 import { ChatInputCommandSelectorView } from './ChatInputCommandSelectorView';
 import { ChatInputEmojiSelectorView } from './ChatInputEmojiSelectorView';
-import { ChatInputMentionSelectorView, MentionSuggestion } from './ChatInputMentionSelectorView';
+import { ChatInputMentionSelectorView } from './ChatInputMentionSelectorView';
 import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
 
-const USER_TYPE_REAL_USER = 1;
-const MAX_MENTION_SUGGESTIONS = 8;
-
-type MentionAliasScope = 'everyone' | 'friends' | 'room';
-
-const MENTION_ALIAS_CONFIG_KEY: Record<MentionAliasScope, string> = {
-    everyone: 'mentions_ui.aliases.everyone',
-    friends:  'mentions_ui.aliases.friends',
-    room:     'mentions_ui.aliases.room'
-};
-
-const MENTION_ALIAS_DEFAULTS: Record<MentionAliasScope, string[]> = {
-    everyone: [ 'all', 'everyone', 'tutti' ],
-    friends:  [ 'friends', 'amici' ],
-    room:     [ 'room', 'stanza' ]
-};
-
-const MENTION_ALIAS_DESCRIPTION_KEY: Record<MentionAliasScope, string> = {
-    everyone: 'mentions.alias.description.everyone',
-    friends:  'mentions.alias.description.friends',
-    room:     'mentions.alias.description.room'
-};
-
-const sanitizeAliasList = (raw: unknown, fallback: string[]): string[] =>
-{
-    if(!Array.isArray(raw)) return fallback;
-    const out: string[] = [];
-    for(const entry of raw)
-    {
-        if(typeof entry !== 'string') continue;
-        const trimmed = entry.trim();
-        if(!trimmed) continue;
-        out.push(trimmed);
-    }
-    return out;
-};
-
 export const ChatInputView: FC<{}> = props =>
 {
     const [ chatValue, setChatValue ] = useState<string>('');
@@ -56,129 +18,13 @@ export const ChatInputView: FC<{}> = props =>
     const inputRef = useRef<HTMLInputElement>(null);
     const { isVisible: commandSelectorVisible, filteredCommands, selectedIndex, setSelectedIndex, moveUp, moveDown, selectCurrent, close: closeCommandSelector } = useChatCommandSelector(chatValue);
 
-    const roomUserList = useRoomUserListSnapshot();
-    const [ mentionSelectedIndex, setMentionSelectedIndex ] = useState<number>(0);
     // The "New style" user-setting (memenu.settings.other.catalog.classic.style)
     // drives BOTH the catalog layout and the mention-picker chrome:
     //   false (default) = Habbo old-school NitroCard cardstock look
     //   true            = flat minimalist gray look
     const [ newStyle ] = useCatalogClassicStyle();
 
-    const mentionContext = useMemo(() =>
-    {
-        if(!chatValue) return null;
-        if(commandSelectorVisible) return null;
-
-        const caret = inputRef.current?.selectionStart ?? chatValue.length;
-        const upToCaret = chatValue.slice(0, caret);
-        const at = upToCaret.lastIndexOf('@');
-        if(at < 0) return null;
-
-        if(at > 0 && !/\s/.test(upToCaret.charAt(at - 1))) return null;
-
-        const query = upToCaret.slice(at + 1);
-        if(/\s/.test(query)) return null;
-
-        return { atIndex: at, replaceFrom: at, replaceTo: caret, query };
-    }, [ chatValue, commandSelectorVisible ]);
-
-    const mentionAliases = useMemo<ReadonlyArray<{ key: string; scope: MentionAliasScope; description: string }>>(() =>
-    {
-        const out: { key: string; scope: MentionAliasScope; description: string }[] = [];
-        const seen = new Set<string>();
-
-        const scopes: MentionAliasScope[] = [ 'everyone', 'friends', 'room' ];
-        for(const scope of scopes)
-        {
-            const list = sanitizeAliasList(
-                GetConfigurationValue<unknown>(MENTION_ALIAS_CONFIG_KEY[scope], MENTION_ALIAS_DEFAULTS[scope]),
-                MENTION_ALIAS_DEFAULTS[scope]
-            );
-
-            for(const key of list)
-            {
-                const lower = key.toLowerCase();
-
-                if(seen.has(lower)) continue;
-                seen.add(lower);
-
-                out.push({ key, scope, description: LocalizeText(MENTION_ALIAS_DESCRIPTION_KEY[scope]) });
-            }
-        }
-
-        return out;
-    }, []);
-
-    const mentionSuggestions = useMemo<MentionSuggestion[]>(() =>
-    {
-        if(!mentionContext) return [];
-
-        const query = mentionContext.query.toLowerCase();
-        const out: MentionSuggestion[] = [];
-
-        for(const user of roomUserList)
-        {
-            if(!user || user.type !== USER_TYPE_REAL_USER) continue;
-            if(!user.name) continue;
-            if(query.length > 0 && !user.name.toLowerCase().startsWith(query)) continue;
-
-            out.push({
-                key: `user:${ user.webID }`,
-                kind: 'user',
-                name: user.name,
-                insertToken: user.name,
-                figure: user.figure || ''
-            });
-
-            if(out.length >= MAX_MENTION_SUGGESTIONS) break;
-        }
-
-        for(const alias of mentionAliases)
-        {
-            if(query.length > 0 && !alias.key.toLowerCase().startsWith(query)) continue;
-
-            out.push({
-                key: `alias:${ alias.key }`,
-                kind: 'alias',
-                name: alias.key,
-                insertToken: alias.key,
-                description: alias.description
-            });
-
-            if(out.length >= MAX_MENTION_SUGGESTIONS) break;
-        }
-
-        return out;
-    }, [ mentionContext, roomUserList, mentionAliases ]);
-
-    const mentionSelectorVisible = mentionSuggestions.length > 0;
-
-    useEffect(() =>
-    {
-        if(mentionSelectedIndex >= mentionSuggestions.length) setMentionSelectedIndex(0);
-    }, [ mentionSuggestions.length, mentionSelectedIndex ]);
-
-    const applyMentionSuggestion = useCallback((suggestion: MentionSuggestion) =>
-    {
-        if(!suggestion || !mentionContext) return;
-
-        const before = chatValue.slice(0, mentionContext.replaceFrom);
-        const after = chatValue.slice(mentionContext.replaceTo);
-        const inserted = `@${ suggestion.insertToken } `;
-        const next = `${ before }${ inserted }${ after }`;
-
-        setChatValue(next);
-
-        requestAnimationFrame(() =>
-        {
-            if(!inputRef.current) return;
-            const caret = before.length + inserted.length;
-            inputRef.current.focus();
-            inputRef.current.setSelectionRange(caret, caret);
-        });
-
-        setMentionSelectedIndex(0);
-    }, [ chatValue, mentionContext ]);
+    const mention = useChatMentions(chatValue, setChatValue, inputRef, commandSelectorVisible);
 
     const chatModeIdWhisper = useMemo(() => LocalizeText('widgets.chatinput.mode.whisper'), []);
     const chatModeIdShout = useMemo(() => LocalizeText('widgets.chatinput.mode.shout'), []);
@@ -331,41 +177,30 @@ export const ChatInputView: FC<{}> = props =>
             }
         }
 
-        if(mentionSelectorVisible)
+        if(mention.visible)
         {
             switch(event.key)
             {
                 case 'ArrowUp':
                     event.preventDefault();
-                    setMentionSelectedIndex(prev => (prev <= 0) ? (mentionSuggestions.length - 1) : (prev - 1));
+                    mention.moveUp();
                     return;
                 case 'ArrowDown':
                     event.preventDefault();
-                    setMentionSelectedIndex(prev => (prev >= mentionSuggestions.length - 1) ? 0 : (prev + 1));
+                    mention.moveDown();
                     return;
                 case 'Tab':
                 case 'NumpadEnter':
-                case 'Enter': {
-                    const picked = mentionSuggestions[mentionSelectedIndex] ?? mentionSuggestions[0];
-
-                    if(picked)
+                case 'Enter':
+                    if(mention.applyCurrent())
                     {
                         event.preventDefault();
-                        applyMentionSuggestion(picked);
                         return;
                     }
                     break;
-                }
                 case 'Escape':
                     event.preventDefault();
-                    setMentionSelectedIndex(0);
-					
-                    if(mentionContext)
-                    {
-                        const before = chatValue.slice(0, mentionContext.replaceFrom);
-                        const after = chatValue.slice(mentionContext.replaceTo);
-                        setChatValue(before + after);
-                    }
+                    mention.cancel();
                     return;
             }
         }
@@ -395,7 +230,7 @@ export const ChatInputView: FC<{}> = props =>
                 return;
         }
 
-    }, [ floodBlocked, inputRef, chatModeIdWhisper, anotherInputHasFocus, setInputFocus, checkSpecialKeywordForInput, sendChatValue, commandSelectorVisible, moveUp, moveDown, selectCurrent, closeCommandSelector, mentionSelectorVisible, mentionSuggestions, mentionSelectedIndex, applyMentionSuggestion, mentionContext, chatValue ]);
+    }, [ floodBlocked, inputRef, chatModeIdWhisper, anotherInputHasFocus, setInputFocus, checkSpecialKeywordForInput, sendChatValue, commandSelectorVisible, moveUp, moveDown, selectCurrent, closeCommandSelector, mention, chatValue ]);
 
     useUiEvent<RoomWidgetUpdateChatInputContentEvent>(RoomWidgetUpdateChatInputContentEvent.CHAT_INPUT_CONTENT, event =>
     {
@@ -492,12 +327,12 @@ export const ChatInputView: FC<{}> = props =>
                         onHover={ setSelectedIndex }
                         newStyle={ newStyle }
                     /> }
-                { mentionSelectorVisible && !commandSelectorVisible &&
+                { mention.visible && !commandSelectorVisible &&
                     <ChatInputMentionSelectorView
-                        suggestions={ mentionSuggestions }
-                        selectedIndex={ mentionSelectedIndex }
-                        onSelect={ applyMentionSuggestion }
-                        onHover={ setMentionSelectedIndex }
+                        suggestions={ mention.suggestions }
+                        selectedIndex={ mention.selectedIndex }
+                        onSelect={ mention.apply }
+                        onHover={ mention.setSelectedIndex }
                         newStyle={ newStyle }
                     /> }
                 <div className="flex-1 items-center input-sizer">
diff --git a/src/components/room/widgets/chat/highlightMentions.test.ts b/src/components/room/widgets/chat/highlightMentions.test.ts
index 8c21557..d618b13 100644
--- a/src/components/room/widgets/chat/highlightMentions.test.ts
+++ b/src/components/room/widgets/chat/highlightMentions.test.ts
@@ -1,35 +1,51 @@
 import { describe, expect, it } from 'vitest';
-import { highlightMentions, MENTION_ROOM_ALIASES } from './highlightMentions';
+import { MENTION_ROOM_ALIASES } from '../../../../api/mentions/mentionTokens';
+import { highlightMentions } from './highlightMentions';
 
-const OPEN = '<span class="mention-highlight">';
-const CLOSE = '</span>';
+// A generic @user tag, and a self/alias mention (strong).
+const TAG = (s: string) => `<span class="mention-tag">${ s }</span>`;
+const SELF = (s: string) => `<span class="mention-tag mention-tag--self">${ s }</span>`;
 
 describe('highlightMentions', () =>
 {
-    it('highlights the own-nick token', () =>
+    it('marks the own-nick token as a self mention', () =>
     {
         const out = highlightMentions('hello @Bob how are you', 'Bob');
 
-        expect(out).toBe(`hello ${ OPEN }@Bob${ CLOSE } how are you`);
+        expect(out).toBe(`hello ${ SELF('@Bob') } how are you`);
     });
 
-    it('highlights a room-broadcast alias token', () =>
+    it('marks a room-broadcast alias token as a self mention', () =>
     {
         const out = highlightMentions('@all party time', 'Bob');
 
-        expect(out).toBe(`${ OPEN }@all${ CLOSE } party time`);
+        expect(out).toBe(`${ SELF('@all') } party time`);
     });
 
-    it('highlights every configured room alias', () =>
+    it('marks every configured room alias as a self mention', () =>
     {
         for(const alias of MENTION_ROOM_ALIASES)
         {
             const out = highlightMentions(`hey @${ alias }!`, 'Bob');
 
-            expect(out).toBe(`hey ${ OPEN }@${ alias }!${ CLOSE }`);
+            expect(out).toBe(`hey ${ SELF(`@${ alias }!`) }`);
         }
     });
 
+    it('tags other users (not me, not an alias) as generic mentions', () =>
+    {
+        const out = highlightMentions('hi @Charlie and @Dave', 'Bob');
+
+        expect(out).toBe(`hi ${ TAG('@Charlie') } and ${ TAG('@Dave') }`);
+    });
+
+    it('tags a cross-room user even when own username is empty', () =>
+    {
+        const out = highlightMentions('hi @Charlie', '');
+
+        expect(out).toBe(`hi ${ TAG('@Charlie') }`);
+    });
+
     it('leaves non-mention text untouched', () =>
     {
         const text = 'just a normal sentence with no at signs';
@@ -37,42 +53,32 @@ describe('highlightMentions', () =>
         expect(highlightMentions(text, 'Bob')).toBe(text);
     });
 
-    it('returns the message unchanged when there is no mention of me or an alias', () =>
-    {
-        const text = 'hi @Charlie and @Dave';
-
-        // Neither @Charlie nor @Dave is the local user or a room alias.
-        expect(highlightMentions(text, 'Bob')).toBe(text);
-    });
-
-    it('matches a token with trailing punctuation (mirrors server stripping)', () =>
+    it('keeps trailing punctuation inside the span (mirrors server stripping)', () =>
     {
         const out = highlightMentions('watch out @Bob! seriously', 'Bob');
 
-        // The original token text (including the `!`) is kept inside the span.
-        expect(out).toBe(`watch out ${ OPEN }@Bob!${ CLOSE } seriously`);
+        expect(out).toBe(`watch out ${ SELF('@Bob!') } seriously`);
     });
 
     it('matches case-insensitively but preserves the original casing', () =>
     {
         const out = highlightMentions('yo @bOb whatup', 'BOB');
 
-        expect(out).toBe(`yo ${ OPEN }@bOb${ CLOSE } whatup`);
+        expect(out).toBe(`yo ${ SELF('@bOb') } whatup`);
     });
 
     it('preserves the original spacing verbatim', () =>
     {
         const out = highlightMentions('a   @Bob\tb', 'Bob');
 
-        expect(out).toBe(`a   ${ OPEN }@Bob${ CLOSE }\tb`);
+        expect(out).toBe(`a   ${ SELF('@Bob') }\tb`);
     });
 
-    it('does not highlight inside HTML tags produced by the formatter', () =>
+    it('does not tag inside HTML tags produced by the formatter', () =>
     {
-        // Formatter output: wired bold markup around a mention.
         const out = highlightMentions('<strong>hi @Bob</strong>', 'Bob');
 
-        expect(out).toBe(`<strong>hi ${ OPEN }@Bob${ CLOSE }</strong>`);
+        expect(out).toBe(`<strong>hi ${ SELF('@Bob') }</strong>`);
     });
 
     it('leaves font-colour spans and line breaks intact', () =>
@@ -80,14 +86,14 @@ describe('highlightMentions', () =>
         const html = '<span style="color:red">hi @Bob</span><br />bye';
         const out = highlightMentions(html, 'Bob');
 
-        expect(out).toBe(`<span style="color:red">hi ${ OPEN }@Bob${ CLOSE }</span><br />bye`);
+        expect(out).toBe(`<span style="color:red">hi ${ SELF('@Bob') }</span><br />bye`);
     });
 
-    it('highlights multiple distinct mentions in one message', () =>
+    it('handles a self mention and a generic tag in one message', () =>
     {
-        const out = highlightMentions('@Bob and @all listen', 'Bob');
+        const out = highlightMentions('@Bob and @Charlie listen', 'Bob');
 
-        expect(out).toBe(`${ OPEN }@Bob${ CLOSE } and ${ OPEN }@all${ CLOSE } listen`);
+        expect(out).toBe(`${ SELF('@Bob') } and ${ TAG('@Charlie') } listen`);
     });
 
     it('ignores a bare @ with no nick', () =>
@@ -103,18 +109,4 @@ describe('highlightMentions', () =>
 
         expect(highlightMentions(text, 'Bob')).toBe(text);
     });
-
-    it('returns input verbatim when own username is empty and no alias matches', () =>
-    {
-        const text = 'hi @Charlie';
-
-        expect(highlightMentions(text, '')).toBe(text);
-    });
-
-    it('still highlights aliases when own username is empty', () =>
-    {
-        const out = highlightMentions('@everyone hi', '');
-
-        expect(out).toBe(`${ OPEN }@everyone${ CLOSE } hi`);
-    });
 });
diff --git a/src/components/room/widgets/chat/highlightMentions.tsx b/src/components/room/widgets/chat/highlightMentions.tsx
index 6c8620e..c7058eb 100644
--- a/src/components/room/widgets/chat/highlightMentions.tsx
+++ b/src/components/room/widgets/chat/highlightMentions.tsx
@@ -1,44 +1,9 @@
-export const MENTION_ROOM_ALIASES: ReadonlyArray<string> = [
-    'all', 'everyone', 'tutti',
-    'friends', 'amici',
-    'room', 'stanza'
-];
+import { classifyMentionToken, MENTION_ROOM_ALIASES } from '../../../../api/mentions/mentionTokens';
 
-const NON_NICK_CHARS = /[^A-Za-z0-9_]/g;
+const TAG_CLASS = 'mention-tag';
+const SELF_CLASS = 'mention-tag mention-tag--self';
 
-const normalizeToken = (token: string): string =>
-{
-    if(!token || token.length < 2 || token.charAt(0) !== '@') return '';
-
-    return token.substring(1).replace(NON_NICK_CHARS, '').toLowerCase();
-};
-
-
-const isMentionToken = (token: string, ownUsernameLower: string, aliases: ReadonlySet<string>): boolean =>
-{
-    const nick = normalizeToken(token);
-
-    if(!nick) return false;
-
-    if(ownUsernameLower && nick === ownUsernameLower) return true;
-
-    return aliases.has(nick);
-};
-
-export const tokenIsMention = (
-    token: string,
-    ownUsername: string,
-    aliases: ReadonlyArray<string> = MENTION_ROOM_ALIASES
-): boolean =>
-{
-    const ownUsernameLower = (ownUsername || '').replace(NON_NICK_CHARS, '').toLowerCase();
-    return isMentionToken(token, ownUsernameLower, new Set(aliases.map(a => a.toLowerCase())));
-};
-
-const HIGHLIGHT_OPEN = '<span class="mention-highlight">';
-const HIGHLIGHT_CLOSE = '</span>';
-
-const highlightTextChunk = (chunk: string, ownUsernameLower: string, aliases: ReadonlySet<string>): string =>
+const highlightTextChunk = (chunk: string, ownUsername: string, aliases: ReadonlyArray<string>): string =>
 {
     if(chunk.indexOf('@') < 0) return chunk;
 
@@ -50,18 +15,26 @@ const highlightTextChunk = (chunk: string, ownUsernameLower: string, aliases: Re
     {
         if(segment.length === 0) continue;
 
-        if(/^\s+$/.test(segment) || !isMentionToken(segment, ownUsernameLower, aliases))
+        const kind = (/^\s+$/.test(segment)) ? '' : classifyMentionToken(segment, ownUsername, aliases);
+
+        if(!kind)
         {
             result += segment;
             continue;
         }
 
-        result += `${ HIGHLIGHT_OPEN }${ segment }${ HIGHLIGHT_CLOSE }`;
+        result += `<span class="${ (kind === 'self') ? SELF_CLASS : TAG_CLASS }">${ segment }</span>`;
     }
 
     return result;
 };
 
+/**
+ * Wrap every @mention token in chat HTML with a `.mention-tag` span. Tokens
+ * that target the viewer or a broadcast alias additionally get the
+ * `.mention-tag--self` modifier so "I was mentioned" stands out. Walks around
+ * formatter HTML (`<...>`) so tags inside markup are never touched.
+ */
 export const highlightMentions = (
     formattedHtml: string,
     ownUsername: string,
@@ -70,11 +43,6 @@ export const highlightMentions = (
 {
     if(!formattedHtml || formattedHtml.indexOf('@') < 0) return formattedHtml;
 
-    const ownUsernameLower = (ownUsername || '').replace(NON_NICK_CHARS, '').toLowerCase();
-    const aliasSet = new Set(aliases.map(a => a.toLowerCase()));
-
-    if(!ownUsernameLower && aliasSet.size === 0) return formattedHtml;
-
     let result = '';
     let cursor = 0;
 
@@ -84,13 +52,13 @@ export const highlightMentions = (
 
         if(tagStart < 0)
         {
-            result += highlightTextChunk(formattedHtml.slice(cursor), ownUsernameLower, aliasSet);
+            result += highlightTextChunk(formattedHtml.slice(cursor), ownUsername, aliases);
             break;
         }
 
         if(tagStart > cursor)
         {
-            result += highlightTextChunk(formattedHtml.slice(cursor, tagStart), ownUsernameLower, aliasSet);
+            result += highlightTextChunk(formattedHtml.slice(cursor, tagStart), ownUsername, aliases);
         }
 
         const tagEnd = formattedHtml.indexOf('>', tagStart);
diff --git a/src/css/chat/Chats.css b/src/css/chat/Chats.css
index 43f093f..893cf07 100644
--- a/src/css/chat/Chats.css
+++ b/src/css/chat/Chats.css
@@ -1811,3 +1811,23 @@
         }
     }
 }
+
+/* @-mention tags inside chat bubbles and the mentions panel.
+   `.mention-tag` styles ANY @user as a chip (colour inherits so it stays
+   readable on both light and dark bubble backgrounds); `.mention-tag--self`
+   marks a mention of the viewer / a broadcast alias with a gold highlight so
+   "you were mentioned" stands out. */
+.mention-tag {
+    display: inline;
+    font-weight: 700;
+    border-radius: 4px;
+    padding: 0 3px;
+    background: rgba(30, 114, 149, 0.18);
+    box-shadow: inset 0 0 0 1px rgba(30, 114, 149, 0.40);
+}
+
+.mention-tag.mention-tag--self {
+    color: #4a3300;
+    background: #ffd24d;
+    box-shadow: inset 0 0 0 1px rgba(150, 105, 0, 0.55);
+}
diff --git a/src/css/mentions/MentionToasts.css b/src/css/mentions/MentionToasts.css
index 6895c89..a7ba0d6 100644
--- a/src/css/mentions/MentionToasts.css
+++ b/src/css/mentions/MentionToasts.css
@@ -1,72 +1,88 @@
-.mention-toasts {
-    position: fixed;
-    top: 130px;
-    right: 12px;
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    max-width: 320px;
-    pointer-events: none;
-}
-
-.mention-toast {
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 300px;
-    padding: 8px 10px;
-    background: #2b2f3a;
-    color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-left: 3px solid #1e7295;
-    border-radius: 8px;
-    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
-    cursor: pointer;
-    animation: mention-toast-in 0.22s ease;
-}
-
-@keyframes mention-toast-in {
-    from { opacity: 0; transform: translateX(22px); }
-    to   { opacity: 1; transform: translateX(0); }
-}
-
+/* Mention notification bubble — rendered through the client's standard
+   notification stream (LayoutNotificationBubbleView, NotificationMentionBubbleView),
+   so it inherits the default chrome/position. Only the mention-specific bits
+   live here: the avatar head crop, type chip, time, room, message clamp and
+   action buttons. */
 .mention-toast-avatar {
     position: relative;
-    width: 44px;
-    height: 44px;
+    width: 32px;
+    height: 36px;
     flex-shrink: 0;
     overflow: hidden;
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.25);
 }
 
-/* ricetta testa headOnly: l'avatar-image riempie il box (inset-0) e si croppa
-   sulla testa via background-position (come l'avatar-testa della toolbar),
-   invece di scalare il corpo. */
+/* Exact friends-list head crop — a matched set: 32x36 box + 66px width-scale +
+   -16/-21 offset (deterministic, starts above the hairline) so the full head
+   shows and isn't clipped. */
 .mention-toast-avatar .avatar-image {
     position: absolute !important;
     inset: 0 !important;
     width: 100% !important;
     height: 100% !important;
-    background-size: auto !important;
-    background-position: -23px -32px !important;
+    background-size: 66px auto !important;
+    background-position: -16px -21px !important;
 }
 
-.mention-toast-body {
-    flex: 1 1 auto;
-    min-width: 0;
-}
-
-.mention-toast-title {
+.mention-toast-chip {
+    flex: none;
+    padding: 1px 6px;
+    border-radius: 8px;
+    font-size: 9px;
     font-weight: 700;
-    font-size: 12px;
-    line-height: 1.2;
-    color: #6cb6e0;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    color: #fff;
+}
+
+.mention-toast-chip.is-direct { background: #1e7295; }
+.mention-toast-chip.is-room { background: #d08a1e; }
+
+.mention-toast-spacer {
+    flex: 1 1 auto;
+}
+
+.mention-toast-time {
+    flex: none;
+    font-size: 11px;
+    color: #aeb3bd;
+    font-variant-numeric: tabular-nums;
+}
+
+.mention-toast-dismiss {
+    flex: none;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.10);
+    color: #c9ccd3;
+    font-size: 9px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.mention-toast-dismiss:hover {
+    background: rgba(255, 255, 255, 0.20);
+    color: #fff;
+}
+
+.mention-toast-room {
+    margin-top: 1px;
+    font-size: 11px;
+    color: #aeb3bd;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .mention-toast-message {
+    margin-top: 3px;
     font-size: 12px;
     line-height: 1.3;
     color: #e6e8ec;
@@ -78,24 +94,26 @@
     word-break: break-word;
 }
 
-.mention-toast-dismiss {
-    flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.08);
-    color: #c9ccd3;
-    cursor: pointer;
-    font-size: 10px;
-    line-height: 1;
+.mention-toast-actions {
+    margin-top: 6px;
 }
 
-.mention-toast-dismiss:hover {
-    background: rgba(255, 255, 255, 0.18);
+.mention-toast-btn {
+    padding: 3px 10px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 7px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #eef0f4;
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 1.2;
+    cursor: pointer;
+    transition: background 0.12s ease, border-color 0.12s ease;
+}
+
+.mention-toast-btn:hover {
+    background: #1e7295;
+    border-color: #2a90bd;
     color: #fff;
 }
 
diff --git a/src/css/mentions/MentionsPanel.css b/src/css/mentions/MentionsPanel.css
new file mode 100644
index 0000000..70c31f8
--- /dev/null
+++ b/src/css/mentions/MentionsPanel.css
@@ -0,0 +1,323 @@
+/* ============================================================================
+   Mentions panel — search bar, list rows, avatar framing.
+   The avatar tile mirrors the @-autocomplete tile (bordered cream chrome +
+   `background-size: auto` / `-22px -32px` head crop) so the head is framed the
+   same proven way instead of a finicky bare crop.
+   ============================================================================ */
+
+.mentions-search {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 28px;
+    padding: 0 8px;
+    border: 1px solid #b9b6aa;
+    border-radius: 8px;
+    background: #fbfbf6;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.mentions-search-icon {
+    flex: none;
+    color: #8a8a82;
+    font-size: 12px;
+}
+
+.mentions-search input {
+    flex: 1 1 auto;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    font-size: 13px;
+    color: #2c2c2c;
+}
+
+.mention-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 6px 5px 11px;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background 0.08s linear, border-color 0.08s linear;
+}
+
+.mention-row-unread-dot {
+    position: absolute;
+    left: 2px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: #1e7295;
+}
+
+.mention-row:hover {
+    background: rgba(48, 114, 140, 0.10);
+    border-color: rgba(48, 114, 140, 0.25);
+}
+
+.mention-row.is-unread {
+    background: rgba(255, 210, 77, 0.16);
+}
+
+.mention-row.is-unread:hover {
+    background: rgba(255, 210, 77, 0.24);
+}
+
+.mention-row-avatar {
+    position: relative;
+    width: 32px;
+    height: 36px;
+    flex-shrink: 0;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.28);
+    background: #e3e0d6;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
+    overflow: hidden;
+}
+
+/* Exact friends-list head crop — a matched set: 32x36 box + 66px width-scale +
+   -16/-21 offset. The explicit 66px width is deterministic (not native-size
+   dependent) and the -21 vertical offset starts above the hairline, so the full
+   head shows and isn't clipped. */
+.mention-row-avatar .avatar-image {
+    position: absolute !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0 !important;
+    background-repeat: no-repeat;
+    background-size: 66px auto !important;
+    background-position: -16px -21px !important;
+    transform: none !important;
+}
+
+.mention-row-type {
+    position: absolute;
+    right: -3px;
+    bottom: -3px;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    border: 2px solid #f2f2eb;
+    font-size: 9px;
+    font-weight: 700;
+    line-height: 1;
+    color: #fff;
+}
+
+.mention-row-type.is-direct { background: #1e7295; }
+.mention-row-type.is-room { background: #d08a1e; }
+
+.mention-row-body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.mention-row-head {
+    display: flex;
+    align-items: baseline;
+    gap: 5px;
+    min-width: 0;
+}
+
+.mention-row-name {
+    font-weight: 700;
+    font-size: 13px;
+    color: #232323;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 1 auto;
+}
+
+.mention-row-room {
+    font-size: 11px;
+    color: #7a7a72;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.mention-row-msg {
+    display: block;
+    font-size: 12px;
+    color: #4a4a45;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mention-row-meta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 4px;
+    flex-shrink: 0;
+    min-width: 38px;
+}
+
+.mention-row-time {
+    font-size: 11px;
+    color: #8a8a82;
+    font-variant-numeric: tabular-nums;
+}
+
+.mention-row-actions {
+    display: none;
+    gap: 4px;
+}
+
+.mention-row:hover .mention-row-time { display: none; }
+.mention-row:hover .mention-row-actions { display: flex; }
+
+.mention-row-action {
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    background: rgba(0, 0, 0, 0.05);
+    font-size: 10px;
+    line-height: 1;
+    color: #4a4a45;
+    cursor: pointer;
+    transition: background 0.1s, color 0.1s, border-color 0.1s;
+}
+
+.mention-row-action:hover { background: #1e7295; color: #fff; border-color: #185b76; }
+.mention-row-action.is-remove:hover { background: #d64545; color: #fff; border-color: #b53636; }
+
+.mentions-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 28px 12px;
+    text-align: center;
+    color: #7a7a72;
+}
+
+.mentions-empty-glyph {
+    width: 46px;
+    height: 46px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(30, 114, 149, 0.10);
+    color: #1e7295;
+    font-size: 22px;
+    font-weight: 700;
+}
+
+.mentions-empty-text {
+    font-size: 13px;
+    color: #6f6f67;
+}
+
+/* --- toolbar: filter chips + refresh --- */
+.mentions-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.mentions-filters {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.mentions-filter {
+    padding: 2px 9px;
+    border-radius: 9999px;
+    border: 1px solid #b9b6aa;
+    background: #f3f1ea;
+    color: #5a5a52;
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 1.5;
+    cursor: pointer;
+    transition: background 0.1s, color 0.1s, border-color 0.1s;
+}
+
+.mentions-filter:hover {
+    background: #e9e6dc;
+}
+
+.mentions-filter.is-active {
+    background: #1e7295;
+    border-color: #185b76;
+    color: #fff;
+}
+
+.mentions-refresh {
+    flex: none;
+    width: 26px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 7px;
+    border: 1px solid #b9b6aa;
+    background: #f3f1ea;
+    color: #6a6a62;
+    font-size: 11px;
+    cursor: pointer;
+    transition: background 0.1s, color 0.1s;
+}
+
+.mentions-refresh:hover {
+    background: #e9e6dc;
+    color: #1e7295;
+}
+
+.mentions-refresh:active {
+    transform: translateY(1px);
+}
+
+/* --- list + date groups --- */
+.mentions-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-height: 96px;
+    max-height: 340px;
+    overflow-y: auto;
+}
+
+.mentions-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.mentions-group-label {
+    padding: 8px 4px 2px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    color: #9a978c;
+}
diff --git a/src/hooks/mentions/index.ts b/src/hooks/mentions/index.ts
index f8b9e5f..87ccb8f 100644
--- a/src/hooks/mentions/index.ts
+++ b/src/hooks/mentions/index.ts
@@ -1,3 +1,3 @@
 export * from './useMentionsSnapshot';
 export * from './useMentionMessages';
-export * from './useMentionAutocomplete';
+export * from './useMentionActions';
diff --git a/src/hooks/mentions/mentionToastsStore.ts b/src/hooks/mentions/mentionToastsStore.ts
deleted file mode 100644
index 07c5fec..0000000
--- a/src/hooks/mentions/mentionToastsStore.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { IMentionEntry } from '../../api';
-
-// Toast laterali per le menzioni appena ricevute (avatar + messaggio + dismiss).
-// Separato da mentionsStore: i toast sono effimeri, le menzioni persistono nel pannello.
-export interface MentionToast
-{
-    mentionId: number;
-    senderId: number;
-    senderUsername: string;
-    senderFigure: string;
-    message: string;
-    roomName: string;
-}
-
-const MAX_TOASTS = 4;
-
-let toasts: MentionToast[] = [];
-const listeners = new Set<() => void>();
-
-const emit = (): void =>
-{
-    for(const listener of listeners) listener();
-};
-
-export const subscribeMentionToasts = (callback: () => void): (() => void) =>
-{
-    listeners.add(callback);
-    return () => { listeners.delete(callback); };
-};
-
-export const getMentionToasts = (): ReadonlyArray<MentionToast> => toasts;
-
-export const pushMentionToast = (entry: IMentionEntry): void =>
-{
-    toasts = [
-        {
-            mentionId: entry.mentionId,
-            senderId: entry.senderId,
-            senderUsername: entry.senderUsername,
-            senderFigure: entry.senderFigure,
-            message: entry.message,
-            roomName: entry.roomName
-        },
-        ...toasts.filter(toast => toast.mentionId !== entry.mentionId)
-    ].slice(0, MAX_TOASTS);
-
-    emit();
-};
-
-export const dismissMentionToast = (mentionId: number): void =>
-{
-    const next = toasts.filter(toast => toast.mentionId !== mentionId);
-
-    if(next.length === toasts.length) return;
-
-    toasts = next;
-    emit();
-};
diff --git a/src/components/mentions/useMentionActions.ts b/src/hooks/mentions/useMentionActions.ts
similarity index 95%
rename from src/components/mentions/useMentionActions.ts
rename to src/hooks/mentions/useMentionActions.ts
index 21be9f9..f336c4a 100644
--- a/src/components/mentions/useMentionActions.ts
+++ b/src/hooks/mentions/useMentionActions.ts
@@ -1,7 +1,7 @@
 import { CreateLinkEvent, DeleteMentionComposer, MarkMentionsReadComposer } from '@nitrots/nitro-renderer';
 import { useMemo } from 'react';
 import { IMentionEntry, SendMessageComposer } from '../../api';
-import { markRead, removeMention } from '../../hooks/mentions/mentionsStore';
+import { markRead, removeMention } from './mentionsStore';
 
 export interface MentionActions
 {
diff --git a/src/hooks/mentions/useMentionAutocomplete.ts b/src/hooks/mentions/useMentionAutocomplete.ts
deleted file mode 100644
index 6b2bbc1..0000000
--- a/src/hooks/mentions/useMentionAutocomplete.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { MENTION_ROOM_ALIASES } from '../../components/room/widgets/chat/highlightMentions';
-import { useFriendsState } from '../friends/useFriends';
-import { useRoomUserListSnapshot } from '../session/useSessionSnapshots';
-
-export interface MentionSuggestion
-{
-    name: string;
-    figure: string;
-    isAlias: boolean;
-}
-
-const MAX_SUGGESTIONS = 8;
-
-// Trova il token @<parziale> che si sta digitando alla FINE del valore.
-// Restituisce il parziale (anche '' subito dopo @) oppure null se non si è in un @mention.
-const activeMentionPartial = (value: string): string | null =>
-{
-    if(!value || value.indexOf('@') < 0) return null;
-
-    const match = /(?:^|\s)@([A-Za-z0-9_]*)$/.exec(value);
-
-    return match ? match[1] : null;
-};
-
-export interface MentionAutocompleteState
-{
-    isVisible: boolean;
-    suggestions: MentionSuggestion[];
-    selectedIndex: number;
-    setSelectedIndex: (index: number) => void;
-    moveUp: () => void;
-    moveDown: () => void;
-    current: () => MentionSuggestion | null;
-    // Inserisce il nome scelto sostituendo il parziale @... alla fine del valore.
-    applyTo: (value: string, name: string) => string;
-}
-
-export const useMentionAutocomplete = (chatValue: string): MentionAutocompleteState =>
-{
-    const roomUsers = useRoomUserListSnapshot();
-    const { onlineFriends } = useFriendsState();
-    const [ selectedIndex, setSelectedIndex ] = useState(0);
-
-    const partial = useMemo(() => activeMentionPartial(chatValue), [ chatValue ]);
-
-    const suggestions = useMemo<MentionSuggestion[]>(() =>
-    {
-        if(partial === null) return [];
-
-        const query = partial.toLowerCase();
-        const seen = new Set<string>();
-        const out: MentionSuggestion[] = [];
-
-        const add = (name: string, figure: string, isAlias: boolean) =>
-        {
-            if(!name || out.length >= MAX_SUGGESTIONS) return;
-
-            const key = name.toLowerCase();
-
-            if(seen.has(key)) return;
-            if(query && !key.startsWith(query)) return;
-
-            seen.add(key);
-            out.push({ name, figure: figure || '', isAlias });
-        };
-
-        for(const user of (roomUsers || [])) add(user?.name, (user as any)?.figure, false);
-        for(const friend of (onlineFriends || [])) add(friend?.name, friend?.figure, false);
-        for(const alias of MENTION_ROOM_ALIASES) add(alias, '', true);
-
-        return out;
-    }, [ partial, roomUsers, onlineFriends ]);
-
-    useEffect(() => { setSelectedIndex(0); }, [ partial ]);
-
-    const isVisible = (partial !== null) && (suggestions.length > 0);
-
-    return {
-        isVisible,
-        suggestions,
-        selectedIndex,
-        setSelectedIndex,
-        moveUp: () => setSelectedIndex(index => (index <= 0 ? suggestions.length - 1 : index - 1)),
-        moveDown: () => setSelectedIndex(index => (index >= suggestions.length - 1 ? 0 : index + 1)),
-        current: () => suggestions[selectedIndex] ?? null,
-        applyTo: (value: string, name: string) => value.replace(/@([A-Za-z0-9_]*)$/, '@' + name + ' ')
-    };
-};
diff --git a/src/hooks/mentions/useMentionMessages.ts b/src/hooks/mentions/useMentionMessages.ts
index 09cf0dd..fee19d9 100644
--- a/src/hooks/mentions/useMentionMessages.ts
+++ b/src/hooks/mentions/useMentionMessages.ts
@@ -2,14 +2,16 @@ import { MentionReceivedEvent, MentionsListEvent, RequestMentionsComposer } from
 import { useCallback, useEffect } from 'react';
 import { GetConfigurationValue, IMentionEntry, PlaySound, SendMessageComposer } from '../../api';
 import { useMessageEvent } from '../events';
+import { useNotification } from '../notification/useNotification';
 import { addMention, setMentions } from './mentionsStore';
-import { pushMentionToast } from './mentionToastsStore';
 
 // Dedicated mention chime served from nitro-assets/sounds/<sample>.mp3.
 const MENTION_SOUND_SAMPLE = 'mentions_notification';
 
 export const useMentionMessages = (): void =>
 {
+    const { showMentionBubble } = useNotification();
+
     const onMentionsList = useCallback((event: MentionsListEvent) =>
     {
         const list = event.getParser().mentions;
@@ -51,9 +53,10 @@ export const useMentionMessages = (): void =>
 
         if(GetConfigurationValue<boolean>('mentions_ui.sound', true)) PlaySound(MENTION_SOUND_SAMPLE);
 
-        // Notifica laterale custom (avatar + messaggio + dismiss) invece del bubble generico.
-        pushMentionToast(entry);
-    }, []);
+        // Surface it through the client's standard notification stream, using the
+        // dedicated mention bubble layout (avatar + actions).
+        showMentionBubble(entry);
+    }, [ showMentionBubble ]);
 
     useMessageEvent<MentionsListEvent>(MentionsListEvent, onMentionsList);
     useMessageEvent<MentionReceivedEvent>(MentionReceivedEvent, onMentionReceived);
diff --git a/src/hooks/notification/useNotification.ts b/src/hooks/notification/useNotification.ts
index d7d3562..508fc78 100644
--- a/src/hooks/notification/useNotification.ts
+++ b/src/hooks/notification/useNotification.ts
@@ -1,7 +1,7 @@
 import { AchievementNotificationMessageEvent, ActivityPointNotificationMessageEvent, BadgeReceivedEvent, ClubGiftNotificationEvent, ClubGiftSelectedEvent, ConnectionErrorEvent, GetLocalizationManager, GetRoomEngine, GetSessionDataManager, HabboBroadcastMessageEvent, HotelClosedAndOpensEvent, HotelClosesAndWillOpenAtEvent, HotelWillCloseInMinutesEvent, InfoFeedEnableMessageEvent, MaintenanceStatusMessageEvent, ModeratorCautionEvent, ModeratorMessageEvent, MOTDNotificationEvent, NotificationDialogMessageEvent, PetLevelNotificationEvent, PetReceivedMessageEvent, RespectReceivedEvent, RoomEnterEffect, RoomEnterEvent, SimpleAlertMessageEvent, UserBannedMessageEvent, Vector3d, WiredRewardResultMessageEvent } from '@nitrots/nitro-renderer';
 import { useCallback, useState } from 'react';
 import { useBetween } from 'use-between';
-import { GetConfigurationValue, LocalizeBadgeName, LocalizeText, NotificationAlertItem, NotificationAlertType, NotificationBubbleItem, NotificationBubbleType, NotificationConfirmItem, PlaySound, ProductImageUtility, TradingNotificationType } from '../../api';
+import { GetConfigurationValue, IMentionEntry, LocalizeBadgeName, LocalizeText, MentionNotificationBubbleItem, NotificationAlertItem, NotificationAlertType, NotificationBubbleItem, NotificationBubbleType, NotificationConfirmItem, PlaySound, ProductImageUtility, TradingNotificationType } from '../../api';
 import { useMessageEvent } from '../events';
 
 const cleanText = (text: string) => (text && text.length) ? text.replace(/\\r/g, '\r') : '';
@@ -86,6 +86,16 @@ const useNotificationStore = () =>
         });
     }, [ bubblesDisabled ]);
 
+    const showMentionBubble = useCallback((mention: IMentionEntry) =>
+    {
+        // Mentions always surface: they have their own `mentions_ui.enabled` gate
+        // (checked in useMentionMessages) and are intentionally independent of the
+        // generic info-feed toggle, so EVERY received mention shows a bubble.
+        const item = new MentionNotificationBubbleItem(mention);
+
+        setBubbleAlerts(prevValue => [ item, ...prevValue ]);
+    }, []);
+
     const showNotification = (type: string, options: Map<string, string> = null) =>
     {
         if(!options) options = new Map();
@@ -490,7 +500,7 @@ const useNotificationStore = () =>
 
     useMessageEvent<RoomEnterEvent>(RoomEnterEvent, onRoomEnterEvent);
 
-    return { alerts, bubbleAlerts, confirms, simpleAlert, showNitroAlert, showTradeAlert, showConfirm, showSingleBubble, closeAlert, closeBubbleAlert, closeConfirm };
+    return { alerts, bubbleAlerts, confirms, simpleAlert, showNitroAlert, showTradeAlert, showConfirm, showSingleBubble, showMentionBubble, closeAlert, closeBubbleAlert, closeConfirm };
 };
 
 export const useNotificationState = () =>
@@ -508,6 +518,7 @@ export const useNotificationActions = () =>
         showTradeAlert,
         showConfirm,
         showSingleBubble,
+        showMentionBubble,
         closeAlert,
         closeBubbleAlert,
         closeConfirm
@@ -519,6 +530,7 @@ export const useNotificationActions = () =>
         showTradeAlert,
         showConfirm,
         showSingleBubble,
+        showMentionBubble,
         closeAlert,
         closeBubbleAlert,
         closeConfirm
diff --git a/src/hooks/rooms/widgets/index.ts b/src/hooks/rooms/widgets/index.ts
index c0f96db..d576de0 100644
--- a/src/hooks/rooms/widgets/index.ts
+++ b/src/hooks/rooms/widgets/index.ts
@@ -2,6 +2,7 @@ export * from './furniture';
 export * from './useAvatarInfoWidget';
 export * from './useChatCommandSelector';
 export * from './useChatInputWidget';
+export * from './useChatMentions';
 export * from './useChatWidget';
 export * from './useDoorbellActions';
 export * from './useDoorbellState';
diff --git a/src/hooks/rooms/widgets/useChatMentions.helpers.test.ts b/src/hooks/rooms/widgets/useChatMentions.helpers.test.ts
new file mode 100644
index 0000000..1b69187
--- /dev/null
+++ b/src/hooks/rooms/widgets/useChatMentions.helpers.test.ts
@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest';
+import { buildChatMentionSuggestions, computeMentionContext, MentionAlias } from './useChatMentions.helpers';
+
+const ALIASES: MentionAlias[] = [
+    { key: 'all', scope: 'everyone', description: '' },
+    { key: 'room', scope: 'room', description: '' }
+];
+
+const ROOM = [
+    { webID: 1, type: 1, name: 'tester', figure: 'a' },
+    { webID: 2, type: 1, name: 'alice', figure: 'b' },
+    { webID: 3, type: 1, name: 'bob', figure: 'c' },
+    { webID: 9, type: 2, name: 'petbot', figure: 'd' } // non-real user (pet/bot)
+];
+
+describe('computeMentionContext', () =>
+{
+    it('detects a trailing @query', () =>
+    {
+        expect(computeMentionContext('hi @al', false)).toEqual({ atIndex: 3, replaceFrom: 3, replaceTo: 6, query: 'al' });
+    });
+
+    it('detects @ at the very start', () =>
+    {
+        expect(computeMentionContext('@al', false)).toEqual({ atIndex: 0, replaceFrom: 0, replaceTo: 3, query: 'al' });
+    });
+
+    it('returns null when a command popover is open', () =>
+    {
+        expect(computeMentionContext('hi @al', true)).toBeNull();
+    });
+
+    it('returns null when @ is glued to a previous word (e.g. an email)', () =>
+    {
+        expect(computeMentionContext('mail me@al', false)).toBeNull();
+    });
+
+    it('returns null when the @token is not at the end', () =>
+    {
+        expect(computeMentionContext('@al ready', false)).toBeNull();
+    });
+
+    it('returns null when there is no @', () =>
+    {
+        expect(computeMentionContext('plain text', false)).toBeNull();
+    });
+});
+
+describe('buildChatMentionSuggestions', () =>
+{
+    it('excludes the viewer by id and keeps the other real users + aliases', () =>
+    {
+        const names = buildChatMentionSuggestions('', ROOM, ALIASES, 1, 'tester').map(s => s.name);
+
+        expect(names).not.toContain('tester'); // own user (webID 1)
+        expect(names).toContain('alice');
+        expect(names).toContain('bob');
+        expect(names).toContain('all');
+        expect(names).toContain('room');
+    });
+
+    it('excludes the viewer by name when the id does not line up', () =>
+    {
+        const names = buildChatMentionSuggestions('', ROOM, ALIASES, -1, 'TESTER').map(s => s.name);
+
+        expect(names).not.toContain('tester');
+    });
+
+    it('skips non-real users (pets/bots)', () =>
+    {
+        const names = buildChatMentionSuggestions('', ROOM, [], 1, 'tester').map(s => s.name);
+
+        expect(names).not.toContain('petbot');
+    });
+
+    it('prefix-filters users and aliases by the query', () =>
+    {
+        const names = buildChatMentionSuggestions('al', ROOM, ALIASES, 1, 'tester').map(s => s.name);
+
+        expect(names).toContain('alice');
+        expect(names).toContain('all');
+        expect(names).not.toContain('bob');
+        expect(names).not.toContain('room');
+    });
+
+    it('tags user vs alias kinds', () =>
+    {
+        const out = buildChatMentionSuggestions('', ROOM, ALIASES, 1, 'tester');
+
+        expect(out.find(s => s.name === 'alice')?.kind).toBe('user');
+        expect(out.find(s => s.name === 'all')?.kind).toBe('alias');
+    });
+
+    it('caps the total at max', () =>
+    {
+        const many = Array.from({ length: 20 }, (_, i) => ({ webID: 100 + i, type: 1, name: `u${ i }`, figure: '' }));
+        const out = buildChatMentionSuggestions('', many, ALIASES, -1, 'me', 5);
+
+        expect(out).toHaveLength(5);
+    });
+});
diff --git a/src/hooks/rooms/widgets/useChatMentions.helpers.ts b/src/hooks/rooms/widgets/useChatMentions.helpers.ts
new file mode 100644
index 0000000..58e3f4f
--- /dev/null
+++ b/src/hooks/rooms/widgets/useChatMentions.helpers.ts
@@ -0,0 +1,143 @@
+// Pure helpers for the chat-input @-mention autocomplete. Kept framework-free
+// so the suggestion building and the caret-context detection are unit-testable.
+
+export type MentionSuggestionKind = 'user' | 'alias';
+
+export interface MentionSuggestion
+{
+    key: string;
+    kind: MentionSuggestionKind;
+    name: string;
+    insertToken: string;
+    figure?: string;
+    description?: string;
+}
+
+export type MentionAliasScope = 'everyone' | 'friends' | 'room';
+
+export interface MentionAlias
+{
+    key: string;
+    scope: MentionAliasScope;
+    description: string;
+}
+
+export interface MentionContext
+{
+    atIndex: number;
+    replaceFrom: number;
+    replaceTo: number;
+    query: string;
+}
+
+export const MAX_MENTION_SUGGESTIONS = 8;
+
+const USER_TYPE_REAL_USER = 1;
+
+export const MENTION_ALIAS_CONFIG_KEY: Record<MentionAliasScope, string> = {
+    everyone: 'mentions_ui.aliases.everyone',
+    friends:  'mentions_ui.aliases.friends',
+    room:     'mentions_ui.aliases.room'
+};
+
+export const MENTION_ALIAS_DEFAULTS: Record<MentionAliasScope, string[]> = {
+    everyone: [ 'all', 'everyone', 'tutti' ],
+    friends:  [ 'friends', 'amici' ],
+    room:     [ 'room', 'stanza' ]
+};
+
+export const MENTION_ALIAS_DESCRIPTION_KEY: Record<MentionAliasScope, string> = {
+    everyone: 'mentions.alias.description.everyone',
+    friends:  'mentions.alias.description.friends',
+    room:     'mentions.alias.description.room'
+};
+
+export const sanitizeAliasList = (raw: unknown, fallback: string[]): string[] =>
+{
+    if(!Array.isArray(raw)) return fallback;
+
+    const out: string[] = [];
+
+    for(const entry of raw)
+    {
+        if(typeof entry !== 'string') continue;
+
+        const trimmed = entry.trim();
+
+        if(!trimmed) continue;
+
+        out.push(trimmed);
+    }
+
+    return out;
+};
+
+/**
+ * Detect an in-progress `@partial` token at the END of the input. Returns the
+ * token bounds + the query (text after `@`), or null when not in a mention (no
+ * trailing `@token`, `@` glued to a previous word, or a command popover open).
+ * End-anchored (no caret read) so it stays a pure render-safe computation.
+ */
+export const computeMentionContext = (value: string, commandSelectorVisible: boolean): MentionContext | null =>
+{
+    if(!value) return null;
+    if(commandSelectorVisible) return null;
+
+    const match = /(?:^|\s)@([A-Za-z0-9_]*)$/.exec(value);
+
+    if(!match) return null;
+
+    const query = match[1];
+    const atIndex = value.length - query.length - 1;
+
+    return { atIndex, replaceFrom: atIndex, replaceTo: value.length, query };
+};
+
+interface MentionRoomUser
+{
+    webID?: number;
+    type?: number;
+    name?: string;
+    figure?: string;
+}
+
+/**
+ * Build the suggestion list for the current query: real room users (minus the
+ * viewer themselves — match by id, name as fallback) then the broadcast
+ * aliases, prefix-filtered and capped.
+ */
+export const buildChatMentionSuggestions = (
+    query: string,
+    roomUserList: ReadonlyArray<MentionRoomUser>,
+    aliases: ReadonlyArray<MentionAlias>,
+    ownUserId: number,
+    ownUsername: string,
+    max: number = MAX_MENTION_SUGGESTIONS
+): MentionSuggestion[] =>
+{
+    const q = (query || '').toLowerCase();
+    const ownNameLower = (ownUsername || '').toLowerCase();
+    const out: MentionSuggestion[] = [];
+
+    for(const user of (roomUserList || []))
+    {
+        if(out.length >= max) break;
+        if(!user || (user.type !== USER_TYPE_REAL_USER)) continue;
+        if(!user.name) continue;
+        // You can't mention yourself — skip the own user (match by id, name as fallback).
+        if((user.webID === ownUserId) || (ownNameLower && (user.name.toLowerCase() === ownNameLower))) continue;
+        if((q.length > 0) && !user.name.toLowerCase().startsWith(q)) continue;
+
+        out.push({ key: `user:${ user.webID }`, kind: 'user', name: user.name, insertToken: user.name, figure: user.figure || '' });
+    }
+
+    for(const alias of aliases)
+    {
+        if(out.length >= max) break;
+        if((q.length > 0) && !alias.key.toLowerCase().startsWith(q)) continue;
+
+        out.push({ key: `alias:${ alias.key }`, kind: 'alias', name: alias.key, insertToken: alias.key, description: alias.description });
+    }
+
+    return out;
+};
diff --git a/src/hooks/rooms/widgets/useChatMentions.ts b/src/hooks/rooms/widgets/useChatMentions.ts
new file mode 100644
index 0000000..5b52bb9
--- /dev/null
+++ b/src/hooks/rooms/widgets/useChatMentions.ts
@@ -0,0 +1,130 @@
+import { GetSessionDataManager } from '@nitrots/nitro-renderer';
+import { RefObject, useCallback, useMemo, useState } from 'react';
+import { GetConfigurationValue, LocalizeText } from '../../../api';
+import { useRoomUserListSnapshot } from '../../session/useSessionSnapshots';
+import { buildChatMentionSuggestions, computeMentionContext, MentionAlias, MentionAliasScope, MentionSuggestion, MENTION_ALIAS_CONFIG_KEY, MENTION_ALIAS_DEFAULTS, MENTION_ALIAS_DESCRIPTION_KEY, sanitizeAliasList } from './useChatMentions.helpers';
+
+export type { MentionSuggestion, MentionSuggestionKind } from './useChatMentions.helpers';
+
+export interface ChatMentionsState
+{
+    visible: boolean;
+    suggestions: MentionSuggestion[];
+    selectedIndex: number;
+    setSelectedIndex: (index: number) => void;
+    moveUp: () => void;
+    moveDown: () => void;
+    /** Apply the highlighted suggestion (or the first). Returns true if one was applied. */
+    applyCurrent: () => boolean;
+    apply: (suggestion: MentionSuggestion) => void;
+    /** Escape: reset selection and strip the in-progress @query from the input. */
+    cancel: () => void;
+}
+
+/**
+ * Chat-input @-mention autocomplete. Owns the caret-context detection, the
+ * config-driven broadcast aliases, the room-user suggestion list (minus the
+ * viewer), keyboard navigation and the insert/cancel actions — so ChatInputView
+ * just wires its keydown handler and the selector view to this hook.
+ */
+export const useChatMentions = (
+    chatValue: string,
+    setChatValue: (value: string) => void,
+    inputRef: RefObject<HTMLInputElement>,
+    commandSelectorVisible: boolean
+): ChatMentionsState =>
+{
+    const roomUserList = useRoomUserListSnapshot();
+    const [ selectedIndex, setSelectedIndex ] = useState(0);
+
+    const mentionContext = useMemo(() => computeMentionContext(chatValue, commandSelectorVisible), [ chatValue, commandSelectorVisible ]);
+
+    const aliases = useMemo<MentionAlias[]>(() =>
+    {
+        const out: MentionAlias[] = [];
+        const seen = new Set<string>();
+        const scopes: MentionAliasScope[] = [ 'everyone', 'friends', 'room' ];
+
+        for(const scope of scopes)
+        {
+            const list = sanitizeAliasList(GetConfigurationValue<unknown>(MENTION_ALIAS_CONFIG_KEY[scope], MENTION_ALIAS_DEFAULTS[scope]), MENTION_ALIAS_DEFAULTS[scope]);
+
+            for(const key of list)
+            {
+                const lower = key.toLowerCase();
+
+                if(seen.has(lower)) continue;
+
+                seen.add(lower);
+                out.push({ key, scope, description: LocalizeText(MENTION_ALIAS_DESCRIPTION_KEY[scope]) });
+            }
+        }
+
+        return out;
+    }, []);
+
+    const suggestions = useMemo<MentionSuggestion[]>(() =>
+    {
+        if(!mentionContext) return [];
+
+        const session = GetSessionDataManager();
+
+        return buildChatMentionSuggestions(mentionContext.query, roomUserList, aliases, session?.userId ?? -1, session?.userName || '');
+    }, [ mentionContext, roomUserList, aliases ]);
+
+    const visible = (suggestions.length > 0);
+    // Clamp the selection to the current list (derived, no effect) so a
+    // shrinking list never leaves the highlight out of range.
+    const safeIndex = (selectedIndex < suggestions.length) ? selectedIndex : 0;
+
+    const apply = useCallback((suggestion: MentionSuggestion) =>
+    {
+        if(!suggestion || !mentionContext) return;
+
+        const before = chatValue.slice(0, mentionContext.replaceFrom);
+        const after = chatValue.slice(mentionContext.replaceTo);
+        const inserted = `@${ suggestion.insertToken } `;
+
+        setChatValue(`${ before }${ inserted }${ after }`);
+
+        requestAnimationFrame(() =>
+        {
+            if(!inputRef.current) return;
+
+            const caret = before.length + inserted.length;
+
+            inputRef.current.focus();
+            inputRef.current.setSelectionRange(caret, caret);
+        });
+
+        setSelectedIndex(0);
+    }, [ chatValue, mentionContext, setChatValue, inputRef ]);
+
+    const moveUp = useCallback(() => setSelectedIndex((safeIndex <= 0) ? (suggestions.length - 1) : (safeIndex - 1)), [ safeIndex, suggestions.length ]);
+    const moveDown = useCallback(() => setSelectedIndex((safeIndex >= (suggestions.length - 1)) ? 0 : (safeIndex + 1)), [ safeIndex, suggestions.length ]);
+
+    const applyCurrent = useCallback(() =>
+    {
+        const picked = suggestions[safeIndex] ?? suggestions[0];
+
+        if(!picked) return false;
+
+        apply(picked);
+
+        return true;
+    }, [ suggestions, safeIndex, apply ]);
+
+    const cancel = useCallback(() =>
+    {
+        setSelectedIndex(0);
+
+        if(!mentionContext) return;
+
+        const before = chatValue.slice(0, mentionContext.replaceFrom);
+        const after = chatValue.slice(mentionContext.replaceTo);
+
+        setChatValue(before + after);
+    }, [ mentionContext, chatValue, setChatValue ]);
+
+    return { visible, suggestions, selectedIndex: safeIndex, setSelectedIndex, moveUp, moveDown, applyCurrent, apply, cancel };
+};
diff --git a/src/index.tsx b/src/index.tsx
index f6abedc..3b7af7d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -25,6 +25,7 @@ import './css/emustats/EmuStatsView.css';
 import './css/chat/Chats.css';
 import './css/chat/ChatInputMentionSelectorView.css';
 import './css/mentions/MentionToasts.css';
+import './css/mentions/MentionsPanel.css';
 
 import './css/common/Buttons.css';
 import './css/common/ClassicScrollbar.css';

From 1eb4d5594ba42d58d13c44896c64d1478b48e3e3 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sun, 7 Jun 2026 00:37:20 +0200
Subject: [PATCH 29/30] fix(messenger): show real avatar for offline friends +
 fix head framing

The messenger rendered the participant figure straight from the frozen
thread participant, so offline friends (whose look used to be empty)
showed the anonymous/standard avatar. Read the live look from the friend
list via getFriend() - the same source the friends list renders - with
resolveAvatarFigure() as the final fallback, so the real avatar shows
even when offline (pairs with the server fix that now sends offline
looks). Applied to both the avatar-bar tab and the in-thread avatars.

Also fix the avatar-tab head framing: it positioned the head-only image
with full-body geometry (90x130, top:-31px), clipping the head. Render
the head at native size (background-size:auto, no scaling -> not grainy)
and centre it in the 36x36 tab.
---
 .../views/messenger/FriendsMessengerView.tsx   | 18 +++++++++++++++---
 .../FriendsMessengerThreadGroup.tsx            |  5 ++++-
 src/css/friends/FriendsView.css                | 18 +++++++++++-------
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/friends/views/messenger/FriendsMessengerView.tsx b/src/components/friends/views/messenger/FriendsMessengerView.tsx
index 0eaf484..b456b8b 100644
--- a/src/components/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/components/friends/views/messenger/FriendsMessengerView.tsx
@@ -3,7 +3,8 @@ import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { GetUserProfile, LocalizeText, ReportType, SendMessageComposer } from '../../../../api';
 import { DraggableWindowPosition, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
-import { useHelp, useMessenger, useTranslation } from '../../../../hooks';
+import { useFriends, useHelp, useMessenger, useTranslation } from '../../../../hooks';
+import { resolveAvatarFigure } from '../friends-list/resolveAvatarFigure';
 import { FriendsMessengerThreadView } from './messenger-thread/FriendsMessengerThreadView';
 
 export const FriendsMessengerView: FC<{}> = props =>
@@ -12,6 +13,7 @@ export const FriendsMessengerView: FC<{}> = props =>
     const [ lastThreadId, setLastThreadId ] = useState(-1);
     const [ messageText, setMessageText ] = useState('');
     const { visibleThreads = [], activeThread = null, getMessageThread = null, sendMessage = null, setActiveThreadId = null, closeThread = null } = useMessenger();
+    const { getFriend = null } = useFriends();
     const { report = null } = useHelp();
     const { settings, translateOutgoing } = useTranslation();
     const messagesBox = useRef<HTMLDivElement>(null);
@@ -133,12 +135,22 @@ export const FriendsMessengerView: FC<{}> = props =>
                     <div className="messenger-avatar-bar">
                         { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread =>
                         {
+                            const isStaff = (thread.participant.id <= 0);
+                            // Read the live look from the friend list (same source the friends
+                            // list renders) so offline friends show their real avatar instead
+                            // of the standard/anonymous one; resolveAvatarFigure is the final
+                            // fallback when the look is genuinely missing.
+                            const liveFriend = isStaff ? null : getFriend(thread.participant.id);
+                            const figure = isStaff
+                                ? (thread.participant.figure === 'ADM' ? 'ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403' : thread.participant.figure)
+                                : resolveAvatarFigure(liveFriend?.figure || thread.participant.figure, liveFriend?.gender ?? thread.participant.gender);
+
                             return (
                                 <button key={ thread.threadId } className={ 'messenger-avatar-tab' + ((activeThread === thread) ? ' active' : '') + (thread.unread ? ' unread' : '') } onClick={ event => setActiveThreadId(thread.threadId) }>
                                     <LayoutAvatarImageView
-                                        figure={ thread.participant.id > 0 ? thread.participant.figure : thread.participant.figure === 'ADM' ? 'ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403' : thread.participant.figure }
+                                        figure={ figure }
                                         headOnly={ true }
-                                        direction={ thread.participant.id > 0 ? 2 : 3 }
+                                        direction={ isStaff ? 3 : 2 }
                                     />
                                 </button>
                             );
diff --git a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
index 97d74bf..aed920c 100644
--- a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
+++ b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
@@ -2,10 +2,13 @@ import { GetSessionDataManager } from '@nitrots/nitro-renderer';
 import { FC, useMemo } from 'react';
 import { GetGroupChatData, LocalizeText, MessengerGroupType, MessengerThread, MessengerThreadChat, MessengerThreadChatGroup } from '../../../../../api';
 import { Base, Flex, LayoutAvatarImageView } from '../../../../../common';
+import { useFriends } from '../../../../../hooks';
+import { resolveAvatarFigure } from '../../friends-list/resolveAvatarFigure';
 
 export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: MessengerThreadChatGroup }> = props =>
 {
     const { thread = null, group = null } = props;
+    const { getFriend = null } = useFriends();
 
     const groupChatData = useMemo(() => ((group.type === MessengerGroupType.GROUP_CHAT) && GetGroupChatData(group.chats[0].extraData)), [ group ]);
 
@@ -50,7 +53,7 @@ export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: M
         <Flex fullWidth gap={ 2 } justifyContent={ isOwnChat ? 'end' : 'start' } className={ 'messenger-message-row ' + (isOwnChat ? 'own' : '') }>
             <Base shrink className="message-avatar">
                 { ((group.type === MessengerGroupType.PRIVATE_CHAT) && !isOwnChat) &&
-                    <LayoutAvatarImageView direction={ 2 } figure={ thread.participant.figure } headOnly={ true } /> }
+                    <LayoutAvatarImageView direction={ 2 } figure={ resolveAvatarFigure(getFriend?.(thread.participant.id)?.figure || thread.participant.figure, getFriend?.(thread.participant.id)?.gender ?? thread.participant.gender) } headOnly={ true } /> }
                 { (groupChatData && !isOwnChat) &&
                     <LayoutAvatarImageView direction={ 2 } figure={ groupChatData.figure } headOnly={ true } /> }
             </Base>
diff --git a/src/css/friends/FriendsView.css b/src/css/friends/FriendsView.css
index 43be89c..41660ed 100644
--- a/src/css/friends/FriendsView.css
+++ b/src/css/friends/FriendsView.css
@@ -537,14 +537,18 @@
         }
 
         & .avatar-image {
-            position: absolute;
-            left: 50% !important;
-            top: -31px !important;
-            width: 90px !important;
-            height: 130px !important;
+            position: absolute !important;
+            inset: 0 !important;
+            width: 100% !important;
+            height: 100% !important;
             margin: 0 !important;
-            background-position: center -8px !important;
-            transform: translateX(-50%) !important;
+            /* head-only image at native size (no scaling -> never grainy),
+               centred in the tab. Tweak the 2nd value of background-position
+               to raise (smaller %) or lower (larger %) the face. */
+            background-size: auto !important;
+            background-position: center 35% !important;
+            transform: none !important;
+            image-rendering: pixelated !important;
         }
     }
 

From e2cc708497b7750cc0a6e2e4c4aea6c7f7b3e5eb Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sun, 7 Jun 2026 01:00:18 +0200
Subject: [PATCH 30/30] fix(infostand): show Edit Furni button for wall items

The "Edit Furni" button was nested inside the `(!avatarInfo.isWallItem
&& canMove)` guard, together with the floor-only Buildtools position/
height/rotation controls, so it never rendered for wall furni (e.g.
`ads_campguitar`). Move it out so it shows for any furni when
`godMode` + `isModerator`, leaving the position controls floor-only.
The onClick already resolved WALL vs FLOOR correctly.

While touching this file, clean up two pre-existing lint errors:
- hoist `getValidRoomObjectDirection` to module scope (it is pure and
  uses no component state) so it is no longer accessed before its
  declaration (react-hooks/immutability)
- expand the inline `'scale'` branch to Allman braces (brace-style)
---
 .../infostand/InfoStandWidgetFurniView.tsx    | 134 +++++++++---------
 1 file changed, 69 insertions(+), 65 deletions(-)

diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
index 40b458f..76f9900 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
@@ -18,6 +18,56 @@ const PICKUP_MODE_NONE: number = 0;
 const PICKUP_MODE_EJECT: number = 1;
 const PICKUP_MODE_FULL: number = 2;
 
+function getValidRoomObjectDirection(roomObject: any, isPositive: boolean)
+{
+    if(!roomObject || !roomObject.model) return 0;
+
+    let allowedDirections: number[] = [];
+
+    if(roomObject.type === 'monster_plant')
+    {
+        allowedDirections = roomObject.model.getValue('pet_allowed_directions');
+    }
+    else
+    {
+        allowedDirections = roomObject.model.getValue('furniture_allowed_directions');
+    }
+
+    let direction = roomObject.getDirection().x;
+
+    if(allowedDirections && allowedDirections.length)
+    {
+        let index = allowedDirections.indexOf(direction);
+
+        if(index < 0)
+        {
+            index = 0;
+
+            for(let i = 0; i < allowedDirections.length; i++)
+            {
+                if(direction <= allowedDirections[i]) break;
+
+                index++;
+            }
+
+            index = index % allowedDirections.length;
+        }
+
+        if(isPositive)
+        {
+            index = (index + 1) % allowedDirections.length;
+        }
+        else
+        {
+            index = (index - 1 + allowedDirections.length) % allowedDirections.length;
+        }
+
+        direction = allowedDirections[index];
+    }
+
+    return direction;
+}
+
 export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props =>
 {
     const { avatarInfo = null, onClose = null } = props;
@@ -78,56 +128,6 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
         SendMessageComposer(new UpdateFurniturePositionComposer(avatarInfo.id, newX, newY, Math.round(newZ * 10000), newDirection));
     }, [ avatarInfo ]);
 
-    function getValidRoomObjectDirection(roomObject: any, isPositive: boolean)
-    {
-        if(!roomObject || !roomObject.model) return 0;
-
-        let allowedDirections: number[] = [];
-
-        if(roomObject.type === 'monster_plant')
-        {
-            allowedDirections = roomObject.model.getValue('pet_allowed_directions');
-        }
-        else
-        {
-            allowedDirections = roomObject.model.getValue('furniture_allowed_directions');
-        }
-
-        let direction = roomObject.getDirection().x;
-
-        if(allowedDirections && allowedDirections.length)
-        {
-            let index = allowedDirections.indexOf(direction);
-
-            if(index < 0)
-            {
-                index = 0;
-
-                for(let i = 0; i < allowedDirections.length; i++)
-                {
-                    if(direction <= allowedDirections[i]) break;
-
-                    index++;
-                }
-
-                index = index % allowedDirections.length;
-            }
-
-            if(isPositive)
-            {
-                index = (index + 1) % allowedDirections.length;
-            }
-            else
-            {
-                index = (index - 1 + allowedDirections.length) % allowedDirections.length;
-            }
-
-            direction = allowedDirections[index];
-        }
-
-        return direction;
-    }
-
     const handleHeightChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) =>
     {
         let newZ = parseFloat(event.target.value);
@@ -421,7 +421,11 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
             if(key === 'offsetX') value = String(x);
             else if(key === 'offsetY') value = String(y);
             else if(key === 'offsetZ') value = String(z);
-            else if(key === 'scale') { value = String(scale); hasScale = true; }
+            else if(key === 'scale')
+            {
+                value = String(scale);
+                hasScale = true;
+            }
 
             clone[i] = value;
             map.set(key, value);
@@ -638,6 +642,20 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                                             })() }</Text>
                                         </div>
                                     </div> }
+                                { isModerator &&
+                                    <button
+                                        className="w-full text-white text-xs bg-[#1e7295] hover:bg-[#1a617f] border border-[#ffffff33] rounded px-2 py-1 cursor-pointer transition-colors"
+                                        onClick={ () =>
+                                        {
+                                            const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR);
+                                            const typeId = roomObject?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID);
+
+                                            CreateLinkEvent('furni-editor/show');
+
+                                            if(typeId) window.dispatchEvent(new CustomEvent('furni-editor:open', { detail: { spriteId: typeId } }));
+                                        } }>
+                                        Edit Furni
+                                    </button> }
                                 { (!avatarInfo.isWallItem && canMove) &&
                                     <>
                                         <button
@@ -645,20 +663,6 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                                             onClick={ () => setDropdownOpen(!dropdownOpen) }>
                                             { dropdownOpen ? `${LocalizeText('widget.furni.present.close')} Buildtools` : `${LocalizeText('navigator.roomsettings.doormode.open')} Buildtools` }
                                         </button>
-                                        { isModerator &&
-                                            <button
-                                                className="w-full text-white text-xs bg-[#1e7295] hover:bg-[#1a617f] border border-[#ffffff33] rounded px-2 py-1 cursor-pointer transition-colors"
-                                                onClick={ () =>
-                                                {
-                                                    const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR);
-                                                    const typeId = roomObject?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID);
-
-                                                    CreateLinkEvent('furni-editor/show');
-
-                                                    if(typeId) window.dispatchEvent(new CustomEvent('furni-editor:open', { detail: { spriteId: typeId } }));
-                                                } }>
-                                                Edit Furni
-                                            </button> }
                                         { dropdownOpen &&
                                             <div className="flex gap-[4px] w-full">
                                                 { /* Left panel: position + rotation */ }