Prep for T3k links to users and tone through Flow APIs.

vite/src/pipedal/TextInfoDialog.css

@@ -7,6 +7,14 @@
     margin-top: 8px;
     margin-bottom: 32px;
 }
+.text-info-dialog-content #user-content-tone3000_float_right {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    align-items: justify;
+    margin-top: 8px;
+    margin-bottom: 32px;
+}
 
 .text-info-dialog-content #user-content-tone3000_float_content {
     flex-grow: 1;
@@ -17,6 +25,16 @@
 
 }
 
+.text-info-dialog-content .tone3000_content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    font-size: 0.8em;
+    justify-content: space-between;
+
+}
+
 .text-info-dialog-content #user-content-tone3000_title {
     margin-top: 0;
     margin-bottom: 12px;
@@ -45,9 +63,25 @@
     border-radius: 6px;
     align-self: flex-start;
 }
+
+.text-info-dialog-content #user-content-tone3000_small_thumbnail {
+    width: 64px;
+    height: auto;
+    object-fit: contain;
+    margin-left: 24px;
+    margin-right: 8px;
+    border: 1px solid var(--pd-border-color);
+    border-radius: 6px;
+    align-self: flex-start;
+}
+
 @media (max-width: 600px) {
     .text-info-dialog-content #user-content-tone3000_thumbnail {
         width: 80px;
         margin-right: 20px;
     }
+    .text-info-dialog-content #user-content-tone3000_small_thumbnail {
+        display: none;
+    }
+
 }

vite/src/pipedal/TextInfoDialog.tsx

@@ -33,6 +33,7 @@ import rehypeSanitize, {defaultSchema} from 'rehype-sanitize';
 import rehypeExternalLinks from 'rehype-external-links'
 import remarkGfm from 'remark-gfm';
 import { PiPedalError } from './PiPedalError';
+import { rewriteT3kUrls } from './TextInfo_RewriteT3kUrls';
 
 // Extend the default schema to allow target and rel attributes on anchor tags
 const extendedSchema = {
@@ -72,6 +73,7 @@ interface TextInfoDialogProps  {
     fileName: string;
     title: string;
     onClose: () => void;
+    onT3kLinkClick?: (href: string) => boolean;
 };
 
 interface TextInfoDialogState {
@@ -162,6 +164,13 @@ const TextInfoDialog = class extends ResizeResponsiveComponent<TextInfoDialogPro
         this.props.onClose();
     }
 
+    handleT3kLinkClick = (href: string): boolean => {
+        if (this.props.onT3kLinkClick) {
+            return this.props.onT3kLinkClick(href);
+        }
+        return false;
+    }
+
 
     render() {
         return (
@@ -204,7 +213,11 @@ const TextInfoDialog = class extends ResizeResponsiveComponent<TextInfoDialogPro
                                         [remarkGfm],
                                         [rehypeRaw],
                                         [rehypeSanitize, extendedSchema],
-                                        [rehypeExternalLinks, {target: '_blank'}]
+                                        [rehypeExternalLinks, {target: '_blank'}],
+                                        [rewriteT3kUrls, {
+                                            prefixUrl: 'https://tone3000.com/',
+                                            onT3kLinkClick: this.handleT3kLinkClick
+                                        }]
                                     ]}>
                                     {this.state.textFileContent}
                                 </ReactMarkdown>