Assets: Display extension author in the list (#4551) * Assets: Display extension author in the list * Fix overflow of long text

45a7c6b2aacae8d6c675c2e4999d34757df13af4

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

public/scripts/extensions/assets/index.js+37 -3 Viewed

 import { executeSlashCommandsWithOptions } from '../../slash-commands.js';
 import { accountStorage } from '../../util/AccountStorage.js';
 import { flashHighlight, getStringHash, isValidUrl } from '../../utils.js';
-import { t } from '../../i18n.js';
+import { t, translate } from '../../i18n.js';
 export { MODULE_NAME };
 const MODULE_NAME = 'assets';

     'blip': t`Blip sounds`,
 };
+const EMPTY_AUTHOR = {
+    name: '',
+    url: '',
+};
+/**
+ * Extracts the repository author from a given URL.
+ * @param {string} url - The URL of the repository.
+ * @returns {{name: string, url: string}} Object containing the author's name and URL, or empty strings if not found.
+ */
+function getAuthorFromUrl(url) {
+    const result = structuredClone(EMPTY_AUTHOR);
+    try {
+        const parsedUrl = new URL(url);
+        const pathSegments = parsedUrl.pathname.split('/').filter(s => s.length > 0);
+        // TODO: Handle non-GitHub URLs if needed
+        if (parsedUrl.host === 'github.com' && pathSegments.length >= 2) {
+            result.name = pathSegments[0];
+            result.url = `${parsedUrl.protocol}//${parsedUrl.hostname}/${result.name}`;
+        }
+    }
+    catch (error) {
+        console.debug(DEBUG_PREFIX, 'Error parsing URL:', error);
+    }
+    return result;
+}
 async function downloadAssetsList(url) {
     updateCurrentAssets().then(async function () {
         fetch(url, { cache: 'no-cache' })

                 $('#assets_type_select').append($('<option />', { value: '', text: t`All` }));
                 for (const type of assetTypes) {
-                    const option = $('<option />', { value: type, text: t([KNOWN_TYPES[type] || type]) });
+                    const text = translate(KNOWN_TYPES[type] || type);
+                    const option = $('<option />', { value: type, text: text });
                     $('#assets_type_select').append(option);
+                }

                         const title = assetType === 'extension' ? t`Extension repo/guide:` + ` ${url}` : t`Preview in browser`;
                         const previewIcon = (assetType === 'extension' || assetType === 'character') ? 'fa-arrow-up-right-from-square' : 'fa-headphones-simple';
                         const toolTag = assetType === 'extension' && asset['tool'];
+                        const author = url && assetType === 'extension' ? getAuthorFromUrl(url) : EMPTY_AUTHOR;
                         const assetBlock = $('<i></i>')
                             .append(element)
-                            .append(`<div class="flex-container flexFlowColumn flexNoGap">
+                            .append(`<div class="flex-container flexFlowColumn flexNoGap wide100p overflowHidden">
                                         <span class="asset-name flex-container alignitemscenter">
                                             <b>${displayName}</b>
                                             <a class="asset_preview" href="${url}" target="_blank" title="${title}">

                                             </a>` +
                                             (toolTag ? '<span class="tag" title="' + t`Adds a function tool` + '"><i class="fa-solid fa-sm fa-wrench"></i> ' +
                                             t`Tool` + '</span>' : '') +
+                                            '<span class="expander"></span>' +
+                                            (author.name ? `<a href="${author.url}" target="_blank" class="asset-author-info"><i class="fa-solid fa-at fa-xs"></i><span>${author.name}</span></a>` : '') +
                                         `</span>
                                         <small class="asset-description">
                                             ${description}

public/scripts/extensions/assets/style.css+27 -2 Viewed

     color: inherit;
+}
-.assets-list-div > i {
+.assets-list-div>i {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: left;
-    padding: 5px;
+    padding: 10px 5px;
     font-style: normal;
     gap: 5px;
+    border-bottom: 1px solid var(--SmartThemeBorderColor);
+}
 .assets-list-div i span:first-of-type {

     opacity: 0.9;
     margin-left: 2px;
+}
+.asset-name .asset-author-info {
+    display: flex;
+    align-items: baseline;
+    gap: 2px;
+    opacity: 0.7;
+    font-size: 0.85em;
+    overflow: hidden;
+}
+.asset-name .asset-author-info>span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.asset-name .asset-author-info:hover {
+    opacity: 1;
+    transition: opacity var(--animation-duration) ease-in-out;
+}
+.asset-name>b {
+    font-weight: 600;
+}