feat: enhance image components with draggable attribute and context menu handling

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>

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}
+    />
   )
 );

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,

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>
-      )}
     </Badge>
   );
 }

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,

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 */

src/app/pages/client/sidebar/DirectTab.tsx

@@ -119,10 +119,16 @@ export function DirectTab() {
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
-      {directUnread && (
+      {directUnread && directUnread.total > 0 && (
-        <SidebarItemBadge hasCount={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