Merge pull request #3188 from liam-hq/feature/share-modal-access-visibility

✨ Dynamic share modal access visibility based on share settings

Author: kumanoayumi

frontend/apps/app/components/ShareDialog/ShareDialog.module.css

@@ -1,10 +1,3 @@
-.backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: var(--overlay-50);
-  z-index: var(--z-index-overlay);
-}
-
 .dialog {
   position: fixed;
   top: 50%;
@@ -84,7 +77,13 @@
   gap: var(--spacing-6);
 }
 
-.accessSection,
+.accessSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-height: 5rem;
+}
+
 .visibilitySection {
   display: flex;
   flex-direction: column;
@@ -96,6 +95,9 @@
   font-weight: 500;
   color: var(--global-body-text);
   margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
 }
 
 .userInfo {
@@ -104,36 +106,38 @@
   gap: var(--spacing-3);
 }
 
-.avatar {
+.accessIcon {
   width: 2.5rem;
   height: 2.5rem;
-  background: linear-gradient(
-    135deg,
-    var(--primary-accent),
-    var(--primary-hover)
-  );
+  background-color: var(--overlay-5);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--font-size-3);
-  font-weight: 600;
-  color: var(--global-background);
+  color: var(--overlay-50);
+  transition: opacity 0.3s ease-in-out;
 }
 
 .userDetails {
   flex: 1;
+  min-height: 2.75rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .userName {
   font-size: var(--font-size-4);
   font-weight: 500;
   color: var(--global-foreground);
+  margin-bottom: var(--spacing-1);
+  transition: opacity 0.2s ease-in-out;
 }
 
 .userEmail {
   font-size: var(--font-size-2);
   color: var(--global-mute-text);
+  transition: opacity 0.2s ease-in-out;
 }
 
 .visibilityControls {
@@ -287,4 +291,6 @@
   font-size: var(--font-size-2);
   color: var(--global-mute-text);
   margin: 0;
+  min-height: 1rem;
+  transition: opacity 0.2s ease-in-out;
 }

frontend/apps/app/components/ShareDialog/ShareDialog.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  Building2,
   Check,
   ChevronDown,
   Copy,
@@ -9,13 +10,15 @@ import {
   DropdownMenuPortal,
   DropdownMenuRoot,
   DropdownMenuTrigger,
+  Globe,
   Link,
   Lock,
   ModalContent,
   ModalOverlay,
   ModalPortal,
   ModalRoot,
   ModalTitle,
+  Spinner,
   XIcon,
 } from '@liam-hq/ui'
 import { type FC, useRef, useState } from 'react'
@@ -97,12 +100,18 @@ export const ShareDialog: FC<Props> = ({
               <div className={styles.accessSection}>
                 <h4 className={styles.sectionTitle}>People with access</h4>
                 <div className={styles.userInfo}>
-                  <div className={styles.avatar}>
-                    <span>You</span>
+                  <div className={styles.accessIcon}>
+                    {isPublic ? <Globe size={20} /> : <Building2 size={20} />}
                   </div>
                   <div className={styles.userDetails}>
-                    <div className={styles.userName}>You (Owner)</div>
-                    <div className={styles.userEmail}>Has full access</div>
+                    <div className={styles.userName}>
+                      {isPublic ? 'Anyone' : 'Organization members'}
+                    </div>
+                    <div className={styles.userEmail}>
+                      {isPublic
+                        ? 'Anyone with the link can view'
+                        : 'Members can view this session'}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -113,7 +122,8 @@ export const ShareDialog: FC<Props> = ({
                   id="visibility-section-title"
                   className={styles.sectionTitle}
                 >
-                  Visibility
+                  <span>Visibility</span>
+                  {loading && <Spinner size="12" />}
                 </h4>
                 <div className={styles.visibilityControls}>
                   <div className={styles.selectWrapper}>
@@ -200,11 +210,11 @@ export const ShareDialog: FC<Props> = ({
                     </button>
                   )}
                 </div>
-                {isPublic && (
-                  <p className={styles.visibilityDescription}>
-                    Anyone with the link can view this session
-                  </p>
-                )}
+                <p className={styles.visibilityDescription}>
+                  {isPublic
+                    ? 'Anyone with the link can view this session'
+                    : 'Only organization members can view this session'}
+                </p>
               </div>
             </div>
           </div>

frontend/apps/app/eslint-suppressions.json

@@ -287,11 +287,6 @@
       "count": 19
     }
   },
-  "components/ShareDialog/ShareDialog.module.css": {
-    "css-modules-kit/no-unused-class-names": {
-      "count": 1
-    }
-  },
   "features/organizations/services/getOrganizationId.ts": {
     "no-throw-error/no-throw-error": {
       "count": 2

frontend/apps/app/hooks/usePublicShareServerAction.ts

@@ -16,6 +16,7 @@ export const usePublicShareServerAction = ({
 }: UsePublicShareServerActionProps) => {
   const [isPublic, setIsPublic] = useState(initialIsPublic)
   const [isPending, startTransition] = useTransition()
+  const [isLoading, setIsLoading] = useState(false)
   const isPublicRef = useRef(initialIsPublic)
 
   // Reset state when designSessionId or initialIsPublic changes
@@ -32,6 +33,8 @@ export const usePublicShareServerAction = ({
   const togglePublicShare = useCallback(async () => {
     const currentIsPublic = isPublicRef.current
 
+    setIsLoading(true)
+
     const result = await fromPromise(
       currentIsPublic
         ? disablePublicShare(designSessionId)
@@ -45,6 +48,8 @@ export const usePublicShareServerAction = ({
       }),
     )
 
+    setIsLoading(false)
+
     return result.match(
       (data) => {
         if (data.success) {
@@ -59,7 +64,7 @@ export const usePublicShareServerAction = ({
   }, [designSessionId])
   return {
     isPublic,
-    loading: isPending,
+    loading: isLoading || isPending,
     togglePublicShare,
   }
 }

frontend/packages/ui/src/icons/index.ts

@@ -5,6 +5,7 @@ export {
   BookMarked,
   BookText,
   Building,
+  Building2,
   Check,
   ChevronDown,
   ChevronLeft,
@@ -28,6 +29,7 @@ export {
   Fingerprint,
   GitBranch,
   GitPullRequestArrow,
+  Globe,
   Group,
   Hash,
   Info,