update template modal dropdown

apps/app/src/components/TemplateModal/TemplateModal.tsx

@@ -76,40 +76,6 @@ const TemplateItem: React.FC<TemplateItemProps> = ({
   );
 };
 
-type TemplateMenuProps = {
-  templateSummaries: TemplateSummary[],
-  onClickHandler: (templateSummary: TemplateSummary) => void,
-  usersDefaultLang?: Lang,
-  selectedTemplateSummary?: TemplateSummary,
-}
-
-const TemplateMenu: React.FC<TemplateMenuProps> = ({
-  templateSummaries,
-  onClickHandler,
-  usersDefaultLang,
-  selectedTemplateSummary,
-}) => {
-  return (
-    <>
-      {templateSummaries.map((templateSummary) => {
-        const templateId = constructTemplateId(templateSummary);
-        const isSelected = selectedTemplateSummary != null && constructTemplateId(selectedTemplateSummary) === templateId;
-
-        return (
-          <TemplateItem
-            key={templateId}
-            templateId={templateId}
-            templateSummary={templateSummary}
-            onClick={() => onClickHandler(templateSummary)}
-            isSelected={isSelected}
-            usersDefaultLang={usersDefaultLang}
-          />
-        );
-      })}
-    </>
-  );
-};
-
 type TemplateModalSubstanceProps = {
   templateModalStatus: TemplateModalStatus,
   close: () => void,
@@ -189,12 +155,21 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
           {/* List Group */}
           <div className="d-none d-lg-block col-lg-4">
             <div className="list-group">
-              <TemplateMenu
-                templateSummaries={templateSummaries}
-                onClickHandler={onClickHandler}
-                usersDefaultLang={usersDefaultLang}
-                selectedTemplateSummary={selectedTemplateSummary}
-              />
+              {templateSummaries.map((templateSummary) => {
+                const templateId = constructTemplateId(templateSummary);
+                const isSelected = selectedTemplateSummary != null && constructTemplateId(selectedTemplateSummary) === templateId;
+
+                return (
+                  <TemplateItem
+                    key={templateId}
+                    templateId={templateId}
+                    templateSummary={templateSummary}
+                    onClick={() => onClickHandler(templateSummary)}
+                    isSelected={isSelected}
+                    usersDefaultLang={usersDefaultLang}
+                  />
+                );
+              })}
             </div>
           </div>
           {/* Dropdown */}
@@ -208,12 +183,28 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
                 </span>
               </DropdownToggle>
               <DropdownMenu role="menu" className='p-0'>
-                <TemplateMenu
-                  templateSummaries={templateSummaries}
-                  onClickHandler={onClickHandler}
-                  usersDefaultLang={usersDefaultLang}
-                  selectedTemplateSummary={selectedTemplateSummary}
-                />
+                {templateSummaries.map((templateSummary, index) => {
+                  const templateId = constructTemplateId(templateSummary);
+                  const localizedTemplate = getLocalizedTemplate(templateSummary, usersDefaultLang);
+                  const templateLocales = extractSupportedLocales(templateSummary);
+
+                  assert(localizedTemplate?.isValid);
+
+                  return (
+                    <DropdownItem
+                      key={templateId}
+                      onClick={() => onClickHandler(templateSummary)}
+                      aria-current="true"
+                      className={`px-4 py-3 ${index === 0 ? '' : 'border-top'}`}
+                    >
+                      <h4 className="mb-1 text-wrap">{localizedTemplate.title}</h4>
+                      <p className="mb-1 text-wrap">{localizedTemplate.desc}</p>
+                      { templateLocales != null && Array.from(templateLocales).map(locale => (
+                        <span key={locale} className="badge border rounded-pill text-muted mr-1">{locale}</span>
+                      ))}
+                    </DropdownItem>
+                  );
+                })}
               </DropdownMenu>
             </UncontrolledDropdown>
           </div>