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, 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 optiontext = $('<option />', { value: type, text: ttranslate([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 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 {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: left;
     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;
 +}