Add chart button to mobile layout (#1103)

booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html

@@ -178,6 +178,15 @@
               </li>
             }
           }
+          <li>
+            <button
+              class="flex items-center gap-2 w-full text-left p-2 hover:bg-surface-200 dark:hover:bg-surface-700 rounded"
+              (click)="navigateToStats(); mobileMenu.hide()"
+            >
+              <i class="pi pi-chart-bar text-surface-100"></i>
+              Charts
+            </button>
+          </li>
           <li>
             <button
               class="flex items-center gap-2 w-full text-left p-2 hover:bg-surface-200 dark:hover:bg-surface-700 rounded"

booklore-ui/src/app/stats-component/stats-component.html

@@ -4,25 +4,28 @@
       <div class="library-filter">
         <div class="select-row">
           <label for="library-dropdown">Library Statistics</label>
-          <p-select
+          <div class="flex w-full gap-2 align-items-center">
-            id="library-dropdown"
+            <p-select
-            [options]="libraryOptions"
+              fluid
-            [(ngModel)]="selectedLibrary"
+              id="library-dropdown"
-            optionLabel="name"
+              [options]="libraryOptions"
-            size="small"
+              [(ngModel)]="selectedLibrary"
-            placeholder="Select a library"
+              optionLabel="name"
-            (onChange)="onLibraryChange()"
+              size="small"
-            appendTo="body"
+              placeholder="Select a library"
-            [style]="{'min-width': '200px'}"
+              (onChange)="onLibraryChange()"
-            class="library-dropdown">
+              appendTo="body"
-          </p-select>
+              [style]="{'min-width': '200px'}"
+              class="library-dropdown">
+            </p-select>
 
-          <p-button
+            <p-button
-            outlined
+              outlined
-            size="small"
+              size="small"
-            (onClick)="toggleConfigPanel()"
+              (onClick)="toggleConfigPanel()"
-            icon="pi pi-cog">
+              icon="pi pi-cog">
-          </p-button>
+            </p-button>
+          </div>
         </div>
 
         <div class="library-totals" role="status" aria-live="polite">