feat(cabinet): migrate all icons to the panel's Phosphor set

Replace the cabinet's hand-written heroicons-style SVG icon components with
the Remnawave panel's own icon family — Phosphor via react-icons/pi (Duotone).
All icons now live in a single central barrel (src/components/icons:
index + extended-icons + editor-icons, 144 icons); every feature file imports
from it instead of redefining inline SVGs (~440 icon defs removed).

- Add react-icons dependency
- Desktop nav (AppShell) now uses the central Phosphor icons, removing a
  stroke-vs-duotone inconsistency the partial migration introduced
- Icons with custom props (SortIcon's direction, expandable chevrons) kept as
  thin Phosphor wrappers; the RemnawaveIcon brand logo and animated SVGs
  (checkmarks, spinners) are intentionally left as-is
- Restore the original per-call-site icon sizes wherever the centralized
  default differed (211 call sites)

src/pages/AdminInfoPageEditor.tsx

@@ -18,102 +18,35 @@ import { AdminBackButton } from '../components/admin';
 import { Toggle } from '../components/admin/Toggle';
 import { useHapticFeedback } from '../platform/hooks/useHaptic';
 import { cn } from '../lib/utils';
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikeIcon,
+  ListBulletIcon,
+  ListOrderedIcon,
+  QuoteIcon,
+  CodeBlockIcon,
+  ImageIcon,
+  LinkIcon,
+  AlignLeftIcon,
+  AlignCenterIcon,
+  HighlightIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  TrashSmallIcon,
+  PlusSmallIcon,
+} from '@/components/icons';
 import type { InfoPageType, FaqItem, ReplacesTab } from '../api/infoPages';
 
 const AVAILABLE_LOCALES = ['ru', 'en', 'zh', 'fa'] as const;
 type LocaleCode = (typeof AVAILABLE_LOCALES)[number];
 
 // --- Icons ---
-const BoldIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" />
-  </svg>
-);
-
-const ItalicIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" />
-  </svg>
-);
-
-const UnderlineIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" />
-  </svg>
-);
-
-const StrikeIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" />
-  </svg>
-);
-
 const H1Icon = () => <span className="text-xs font-bold">H1</span>;
 const H2Icon = () => <span className="text-xs font-bold">H2</span>;
 const H3Icon = () => <span className="text-xs font-bold">H3</span>;
 
-const ListBulletIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
-  </svg>
-);
-
-const ListOrderedIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" />
-  </svg>
-);
-
-const QuoteIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
-  </svg>
-);
-
-const CodeBlockIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
-  </svg>
-);
-
-const ImageIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-    />
-  </svg>
-);
-
-const LinkIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
-    />
-  </svg>
-);
-
-const AlignLeftIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" />
-  </svg>
-);
-
-const AlignCenterIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" />
-  </svg>
-);
-
-const HighlightIcon = () => (
-  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M16.56 3.44a1.5 1.5 0 012.12 0l1.88 1.88a1.5 1.5 0 010 2.12L8.44 19.56 3 21l1.44-5.44L16.56 3.44z" />
-  </svg>
-);
-
 // --- Toolbar Button ---
 interface ToolbarButtonProps {
   onClick: () => void;
@@ -206,35 +139,6 @@ function generateSlug(title: string): string {
     .substring(0, 100);
 }
 
-// --- FAQ Q&A Item Icons ---
-const ChevronUpIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
-  </svg>
-);
-
-const ChevronDownIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-  </svg>
-);
-
-const TrashSmallIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-    />
-  </svg>
-);
-
-const PlusSmallIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-  </svg>
-);
-
 // --- FAQ Answer Rich Editor ---
 
 const FAQ_EDITOR_EXTENSIONS = [
@@ -415,28 +319,28 @@ function FaqAnswerEditor({ value, onChange }: { value: string; onChange: (html:
           isActive={editor.isActive('bold')}
           title={t('news.admin.toolbar.bold')}
         >
-          <BoldIcon />
+          <BoldIcon className="h-4 w-4" />
         </ToolbarButton>
         <ToolbarButton
           onClick={() => editor.chain().focus().toggleItalic().run()}
           isActive={editor.isActive('italic')}
           title={t('news.admin.toolbar.italic')}
         >
-          <ItalicIcon />
+          <ItalicIcon className="h-4 w-4" />
         </ToolbarButton>
         <ToolbarButton
           onClick={() => editor.chain().focus().toggleUnderline().run()}
           isActive={editor.isActive('underline')}
           title={t('news.admin.toolbar.underline')}
         >
-          <UnderlineIcon />
+          <UnderlineIcon className="h-4 w-4" />
         </ToolbarButton>
         <ToolbarButton
           onClick={() => editor.chain().focus().toggleStrike().run()}
           isActive={editor.isActive('strike')}
           title={t('news.admin.toolbar.strikethrough')}
         >
-          <StrikeIcon />
+          <StrikeIcon className="h-4 w-4" />
         </ToolbarButton>
         <div className="mx-0.5 h-4 w-px bg-dark-700" />
         <ToolbarButton
@@ -458,14 +362,14 @@ function FaqAnswerEditor({ value, onChange }: { value: string; onChange: (html:
           isActive={editor.isActive('orderedList')}
           title={t('news.admin.toolbar.orderedList')}
         >
-          <ListOrderedIcon />
+          <ListOrderedIcon className="h-4 w-4" />
         </ToolbarButton>
         <ToolbarButton
           onClick={() => editor.chain().focus().toggleBlockquote().run()}
           isActive={editor.isActive('blockquote')}
           title={t('news.admin.toolbar.blockquote')}
         >
-          <QuoteIcon />
+          <QuoteIcon className="h-4 w-4" />
         </ToolbarButton>
         <div className="mx-0.5 h-4 w-px bg-dark-700" />
         <ToolbarButton
@@ -473,10 +377,10 @@ function FaqAnswerEditor({ value, onChange }: { value: string; onChange: (html:
           isActive={editor.isActive('highlight')}
           title={t('news.admin.toolbar.highlight')}
         >
-          <HighlightIcon />
+          <HighlightIcon className="h-4 w-4" />
         </ToolbarButton>
         <ToolbarButton onClick={addLink} title={t('news.admin.toolbar.link')}>
-          <LinkIcon />
+          <LinkIcon className="h-4 w-4" />
         </ToolbarButton>
         <ToolbarButton
           onClick={() => mediaRef.current?.click()}
@@ -486,7 +390,7 @@ function FaqAnswerEditor({ value, onChange }: { value: string; onChange: (html:
           {isUploading ? (
             <div className="h-4 w-4 animate-spin rounded-full border-2 border-accent-400 border-t-transparent" />
           ) : (
-            <ImageIcon />
+            <ImageIcon className="h-4 w-4" />
           )}
         </ToolbarButton>
       </div>
@@ -660,7 +564,7 @@ function FaqBuilder({ items, onChange, locale, localeLabel }: FaqBuilderProps) {
                 className="min-h-[44px] min-w-[44px] rounded-lg p-2 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200 disabled:cursor-not-allowed disabled:opacity-30"
                 title={t('admin.infoPages.faq.moveUp')}
               >
-                <ChevronUpIcon />
+                <ChevronUpIcon className="h-4 w-4" />
               </button>
               <button
                 type="button"
@@ -669,7 +573,7 @@ function FaqBuilder({ items, onChange, locale, localeLabel }: FaqBuilderProps) {
                 className="min-h-[44px] min-w-[44px] rounded-lg p-2 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200 disabled:cursor-not-allowed disabled:opacity-30"
                 title={t('admin.infoPages.faq.moveDown')}
               >
-                <ChevronDownIcon />
+                <ChevronDownIcon className="h-4 w-4" />
               </button>
               <button
                 type="button"
@@ -713,7 +617,7 @@ function FaqBuilder({ items, onChange, locale, localeLabel }: FaqBuilderProps) {
         onClick={handleAdd}
         className="flex min-h-[44px] w-full items-center justify-center gap-2 rounded-xl border border-dashed border-dark-600 bg-dark-800/30 py-3 text-sm font-medium text-dark-300 transition-colors hover:border-dark-500 hover:bg-dark-800/50 hover:text-dark-100"
       >
-        <PlusSmallIcon />
+        <PlusSmallIcon className="h-5 w-5" />
         {t('admin.infoPages.faq.addQuestion')}
       </button>
     </div>
@@ -1333,28 +1237,28 @@ export default function AdminInfoPageEditor() {
                     isActive={editor.isActive('bold')}
                     title={t('news.admin.toolbar.bold')}
                   >
-                    <BoldIcon />
+                    <BoldIcon className="h-4 w-4" />
                   </ToolbarButton>
                   <ToolbarButton
                     onClick={() => editor.chain().focus().toggleItalic().run()}
                     isActive={editor.isActive('italic')}
                     title={t('news.admin.toolbar.italic')}
                   >
-                    <ItalicIcon />
+                    <ItalicIcon className="h-4 w-4" />
                   </ToolbarButton>
                   <ToolbarButton
                     onClick={() => editor.chain().focus().toggleUnderline().run()}
                     isActive={editor.isActive('underline')}
                     title={t('news.admin.toolbar.underline')}
                   >
-                    <UnderlineIcon />
+                    <UnderlineIcon className="h-4 w-4" />
                   </ToolbarButton>
                   <ToolbarButton
                     onClick={() => editor.chain().focus().toggleStrike().run()}
                     isActive={editor.isActive('strike')}
                     title={t('news.admin.toolbar.strikethrough')}
                   >
-                    <StrikeIcon />
+                    <StrikeIcon className="h-4 w-4" />
                   </ToolbarButton>
 
                   <div className="mx-1 h-5 w-px bg-dark-700" />
@@ -1395,21 +1299,21 @@ export default function AdminInfoPageEditor() {
                     isActive={editor.isActive('orderedList')}
                     title={t('news.admin.toolbar.orderedList')}
                   >
-                    <ListOrderedIcon />
+                    <ListOrderedIcon className="h-4 w-4" />
                   </ToolbarButton>
                   <ToolbarButton
                     onClick={() => editor.chain().focus().toggleBlockquote().run()}
                     isActive={editor.isActive('blockquote')}
                     title={t('news.admin.toolbar.blockquote')}
                   >
-                    <QuoteIcon />
+                    <QuoteIcon className="h-4 w-4" />
                   </ToolbarButton>
                   <ToolbarButton
                     onClick={() => editor.chain().focus().toggleCodeBlock().run()}
                     isActive={editor.isActive('codeBlock')}
                     title={t('news.admin.toolbar.codeBlock')}
                   >
-                    <CodeBlockIcon />
+                    <CodeBlockIcon className="h-4 w-4" />
                   </ToolbarButton>
 
                   <div className="mx-1 h-5 w-px bg-dark-700" />
@@ -1419,14 +1323,14 @@ export default function AdminInfoPageEditor() {
                     isActive={editor.isActive({ textAlign: 'left' })}
                     title={t('news.admin.toolbar.alignLeft')}
                   >
-                    <AlignLeftIcon />
+                    <AlignLeftIcon className="h-4 w-4" />
                   </ToolbarButton>
                   <ToolbarButton
                     onClick={() => editor.chain().focus().setTextAlign('center').run()}
                     isActive={editor.isActive({ textAlign: 'center' })}
                     title={t('news.admin.toolbar.alignCenter')}
                   >
-                    <AlignCenterIcon />
+                    <AlignCenterIcon className="h-4 w-4" />
                   </ToolbarButton>
 
                   <div className="mx-1 h-5 w-px bg-dark-700" />
@@ -1436,10 +1340,10 @@ export default function AdminInfoPageEditor() {
                     isActive={editor.isActive('highlight')}
                     title={t('news.admin.toolbar.highlight')}
                   >
-                    <HighlightIcon />
+                    <HighlightIcon className="h-4 w-4" />
                   </ToolbarButton>
                   <ToolbarButton onClick={addLink} title={t('news.admin.toolbar.link')}>
-                    <LinkIcon />
+                    <LinkIcon className="h-4 w-4" />
                   </ToolbarButton>
                   <ToolbarButton
                     onClick={() => mediaInputRef.current?.click()}
@@ -1449,7 +1353,7 @@ export default function AdminInfoPageEditor() {
                     {isUploading ? (
                       <div className="h-4 w-4 animate-spin rounded-full border-2 border-accent-400 border-t-transparent" />
                     ) : (
-                      <ImageIcon />
+                      <ImageIcon className="h-4 w-4" />
                     )}
                   </ToolbarButton>
                 </div>