feat(chat): add composer action menu

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

@@ -91,44 +91,46 @@ export function PrivateAlbumCard({
             ) : null}
             <span className={styles.lockedPreviewScrim} />
           </div>
-          <span className={styles.lockedCollectionIcon} aria-hidden="true">
-            <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} />
+          <div className={styles.lockedPreviewPanel}>
+            <span className={styles.lockedCollectionIcon} aria-hidden="true">
+              <Copy size={17} strokeWidth={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}`}
+            <div
+              className={styles.lockedPreviewAvatarFrame}
+              role="img"
+              aria-label={`${displayName} locked collection`}
             >
-              {isUnlocking ? "Opening..." : "View collection"}
-            </button>
+              <CharacterAvatar
+                src={avatarUrl}
+                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,21 +287,18 @@
 
 .lockedPreview {
   position: relative;
-  display: flex;
   width: 100%;
-  min-height: clamp(230px, 56vw, 280px);
-  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);
+  aspect-ratio: 4 / 5;
+  margin-top: 14px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: clamp(20px, 5.185vw, 26px);
   background:
-    radial-gradient(circle at 74% 12%, rgba(255, 178, 115, 0.28), transparent 42%),
-    linear-gradient(145deg, #47434d, #29262d);
+    radial-gradient(circle at 72% 18%, rgba(184, 141, 113, 0.72), transparent 42%),
+    radial-gradient(circle at 18% 32%, rgba(79, 78, 105, 0.78), transparent 48%),
+    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),
@@ -312,24 +309,13 @@
   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;
-  filter: blur(16px) saturate(0.78);
-  transform: scale(1.12);
+  object-position: center;
+  filter: blur(13px) saturate(0.8);
+  transform: scale(1.05);
 }
 
 .lockedPreviewScrim {
@@ -337,8 +323,35 @@
   inset: 0;
   z-index: 1;
   background:
-    linear-gradient(180deg, rgba(18, 17, 21, 0.3), rgba(18, 17, 21, 0.68)),
-    rgba(31, 28, 34, 0.34);
+    linear-gradient(180deg, rgba(23, 21, 25, 0.12), rgba(28, 25, 27, 0.18) 48%, rgba(36, 31, 30, 0.3)),
+    rgba(32, 29, 34, 0.14);
+}
+
+.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 {
@@ -360,11 +373,11 @@
 
 .lockedPreviewAvatarFrame {
   position: absolute;
-  top: clamp(-45px, -9.259vw, -36px);
+  top: clamp(-36px, -8.148vw, -31px);
   left: 50%;
   z-index: 4;
-  width: clamp(82px, 20.741vw, 100px);
-  height: clamp(82px, 20.741vw, 100px);
+  width: clamp(62px, 17.037vw, 72px);
+  height: clamp(62px, 17.037vw, 72px);
   border: 3px solid rgba(255, 255, 255, 0.94);
   border-radius: 999px;
   background: #ffffff;
@@ -381,10 +394,10 @@
   right: -3px;
   bottom: 0;
   display: grid;
-  width: clamp(30px, 7.778vw, 38px);
-  height: clamp(30px, 7.778vw, 38px);
+  width: clamp(24px, 6.296vw, 28px);
+  height: clamp(24px, 6.296vw, 28px);
   place-items: center;
-  border: 3px solid rgba(255, 255, 255, 0.94);
+  border: 2px solid rgba(255, 255, 255, 0.94);
   border-radius: 999px;
   background: #ffffff;
   color: #29262d;
@@ -413,7 +426,7 @@
 .lockedPreviewCta {
   min-width: min(100%, 178px);
   min-height: 46px;
-  margin-top: 22px;
+  margin-top: clamp(16px, 4.074vw, 22px);
   padding: 0 24px;
   border: 0;
   border-radius: 999px;