Enhance Admin and Profile UI: Update admin page to display user preferences with improved layout and visuals. Add password change functionality to profile page, including form handling and validation. Refactor ImageSelector for better image preview and upload experience.

components/ImageSelector.tsx

@@ -79,71 +79,84 @@ export default function ImageSelector({
     <div className="space-y-3">
       <label className="block text-sm text-gray-300 mb-1">{label}</label>
 
-      {/* Prévisualisation */}
-      {value && (
-        <div className="mb-3">
-          <div className="relative w-full h-48 border border-pixel-gold/30 rounded overflow-hidden bg-black/60">
-            <img
-              src={value}
-              alt="Preview"
-              className="w-full h-full object-cover"
-              onError={(e) => {
-                e.currentTarget.src = "/got-2.jpg"; // Image par défaut en cas d'erreur
-              }}
+      <div className="flex gap-4">
+        {/* Colonne gauche - Image */}
+        <div className="flex-shrink-0">
+          {value ? (
+            <div className="relative w-48 h-32 border border-pixel-gold/30 rounded overflow-hidden bg-black/60">
+              <img
+                src={value}
+                alt="Preview"
+                className="w-full h-full object-cover"
+                onError={(e) => {
+                  e.currentTarget.src = "/got-2.jpg"; // Image par défaut en cas d'erreur
+                }}
+              />
+              <button
+                onClick={() => onChange("")}
+                className="absolute top-2 right-2 px-2 py-1 bg-red-900/80 text-red-200 text-xs rounded hover:bg-red-900 transition"
+              >
+                ✕
+              </button>
+            </div>
+          ) : (
+            <div className="w-48 h-32 border border-pixel-gold/30 rounded bg-black/60 flex items-center justify-center">
+              <span className="text-xs text-gray-500">Aucune</span>
+            </div>
+          )}
+        </div>
+
+        {/* Colonne droite - Contrôles */}
+        <div className="flex-1 space-y-3">
+          {/* Input URL */}
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={urlInput}
+              onChange={(e) => setUrlInput(e.target.value)}
+              onKeyPress={(e) => e.key === "Enter" && handleUrlSubmit()}
+              placeholder="https://example.com/image.jpg ou /image.jpg"
+              className="flex-1 px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm"
             />
             <button
-              onClick={() => onChange("")}
-              className="absolute top-2 right-2 px-2 py-1 bg-red-900/80 text-red-200 text-xs rounded hover:bg-red-900 transition"
+              onClick={handleUrlSubmit}
+              className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
             >
-              ✕
+              URL
             </button>
           </div>
-          <p className="text-xs text-gray-400 mt-1 truncate">{value}</p>
+
+          {/* Upload depuis le disque */}
+          <div className="flex gap-2">
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              onChange={handleFileUpload}
+              className="hidden"
+              id={`file-${label}`}
+            />
+            <label
+              htmlFor={`file-${label}`}
+              className={`flex-1 px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition text-center cursor-pointer ${
+                uploading ? "opacity-50 cursor-not-allowed" : ""
+              }`}
+            >
+              {uploading ? "Upload..." : "Upload depuis le disque"}
+            </label>
+            <button
+              onClick={() => setShowGallery(!showGallery)}
+              className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
+            >
+              {showGallery ? "Masquer" : "Galerie"}
+            </button>
+          </div>
+
+          {/* Chemin de l'image */}
+          {value && (
+            <p className="text-xs text-gray-400 truncate">{value}</p>
+          )}
         </div>
-      )}
-
-      {/* Input URL */}
-      <div className="flex gap-2">
-        <input
-          type="text"
-          value={urlInput}
-          onChange={(e) => setUrlInput(e.target.value)}
-          onKeyPress={(e) => e.key === "Enter" && handleUrlSubmit()}
-          placeholder="https://example.com/image.jpg ou /image.jpg"
-          className="flex-1 px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm"
-        />
-        <button
-          onClick={handleUrlSubmit}
-          className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
-        >
-          URL
-        </button>
-      </div>
-
-      {/* Upload depuis le disque */}
-      <div className="flex gap-2">
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept="image/*"
-          onChange={handleFileUpload}
-          className="hidden"
-          id={`file-${label}`}
-        />
-        <label
-          htmlFor={`file-${label}`}
-          className={`flex-1 px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition text-center cursor-pointer ${
-            uploading ? "opacity-50 cursor-not-allowed" : ""
-          }`}
-        >
-          {uploading ? "Upload..." : "Upload depuis le disque"}
-        </label>
-        <button
-          onClick={() => setShowGallery(!showGallery)}
-          className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
-        >
-          {showGallery ? "Masquer" : "Galerie"}
-        </button>
       </div>
 
       {/* Galerie d'images */}