feat: Update references to org public profile -> gallery (#2330)

- Renames public URL prefix to `explore`
- Updates org settings sections
- Removes or renames references to "org profile"

---------

Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>
Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>

frontend/docs/docs/user-guide/org-settings.md

@@ -4,17 +4,20 @@ Settings that apply to the entire organization are found in the **Settings** pag
 
 ## General
 
-### Name and URL
+### Name, URL, and other basic information
 
-Choose a display name for your org that's unique and memorable, like the name of your company, organization, or personal project. This name will be visible in the org's [public profile](#profile), if that page is enabled.
+Your org name appears throughout the web application and in email notifications. Choose a display name for your org that's unique and memorable, like the name of your company, organization, or personal project.
 
-The org URL is where you and other org members will go to view the dashboard, configure org settings, and manage all other org-related activities. Changing this URL will also update the URL of your org's public profile, if enabled.
+The org URL is where you and other org members will go to view the dashboard, configure org settings, and manage all other org-related activities. If your org has a [public collections gallery](#public-collections-gallery) enabled, changing this will also update the URL to the gallery.
 
-Org name and URLs are unique to each Browsertrix instance (for example, on `app.browsertrix.com`) and you may be prompted to change the org name or URL identifier if either are already in use by another org.
+Org name and URLs are unique to each Browsertrix instance (for example, on `app.browsertrix.com`) and you may be prompted to change the org name or URL if either are already in use by another org.
 
-### Profile
+??? info "What information will be visible to the public?"
+    All org information is private until you make the org visible. Once your org is made visible to the public, the org name, description, and website will appear on the org's public gallery page. You can preview how information appears to the public by clicking **View as public**.
 
-Enable and configure a public profile page for your org. Once enabled, anyone on the internet with a link to your org's profile page will be able to view public information like the org name, description, and public collections.
+### Public Collections Gallery
+
+Enable a homepage for your public collections to easily share all public collections in your org. Once enabled, anyone on the internet with a link to your org's public collections gallery will be able to browse public collections and view general information like the org name, description, and website.
 
 ## Billing
 

frontend/src/features/collections/collection-metadata-dialog.ts

@@ -16,6 +16,7 @@ import { DEFAULT_THUMBNAIL } from "./collection-thumbnail";
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
 import type { SelectCollectionAccess } from "@/features/collections/select-collection-access";
+import { alerts } from "@/strings/collections/alerts";
 import { CollectionAccess, type Collection } from "@/types/collection";
 import { isApiError } from "@/utils/api";
 import { maxLengthValidator } from "@/utils/form";
@@ -170,12 +171,10 @@ export class CollectionMetadataDialog extends BtrixElement {
             <btrix-alert variant="warning" class="mt-2">
               ${org.enablePublicProfile
                 ? msg(
-                    "This collection will be visible on the org public profile, even without archived items. You may want to set visibility to 'Unlisted' until archived items have been added.",
+                    "This collection will be visible in the org public collection gallery, even without archived items. You may want to set visibility to 'Unlisted' until archived items have been added.",
                   )
                 : html`
-                    ${msg(
-                      "This collection will be visible on the org profile page, which isn't public yet. To make the org profile and this collection visible to the public, update org profile settings.",
-                    )}
+                    ${alerts.orgNotPublicWarning}
                     <a
                       class="ml-auto flex items-center gap-1.5 font-medium underline hover:no-underline"
                       href=${`${this.navigate.orgBasePath}/settings`}

frontend/src/features/collections/collections-grid.ts

@@ -133,7 +133,7 @@ export class CollectionsGrid extends BtrixElement {
               href=${`/${RouteNamespace.PublicOrgs}/${this.orgSlugState}/collections/${collection.slug}`}
             >
               <sl-icon slot="prefix" name="globe2"></sl-icon>
-              ${msg("Visit Public Page")}
+              ${msg("Visit Public Collections Gallery")}
             </btrix-menu-item-link>
           </sl-menu>
         </btrix-overflow-dropdown>

frontend/src/features/collections/select-collection-access.ts

@@ -28,7 +28,7 @@ export class SelectCollectionAccess extends BtrixElement {
     [CollectionAccess.Public]: {
       label: msg("Public"),
       icon: "globe2",
-      detail: msg("Anyone can view on the org's public profile"),
+      detail: msg("Anyone can view from the org public collections gallery"),
     },
   };
 

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

@@ -20,6 +20,7 @@ import { SelectCollectionAccess } from "./select-collection-access";
 import { BtrixElement } from "@/classes/BtrixElement";
 import { ClipboardController } from "@/controllers/clipboard";
 import { RouteNamespace } from "@/routes";
+import { alerts } from "@/strings/collections/alerts";
 import { AnalyticsTrackEvent } from "@/trackEvents";
 import {
   CollectionAccess,
@@ -246,7 +247,7 @@ export class ShareCollection extends BtrixElement {
         @sl-after-hide=${() => {
           this.tabGroup?.show(Tab.Link);
         }}
-        class="[--body-spacing:0] [--width:40rem]"
+        class="[--width:40rem] [--body-spacing:0]"
       >
         <sl-tab-group>
           <sl-tab slot="nav" panel=${Tab.Link}
@@ -296,9 +297,7 @@ export class ShareCollection extends BtrixElement {
             this.collection?.access === CollectionAccess.Public,
           () => html`
             <btrix-alert variant="warning" class="mt-3">
-              ${msg(
-                "The org profile page isn't public yet. To make the org profile and this collection visible to the public, update profile visibility in org settings.",
-              )}
+              ${alerts.orgNotPublicWarning}
             </btrix-alert>
           `,
         )}
@@ -311,9 +310,7 @@ export class ShareCollection extends BtrixElement {
         <div class="form-label flex items-center gap-1.5">
           ${msg("Thumbnail")}
           <sl-tooltip
-            content=${msg(
-              "Choose a thumbnail to represent this collection in the org dashboard and profile page.",
-            )}
+            content=${msg("Choose a thumbnail to represent this collection.")}
           >
             <sl-icon name="info-circle"></sl-icon>
           </sl-tooltip>

frontend/src/index.ts

@@ -820,11 +820,11 @@ export class App extends BtrixElement {
         ></btrix-org>`;
       }
 
-      case "publicOrgProfile":
-        return html`<btrix-org-profile
+      case "publicOrg":
+        return html`<btrix-public-org
           class="w-full"
           orgSlug=${this.viewState.params.slug}
-        ></btrix-org-profile>`;
+        ></btrix-public-org>`;
 
       case "publicCollection": {
         const { collectionSlug, collectionTab } = this.viewState.params;

frontend/src/pages/index.ts

@@ -11,3 +11,4 @@ import(/* webpackChunkName: "users-invite" */ "./users-invite");
 import(/* webpackChunkName: "accept-invite" */ "./invite/accept");
 import(/* webpackChunkName: "account-settings" */ "./account-settings");
 import(/* webpackChunkName: "collections" */ "./collections");
+import(/* webpackChunkName: "public" */ "./public");

frontend/src/pages/org/dashboard.ts

@@ -309,8 +309,8 @@ export class Dashboard extends BtrixElement {
                     >
                       <sl-icon slot="prefix" name="globe2"></sl-icon>
                       ${this.org?.enablePublicProfile
-                        ? msg("Visit Public Profile")
-                        : msg("Preview Public Profile")}
+                        ? msg("Visit Public Collections Gallery")
+                        : msg("Preview Public Collections Gallery")}
                     </btrix-menu-item-link>
                     ${when(this.org, (org) =>
                       org.enablePublicProfile
@@ -330,7 +330,7 @@ export class Dashboard extends BtrixElement {
                               }}
                             >
                               <sl-icon name="copy" slot="prefix"></sl-icon>
-                              ${msg("Copy Link to Profile")}
+                              ${msg("Copy Link to Public Gallery")}
                             </sl-menu-item>
                           `
                         : this.appState.isAdmin

frontend/src/pages/org/index.ts

@@ -12,6 +12,7 @@ import type { Tab as CollectionTab } from "./collection-detail";
 import type {
   Member,
   OrgRemoveMemberEvent,
+  UpdateOrgDetail,
   UserRoleChangeEvent,
 } from "./settings/settings";
 
@@ -41,7 +42,6 @@ import "./browser-profiles-detail";
 import "./browser-profiles-list";
 import "./settings/settings";
 import "./dashboard";
-import "./profile";
 
 import(/* webpackChunkName: "org" */ "./archived-item-qa/archived-item-qa");
 import(/* webpackChunkName: "org" */ "./workflows-new");
@@ -628,6 +628,17 @@ export class Org extends BtrixElement {
     return html`<btrix-org-settings
       activePanel=${activePanel}
       ?isAddingMember=${isAddingMember}
+      @btrix-update-org=${(e: CustomEvent<UpdateOrgDetail>) => {
+        e.stopPropagation();
+
+        // Optimistic update
+        AppStateService.partialUpdateOrg({
+          id: this.orgId,
+          ...e.detail,
+        });
+
+        void this.updateOrg();
+      }}
       @org-user-role-change=${this.onUserRoleChange}
       @org-remove-member=${this.onOrgRemoveMember}
     ></btrix-org-settings>`;