256256 inset : 0 ;
257257 z-index : 2 ;
258258 display : flex;
259- align-items : flex-start ;
260- justify-content : flex-end ;
261- padding : 14 px ;
262- background : rgba (10 , 10 , 14 , 0.10 );
259+ align-items : center ;
260+ justify-content : center ;
261+ padding : 12 px ;
262+ background : rgba (10 , 10 , 14 , 0.18 );
263263 opacity : 0 ;
264264 transition : opacity 0.18s ease;
265265 pointer-events : none;
273273 }
274274 .media-btn {
275275 border-radius : 999px ;
276- border : 1 px solid rgba (255 , 255 , 255 , 0.14 );
277- background : rgba (12 , 13 , 20 , 0.82 );
276+ border : 2 px solid rgba (255 , 255 , 255 , 0.78 );
277+ background : rgba (12 , 13 , 20 , 0.88 );
278278 color : # fff ;
279- padding : 8 px 12 px ;
279+ padding : 10 px 16 px ;
280280 font-family : var (--font-head );
281- font-size : 0.84rem ;
281+ font-size : 0.95rem ;
282+ font-weight : 700 ;
283+ line-height : 1.05 ;
284+ text-align : center;
285+ box-shadow : 0 12px 30px rgba (0 , 0 , 0 , 0.28 );
282286 cursor : pointer;
283287 }
288+ .preview-avatar-shell .media-hover {
289+ border-radius : 50% ;
290+ }
284291 .preview-copy {
285292 position : absolute;
286293 left : 16px ;
@@ -1083,7 +1090,9 @@ <h2 id="previewBannerTitle">Your Noctive profile starts here.</h2>
10831090
10841091 if ( applyBtn ) {
10851092 applyBtn . disabled = pendingMediaUploadState === 'error' || ( ! hasValue && pendingMediaUploadState !== 'uploading' ) ;
1086- applyBtn . textContent = pendingMediaUploadState === 'uploading' ? 'Applying After Upload...' : 'Apply Media' ;
1093+ applyBtn . textContent = pendingMediaUploadState === 'uploading'
1094+ ? 'Uploading...'
1095+ : ( hasValue ? 'Done' : 'Apply Media' ) ;
10871096 }
10881097
10891098 if ( removeBtn ) {
@@ -1132,6 +1141,21 @@ <h2 id="previewBannerTitle">Your Noctive profile starts here.</h2>
11321141 document . getElementById ( 'mediaModal' ) ?. setAttribute ( 'hidden' , 'hidden' ) ;
11331142 }
11341143
1144+ async function persistMediaFields ( patch , successMessage = 'Profile media updated.' ) {
1145+ if ( ! patch || typeof patch !== 'object' ) return ;
1146+
1147+ const nextProfile = deepMerge ( getStoredProfile ( currentAuthUser ) , patch ) ;
1148+ localStorage . setItem ( getProfileStorageKey ( currentAuthUser ) , JSON . stringify ( nextProfile ) ) ;
1149+
1150+ if ( currentAuthUser ?. uid ) {
1151+ syncPublicProfile ( currentAuthUser . uid , nextProfile , currentAuthUser ) ;
1152+ }
1153+
1154+ await syncProfileDocument ( nextProfile ) ;
1155+ updatePreview ( readFormProfile ( ) ) ;
1156+ setSaveMessage ( successMessage , 'good saved-pop' ) ;
1157+ }
1158+
11351159 function applyMediaValue ( value , options = { } ) {
11361160 const fieldId = activeMediaTarget === 'bannerImage' ? 'bannerImage' : 'avatar' ;
11371161 const { previewValue = value , persist = true } = options ;
@@ -1144,9 +1168,9 @@ <h2 id="previewBannerTitle">Your Noctive profile starts here.</h2>
11441168 if ( persist ) {
11451169 input . value = value || '' ;
11461170 profileMediaStoragePaths [ fieldId ] = value ? pendingMediaStoragePath : '' ;
1171+ markDirty ( ) ;
11471172 }
11481173 setPreviewMediaOverride ( fieldId , previewValue || '' ) ;
1149- markDirty ( ) ;
11501174 setSaveMessage ( persist ? 'Media applied to the preview. Save Profile to keep it.' : 'Media preview updated. Upload is still finishing in the background.' , 'good' ) ;
11511175 updatePreview ( readFormProfile ( ) ) ;
11521176 }
@@ -1165,7 +1189,17 @@ <h2 id="previewBannerTitle">Your Noctive profile starts here.</h2>
11651189 applyMediaValue ( '' ) ;
11661190 setMediaPreview ( '' ) ;
11671191 updateMediaActionState ( ) ;
1168- closeMediaModal ( ) ;
1192+ const patch = activeMediaTarget === 'bannerImage'
1193+ ? { bannerImage : '' , bannerStoragePath : '' }
1194+ : { avatar : '' , avatarStoragePath : '' } ;
1195+ Promise . resolve ( persistMediaFields ( patch , activeMediaTarget === 'bannerImage' ? 'Banner removed and saved.' : 'Profile picture removed and saved.' ) )
1196+ . catch ( ( error ) => {
1197+ console . error ( 'Could not save removed media:' , error ) ;
1198+ setSaveMessage ( 'Could not save that media change. Try again.' , 'bad' ) ;
1199+ } )
1200+ . finally ( ( ) => {
1201+ closeMediaModal ( ) ;
1202+ } ) ;
11691203 } ) ;
11701204 document . getElementById ( 'mediaFile' ) ?. addEventListener ( 'change' , async ( event ) => {
11711205 const file = event . target . files ?. [ 0 ] ;
@@ -1199,7 +1233,18 @@ <h2 id="previewBannerTitle">Your Noctive profile starts here.</h2>
11991233 pendingMediaUploadState = 'ready' ;
12001234 setMediaPreview ( uploadedMedia . url ) ;
12011235 applyMediaValue ( uploadedMedia . url , { previewValue : uploadedMedia . url , persist : true } ) ;
1202- setSaveMessage ( currentAuthUser ?. uid ? 'Upload finished and media is applied to the preview. Save Profile to keep it.' : 'Image loaded and applied to the preview. Save Profile to keep it.' , 'good' ) ;
1236+ if ( uploadTarget === 'bannerImage' ) {
1237+ await persistMediaFields ( {
1238+ bannerImage : uploadedMedia . url ,
1239+ bannerStoragePath : uploadedMedia . storagePath
1240+ } , currentAuthUser ?. uid ? 'Banner uploaded and published.' : 'Banner updated for this browser preview.' ) ;
1241+ } else {
1242+ await persistMediaFields ( {
1243+ avatar : uploadedMedia . url ,
1244+ avatarStoragePath : uploadedMedia . storagePath
1245+ } , currentAuthUser ?. uid ? 'Profile picture uploaded and published.' : 'Profile picture updated for this browser preview.' ) ;
1246+ }
1247+ closeMediaModal ( ) ;
12031248 } catch ( error ) {
12041249 if ( requestId !== pendingMediaRequestId ) {
12051250 return ;
@@ -1217,7 +1262,7 @@ <h2 id="previewBannerTitle">Your Noctive profile starts here.</h2>
12171262 } ) ;
12181263 document . getElementById ( 'applyMediaBtn' ) ?. addEventListener ( 'click' , async ( ) => {
12191264 if ( pendingMediaUploadState === 'uploading' ) {
1220- setSaveMessage ( 'Upload is still finishing. Applying as soon as it completes.. .' , 'remind' ) ;
1265+ setSaveMessage ( 'Upload is still finishing. Hang tight for one sec .' , 'remind' ) ;
12211266 try {
12221267 await pendingMediaUploadPromise ;
12231268 } catch ( error ) {
@@ -1229,12 +1274,7 @@ <h2 id="previewBannerTitle">Your Noctive profile starts here.</h2>
12291274 setSaveMessage ( 'Preview is updated, but the upload has not finished yet. Give it another moment before saving.' , 'remind' ) ;
12301275 return ;
12311276 }
1232- applyMediaValue ( value , { previewValue : pendingMediaPreviewValue || value , persist : true } ) ;
1233- const avatarValue = document . getElementById ( 'avatar' ) ?. value . trim ( ) || '' ;
1234- const bannerValue = document . getElementById ( 'bannerImage' ) ?. value . trim ( ) || '' ;
1235- if ( ( activeMediaTarget === 'avatar' && avatarValue === value ) || ( activeMediaTarget === 'bannerImage' && bannerValue === value ) || ! value ) {
1236- closeMediaModal ( ) ;
1237- }
1277+ closeMediaModal ( ) ;
12381278 } ) ;
12391279 document . getElementById ( 'mediaModal' ) ?. addEventListener ( 'click' , ( event ) => {
12401280 if ( event . target . id === 'mediaModal' ) closeMediaModal ( ) ;
0 commit comments