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/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>
   );
 }