feat(account): enhance session item removal animation and update metadata description

ts_web/elements/account/views/baseview.ts

@@ -266,6 +266,19 @@ export class BaseView extends DeesElement {
         gap: 12px;
         padding: 12px 20px;
         border-bottom: 1px solid #27272a;
+        overflow: hidden;
+        transition: all 0.3s ease-out;
+        opacity: 1;
+        max-height: 100px;
+      }
+
+      .session-item.removing {
+        opacity: 0;
+        max-height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        margin: 0;
+        border-bottom-color: transparent;
       }
 
       .session-item:last-child {
@@ -600,7 +613,7 @@ export class BaseView extends DeesElement {
     return html`
       <div class="session-list">
         ${this.sessions.map((session) => html`
-          <div class="session-item">
+          <div class="session-item" data-session-id=${session.id}>
             <div class="session-icon ${session.isCurrent ? 'current' : ''}">
               <dees-icon .icon=${this.getDeviceIcon(session.os)}></dees-icon>
             </div>
@@ -797,6 +810,14 @@ export class BaseView extends DeesElement {
       );
 
       await typedRequest.fire({ jwt, sessionId });
+
+      // Animate the session item collapse before removing from DOM
+      const sessionElement = this.shadowRoot?.querySelector(`[data-session-id="${sessionId}"]`) as HTMLElement;
+      if (sessionElement) {
+        sessionElement.classList.add('removing');
+        await new Promise(resolve => setTimeout(resolve, 300)); // Wait for animation
+      }
+
       await this.loadSessions();
     } catch (error) {
       console.error('Error revoking session:', error);