UI improvements

css/main.css

@@ -1969,6 +1969,7 @@ sm-chip .badge {
   border-radius: 2rem;
   justify-self: center;
   padding: 0.3rem;
+  view-transition-name: chat-header-details;
 }
 
 #receiver_name {

css/main.scss

@@ -2020,6 +2020,7 @@ sm-chip {
   border-radius: 2rem;
   justify-self: center;
   padding: 0.3rem;
+  view-transition-name: chat-header-details;
 }
 #receiver_name {
   font-weight: 500;

index.html

@@ -4553,62 +4553,68 @@
 
         function updateChatHeaderName(name) {
             if (!floGlobals.isMobileView) {
-                const animOptions = {
+                if (document.startViewTransition) {
-                    duration: 200,
+                    document.startViewTransition(() => {
-                    easing: 'ease',
+                        getRef('receiver_name').textContent = name
-                    fill: 'forwards'
+                    })
-                };
+                } else {
-                let originalName = getRef('receiver_name').textContent
+                    const animOptions = {
-                getRef('chat_details_button').style.overflow = 'initial'
+                        duration: 200,
-                const originalWidth = getRef('chat_details_button').getBoundingClientRect().width;
+                        easing: 'ease',
-                getRef('receiver_name').textContent = name
+                        fill: 'forwards'
-                const changedWidth = getRef('chat_details_button').getBoundingClientRect().width;
+                    };
-                const widthDelta = changedWidth - originalWidth
+                    let originalName = getRef('receiver_name').textContent
-                const leftMove = -widthDelta / 2;
+                    getRef('chat_details_button').style.overflow = 'initial'
-                const rightMove = widthDelta / 2;
+                    const originalWidth = getRef('chat_details_button').getBoundingClientRect().width;
-                const scale = (changedWidth / (originalWidth || 1)).toFixed(2) || 1;
-                getRef('receiver_name').textContent = originalName
-                getRef('pseudo_background').animate([
-                    {
-                        width: `${originalWidth}px`
-                    }, {
-                        width: `${changedWidth}px`
-                    }
-                ], animOptions).onfinish = (e) => {
-                    getRef('chat_details_button').style.overflow = 'hidden'
-                    e.target.cancel()
-                }
-                getRef('chat_details_button').querySelector('#receiver_initial').animate([
-                    {
-                        transform: `none`
-                    },
-                    {
-                        transform: `translateX(${leftMove}px)`
-                    },
-                ], animOptions).onfinish = e => {
-                    e.target.cancel()
-                }
-                getRef('chat_details_button').children[2].animate([
-                    {
-                        transform: `none`
-                    },
-                    {
-                        transform: `translateX(${rightMove}px)`
-                    },
-                ], animOptions).onfinish = e => {
-                    e.target.cancel()
-                }
-                getRef('chat_details_button').querySelector('#receiver_name').animate([
-                    {
-                        transform: `none`,
-                        opacity: 1,
-                    }, {
-                        transform: `scaleX(${scale})`,
-                        opacity: 0,
-                    }
-                ], animOptions).onfinish = e => {
-                    e.target.cancel()
                     getRef('receiver_name').textContent = name
+                    const changedWidth = getRef('chat_details_button').getBoundingClientRect().width;
+                    const widthDelta = changedWidth - originalWidth
+                    const leftMove = -widthDelta / 2;
+                    const rightMove = widthDelta / 2;
+                    const scale = (changedWidth / (originalWidth || 1)).toFixed(2) || 1;
+                    getRef('receiver_name').textContent = originalName
+                    getRef('pseudo_background').animate([
+                        {
+                            width: `${originalWidth}px`
+                        }, {
+                            width: `${changedWidth}px`
+                        }
+                    ], animOptions).onfinish = (e) => {
+                        getRef('chat_details_button').style.overflow = 'hidden'
+                        e.target.cancel()
+                    }
+                    getRef('chat_details_button').querySelector('#receiver_initial').animate([
+                        {
+                            transform: `none`
+                        },
+                        {
+                            transform: `translateX(${leftMove}px)`
+                        },
+                    ], animOptions).onfinish = e => {
+                        e.target.cancel()
+                    }
+                    getRef('chat_details_button').children[2].animate([
+                        {
+                            transform: `none`
+                        },
+                        {
+                            transform: `translateX(${rightMove}px)`
+                        },
+                    ], animOptions).onfinish = e => {
+                        e.target.cancel()
+                    }
+                    getRef('chat_details_button').querySelector('#receiver_name').animate([
+                        {
+                            transform: `none`,
+                            opacity: 1,
+                        }, {
+                            transform: `scaleX(${scale})`,
+                            opacity: 0,
+                        }
+                    ], animOptions).onfinish = e => {
+                        e.target.cancel()
+                        getRef('receiver_name').textContent = name
+                    }
                 }
             } else {
                 getRef('receiver_name').textContent = name

scripts/components.js

@@ -348,7 +348,7 @@ IDBsupport.innerHTML = `
                     fill: #ffc107;
                 }
             </style>
-            <article id="idb_support">
+            <article id="idb_support" style="display: none">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>
                 <h1>Your browser doesn't support IndexedDB</h1>
                 <p>
@@ -374,6 +374,7 @@ window.customElements.define('idb-support', class extends HTMLElement {
             request.onerror = function (event) {
                 // IndexedDB is not allowed or an error occurred
                 console.log('IndexedDB is not allowed or encountered an error.');
+                thisComponent.shadowRoot.querySelector('#idb_support').style.display = 'flex';
             };
             request.onsuccess = function (event) {
                 // IndexedDB is allowed and successfully opened the database