From 30a77257695e60d0e0b44ed9c2d547cc1ae1c9cc Mon Sep 17 00:00:00 2001
From: Max Litruv Boonzaayer <litruv@gmail.com>
Date: Sun, 8 Mar 2026 21:53:32 +1100
Subject: [PATCH] feat: enhance image components with draggable attribute and
 context menu handling

---
 src/app/components/image-viewer/ImageViewer.tsx     |  1 +
 src/app/components/media/Image.tsx                  |  8 +++++++-
 src/app/components/message/content/ImageContent.tsx |  1 -
 src/app/components/unread-badge/UnreadBadge.tsx     | 12 ++++++------
 src/app/features/room/message/Message.tsx           |  4 ++--
 src/app/pages/client/ClientNonUIFeatures.tsx        |  2 +-
 src/app/pages/client/sidebar/DirectTab.tsx          | 12 +++++++++---
 7 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/app/components/image-viewer/ImageViewer.tsx b/src/app/components/image-viewer/ImageViewer.tsx
index bbc2a2c..76a092d 100644
--- a/src/app/components/image-viewer/ImageViewer.tsx
+++ b/src/app/components/image-viewer/ImageViewer.tsx
@@ -90,6 +90,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
             }}
             src={src}
             alt={alt}
+            draggable={false}
             onMouseDown={onMouseDown}
           />
         </Box>
diff --git a/src/app/components/media/Image.tsx b/src/app/components/media/Image.tsx
index dda21a5..b54a3a6 100644
--- a/src/app/components/media/Image.tsx
+++ b/src/app/components/media/Image.tsx
@@ -4,6 +4,12 @@ import * as css from './media.css';
 
 export const Image = forwardRef<HTMLImageElement, ImgHTMLAttributes<HTMLImageElement>>(
   ({ className, alt, ...props }, ref) => (
-    <img className={classNames(css.Image, className)} alt={alt} {...props} ref={ref} />
+    <img
+      className={classNames(css.Image, className)}
+      alt={alt}
+      draggable={false}
+      {...props}
+      ref={ref}
+    />
   )
 );
diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx
index 71bd6be..d952723 100644
--- a/src/app/components/message/content/ImageContent.tsx
+++ b/src/app/components/message/content/ImageContent.tsx
@@ -164,7 +164,6 @@ export const ImageContent = as<'div', ImageContentProps>(
                 <Modal
                   className={ModalWide}
                   size="500"
-                  onContextMenu={(evt: any) => evt.stopPropagation()}
                 >
                   {renderViewer({
                     src: srcState.data,
diff --git a/src/app/components/unread-badge/UnreadBadge.tsx b/src/app/components/unread-badge/UnreadBadge.tsx
index f8bfefa..6de099c 100644
--- a/src/app/components/unread-badge/UnreadBadge.tsx
+++ b/src/app/components/unread-badge/UnreadBadge.tsx
@@ -18,19 +18,19 @@ export function UnreadBadgeCenter({ children }: { children: ReactNode }) {
 }
 
 export function UnreadBadge({ highlight, count }: UnreadBadgeProps) {
+  if (count === 0) return null;
+  
   return (
     <Badge
       variant={highlight ? 'Success' : 'Secondary'}
-      size={count > 0 ? '400' : '200'}
+      size="400"
       fill="Solid"
       radii="Pill"
       outlined={false}
     >
-      {count > 0 && (
-        <Text as="span" size="L400">
-          {millify(count)}
-        </Text>
-      )}
+      <Text as="span" size="L400">
+        {millify(count)}
+      </Text>
     </Badge>
   );
 }
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index be1c958..6fb2b1e 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -919,7 +919,7 @@ export const Message = as<'div', MessageProps>(
     const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
       if (evt.altKey || !window.getSelection()?.isCollapsed || edit) return;
       const tag = (evt.target as any).tagName;
-      if (typeof tag === 'string' && tag.toLowerCase() === 'a') return;
+      if (typeof tag === 'string' && (tag.toLowerCase() === 'a' || tag.toLowerCase() === 'img')) return;
       evt.preventDefault();
       setMenuAnchor({
         x: evt.clientX,
@@ -1297,7 +1297,7 @@ export const Event = as<'div', EventProps>(
     const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
       if (evt.altKey || !window.getSelection()?.isCollapsed) return;
       const tag = (evt.target as any).tagName;
-      if (typeof tag === 'string' && tag.toLowerCase() === 'a') return;
+      if (typeof tag === 'string' && (tag.toLowerCase() === 'a' || tag.toLowerCase() === 'img')) return;
       evt.preventDefault();
       setMenuAnchor({
         x: evt.clientX,
diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx
index 1161fa2..0f071fd 100644
--- a/src/app/pages/client/ClientNonUIFeatures.tsx
+++ b/src/app/pages/client/ClientNonUIFeatures.tsx
@@ -202,7 +202,7 @@ function MessageNotifications() {
       eventId: string;
       isDm: boolean;
     }) => {
-      const notificationTitle = `${username} - Paarrot`;
+      const notificationTitle = username;
       const notificationBody = messageBody || 'New message';
 
       /** Replicates TitleBar click navigation logic */
diff --git a/src/app/pages/client/sidebar/DirectTab.tsx b/src/app/pages/client/sidebar/DirectTab.tsx
index ad28f18..0c978a5 100644
--- a/src/app/pages/client/sidebar/DirectTab.tsx
+++ b/src/app/pages/client/sidebar/DirectTab.tsx
@@ -119,10 +119,16 @@ export function DirectTab() {
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
-      {directUnread && (
-        <SidebarItemBadge hasCount={directUnread.total > 0}>
+      {directUnread && directUnread.total > 0 && (
+        <div style={{ 
+          position: 'absolute', 
+          bottom: '2px', 
+          right: '2px',
+          pointerEvents: 'none',
+          zIndex: 2,
+        }}>
           <UnreadBadge highlight={directUnread.highlight > 0} count={directUnread.total} />
-        </SidebarItemBadge>
+        </div>
       )}
       {menuAnchor && (
         <PopOut