feat(chat): add composer action menu

src/app/private-room/components/private-album-card.tsx

@@ -91,46 +91,44 @@ export function PrivateAlbumCard({
             ) : null}
             <span className={styles.lockedPreviewScrim} />
           </div>
-          <div className={styles.lockedPreviewPanel}>
+          <span className={styles.lockedCollectionIcon} aria-hidden="true">
-            <span className={styles.lockedCollectionIcon} aria-hidden="true">
+            <Copy size={17} strokeWidth={2} />
-              <Copy size={17} strokeWidth={2} />
+          </span>
+
+          <div
+            className={styles.lockedPreviewAvatarFrame}
+            role="img"
+            aria-label={`${displayName} locked collection`}
+          >
+            <CharacterAvatar
+              src={avatarUrl}
+              alt=""
+              size="100%"
+              imageSize={96}
+              className={styles.lockedPreviewAvatar}
+            />
+            <span className={styles.lockedAvatarBadge} aria-hidden="true">
+              <LockKeyhole size={18} strokeWidth={2.2} />
             </span>
+          </div>
 
-            <div
+          <div className={styles.lockedPreviewContent}>
-              className={styles.lockedPreviewAvatarFrame}
+            <strong className={styles.lockedPreviewTitle}>Unlock to view</strong>
-              role="img"
+            <span className={styles.lockedImageCount}>
-              aria-label={`${displayName} locked collection`}
+              <ImageIcon size={19} strokeWidth={1.9} aria-hidden="true" />
+              {photoCount} {photoCount === 1 ? "Image" : "Images"}
+            </span>
+            <button
+              type="button"
+              data-analytics-key="private_album.unlock"
+              data-analytics-label="Unlock private album"
+              className={styles.lockedPreviewCta}
+              disabled={isUnlocking}
+              onClick={onUnlock}
+              aria-label={`View locked collection with ${photoCount} ${photoCount === 1 ? "image" : "images"} from ${displayName}`}
             >
-              <CharacterAvatar
+              {isUnlocking ? "Opening..." : "View collection"}
-                src={avatarUrl}
+            </button>
-                alt=""
-                size="100%"
-                imageSize={72}
-                className={styles.lockedPreviewAvatar}
-              />
-              <span className={styles.lockedAvatarBadge} aria-hidden="true">
-                <LockKeyhole size={15} strokeWidth={2.2} />
-              </span>
-            </div>
-
-            <div className={styles.lockedPreviewContent}>
-              <strong className={styles.lockedPreviewTitle}>Unlock to view</strong>
-              <span className={styles.lockedImageCount}>
-                <ImageIcon size={19} strokeWidth={1.9} aria-hidden="true" />
-                {photoCount} {photoCount === 1 ? "Image" : "Images"}
-              </span>
-              <button
-                type="button"
-                data-analytics-key="private_album.unlock"
-                data-analytics-label="Unlock private album"
-                className={styles.lockedPreviewCta}
-                disabled={isUnlocking}
-                onClick={onUnlock}
-                aria-label={`View locked collection with ${photoCount} ${photoCount === 1 ? "image" : "images"} from ${displayName}`}
-              >
-                {isUnlocking ? "Opening..." : "View collection"}
-              </button>
-            </div>
           </div>
         </div>
       ) : previewImages.length > 0 ? (

src/app/private-room/private-room-screen.module.css

@@ -287,18 +287,21 @@
 
 .lockedPreview {
   position: relative;
+  display: flex;
   width: 100%;
-  aspect-ratio: 4 / 5;
+  min-height: clamp(230px, 56vw, 280px);
-  margin-top: 14px;
+  align-items: center;
+  justify-content: center;
+  margin-top: clamp(54px, 13.333vw, 68px);
+  padding: clamp(66px, 16.296vw, 82px) clamp(18px, 4.63vw, 25px)
+    clamp(22px, 5.556vw, 30px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: clamp(20px, 5.185vw, 26px);
   background:
-    radial-gradient(circle at 72% 18%, rgba(184, 141, 113, 0.72), transparent 42%),
+    radial-gradient(circle at 74% 12%, rgba(255, 178, 115, 0.28), transparent 42%),
-    radial-gradient(circle at 18% 32%, rgba(79, 78, 105, 0.78), transparent 48%),
+    linear-gradient(145deg, #47434d, #29262d);
-    linear-gradient(160deg, #615d6d 0%, #6c5b50 48%, #c5c0b6 100%);
   color: #ffffff;
   isolation: isolate;
-  overflow: hidden;
   text-align: center;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.12),
@@ -309,13 +312,24 @@
   position: absolute;
   inset: 0;
   z-index: 0;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.lockedPreviewContent {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  width: min(100%, 300px);
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
 }
 
 .lockedCoverImage {
   object-fit: cover;
-  object-position: center;
+  filter: blur(16px) saturate(0.78);
-  filter: blur(13px) saturate(0.8);
+  transform: scale(1.12);
-  transform: scale(1.05);
 }
 
 .lockedPreviewScrim {
@@ -323,35 +337,8 @@
   inset: 0;
   z-index: 1;
   background:
-    linear-gradient(180deg, rgba(23, 21, 25, 0.12), rgba(28, 25, 27, 0.18) 48%, rgba(36, 31, 30, 0.3)),
+    linear-gradient(180deg, rgba(18, 17, 21, 0.3), rgba(18, 17, 21, 0.68)),
-    rgba(32, 29, 34, 0.14);
+    rgba(31, 28, 34, 0.34);
-}
-
-.lockedPreviewPanel {
-  position: absolute;
-  top: 40%;
-  right: clamp(8px, 2.593vw, 14px);
-  left: clamp(8px, 2.593vw, 14px);
-  z-index: 2;
-  min-height: clamp(190px, 48vw, 226px);
-  padding: clamp(48px, 12.222vw, 60px) clamp(18px, 4.63vw, 25px)
-    clamp(20px, 5.185vw, 28px);
-  border: 1px solid rgba(255, 255, 255, 0.13);
-  border-radius: clamp(18px, 4.815vw, 25px);
-  background: rgba(32, 30, 35, 0.62);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
-    0 14px 32px rgba(19, 16, 18, 0.2);
-  backdrop-filter: blur(14px);
-}
-
-.lockedPreviewContent {
-  display: flex;
-  width: min(100%, 300px);
-  margin-inline: auto;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
 }
 
 .lockedCollectionIcon {
@@ -373,11 +360,11 @@
 
 .lockedPreviewAvatarFrame {
   position: absolute;
-  top: clamp(-36px, -8.148vw, -31px);
+  top: clamp(-45px, -9.259vw, -36px);
   left: 50%;
   z-index: 4;
-  width: clamp(62px, 17.037vw, 72px);
+  width: clamp(82px, 20.741vw, 100px);
-  height: clamp(62px, 17.037vw, 72px);
+  height: clamp(82px, 20.741vw, 100px);
   border: 3px solid rgba(255, 255, 255, 0.94);
   border-radius: 999px;
   background: #ffffff;
@@ -394,10 +381,10 @@
   right: -3px;
   bottom: 0;
   display: grid;
-  width: clamp(24px, 6.296vw, 28px);
+  width: clamp(30px, 7.778vw, 38px);
-  height: clamp(24px, 6.296vw, 28px);
+  height: clamp(30px, 7.778vw, 38px);
   place-items: center;
-  border: 2px solid rgba(255, 255, 255, 0.94);
+  border: 3px solid rgba(255, 255, 255, 0.94);
   border-radius: 999px;
   background: #ffffff;
   color: #29262d;
@@ -426,7 +413,7 @@
 .lockedPreviewCta {
   min-width: min(100%, 178px);
   min-height: 46px;
-  margin-top: clamp(16px, 4.074vw, 22px);
+  margin-top: 22px;
   padding: 0 24px;
   border: 0;
   border-radius: 999px;