improve styles

Author: ricardo-devis-agullo

src/registry/routes/index.ts

@@ -6,7 +6,6 @@ import parseAuthor from 'parse-author';
 import dateStringified from '../../utils/date-stringify';
 import indexView from '../views';
 import getAvailableDependencies from './helpers/get-available-dependencies';
-import getComponentsHistory from './helpers/get-components-history';
 import urlBuilder = require('../domain/url-builder');
 import type { IncomingHttpHeaders } from 'node:http';
 import type { NextFunction, Request, Response } from 'express';
@@ -76,41 +75,36 @@ export default function (repository: Repository) {
             componentsInfo = componentsInfo.sort((a, b) =>
               a.name.localeCompare(b.name)
             );
-            fromPromise(repository.getComponentsDetails)((err, details) => {
-              if (err) console.log(err);
-              res.send(
-                indexView(
-                  // @ts-ignore
-                  Object.assign(baseResponse, {
-                    availableDependencies: getAvailableDependencies(
-                      res.conf.dependencies
-                    ),
-                    availablePlugins: res.conf.plugins,
-                    components: componentsInfo,
-                    componentsReleases,
-                    componentsList: componentsInfo.map((component) => {
-                      const state: 'deprecated' | 'experimental' | '' =
-                        component?.oc?.state || '';
-                      if (state) {
-                        stateCounts[state] = (stateCounts[state] || 0) + 1;
-                      }
+            res.send(
+              indexView(
+                // @ts-ignore
+                Object.assign(baseResponse, {
+                  availableDependencies: getAvailableDependencies(
+                    res.conf.dependencies
+                  ),
+                  availablePlugins: res.conf.plugins,
+                  components: componentsInfo,
+                  componentsReleases,
+                  componentsList: componentsInfo.map((component) => {
+                    const state: 'deprecated' | 'experimental' | '' =
+                      component?.oc?.state || '';
+                    if (state) {
+                      stateCounts[state] = (stateCounts[state] || 0) + 1;
+                    }
 
-                      return {
-                        name: component.name,
-                        author: component.author,
-                        state
-                      };
-                    }),
-                    componentsHistory:
-                      !res.conf.local && getComponentsHistory(details),
-                    q: req.query['q'] || '',
-                    stateCounts,
-                    templates: repository.getTemplatesInfo(),
-                    title: 'OpenComponents Registry'
-                  })
-                )
-              );
-            });
+                    return {
+                      name: component.name,
+                      author: component.author,
+                      state
+                    };
+                  }),
+                  q: req.query['q'] || '',
+                  stateCounts,
+                  templates: repository.getTemplatesInfo(),
+                  title: 'OpenComponents Registry'
+                })
+              )
+            );
           }
         );
       } else {

src/registry/views/index.tsx

@@ -71,7 +71,7 @@ ${indexJS}</script>`;
         components={vm.components}
         stateCounts={vm.stateCounts}
       />
-      <History componentsHistory={vm.componentsHistory} />
+      <History />
       <Templates templates={vm.templates} />
       <Dependencies availableDependencies={vm.availableDependencies} />
       <Plugins

src/registry/views/partials/components-history.tsx

@@ -1,28 +1,15 @@
-import type { VM } from '../../../types';
-
-type ComponentHistory = VM['componentsHistory'];
-type ComponentHistoryItem = Exclude<ComponentHistory, undefined>[number];
-
-const ComponentsHistory = (props: { componentsHistory: ComponentHistory }) => {
-  const componentRow = ({
-    name,
-    publishDate,
-    version,
-    templateSize
-  }: ComponentHistoryItem) => (
-    <a href={`${name}/${version}/~info`}>
-      <div class="componentRow row table">
-        <p class="release">
-          {publishDate} - Published {name}@{version}
-          {templateSize ? ` [${Math.round(templateSize / 1024)} kb]` : ''}
-        </p>
-      </div>
-    </a>
-  );
-
+const ComponentsHistory = () => {
   return (
     <div id="components-history" class="box">
-      {props.componentsHistory ? props.componentsHistory.map(componentRow) : ''}
+      <div id="history-loader" class="loader">
+        <p>Loading components history...</p>
+      </div>
+      <div id="history-content" style="display: none;">
+        {/* Content will be populated by JavaScript */}
+      </div>
+      <div id="history-error" style="display: none;">
+        <p>Failed to load components history. Please try again later.</p>
+      </div>
     </div>
   );
 };

src/registry/views/partials/components-templates.tsx

@@ -19,7 +19,7 @@ const ComponentsTemplates = (props: { templates: Templates }) => {
   const templateRow = ({ externals, type, version }: Template) => {
     const externalLinks = externals.map(externalLink);
     const externalsLabel = externalLinks.length ? (
-      <>(Externals: {externalLinks})</>
+      <> (Externals: {externalLinks}) </>
     ) : null;
 
     return (

src/registry/views/static/index.ts

@@ -59,13 +59,69 @@ oc.cmd.push(function() {
     return false;
   };
 
+  var loadComponentsHistory = function() {
+    var historyLoader = $('#history-loader');
+    var historyContent = $('#history-content');
+    var historyError = $('#history-error');
+
+    // Show loader
+    historyLoader.show();
+    historyContent.hide();
+    historyError.hide();
+
+    // Fetch history data
+    fetch('~registry/history')
+      .then(function(response) {
+        if (!response.ok) {
+          throw new Error('Failed to fetch history');
+        }
+        return response.json();
+      })
+      .then(function(data) {
+        var componentsHistory = data.componentsHistory || [];
+        var historyHtml = '';
+        
+        for (var i = 0; i < componentsHistory.length; i++) {
+          var item = componentsHistory[i];
+          var templateSizeText = item.templateSize ? 
+            ' [' + Math.round(item.templateSize / 1024) + ' kb]' : '';
+          
+          historyHtml += '<a href="' + item.name + '/' + item.version + '/~info">' +
+                        '<div class="componentRow row table">' +
+                        '<p class="release">' +
+                        item.publishDate + ' - Published ' + item.name + '@' + item.version +
+                        templateSizeText +
+                        '</p>' +
+                        '</div>' +
+                        '</a>';
+        }
+        
+        historyContent.html(historyHtml);
+        historyLoader.hide();
+        historyContent.show();
+      })
+      .catch(function(error) {
+        console.error('Error loading components history:', error);
+        historyLoader.hide();
+        historyError.show();
+      });
+  };
+
+  var isHistoryLoaded = false;
+
   var initialiseTabs = function() {
     var selectItem = function(target) {
       var $target = $(target);
       $('.box').hide();
       $target.show();
       $('#menuList a').removeClass('selected');
       $('#menuList a[href="' + target + '"]').addClass('selected');
+      
+      // Load history data when history tab is selected for the first time
+      if (target === '#components-history' && !isHistoryLoaded) {
+        loadComponentsHistory();
+        isHistoryLoaded = true;
+      }
     };
 
     var hash = location.href.split('#')[1] || '';