user_profile_modal: Abbrevate long URLs of custom fields.

Abbreviated long URL for custom field in the user profile modal
and user card popover. Added a copy-to-clipboard icon at
the end of the URL. When hovering over the copy button, it displays
a tippy tooltip with the text `Copy URL`. Clicking the copy button
displays a `Copied` tippy tooltip for 1 second.

Fixes #21680

web/src/user_card_popover.js

@@ -29,6 +29,7 @@ import * as rows from "./rows";
 import * as settings_config from "./settings_config";
 import * as sidebar_ui from "./sidebar_ui";
 import * as timerender from "./timerender";
+import {show_copied_confirmation} from "./tippyjs";
 import * as ui_report from "./ui_report";
 import * as ui_util from "./ui_util";
 import * as user_deactivation_ui from "./user_deactivation_ui";
@@ -830,6 +831,16 @@ function register_click_handlers() {
         const user = people.get_by_user_id(user_id);
         toggle_user_card_popover_manage_menu(e.target, user);
     });
+    new ClipboardJS(".copy-custom-field-url", {
+        text(trigger) {
+            return $(trigger)
+                .closest(".custom-user-url-field")
+                .find(".custom-profile-fields-link")
+                .attr("href");
+        },
+    }).on("success", (e) => {
+        show_copied_confirmation(e.trigger);
+    });
 }
 
 export function initialize() {

web/styles/popovers.css

@@ -146,6 +146,36 @@
     }
 }
 
+.custom-user-url-field {
+    display: flex;
+    overflow: hidden;
+
+    .custom-profile-fields-link {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .copy-custom-field-url {
+        background-color: transparent;
+        border: 0;
+        padding: 0;
+
+        #clipboard_image {
+            /* Adjust margin to align the copy icon */
+            margin: -2px 0 0 6px;
+
+            &:hover path {
+                fill: hsl(204deg 100% 40%);
+            }
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
 .user-card-popover-actions .user-card-popover-manage-menu-btn {
     opacity: 0.8;
 

web/templates/user_custom_profile_fields.hbs

@@ -4,7 +4,12 @@
             <div class="name">{{this.name}}</div>
         {{/unless}}
         {{#if this.is_link}}
+            <div class="custom-user-url-field">
                 <a tabindex="0" href="{{this.value}}" target="_blank" rel="noopener noreferrer" class="value custom-profile-fields-link {{#if ../for_user_card_popover}}tippy-zulip-tooltip{{/if}}" data-tippy-content="{{this.name}}">{{this.value}}</a>
+                <button type="submit" class="tippy-zulip-tooltip copy-custom-field-url" data-tippy-content="{{t 'Copy URL' }}">
+                    {{> copy_to_clipboard_svg }}
+                </button>
+            </div>
         {{else if this.is_external_account}}
             <a tabindex="0" href="{{this.link}}" target="_blank" rel="noopener noreferrer" class="value custom-profile-fields-link {{#if ../for_user_card_popover}}tippy-zulip-tooltip{{/if}}" data-tippy-content="{{this.name}}">
                 {{#if (eq this.subtype "github") }}