Add Sonner-based notifications and UX polish

lib/media-service.ts

@@ -164,7 +164,7 @@ export function inferMediaKindFromMimeType(mimeType: string | null | undefined):
 export function inferMediaKindFromFileName(fileName: string): MediaKind {
   const extension = path.extname(fileName).toLowerCase();
 
-  if ([".jpg", ".jpeg", ".png", ".webp", ".svg"].includes(extension)) {
+  if ([".gif", ".jpg", ".jpeg", ".png", ".webp", ".svg"].includes(extension)) {
     return MediaKind.IMAGE;
   }
 
@@ -174,7 +174,7 @@ export function inferMediaKindFromFileName(fileName: string): MediaKind {
 export function getKindFromUploadFile(file: File) {
   const extension = getExtensionForMimeType(file.type);
 
-  if (extension && [".jpg", ".jpeg", ".png", ".webp", ".svg"].includes(extension)) {
+  if (extension && [".gif", ".jpg", ".jpeg", ".png", ".webp", ".svg"].includes(extension)) {
     return MediaKind.IMAGE;
   }
 

lib/media-storage.ts

@@ -8,6 +8,7 @@ export const MAX_MEDIA_FILE_SIZE = 5 * 1024 * 1024;
 const MIME_EXTENSIONS: Record<string, string> = {
   "image/x-icon": ".ico",
   "image/vnd.microsoft.icon": ".ico",
+  "image/gif": ".gif",
   "image/jpeg": ".jpg",
   "image/png": ".png",
   "image/webp": ".webp",