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/AdminNewsCreate.tsx

@@ -19,109 +19,25 @@ import { Toggle } from '../components/admin/Toggle';
 import { useHapticFeedback } from '../platform/hooks/useHaptic';
 import { cn } from '../lib/utils';
 import type { NewsCategory, NewsTag, NewsCreateRequest } from '../types/news';
-
-// --- 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>
-);
-
-const UploadIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
-    />
-  </svg>
-);
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikeIcon,
+  H1Icon,
+  H2Icon,
+  H3Icon,
+  ListBulletIcon,
+  ListOrderedIcon,
+  QuoteIcon,
+  CodeBlockIcon,
+  ImageIcon,
+  LinkIcon,
+  AlignLeftIcon,
+  AlignCenterIcon,
+  HighlightIcon,
+  UploadIcon,
+} from '@/components/icons';
 
 // --- Toolbar Button ---
 interface ToolbarButtonProps {
@@ -765,7 +681,7 @@ export default function AdminNewsCreate() {
               {isFeaturedImageUploading ? (
                 <div className="h-4 w-4 animate-spin rounded-full border-2 border-accent-400 border-t-transparent" />
               ) : (
-                <UploadIcon />
+                <UploadIcon className="h-4 w-4" />
               )}
               <span className="hidden sm:inline">{t('news.admin.uploadFeaturedImage')}</span>
             </button>
@@ -848,28 +764,28 @@ export default function AdminNewsCreate() {
                   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" />
@@ -879,7 +795,7 @@ export default function AdminNewsCreate() {
                   isActive={editor.isActive('heading', { level: 1 })}
                   title={t('news.admin.toolbar.heading1')}
                 >
-                  <H1Icon />
+                  <H1Icon className="h-4 w-4" />
                 </ToolbarButton>
                 <ToolbarButton
                   onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
@@ -910,21 +826,21 @@ export default function AdminNewsCreate() {
                   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" />
@@ -934,14 +850,14 @@ export default function AdminNewsCreate() {
                   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" />
@@ -951,10 +867,10 @@ export default function AdminNewsCreate() {
                   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()}
@@ -964,7 +880,7 @@ export default function AdminNewsCreate() {
                   {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>