refactor: consolidate icons and move server edit to separate page

- Create centralized icons file at src/components/icons/index.tsx
- Update admin and AppShell icons to re-export from centralized location
- Replace trial "T" button with GiftIcon in AdminServers
- Move server editing from modal to dedicated page /admin/servers/:id/edit
- Add localization keys for server edit page (mainSettings, pricingAndLimits, updateError)

src/pages/AdminServerEdit.tsx

@@ -0,0 +1,341 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { serversApi, ServerUpdateRequest } from '../api/servers';
+import { AdminBackButton } from '../components/admin';
+import { ServerIcon } from '../components/icons';
+import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
+
+// Country flags (simple emoji mapping)
+const getCountryFlag = (code: string | null): string => {
+  if (!code) return '';
+  const codeMap: Record<string, string> = {
+    RU: '🇷🇺',
+    US: '🇺🇸',
+    DE: '🇩🇪',
+    NL: '🇳🇱',
+    GB: '🇬🇧',
+    FR: '🇫🇷',
+    FI: '🇫🇮',
+    SE: '🇸🇪',
+    PL: '🇵🇱',
+    CZ: '🇨🇿',
+    AT: '🇦🇹',
+    CH: '🇨🇭',
+    UA: '🇺🇦',
+    KZ: '🇰🇿',
+    JP: '🇯🇵',
+    KR: '🇰🇷',
+    SG: '🇸🇬',
+    HK: '🇭🇰',
+    CA: '🇨🇦',
+    AU: '🇦🇺',
+    BR: '🇧🇷',
+    IN: '🇮🇳',
+    TR: '🇹🇷',
+    IL: '🇮🇱',
+    AE: '🇦🇪',
+  };
+  return codeMap[code.toUpperCase()] || code;
+};
+
+export default function AdminServerEdit() {
+  const { t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const serverId = parseInt(id || '0');
+
+  const {
+    data: server,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ['admin-server', serverId],
+    queryFn: () => serversApi.getServer(serverId),
+    enabled: serverId > 0,
+  });
+
+  const [displayName, setDisplayName] = useState('');
+  const [description, setDescription] = useState('');
+  const [countryCode, setCountryCode] = useState('');
+  const [priceKopeks, setPriceKopeks] = useState<number | ''>(0);
+  const [maxUsers, setMaxUsers] = useState<number | null>(null);
+  const [sortOrder, setSortOrder] = useState<number | ''>(0);
+
+  useEffect(() => {
+    if (server) {
+      setDisplayName(server.display_name);
+      setDescription(server.description || '');
+      setCountryCode(server.country_code || '');
+      setPriceKopeks(server.price_kopeks);
+      setMaxUsers(server.max_users);
+      setSortOrder(server.sort_order);
+    }
+  }, [server]);
+
+  const updateMutation = useMutation({
+    mutationFn: (data: ServerUpdateRequest) => serversApi.updateServer(serverId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-servers'] });
+      queryClient.invalidateQueries({ queryKey: ['admin-server', serverId] });
+      navigate('/admin/servers');
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const data: ServerUpdateRequest = {
+      display_name: displayName,
+      description: description || undefined,
+      country_code: countryCode || undefined,
+      price_kopeks: toNumber(priceKopeks),
+      max_users: maxUsers || undefined,
+      sort_order: toNumber(sortOrder),
+    };
+    updateMutation.mutate(data);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (error || !server) {
+    return (
+      <div className="animate-fade-in">
+        <div className="mb-6 flex items-center gap-3">
+          <AdminBackButton to="/admin/servers" />
+          <h1 className="text-xl font-semibold text-dark-100">{t('admin.servers.edit')}</h1>
+        </div>
+        <div className="rounded-xl border border-error-500/30 bg-error-500/10 p-6 text-center">
+          <p className="text-error-400">{t('admin.servers.loadError')}</p>
+          <button
+            onClick={() => navigate('/admin/servers')}
+            className="mt-4 text-sm text-dark-400 hover:text-dark-200"
+          >
+            {t('common.back')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="animate-fade-in">
+      {/* Header */}
+      <div className="mb-6 flex items-center gap-3">
+        <AdminBackButton to="/admin/servers" />
+        <div className="flex items-center gap-2">
+          <span className="text-2xl">{getCountryFlag(server.country_code)}</span>
+          <div className="rounded-lg bg-accent-500/20 p-2 text-accent-400">
+            <ServerIcon />
+          </div>
+        </div>
+        <div>
+          <h1 className="text-xl font-semibold text-dark-100">{t('admin.servers.edit')}</h1>
+          <p className="text-sm text-dark-400">{server.display_name}</p>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Main Settings */}
+        <div className="card">
+          <h3 className="mb-4 text-lg font-semibold text-dark-100">
+            {t('admin.servers.mainSettings')}
+          </h3>
+
+          {/* Original Name (readonly) */}
+          <div className="mb-4">
+            <label className="mb-2 block text-sm font-medium text-dark-100">
+              {t('admin.servers.originalName')}
+            </label>
+            <div className="rounded-lg border border-dark-600 bg-dark-700/50 px-3 py-2 text-dark-400">
+              {server.original_name || server.squad_uuid}
+            </div>
+          </div>
+
+          {/* Display Name */}
+          <div className="mb-4">
+            <label className="mb-2 block text-sm font-medium text-dark-100">
+              {t('admin.servers.displayName')}
+            </label>
+            <input
+              type="text"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              className="input"
+              placeholder={t('admin.servers.displayNamePlaceholder')}
+            />
+          </div>
+
+          {/* Description */}
+          <div className="mb-4">
+            <label className="mb-2 block text-sm font-medium text-dark-100">
+              {t('admin.servers.description')}
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="input resize-none"
+              rows={2}
+              placeholder={t('admin.servers.descriptionPlaceholder')}
+            />
+          </div>
+
+          {/* Country Code */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-dark-100">
+              {t('admin.servers.countryCode')}
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={countryCode}
+                onChange={(e) => setCountryCode(e.target.value.toUpperCase().slice(0, 2))}
+                className="input w-32"
+                placeholder="RU"
+                maxLength={2}
+              />
+              {countryCode && <span className="text-xl">{getCountryFlag(countryCode)}</span>}
+            </div>
+          </div>
+        </div>
+
+        {/* Pricing & Limits */}
+        <div className="card">
+          <h3 className="mb-4 text-lg font-semibold text-dark-100">
+            {t('admin.servers.pricingAndLimits')}
+          </h3>
+
+          {/* Price */}
+          <div className="mb-4">
+            <label className="mb-2 block text-sm font-medium text-dark-100">
+              {t('admin.servers.price')}
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                type="number"
+                value={priceKopeks === '' ? '' : priceKopeks / 100}
+                onChange={(e) => {
+                  const val = e.target.value;
+                  if (val === '') {
+                    setPriceKopeks('');
+                  } else {
+                    setPriceKopeks(Math.max(0, parseFloat(val) || 0) * 100);
+                  }
+                }}
+                className="input w-32"
+                min={0}
+                step={1}
+              />
+              <span className="text-dark-400">₽</span>
+            </div>
+            <p className="mt-1 text-xs text-dark-500">{t('admin.servers.priceHint')}</p>
+          </div>
+
+          {/* Max Users */}
+          <div className="mb-4">
+            <label className="mb-2 block text-sm font-medium text-dark-100">
+              {t('admin.servers.maxUsers')}
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                type="number"
+                value={maxUsers || ''}
+                onChange={(e) =>
+                  setMaxUsers(e.target.value ? Math.max(0, parseInt(e.target.value)) : null)
+                }
+                className="input w-32"
+                min={0}
+                placeholder={t('admin.servers.unlimited')}
+              />
+              {!maxUsers && (
+                <span className="text-sm text-dark-400">{t('admin.servers.unlimited')}</span>
+              )}
+            </div>
+          </div>
+
+          {/* Sort Order */}
+          <div>
+            <label className="mb-2 block text-sm font-medium text-dark-100">
+              {t('admin.servers.sortOrder')}
+            </label>
+            <input
+              type="number"
+              value={sortOrder}
+              onChange={createNumberInputHandler(setSortOrder)}
+              className="input w-32"
+            />
+          </div>
+        </div>
+
+        {/* Statistics */}
+        <div className="card">
+          <h3 className="mb-4 text-lg font-semibold text-dark-100">{t('admin.servers.stats')}</h3>
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+            <div className="rounded-lg bg-dark-700/50 p-3">
+              <div className="text-2xl font-bold text-dark-100">{server.current_users}</div>
+              <div className="text-sm text-dark-400">{t('admin.servers.currentUsers')}</div>
+            </div>
+            <div className="rounded-lg bg-dark-700/50 p-3">
+              <div className="text-2xl font-bold text-dark-100">{server.active_subscriptions}</div>
+              <div className="text-sm text-dark-400">{t('admin.servers.activeSubscriptions')}</div>
+            </div>
+          </div>
+          {server.tariffs_using.length > 0 && (
+            <div className="mt-4">
+              <span className="text-sm text-dark-400">{t('admin.servers.usedByTariffs')}:</span>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {server.tariffs_using.map((tariff) => (
+                  <span
+                    key={tariff}
+                    className="rounded-lg bg-dark-700 px-3 py-1 text-sm text-dark-300"
+                  >
+                    {tariff}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Buttons */}
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={() => navigate('/admin/servers')}
+            className="btn-secondary"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            type="submit"
+            disabled={!displayName || updateMutation.isPending}
+            className="btn-primary"
+          >
+            {updateMutation.isPending ? (
+              <span className="flex items-center gap-2">
+                <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                {t('common.saving')}
+              </span>
+            ) : (
+              t('common.save')
+            )}
+          </button>
+        </div>
+
+        {updateMutation.isError && (
+          <div className="rounded-lg border border-error-500/30 bg-error-500/10 p-3 text-sm text-error-400">
+            {t('admin.servers.updateError')}
+          </div>
+        )}
+      </form>
+    </div>
+  );
+}

src/pages/AdminServers.tsx

@@ -1,53 +1,9 @@
-import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { serversApi, ServerListItem, ServerDetail, ServerUpdateRequest } from '../api/servers';
+import { serversApi, ServerListItem } from '../api/servers';
 import { AdminBackButton } from '../components/admin';
-import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
-
-// Icons
-
-const SyncIcon = () => (
-  <svg className="h-5 w-5" 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>
-);
-
-const EditIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-    />
-  </svg>
-);
-
-const CheckIcon = () => (
-  <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 12.75l6 6 9-13.5" />
-  </svg>
-);
-
-const XIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-  </svg>
-);
-
-const UsersIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
-    />
-  </svg>
-);
+import { SyncIcon, EditIcon, CheckIcon, XIcon, UsersIcon, GiftIcon } from '../components/icons';
 
 // Country flags (simple emoji mapping)
 const getCountryFlag = (code: string | null): string => {
@@ -82,224 +38,11 @@ const getCountryFlag = (code: string | null): string => {
   return codeMap[code.toUpperCase()] || code;
 };
 
-interface ServerModalProps {
-  server: ServerDetail;
-  onSave: (data: ServerUpdateRequest) => void;
-  onClose: () => void;
-  isLoading?: boolean;
-}
-
-function ServerModal({ server, onSave, onClose, isLoading }: ServerModalProps) {
-  const { t } = useTranslation();
-
-  const [displayName, setDisplayName] = useState(server.display_name);
-  const [description, setDescription] = useState(server.description || '');
-  const [countryCode, setCountryCode] = useState(server.country_code || '');
-  const [priceKopeks, setPriceKopeks] = useState<number | ''>(server.price_kopeks);
-  const [maxUsers, setMaxUsers] = useState<number | null>(server.max_users);
-  const [sortOrder, setSortOrder] = useState<number | ''>(server.sort_order);
-
-  const handleSubmit = () => {
-    const data: ServerUpdateRequest = {
-      display_name: displayName,
-      description: description || undefined,
-      country_code: countryCode || undefined,
-      price_kopeks: toNumber(priceKopeks),
-      max_users: maxUsers || undefined,
-      sort_order: toNumber(sortOrder),
-    };
-    onSave(data);
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-xl bg-dark-800">
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-dark-700 p-4">
-          <div className="flex items-center gap-2">
-            <span className="text-xl">{getCountryFlag(server.country_code)}</span>
-            <h2 className="text-lg font-semibold text-dark-100">{t('admin.servers.edit')}</h2>
-          </div>
-          <button onClick={onClose} className="rounded-lg p-1 transition-colors hover:bg-dark-700">
-            <XIcon />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 space-y-4 overflow-y-auto p-4">
-          {/* Original Name (readonly) */}
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.servers.originalName')}
-            </label>
-            <div className="rounded-lg border border-dark-600 bg-dark-700/50 px-3 py-2 text-dark-400">
-              {server.original_name || server.squad_uuid}
-            </div>
-          </div>
-
-          {/* Display Name */}
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.servers.displayName')}
-            </label>
-            <input
-              type="text"
-              value={displayName}
-              onChange={(e) => setDisplayName(e.target.value)}
-              className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-              placeholder={t('admin.servers.displayNamePlaceholder')}
-            />
-          </div>
-
-          {/* Description */}
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.servers.description')}
-            </label>
-            <textarea
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              className="w-full resize-none rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-              rows={2}
-              placeholder={t('admin.servers.descriptionPlaceholder')}
-            />
-          </div>
-
-          {/* Country Code */}
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.servers.countryCode')}
-            </label>
-            <input
-              type="text"
-              value={countryCode}
-              onChange={(e) => setCountryCode(e.target.value.toUpperCase().slice(0, 2))}
-              className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-              placeholder="RU"
-              maxLength={2}
-            />
-            {countryCode && <span className="ml-2 text-xl">{getCountryFlag(countryCode)}</span>}
-          </div>
-
-          {/* Price */}
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">{t('admin.servers.price')}</label>
-            <div className="flex items-center gap-2">
-              <input
-                type="number"
-                value={priceKopeks === '' ? '' : priceKopeks / 100}
-                onChange={(e) => {
-                  const val = e.target.value;
-                  if (val === '') {
-                    setPriceKopeks('');
-                  } else {
-                    setPriceKopeks(Math.max(0, parseFloat(val) || 0) * 100);
-                  }
-                }}
-                className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                min={0}
-                step={1}
-              />
-              <span className="text-dark-400">₽</span>
-            </div>
-            <p className="mt-1 text-xs text-dark-500">{t('admin.servers.priceHint')}</p>
-          </div>
-
-          {/* Max Users */}
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.servers.maxUsers')}
-            </label>
-            <div className="flex items-center gap-2">
-              <input
-                type="number"
-                value={maxUsers || ''}
-                onChange={(e) =>
-                  setMaxUsers(e.target.value ? Math.max(0, parseInt(e.target.value)) : null)
-                }
-                className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                min={0}
-                placeholder={t('admin.servers.unlimited')}
-              />
-              {!maxUsers && (
-                <span className="text-sm text-dark-400">{t('admin.servers.unlimited')}</span>
-              )}
-            </div>
-          </div>
-
-          {/* Sort Order */}
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.servers.sortOrder')}
-            </label>
-            <input
-              type="number"
-              value={sortOrder}
-              onChange={createNumberInputHandler(setSortOrder)}
-              className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-            />
-          </div>
-
-          {/* Stats */}
-          <div className="border-t border-dark-700 pt-4">
-            <h4 className="mb-2 text-sm font-medium text-dark-300">{t('admin.servers.stats')}</h4>
-            <div className="grid grid-cols-2 gap-2 text-sm">
-              <div className="rounded-lg bg-dark-700/50 p-2">
-                <span className="text-dark-400">{t('admin.servers.currentUsers')}:</span>
-                <span className="ml-2 text-dark-200">{server.current_users}</span>
-              </div>
-              <div className="rounded-lg bg-dark-700/50 p-2">
-                <span className="text-dark-400">{t('admin.servers.activeSubscriptions')}:</span>
-                <span className="ml-2 text-dark-200">{server.active_subscriptions}</span>
-              </div>
-            </div>
-            {server.tariffs_using.length > 0 && (
-              <div className="mt-2 rounded-lg bg-dark-700/50 p-2">
-                <span className="text-sm text-dark-400">{t('admin.servers.usedByTariffs')}:</span>
-                <div className="mt-1 flex flex-wrap gap-1">
-                  {server.tariffs_using.map((tariff) => (
-                    <span
-                      key={tariff}
-                      className="rounded bg-dark-600 px-2 py-0.5 text-xs text-dark-300"
-                    >
-                      {tariff}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="flex justify-end gap-3 border-t border-dark-700 p-4">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
-          >
-            {t('common.cancel')}
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={!displayName || isLoading}
-            className="rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {isLoading ? t('common.loading') : t('common.save')}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 export default function AdminServers() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
 
-  const [editingServer, setEditingServer] = useState<ServerDetail | null>(null);
-  const [loadingServerId, setLoadingServerId] = useState<number | null>(null);
-  const [loadError, setLoadError] = useState<string | null>(null);
-
   // Queries
   const { data: serversData, isLoading } = useQuery({
     queryKey: ['admin-servers'],
@@ -307,15 +50,6 @@ export default function AdminServers() {
   });
 
   // Mutations
-  const updateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: number; data: ServerUpdateRequest }) =>
-      serversApi.updateServer(id, data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-servers'] });
-      setEditingServer(null);
-    },
-  });
-
   const toggleMutation = useMutation({
     mutationFn: serversApi.toggleServer,
     onSuccess: () => {
@@ -338,27 +72,6 @@ export default function AdminServers() {
     },
   });
 
-  const handleEdit = async (serverId: number) => {
-    setLoadingServerId(serverId);
-    setLoadError(null);
-    try {
-      const detail = await serversApi.getServer(serverId);
-      setEditingServer(detail);
-    } catch (error: unknown) {
-      console.error('Failed to load server:', error);
-      const errorMessage = error instanceof Error ? error.message : t('admin.servers.loadError');
-      setLoadError(errorMessage);
-    } finally {
-      setLoadingServerId(null);
-    }
-  };
-
-  const handleSave = (data: ServerUpdateRequest) => {
-    if (editingServer) {
-      updateMutation.mutate({ id: editingServer.id, data });
-    }
-  };
-
   const servers = serversData?.servers || [];
 
   return (
@@ -429,7 +142,7 @@ export default function AdminServers() {
                   </div>
                   <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-dark-400">
                     <span className="flex items-center gap-1">
-                      <UsersIcon />
+                      <UsersIcon className="h-4 w-4" />
                       {server.current_users}
                       {server.max_users ? ` / ${server.max_users}` : ''}
                     </span>
@@ -466,21 +179,16 @@ export default function AdminServers() {
                     }`}
                     title={t('admin.servers.toggleTrial')}
                   >
-                    T
+                    <GiftIcon />
                   </button>
 
                   {/* Edit */}
                   <button
-                    onClick={() => handleEdit(server.id)}
-                    disabled={loadingServerId === server.id}
-                    className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100 disabled:opacity-50"
+                    onClick={() => navigate(`/admin/servers/${server.id}/edit`)}
+                    className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
                     title={t('admin.servers.edit')}
                   >
-                    {loadingServerId === server.id ? (
-                      <div className="h-4 w-4 animate-spin rounded-full border-2 border-dark-300 border-t-transparent" />
-                    ) : (
-                      <EditIcon />
-                    )}
+                    <EditIcon />
                   </button>
                 </div>
               </div>
@@ -488,26 +196,6 @@ export default function AdminServers() {
           ))}
         </div>
       )}
-
-      {/* Error Toast */}
-      {loadError && (
-        <div className="fixed bottom-4 right-4 z-50 flex items-center gap-3 rounded-lg bg-error-500/90 px-4 py-3 text-white shadow-lg">
-          <span>{loadError}</span>
-          <button onClick={() => setLoadError(null)} className="rounded p-1 hover:bg-white/20">
-            <XIcon />
-          </button>
-        </div>
-      )}
-
-      {/* Edit Modal */}
-      {editingServer && (
-        <ServerModal
-          server={editingServer}
-          onSave={handleSave}
-          onClose={() => setEditingServer(null)}
-          isLoading={updateMutation.isPending}
-        />
-      )}
     </div>
   );
 }