From 3f097268bf185435df6a5bd5a5e904bd2dd22c1b Mon Sep 17 00:00:00 2001
From: Christopher <admin@gaion.chat>
Date: Thu, 22 Jan 2026 18:53:02 -0800
Subject: [PATCH] feat: Add click event stop propagation to video embed
 containers and replace the "Add media" button text with an icon in the
 compose component.

---
 src/components/Compose.tsx    | 5 +++--
 src/components/VideoEmbed.tsx | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Compose.tsx b/src/components/Compose.tsx
index 797986f..adb7c88 100644
--- a/src/components/Compose.tsx
+++ b/src/components/Compose.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import AutoTextarea from '@/components/AutoTextarea';
 import { Post, Attachment } from '@/lib/types';
+import { ImageIcon } from 'lucide-react';
 import { VideoEmbed } from '@/components/VideoEmbed';
 
 interface ComposeProps {
@@ -185,8 +186,8 @@ export function Compose({ onPost, replyingTo, onCancelReply, placeholder = "What
                     {remaining}
                 </span>
                 <div className="compose-actions">
-                    <label className="btn btn-ghost btn-sm compose-media-button">
-                        {isUploading ? 'Uploading...' : 'Add media'}
+                    <label className="btn btn-ghost btn-sm compose-media-button" title="Add media">
+                        {isUploading ? '...' : <ImageIcon size={18} />}
                         <input
                             type="file"
                             accept="image/*"
diff --git a/src/components/VideoEmbed.tsx b/src/components/VideoEmbed.tsx
index 54a9d60..178426b 100644
--- a/src/components/VideoEmbed.tsx
+++ b/src/components/VideoEmbed.tsx
@@ -22,7 +22,7 @@ export function VideoEmbed({ url }: VideoEmbedProps) {
 
     if (youtubeId) {
         return (
-            <div className="video-embed-container">
+            <div className="video-embed-container" onClick={(e) => e.stopPropagation()}>
                 <iframe
                     src={`https://www.youtube.com/embed/${youtubeId}`}
                     title="YouTube video player"
@@ -36,7 +36,7 @@ export function VideoEmbed({ url }: VideoEmbedProps) {
 
     if (vimeoId) {
         return (
-            <div className="video-embed-container">
+            <div className="video-embed-container" onClick={(e) => e.stopPropagation()}>
                 <iframe
                     src={`https://player.vimeo.com/video/${vimeoId}`}
                     title="Vimeo video player"