Add instructions management functionality and update related components

- Introduced new endpoints for managing instruction intros and tabs, allowing admins to create, update, and delete instructional content.
- Enhanced the FactoryResetCommandHandler to include the seeding of instruction data during a factory reset.
- Updated the database schema to include InstructionIntro and InstructionTab entities, with corresponding migrations.
- Improved frontend routing and components to support the new instructions section, including a dedicated page for displaying instructions and tabs.
- Enhanced API documentation to reflect the new instruction management features and their expected request/response formats.
- Added localization support for the new instructions functionality in both Russian and English.

frontend/src/routes/admin.tsx

@@ -13,6 +13,7 @@ const TABS = [
   { to: '/admin/roles', key: 'roles' },
   { to: '/admin/nodes', key: 'nodes' },
   { to: '/admin/apps', key: 'apps' },
+  { to: '/admin/instructions', key: 'instructions' },
   { to: '/admin/news', key: 'news' },
   { to: '/admin/support', key: 'support' },
   { to: '/admin/audit', key: 'audit' },

frontend/src/routes/admin/instructions.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { toast } from '@/shared/ui/toast-store'
+import { Button } from '@/shared/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui/card'
+import { getInstructionIntro, listInstructionTabs } from '@/features/instructions/api'
+import { deleteInstructionTab } from '@/features/admin/instructions/api'
+import { InstructionIntroEditor } from '@/features/admin/instructions/InstructionIntroEditor'
+import { InstructionTabFormDialog } from '@/features/admin/instructions/InstructionTabFormDialog'
+import type { InstructionTabDto } from '@/shared/api/types'
+
+export const Route = createFileRoute('/admin/instructions')({ component: AdminInstructionsPage })
+
+function AdminInstructionsPage() {
+  const { t } = useTranslation()
+  const queryClient = useQueryClient()
+  const [editingTab, setEditingTab] = useState<InstructionTabDto | null>(null)
+
+  const introQuery = useQuery({ queryKey: ['instruction-intro'], queryFn: getInstructionIntro })
+  const tabsQuery = useQuery({ queryKey: ['instruction-tabs'], queryFn: listInstructionTabs })
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteInstructionTab,
+    onSuccess: async () => {
+      toast.success(t('admin.instructions.tabDeleted'))
+      await queryClient.invalidateQueries({ queryKey: ['instruction-tabs'] })
+    },
+    onError: () => toast.error(t('auth.genericError')),
+  })
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t('admin.instructions.introTitle')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {introQuery.isLoading && <p className="text-sm text-muted-foreground">…</p>}
+          {introQuery.data && <InstructionIntroEditor intro={introQuery.data} />}
+        </CardContent>
+      </Card>
+
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold tracking-tight">{t('admin.instructions.tabsTitle')}</h2>
+          <InstructionTabFormDialog />
+        </div>
+
+        {tabsQuery.isLoading && <p className="text-sm text-muted-foreground">…</p>}
+
+        {tabsQuery.isError && (
+          <div className="flex items-center gap-2">
+            <p className="text-sm text-muted-foreground">{t('auth.genericError')}</p>
+            <Button variant="outline" size="sm" onClick={() => void tabsQuery.refetch()}>
+              {t('activation.retry')}
+            </Button>
+          </div>
+        )}
+
+        {tabsQuery.data?.length === 0 && <p className="text-sm text-muted-foreground">{t('admin.instructions.tabsEmpty')}</p>}
+
+        {tabsQuery.data && tabsQuery.data.length > 0 && (
+          <div className="flex flex-col gap-2">
+            {tabsQuery.data.map((tab) => (
+              <div key={tab.id} className="flex items-center justify-between rounded-md border border-border px-3 py-2 text-sm">
+                <div className="flex flex-col">
+                  <span>{tab.title}</span>
+                  <span className="text-xs text-muted-foreground">{t('admin.apps.sortOrder')}: {tab.sortOrder}</span>
+                </div>
+                <div className="flex gap-2">
+                  <Button size="sm" variant="outline" onClick={() => setEditingTab(tab)}>
+                    {t('admin.roles.edit')}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    disabled={deleteMutation.isPending}
+                    onClick={() => {
+                      if (confirm(t('admin.instructions.confirmDeleteTab'))) deleteMutation.mutate(tab.id)
+                    }}
+                  >
+                    {t('admin.roles.delete')}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {editingTab && (
+        <InstructionTabFormDialog tab={editingTab} open={!!editingTab} onOpenChange={(open) => !open && setEditingTab(null)} />
+      )}
+    </div>
+  )
+}

frontend/src/routes/instructions.tsx

@@ -1,32 +1,76 @@
+import { useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import { useRequireActivated } from '@/features/auth/guards'
 import { AppsCatalog } from '@/features/apps/AppsCatalog'
+import { getInstructionIntro, listInstructionTabs } from '@/features/instructions/api'
+import { cn } from '@/shared/lib/cn'
 
 export const Route = createFileRoute('/instructions')({ component: InstructionsPage })
 
+const APPS_TAB_ID = '__apps__'
+const MARKDOWN_CLASSES = '[&_a]:text-primary [&_a]:hover:underline [&_li]:ml-4 [&_ul]:list-disc [&_ol]:list-decimal'
+
 function InstructionsPage() {
   const { t } = useTranslation()
   const { isReady } = useRequireActivated()
+  const introQuery = useQuery({ queryKey: ['instruction-intro'], queryFn: getInstructionIntro })
+  const tabsQuery = useQuery({ queryKey: ['instruction-tabs'], queryFn: listInstructionTabs })
+  const [activeTab, setActiveTab] = useState(APPS_TAB_ID)
 
   if (!isReady) return null
 
+  const tabs = tabsQuery.data ?? []
+  const activeExtraTab = tabs.find((tab) => tab.id === activeTab)
+
   return (
     <div className="mx-auto flex w-full max-w-4xl flex-col gap-8 px-6 py-10">
       <div>
         <h1 className="text-2xl font-semibold tracking-tight">{t('instructions.title')}</h1>
-        <p className="mt-1 text-sm text-muted-foreground">{t('instructions.intro')}</p>
+        {introQuery.data?.body && (
+          <div className={cn('mt-2 flex flex-col gap-2 text-sm text-muted-foreground', MARKDOWN_CLASSES)}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{introQuery.data.body}</ReactMarkdown>
+          </div>
+        )}
       </div>
 
-      <ol className="flex flex-col gap-2 text-sm">
-        <li>1. {t('instructions.step1')}</li>
-        <li>2. {t('instructions.step2')}</li>
-        <li>3. {t('instructions.step3')}</li>
-      </ol>
+      <div className="flex flex-col gap-4">
+        <nav className="flex flex-wrap gap-1 border-b border-border">
+          <button
+            type="button"
+            onClick={() => setActiveTab(APPS_TAB_ID)}
+            className={cn(
+              'whitespace-nowrap px-3 py-2 text-sm text-muted-foreground hover:text-foreground',
+              activeTab === APPS_TAB_ID && 'border-b-2 border-primary font-medium text-foreground',
+            )}
+          >
+            {t('instructions.appsTitle')}
+          </button>
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setActiveTab(tab.id)}
+              className={cn(
+                'whitespace-nowrap px-3 py-2 text-sm text-muted-foreground hover:text-foreground',
+                activeTab === tab.id && 'border-b-2 border-primary font-medium text-foreground',
+              )}
+            >
+              {tab.title}
+            </button>
+          ))}
+        </nav>
 
-      <div>
-        <h2 className="mb-3 text-lg font-semibold tracking-tight">{t('instructions.appsTitle')}</h2>
-        <AppsCatalog />
+        {activeTab === APPS_TAB_ID ? (
+          <AppsCatalog />
+        ) : activeExtraTab ? (
+          <div className={cn('flex flex-col gap-2 text-sm', MARKDOWN_CLASSES)}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{activeExtraTab.body}</ReactMarkdown>
+          </div>
+        ) : null}
       </div>
     </div>
   )