fix: Visualizzazione menu utente

Il componente UserInfoActionDialog è stato creato per mostrare le informazioni dell'utente con opzioni per il profilo utente e il logout. Allo stesso tempo, il codice relativo alle azioni dell'utente è stato rimosso da UserInfoAction.tsx e sostituito con il nuovo componente. Ho inoltre apportato una modifica a app.blade.php per correggere il caricamento dell'utente.

resources/ts/Components/Dialogs/UserInfoActionDialog.tsx

@@ -0,0 +1,47 @@
+import '@material/web/button/text-button.js';
+
+import {router} from '@maicol07/inertia-mithril';
+import {mdiAccountOutline, mdiLogoutVariant} from '@mdi/js';
+import Dialog, {DialogAttributes} from '@osm/Components/Dialogs/Dialog';
+import MdIcon from '@osm/Components/MdIcon';
+import {VnodeCollection} from '@osm/typings/jsx';
+import collect from 'collect.js';
+import Mithril from 'mithril';
+import {Request} from 'mithril-utilities';
+
+export default class UserInfoActionDialog extends Dialog {
+  icon(): Mithril.Children {
+    return app.user?.picture ? (
+      <img className="user-image mdc-elevation--z2" src={app.user.picture} alt={app.user.username}/>
+    ) : <MdIcon icon={mdiAccountOutline}/>;
+  }
+
+  headline(): Mithril.Children {
+    return <span>{app.user?.username}</span>;
+  }
+
+  contents(vnode: Mithril.Vnode<DialogAttributes, this>): Mithril.Children {
+    return (
+      <span>{app.user?.email}</span>
+    );
+  }
+
+  actions(vnode: Mithril.Vnode<DialogAttributes, this>): VnodeCollection {
+    return collect({
+      profile: (
+        <md-text-button>{__('Il tuo profilo')}</md-text-button>
+      ),
+      logout: (
+        <md-text-button id="logout-button" onclick={this.logout.bind(this)}>
+          {__('Esci')}
+          <MdIcon icon={mdiLogoutVariant} slot="icon"/>
+        </md-text-button>
+      )
+    });
+  }
+
+  async logout() {
+    await Request.post(route('logout'));
+    router.visit(route('login'));
+  }
+}

resources/ts/Components/layout/topappbar_actions/UserInfoAction.tsx

@@ -1,17 +1,7 @@
-import '@material/web/button/outlined-button.js';
+import {mdiAccountOutline} from '@mdi/js';
-import '@material/web/button/text-button.js';
+import UserInfoActionDialog from '@osm/Components/Dialogs/UserInfoActionDialog';
-
-import {router} from '@maicol07/inertia-mithril';
-import {
-  mdiAccountCircleOutline,
-  mdiAccountOutline,
-  mdiLogoutVariant
-} from '@mdi/js';
-import Dialog from '@osm/Components/Dialogs/Dialog';
-import MdIcon from '@osm/Components/MdIcon';
 import {Vnode} from 'mithril';
 import Stream from 'mithril/stream';
-import {Request} from 'mithril-utilities';
 
 import TopAppBarAction from './TopAppBarAction';
 
@@ -22,27 +12,10 @@ export default class UserInfoAction extends TopAppBarAction {
   dialogState = Stream(false);
 
   view(vnode: Vnode) {
-    // TODO: Redo with flex columns and gap
     return [
       super.view(vnode),
       // eslint-disable-next-line mithril/jsx-key
-      <Dialog open={this.dialogState}>
+      <UserInfoActionDialog open={this.dialogState}/>
-        <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
-          {app.user?.picture ? (
-            <img className="user-image mdc-elevation--z2" src={app.user.picture} alt={app.user.username}/>
-          ) : <MdIcon className="user-image" icon={this.icon}/>}
-          <b style="margin-top: 16px;">{app.user?.username}</b>
-          <span>{app.user?.email}</span>
-        </div>
-        <md-outlined-button slot="footer">
-          {this.ariaLabel}
-          <MdIcon icon={mdiAccountCircleOutline} slot="icon"/>
-        </md-outlined-button>
-        <md-text-button id="logout-button" slot="footer" onclick={this.logout.bind(this)}>
-          {__('Esci')}
-          <MdIcon icon={mdiLogoutVariant} slot="icon"/>
-        </md-text-button>
-      </Dialog>
     ];
   }
 
@@ -50,11 +23,6 @@ export default class UserInfoAction extends TopAppBarAction {
     this.dialogState(true);
   }
 
-  async logout() {
-    await Request.post(route('logout'));
-    router.visit(route('login'));
-  }
-
   getIconElement(): JSX.Element {
     return app.user && app.user.picture ? <img src={app.user.picture} alt={app.user.username} style={{borderRadius: '50%'}}/> : super.getIconElement();
   }

resources/ts/WebComponents/NavDrawer.ts

@@ -183,9 +183,6 @@ export default class NavDrawer extends LitElement {
               --_pane-margin-inline-start: var(--nav-drawer-pane-spacing-start, 28px);
           }
       }
-      .body:not(.open) .scroll-wrapper {
-          overflow-x: hidden;
-      }
 
     .pane {
       box-sizing: border-box;

resources/views/app.blade.php

@@ -32,7 +32,7 @@
   app = @js([
     'locale' => app()->getLocale(),
     'modules' => $modules,
-    'user' => Route::currentRouteName() !== 'setup.index' && auth()->user(),
+    'user' => Route::currentRouteName() !== 'setup.index' ? auth()->user() : null,
     'VERSION' => trim(file_get_contents(base_path('VERSION'))),
     'REVISION' => trim(file_get_contents(base_path('REVISION'))),
     'settings' => !str_starts_with(Route::getCurrentRoute()?->getName() ?? '', 'setup.') ? [