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>
-      )}
+      <Text as="span" size="L400">
+        {millify(count)}
+      </Text>
     </Badge>
   );
 }