added icons for main categories

src/constants/index.ts

@@ -1,3 +1,8 @@
+import softwareIcon from '../assets/icons/software.webp'
+import gamingIcon from '../assets/icons/gaming.webp'
+import mediaIcon from '../assets/icons/media.webp'
+
+
 const useTestIdentifiers = true;
 
 export const QTUBE_VIDEO_BASE = useTestIdentifiers
@@ -217,4 +222,10 @@ export const subCategories3: CategoryMap = {
 ]
 
 
-};
+};
+
+export const icons = {
+    1: softwareIcon,
+    2: gamingIcon,
+    3: mediaIcon
+}

src/pages/Home/VideoList.tsx

@@ -59,7 +59,7 @@ import {
   setEditPlaylist,
   setEditVideo,
 } from "../../state/features/videoSlice";
-import { categories, subCategories, subCategories2, subCategories3 } from "../../constants";
+import { categories, icons, subCategories, subCategories2, subCategories3 } from "../../constants";
 import { Playlists } from "../../components/Playlists/Playlists";
 import { PlaylistSVG } from "../../assets/svgs/PlaylistSVG";
 import BlockIcon from "@mui/icons-material/Block";
@@ -753,7 +753,12 @@ export const VideoList = ({ mode }: VideoListProps) => {
                       gap: '25px',
                       alignItems: 'center'
                     }}>
-                      <AttachFileIcon />
+                      {icons[videoObj?.category] ? <img src={icons[videoObj?.category]} width="50px" style={{
+                        borderRadius: '5px'
+                      }}/> : (
+                         <AttachFileIcon />
+                      )}
+                     
                       <VideoCardTitle sx={{
                         width: '100px'
                       }}>

src/pages/Home/VideoListComponentLevel.tsx

@@ -19,7 +19,7 @@ import ResponsiveImage from '../../components/ResponsiveImage'
 import { formatDate, formatTimestampSeconds } from '../../utils/time'
 import { Video } from '../../state/features/videoSlice'
 import { queue } from '../../wrappers/GlobalWrapper'
-import { QTUBE_VIDEO_BASE } from '../../constants'
+import { QTUBE_VIDEO_BASE, icons } from '../../constants'
 import { formatBytes } from '../VideoContent/VideoContent'
 
 interface VideoListProps {
@@ -192,7 +192,11 @@ export const VideoListComponentLevel = ({ mode }: VideoListProps) => {
                       gap: '25px',
                       alignItems: 'center'
                     }}>
-                      <AttachFileIcon />
+                     {icons[videoObj?.category] ? <img src={icons[videoObj?.category]} width="50px" style={{
+                        borderRadius: '5px'
+                      }}/> : (
+                         <AttachFileIcon />
+                      )}
                       <VideoCardTitle sx={{
                         width: '100px'
                       }}>