🐛 Fix dialog rendering issue to ensure full-page coverage

✨ Add optional page transitions for improved navigation
🎨 Enhance dashboard UI/UX for better user experience

src/routes/Settings.ts

@@ -62,6 +62,7 @@ export class EveSettings extends LitElement {
   @state() private profile: NDKUserProfile | undefined;
   @state() private error: string | undefined;
   @state() private darkMode = false;
+  @state() private pageTransitions = true;
   @state() private relayStatus: { running: boolean; pid: number | null; logs: string[] } = {
     running: false,
     pid: null,
@@ -77,6 +78,7 @@ export class EveSettings extends LitElement {
     try {
       this.profile = await getUserProfile();
       this.darkMode = localStorage.getItem('darkMode') === 'true';
+      this.pageTransitions = localStorage.getItem('pageTransitions') !== 'false';
       this.updateRelayStatus();
       this.loading = false;
     } catch (err) {
@@ -117,6 +119,12 @@ export class EveSettings extends LitElement {
     document.body.classList.toggle('dark', this.darkMode);
   }
 
+  private togglePageTransitions() {
+    this.pageTransitions = !this.pageTransitions;
+    localStorage.setItem('pageTransitions', this.pageTransitions.toString());
+    location.reload();
+  }
+
   private reset() {
     if (!confirm('Are you sure you want to reset the app?')) return;
     localStorage.clear();
@@ -133,12 +141,17 @@ export class EveSettings extends LitElement {
     return html`
       <arx-breadcrumbs .items=${breadcrumbItems}></arx-breadcrumbs>
       <arx-card>
-        <arx-fieldset legend="Dark Mode">
+        <arx-fieldset legend="Visual">
           <arx-toggle
             label="Dark Mode"
             .checked=${this.darkMode}
             @change=${() => this.toggleDarkMode()}
           ></arx-toggle>
+          <arx-toggle
+            label="Page Transitions"
+            .checked=${this.pageTransitions}
+            @change=${() => this.togglePageTransitions()}
+          ></arx-toggle>
         </arx-fieldset>
         <arx-fieldset legend="Profile">
           ${when(

src/routes/router.ts

@@ -14,6 +14,8 @@ import { spread } from '@open-wc/lit-helpers';
 import { LitElement, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
+import { type Ref, createRef, ref } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.js';
 import { type StaticValue, html, literal } from 'lit/static-html.js';
 
 export interface RouteParams {
@@ -24,7 +26,6 @@ interface Route {
   pattern: string;
   params: RouteParams;
   component: StaticValue;
-  // component: typeof LitElement | ((params: RouteParams) => typeof LitElement);
   title?: string;
   meta?: Record<string, string>;
 }
@@ -90,9 +91,15 @@ export default class EveRouter extends LitElement {
   @state()
   private currentIndex = -1;
 
+  @state()
+  private isTransitioning = false;
+
   @property()
   public ccnSetup = false;
 
+  windowContentRef: Ref<HTMLDivElement> = createRef();
+  pageTransitions = true;
+
   private beforeEachGuards: ((to: Route, from: Route | null) => boolean)[] = [];
   private afterEachHooks: ((to: Route, from: Route | null) => void)[] = [];
 
@@ -135,6 +142,33 @@ export default class EveRouter extends LitElement {
       height: 100%;
       margin: 0 auto;
       padding: 1rem;
+      opacity: 1;
+      transform-origin: left center;
+      transform: perspective(1200px) translateX(0);
+      transition: var(--transition);
+      backface-visibility: hidden;
+      filter: blur(0px);
+    }
+
+    .window-content::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 4px;
+      height: 100%;
+      opacity: 0;
+      transition: var(--transition);
+    }
+
+    .window-content.transitioning {
+      overflow: hidden;
+      transform: perspective(1200px) translateX(50vw);
+      filter: blur(50px);
+    }
+    
+    .window-content.transitioning::after {
+      opacity: 1;
     }
 
     .hide-overflow {
@@ -145,6 +179,7 @@ export default class EveRouter extends LitElement {
   constructor() {
     super();
     this.initializeRouter();
+    this.pageTransitions = localStorage.getItem('pageTransitions') !== 'false';
     if (this.ccnSetup) window.relay.start(localStorage.getItem('encryption_key')!);
   }
 
@@ -171,11 +206,11 @@ export default class EveRouter extends LitElement {
     window.addEventListener('popstate', this.handlePopState.bind(this));
   }
 
-  private handleHashChange(): void {
+  private async handleHashChange(): Promise<void> {
     const newPath = this.currentPath;
     if (newPath !== this.history[this.currentIndex]) {
+      await this.requestUpdateWithTransition();
       this.updateHistory(newPath);
-      this.requestUpdate();
     }
   }
 
@@ -252,7 +287,7 @@ export default class EveRouter extends LitElement {
     const canProceed = this.beforeEachGuards.every((guard) => guard(to, from));
 
     if (canProceed) {
-      this.requestUpdate();
+      await this.requestUpdateWithTransition();
       for (const hook of this.afterEachHooks) {
         hook(to, from);
       }
@@ -263,6 +298,25 @@ export default class EveRouter extends LitElement {
     }
   }
 
+  async requestUpdateWithTransition(): Promise<void> {
+    if (!this.windowContentRef.value) return this.requestUpdate();
+    if (!this.pageTransitions) return this.requestUpdate();
+    this.isTransitioning = true;
+    this.requestUpdate();
+
+    await new Promise((resolve) => {
+      this.windowContentRef.value!.addEventListener(
+        'transitionend',
+        () => {
+          this.isTransitioning = false;
+          resolve(true);
+        },
+        { once: true },
+      );
+    });
+    this.requestUpdate();
+  }
+
   goBack(): void {
     if (this.currentIndex > 0) {
       this.currentIndex--;
@@ -306,10 +360,14 @@ export default class EveRouter extends LitElement {
         title="Eve"
       ></arx-header>
       <div class="window ${this.currentRoute.pattern === 'home' ? 'hide-overflow' : ''}">
-        <div class="window-content">
-          ${keyed(
-            this.currentRoute.params,
-            html`
+        <div ${ref(this.windowContentRef)} class="window-content ${this.isTransitioning ? 'transitioning' : ''}">
+          ${when(
+            this.isTransitioning,
+            () => html`<arx-loading-view></arx-loading-view>`,
+            () =>
+              keyed(
+                this.currentRoute.params,
+                html`
               <${this.currentRoute.component} 
                 ${spread(this.currentRoute.params)}
                 path=${this.currentPath}
@@ -318,6 +376,7 @@ export default class EveRouter extends LitElement {
                 @go-forward=${this.goForward}
               ></${this.currentRoute.component}>
             `,
+              ),
           )}
         </div>
       </div>