feat: improve accessibility, security & user interaction in notifications and setup

- Replaced `div` with `button` elements in `NotificationHandler` for better semantics and accessibility.
- Added conditional QR Code reveal in 2FA setup with `blur` effect for enhanced security and user control.
- Enhanced messages layout for responsiveness on smaller screens with dynamic chat/sidebar toggling.
- Simplified legacy prop handling in `ShareDialog`.

frontend/src/app/(dashboard)/messages/page.tsx

@@ -2,7 +2,7 @@
 
 import { formatDistanceToNow } from "date-fns";
 import { fr } from "date-fns/locale";
-import { Search, Send, UserPlus, X } from "lucide-react";
+import { ArrowLeft, Search, Send, UserPlus, X } from "lucide-react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import * as React from "react";
@@ -238,7 +238,11 @@ export default function MessagesPage() {
 	return (
 		<div className="h-[calc(100vh-4rem)] flex overflow-hidden bg-white dark:bg-zinc-950">
 			{/* Sidebar - Liste des conversations */}
-			<div className="w-80 border-r flex flex-col">
+			<div
+				className={`w-full md:w-80 border-r flex flex-col ${
+					activeConv ? "hidden md:flex" : "flex"
+				}`}
+			>
 				<div className="p-4 border-b">
 					<div className="flex items-center justify-between mb-4">
 						<h2 className="text-xl font-bold">Messages</h2>
@@ -378,14 +382,26 @@ export default function MessagesPage() {
 			</div>
 
 			{/* Zone de chat */}
-			<div className="flex-1 flex flex-col">
+			<div
+				className={`flex-1 flex flex-col ${
+					!activeConv ? "hidden md:flex" : "flex"
+				}`}
+			>
 				{activeConv ? (
 					<>
 						{/* Header */}
-						<div className="p-4 border-b flex items-center justify-between">
+						<div className="p-4 border-b flex items-center gap-2">
+							<Button
+								variant="ghost"
+								size="icon"
+								className="md:hidden rounded-full"
+								onClick={() => setActiveConv(null)}
+							>
+								<ArrowLeft className="h-5 w-5" />
+							</Button>
 							<Link
 								href={`/user/${activeConv.recipient.username}`}
-								className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+								className="flex-1 flex items-center gap-3 hover:opacity-80 transition-opacity"
 							>
 								<Avatar className="h-8 w-8">
 									<AvatarImage src={activeConv.recipient.avatarUrl} />