refactor: move squad viewing to separate page and add RemnaWave icon

- Create AdminRemnawaveSquadDetail page for viewing squad details
- Remove squad detail modal from AdminRemnawave
- Add RemnawaveIcon from official RemnaWave branding
- Add GlobeIcon, PlayIcon, StopIcon, ArrowPathIcon to centralized icons
- Update RefreshIcon to support spinning prop
- Add route /admin/remnawave/squads/:uuid

src/components/icons/index.tsx

@@ -194,9 +194,12 @@ export const DownloadIcon = ({ className }: IconProps) => (
   </svg>
 );
 
-export const RefreshIcon = ({ className }: IconProps) => (
+export const RefreshIcon = ({
+  className,
+  spinning = false,
+}: IconProps & { spinning?: boolean }) => (
   <svg
-    className={cn('h-4 w-4', className)}
+    className={cn('h-4 w-4', spinning && 'animate-spin', className)}
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -575,6 +578,22 @@ export const CampaignIcon = ({ className }: IconProps) => (
   </svg>
 );
 
+export const RemnawaveIcon = ({ className }: IconProps) => (
+  <svg
+    className={cn('h-5 w-5', className)}
+    fill="none"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      clipRule="evenodd"
+      d="M8 1a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-1.5 0V1.75A.75.75 0 0 1 8 1Zm6 2a.75.75 0 0 1 .75.75v8.5a.75.75 0 0 1-1.5 0v-8.5A.75.75 0 0 1 14 3ZM5 4a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0v-6.5A.75.75 0 0 1 5 4Zm6 1a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 11 5ZM2 6a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5A.75.75 0 0 1 2 6Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
 export const ChartIcon = ({ className }: IconProps) => (
   <svg
     className={cn('h-4 w-4', className)}
@@ -590,3 +609,67 @@ export const ChartIcon = ({ className }: IconProps) => (
     />
   </svg>
 );
+
+export const GlobeIcon = ({ className }: IconProps) => (
+  <svg
+    className={cn('h-5 w-5', className)}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
+    />
+  </svg>
+);
+
+export const PlayIcon = ({ className }: IconProps) => (
+  <svg
+    className={cn('h-4 w-4', className)}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"
+    />
+  </svg>
+);
+
+export const StopIcon = ({ className }: IconProps) => (
+  <svg
+    className={cn('h-4 w-4', className)}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
+    />
+  </svg>
+);
+
+export const ArrowPathIcon = ({ className }: IconProps) => (
+  <svg
+    className={cn('h-4 w-4', className)}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+    />
+  </svg>
+);