[wip] update collection sharing UI and copy button

- updates the share collection component to add "name" and "size"
attributes to the copy button for improved accessibility and styling -
changes button text from "Copy Link" to "Copy Public Link" for clarity -
modifies the collection detail page to make the access icon next to the
collection title a clickable button that opens the sharing tab in the
edit dialog - adds a dedicated share button to the header actions with a
share icon that also opens the sharing tab

Author: emma-sg

frontend/src/features/collections/share-collection.ts

@@ -69,8 +69,10 @@ export class ShareCollection extends BtrixElement {
     return html`
       <div class="flex items-center gap-2">
         <btrix-copy-button
+          name="link"
+          size="medium"
           .getValue=${() => this.shareLink}
-          content=${msg("Copy Link")}
+          content=${msg("Copy Public Link")}
           @click=${() => {
             void this.clipboardController.copy(this.shareLink);
 

frontend/src/pages/org/collection-detail.ts

@@ -187,10 +187,15 @@ export class CollectionDetail extends BtrixElement {
           class="-mb-1 -ml-2 -mr-1 -mt-1 flex flex-none flex-col gap-2 self-start rounded-lg pb-1 pl-2 pr-1 pt-1 transition-colors has-[.addSummary:hover]:bg-primary-50 has-[sl-icon-button:hover]:bg-primary-50"
         >
           <div class="flex flex-wrap items-center gap-2.5">
-            ${this.renderAccessIcon()}${pageTitle(
-              this.collection?.name,
-              tw`mb-2 h-6 w-60`,
-            )}
+            <button
+              type="button"
+              @click=${() => {
+                this.openDialogName = "edit";
+                this.editTab = "sharing";
+              }}
+            >
+              ${this.renderAccessIcon()}</button
+            >${pageTitle(this.collection?.name, tw`mb-2 h-6 w-60`)}
             ${this.collection &&
             html`<sl-icon-button
               name="pencil"
@@ -481,6 +486,17 @@ export class CollectionDetail extends BtrixElement {
     const authToken = this.authState?.headers.Authorization.split(" ")[1];
 
     return html`
+      <sl-tooltip content=${msg("Share")}>
+        <sl-icon-button
+          name="box-arrow-up"
+          @click=${() => {
+            this.openDialogName = "edit";
+            this.editTab = "sharing";
+          }}
+        >
+          <sl-icon slot="prefix"></sl-icon>
+        </sl-icon-button>
+      </sl-tooltip>
       <sl-tooltip content=${msg("Edit Collection Settings")}>
         <sl-icon-button
           name="gear"