feat: improve blossom integration in ChatMediaRenderer

- Use HardDrive icon instead of Flower2 (consistent with rest of app)
- Add commandString for Edit functionality in window toolbar
- Pass blobUrl with extension to BlossomViewer for correct media preview
- Extended BlossomViewer.BlobDetailView to accept blobUrl prop

https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD

src/components/BlossomViewer.tsx

@@ -51,6 +51,8 @@ interface BlossomViewerProps {
   sourceUrl?: string;
   targetServer?: string;
   sha256?: string;
+  /** Full blob URL with extension (for blob subcommand) */
+  blobUrl?: string;
 }
 
 /**
@@ -63,6 +65,7 @@ export function BlossomViewer({
   sourceUrl,
   targetServer,
   sha256,
+  blobUrl,
 }: BlossomViewerProps) {
   switch (subcommand) {
     case "servers":
@@ -74,7 +77,13 @@ export function BlossomViewer({
     case "list":
       return <ListBlobsView pubkey={pubkey} serverUrl={serverUrl} />;
     case "blob":
-      return <BlobDetailView sha256={sha256!} serverUrl={serverUrl} />;
+      return (
+        <BlobDetailView
+          sha256={sha256!}
+          serverUrl={serverUrl}
+          blobUrl={blobUrl}
+        />
+      );
     case "mirror":
       return <MirrorView sourceUrl={sourceUrl!} targetServer={targetServer!} />;
     case "delete":
@@ -996,20 +1005,25 @@ function BlobRow({
 function BlobDetailView({
   sha256,
   serverUrl,
+  blobUrl: providedBlobUrl,
   blob: initialBlob,
   onBack,
 }: {
   sha256?: string;
   serverUrl?: string;
+  /** Full blob URL with extension */
+  blobUrl?: string;
   blob?: BlobDescriptor;
   onBack?: () => void;
 }) {
   const { copy, copied } = useCopy();
   const blob = initialBlob;
 
-  // If we have a blob descriptor, use that data
+  // Use provided URL, or blob descriptor URL, or construct from server + sha256
   const blobUrl =
-    blob?.url || (serverUrl && sha256 ? `${serverUrl}/${sha256}` : null);
+    providedBlobUrl ||
+    blob?.url ||
+    (serverUrl && sha256 ? `${serverUrl}/${sha256}` : null);
   const blobSha256 = blob?.sha256 || sha256;
   const mimeType = blob?.type;
 

src/components/chat/ChatMediaRenderer.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useState } from "react";
-import { Image, Video, Music, File, Flower2 } from "lucide-react";
+import { Image, Video, Music, File, HardDrive } from "lucide-react";
 import { getHashFromURL } from "blossom-client-sdk/helpers/url";
 import { useGrimoire } from "@/core/state";
 import { formatFileSize } from "@/lib/imeta";
@@ -98,11 +98,18 @@ export function ChatMediaRenderer({ url, type, imeta }: MediaRendererProps) {
     e.preventDefault();
     e.stopPropagation();
     if (blossom) {
-      addWindow("blossom", {
-        subcommand: "blob",
-        sha256: blossom.sha256,
-        serverUrl: blossom.serverUrl,
-      });
+      // Build command string for Edit functionality
+      const commandString = `blossom blob ${blossom.sha256} ${blossom.serverUrl}`;
+      addWindow(
+        "blossom",
+        {
+          subcommand: "blob",
+          sha256: blossom.sha256,
+          serverUrl: blossom.serverUrl,
+          blobUrl: url, // Pass full URL with extension
+        },
+        commandString,
+      );
     }
   };
 
@@ -137,7 +144,7 @@ export function ChatMediaRenderer({ url, type, imeta }: MediaRendererProps) {
             className="text-muted-foreground hover:text-foreground"
             title="View in Blossom"
           >
-            <Flower2 className="size-3" />
+            <HardDrive className="size-3" />
           </button>
         )}
       </span>