feat: add UniversalSpotlightActionIcon and TemplatesSpotlightWidget

Author: kastov

src/features/ui/dashboard/templates/header-action-buttons/header-action-buttons.feature.tsx

@@ -23,6 +23,7 @@ import {
     useCreateSubscriptionTemplate,
     useGetSubscriptionTemplates
 } from '@shared/api/hooks'
+import { UniversalSpotlightActionIconShared } from '@shared/ui/universal-spotlight'
 import { ROUTES } from '@shared/constants'
 import { queryClient } from '@shared/api'
 
@@ -73,6 +74,8 @@ export const TemplatesHeaderActionButtonsFeature = (props: IProps) => {
 
     return (
         <Group grow preventGrowOverflow={false} wrap="wrap">
+            <UniversalSpotlightActionIconShared />
+
             <ActionIconGroup>
                 <Tooltip label={t('header-action-buttons.feature.update-templates')} withArrow>
                     <ActionIcon

src/pages/dashboard/templates/ui/components/template-base-page.component.tsx

@@ -6,6 +6,7 @@ import { motion } from 'motion/react'
 
 import { TemplatesHeaderActionButtonsFeature } from '@features/ui/dashboard/templates/header-action-buttons'
 import { TemplatesGridWidget } from '@widgets/dashboard/templates/templates-grid/templates-grid.widget'
+import { TemplatesSpotlightWidget } from '@widgets/dashboard/templates/templates-spotlight'
 import { RenameModalShared } from '@shared/ui/modals/rename-modal.shared'
 import { getCoreLogoFromType } from '@shared/ui/get-core-logo-from-type'
 import { Page, PageHeaderShared } from '@shared/ui'
@@ -35,6 +36,8 @@ export const TemplateBasePageComponent = (props: Props) => {
                 <TemplatesGridWidget templates={templates} templateTitle={title} type={type} />
             </motion.div>
 
+            <TemplatesSpotlightWidget templates={templates} />
+
             <RenameModalShared key="rename-template-modal" renameFrom="template" />
         </Page>
     )

src/widgets/dashboard/templates/templates-grid/templates-grid.widget.tsx

@@ -96,6 +96,7 @@ export function TemplatesGridWidget(props: IProps) {
             columnCount={columnCount}
             enableDnd={true}
             items={templates}
+            key={`templates-grid-widget-${type}`}
             onReorder={handleReorder}
             renderDragOverlay={(template) => (
                 <TemplatesCardWidget

src/widgets/dashboard/templates/templates-spotlight/index.ts

@@ -0,0 +1 @@
+export * from './templates-spotlight'

src/widgets/dashboard/templates/templates-spotlight/templates-spotlight.tsx

@@ -0,0 +1,40 @@
+import {
+    GetSubscriptionTemplatesCommand,
+    TSubscriptionTemplateType
+} from '@remnawave/backend-contract'
+import { generatePath, useNavigate } from 'react-router-dom'
+
+import { UniversalSpotlightContentShared } from '@shared/ui/universal-spotlight'
+import { getCoreLogoFromType } from '@shared/ui'
+import { ROUTES } from '@shared/constants'
+
+interface IProps {
+    templates: GetSubscriptionTemplatesCommand.Response['response']['templates']
+}
+
+export const TemplatesSpotlightWidget = (props: IProps) => {
+    const { templates } = props
+
+    const navigate = useNavigate()
+
+    const handleViewTemplate = (templateUuid: string, templateType: TSubscriptionTemplateType) => {
+        navigate(
+            generatePath(ROUTES.DASHBOARD.TEMPLATES.TEMPLATE_EDITOR, {
+                type: templateType,
+                uuid: templateUuid
+            })
+        )
+    }
+
+    return (
+        <UniversalSpotlightContentShared
+            actions={templates.map((template) => ({
+                label: template.name,
+                id: template.uuid,
+                leftSection: getCoreLogoFromType({ type: template.templateType }),
+
+                onClick: () => handleViewTemplate(template.uuid, template.templateType)
+            }))}
+        />
+    )
+}