Refactor backend helpers and fix UI warnings

front/src/components/CreatePost.tsx

@@ -12,6 +12,7 @@ import {
   Button, 
   Text, 
   makeStyles, 
+  mergeClasses,
   shorthands, 
   tokens,
   Input,
@@ -672,7 +673,10 @@ const CreatePost: React.FC = () => {
             {suggestions.map((item, idx) => (
               <div
                 key={`${item}-${idx}`}
-                className={`${styles.suggestItem} ${idx === activeSuggest ? styles.suggestItemActive : ''}`}
+                className={mergeClasses(
+                  styles.suggestItem,
+                  idx === activeSuggest ? styles.suggestItemActive : undefined
+                )}
                 onMouseDown={(e) => {
                   e.preventDefault();
                   handleSuggestApply(item);
@@ -744,7 +748,10 @@ const CreatePost: React.FC = () => {
                     {tagSuggestions.map((item, idx) => (
                       <div
                         key={`${item}-${idx}`}
-                        className={`${styles.suggestItem} ${idx === activeTagSuggest ? styles.suggestItemActive : ''}`}
+                        className={mergeClasses(
+                          styles.suggestItem,
+                          idx === activeTagSuggest ? styles.suggestItemActive : undefined
+                        )}
                         onMouseDown={(e) => {
                           e.preventDefault();
                           applyTagSuggest(item);

front/src/components/ImageViewer.tsx

@@ -83,6 +83,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ src, alt, onClose }) => {
   const [filename, setFilename] = React.useState<string>('image');
   const startRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const offsetRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const imgRef = React.useRef<HTMLImageElement | null>(null);
 
   React.useEffect(() => {
     setScale(1);
@@ -100,7 +101,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ src, alt, onClose }) => {
       .catch(() => setFilename(fallback));
   }, [src]);
 
-  const handleWheel: React.WheelEventHandler<HTMLImageElement> = (e) => {
+  const handleWheel = (e: WheelEvent) => {
     e.preventDefault();
     const next = clamp(scale + (e.deltaY < 0 ? 0.15 : -0.15), 0.5, 5);
     setScale(next);
@@ -129,6 +130,15 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ src, alt, onClose }) => {
     setOffset({ x: 0, y: 0 });
   };
 
+  React.useEffect(() => {
+    const el = imgRef.current;
+    if (!el) return;
+    el.addEventListener('wheel', handleWheel, { passive: false });
+    return () => {
+      el.removeEventListener('wheel', handleWheel as EventListener);
+    };
+  }, [scale]);
+
   const handleDownload = async () => {
     try {
       const res = await fetch(src, { mode: 'cors' });
@@ -161,10 +171,10 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ src, alt, onClose }) => {
       </div>
       <div className={styles.viewerContainer} onClick={(e) => e.stopPropagation()}>
         <img
+          ref={imgRef}
           src={src}
           alt={alt || 'image'}
           className={styles.image}
-          onWheel={handleWheel}
           onMouseDown={handleMouseDown}
           onMouseMove={handleMouseMove}
           onMouseUp={handleMouseUpOrLeave}

front/src/components/PostCard.tsx

@@ -4,6 +4,7 @@ import {
   CardFooter,
   Button,
   tokens,
+  mergeClasses,
   useToastController,
   Toast,
   ToastTitle,
@@ -306,7 +307,10 @@ const PostCard = ({
           <Button
             icon={<ArrowUp24Regular primaryFill={voteChoice === 'up' ? tokens.colorBrandForegroundLink : undefined} />}
             appearance="transparent"
-            className={`${styles.actionButton} ${voteChoice === 'up' ? styles.actionButtonActive : ''}`}
+            className={mergeClasses(
+              styles.actionButton,
+              voteChoice === 'up' ? styles.actionButtonActive : undefined
+            )}
             style={voteChoice === 'up' ? { color: tokens.colorBrandForegroundLink } : undefined}
             onClick={async () => {
               if (hasVoted) {
@@ -339,7 +343,10 @@ const PostCard = ({
           <Button
             icon={<ArrowDown24Regular primaryFill={voteChoice === 'down' ? tokens.colorBrandForegroundLink : undefined} />}
             appearance="transparent"
-            className={`${styles.actionButton} ${voteChoice === 'down' ? styles.actionButtonActive : ''}`}
+            className={mergeClasses(
+              styles.actionButton,
+              voteChoice === 'down' ? styles.actionButtonActive : undefined
+            )}
             style={voteChoice === 'down' ? { color: tokens.colorBrandForegroundLink } : undefined}
             onClick={async () => {
               if (hasVoted) {