fix(frontend/templates): expand featured template when clicked

Author: Viren070

packages/frontend/src/components/menu/about.tsx

@@ -205,6 +205,8 @@ AIOStreams consolidates multiple Stremio addons and debrid services - including
   const signInModal = useDisclosure(false);
   const templatesModal = useDisclosure(false);
   const setupChoiceModal = useDisclosure(false);
+  const [featuredTemplateToOpen, setFeaturedTemplateToOpen] =
+    React.useState<Template | null>(null);
   const customHtml = status?.settings?.customHtml;
   const pathname = usePathname();
   const [deepLinkUrl, setDeepLinkUrl] = React.useState<string | undefined>(
@@ -367,7 +369,10 @@ AIOStreams consolidates multiple Stremio addons and debrid services - including
                     <TemplateMiniCard
                       key={template.metadata.id}
                       template={template}
-                      onOpen={templatesModal.open}
+                      onOpen={() => {
+                        setFeaturedTemplateToOpen(template);
+                        templatesModal.open();
+                      }}
                     />
                   ))}
                 </div>
@@ -533,9 +538,16 @@ AIOStreams consolidates multiple Stremio addons and debrid services - including
       <ConfirmationDialog {...confirmClearConfig} />
       <ConfigTemplatesModal
         open={templatesModal.isOpen}
-        onOpenChange={templatesModal.toggle}
+        onOpenChange={(v) => {
+          if (v) templatesModal.open();
+          else {
+            templatesModal.close();
+            setFeaturedTemplateToOpen(null);
+          }
+        }}
         deepLinkUrl={deepLinkUrl}
         deepLinkTemplateId={deepLinkTemplateId}
+        initialExpandedTemplateId={featuredTemplateToOpen?.metadata.id}
       />
       <SetupChoiceModal
         open={setupChoiceModal.isOpen}

packages/frontend/src/components/shared/templates/index.tsx

@@ -29,6 +29,7 @@ export function ConfigTemplatesModal({
   openImportModal = false,
   deepLinkUrl,
   deepLinkTemplateId,
+  initialExpandedTemplateId,
 }: ConfigTemplatesModalProps) {
   const { setUserData, userData } = useUserData();
   const { status } = useStatus();
@@ -187,6 +188,13 @@ export function ConfigTemplatesModal({
               importer.confirmDeleteTemplate.open();
             }}
             totalTemplateCount={loader.templates.length}
+            initialExpandedTemplate={
+              initialExpandedTemplateId
+                ? (loader.templates.find(
+                    (t) => t.metadata.id === initialExpandedTemplateId
+                  ) ?? undefined)
+                : undefined
+            }
           />
         </div>
       </Modal>

packages/frontend/src/components/shared/templates/steps/browse.tsx

@@ -37,6 +37,7 @@ interface TemplateBrowseStepProps {
   onImportOpen: () => void;
   onDeleteRequest: (t: Template) => void;
   totalTemplateCount: number;
+  initialExpandedTemplate?: Template;
 }
 
 interface TemplateCardProps {
@@ -289,11 +290,21 @@ export function TemplateBrowseStep({
   onImportOpen,
   onDeleteRequest,
   totalTemplateCount,
+  initialExpandedTemplate,
 }: TemplateBrowseStepProps) {
   const [expandedTemplate, setExpandedTemplate] = useState<Template | null>(
     null
   );
 
+  // Pre-open the description modal when an initialExpandedTemplate is provided.
+  // Run when the template ID changes (new card clicked) or when it first resolves
+  // from the loader (templates load async).
+  useEffect(() => {
+    if (initialExpandedTemplate) {
+      setExpandedTemplate(initialExpandedTemplate);
+    }
+  }, [initialExpandedTemplate?.metadata.id]);
+
   return (
     <>
       <div className="space-y-3 min-w-0">

packages/frontend/src/lib/templates/types.ts

@@ -86,6 +86,8 @@ export interface ConfigTemplatesModalProps {
   deepLinkUrl?: string;
   /** If set alongside deepLinkUrl, auto-selects the template with this ID from the fetched list. */
   deepLinkTemplateId?: string;
+  /** If set, the browse step will open with the description modal for this template ID pre-expanded. */
+  initialExpandedTemplateId?: string;
 }
 
 export const TEMPLATE_CACHE = new Map<string, Template[]>();