feat: Remove in-app footer and add it to a new settings modal (#51)

.changeset/early-oranges-flash.md

@@ -0,0 +1,11 @@
+---
+"specif-ai": patch
+---
+
+Remove in-app footer and add it to a new settings modal
+
+- Deleted FooterComponent and its related files
+- Updated Header component to remove logout button and company logo
+- Refactored Settings component with improved UI and added logout functionality
+- Updated color scheme from secondary to slate in various components
+- Added company logo color configuration in environment files

ui/src/app/app.component.html

@@ -10,6 +10,5 @@
       <router-outlet />
     </div>
     <app-toaster />
-    <app-footer />
   </div>
 </div>

ui/src/app/app.module.ts

@@ -22,7 +22,6 @@ import { ProjectsState } from './store/projects/projects.state';
 import { UserStoriesState } from './store/user-stories/user-stories.state';
 import { LoadingInterceptor } from './interceptor/http.interceptor';
 import { BreadcrumbState } from './store/breadcrumb/breadcrumb.state';
-import { FooterComponent } from './components/layout/footer/footer.component';
 import { BusinessProcessState } from './store/business-process/business-process.state';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as Sentry from '@sentry/angular';
@@ -39,7 +38,10 @@ import { environment } from '../environments/environment';
 import { MatSelectModule } from '@angular/material/select';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions } from '@angular/material/tooltip';
+import {
+  MAT_TOOLTIP_DEFAULT_OPTIONS,
+  MatTooltipDefaultOptions,
+} from '@angular/material/tooltip';
 import { ChatSettingsState } from './store/chat-settings/chat-settings.state';
 import { Title } from '@angular/platform-browser';
 import { InputFieldComponent } from './components/core/input-field/input-field.component';
@@ -94,7 +96,6 @@ import { AuthStateService } from './services/auth/auth-state.service';
     NgIconsModule,
     NgOptimizedImage,
     ToasterComponent,
-    FooterComponent,
     HeaderComponent,
     LoadingComponent,
     AlertComponent,
@@ -108,8 +109,8 @@ import { AuthStateService } from './services/auth/auth-state.service';
       useValue: {
         position: 'below',
         showDelay: 500,
-        hideDelay: 500
-      } as MatTooltipDefaultOptions
+        hideDelay: 500,
+      } as MatTooltipDefaultOptions,
     },
     AuthStateService,
     AuthService,
@@ -129,8 +130,8 @@ import { AuthStateService } from './services/auth/auth-state.service';
       provide: APP_INITIALIZER,
       deps: [Sentry.TraceService],
       multi: true,
-      useFactory: () => () => {}
-    }
+      useFactory: () => () => {},
+    },
   ],
   bootstrap: [AppComponent],
 })

ui/src/app/components/layout/header/header.component.html

@@ -1,72 +1,54 @@
 <ng-container *ngIf="(authService.isLoggedIn$ | async) === true">
   <div class="relative bg-secondary-950">
-    <div
-      class="flex items-center justify-between py-4 px-8"
-    >
+    <div class="flex items-center justify-between py-4 px-8">
       <div class="hidden lg:flex lg:items-center lg:pr-0.5">
         <a routerLink="/apps">
-          <ng-container *ngIf="themeConfiguration.appLogo.length > 0;else showAppName">
+          <ng-container
+            *ngIf="themeConfiguration.appLogo.length > 0; else showAppName"
+          >
             <span class="sr-only">{{ themeConfiguration.appName }}</span>
-            <img [src]="themeConfiguration.appLogo" class="mx-auto h-6" [alt]="themeConfiguration.appName"/>
+            <img
+              [src]="themeConfiguration.appLogo"
+              class="mx-auto h-6"
+              [alt]="themeConfiguration.appName"
+            />
           </ng-container>
           <ng-template #showAppName>
-            <h1 class="text-2xl text-secondary-50">{{ themeConfiguration.appName }}</h1>
+            <h1 class="text-2xl text-secondary-50">
+              {{ themeConfiguration.appName }}
+            </h1>
           </ng-template>
         </a>
       </div>
 
-      <!-- Logo -->
-      <div
-        class="flex items-center gap-4"
-      >
-        <img
-          *ngIf="themeConfiguration.companyLogo.length > 0"
-          class="h-3.5 opacity-50 w-auto"
-          [src]="themeConfiguration.companyLogo"
-          [alt]="themeConfiguration.companyName"
-        />
-        <div class="grid gap-2 grid-cols-3">
-
-          <div
-            class="flex justify-center items-center h-8 w-8 rounded-full bg-transparent text-gray-400 hover:text-gray-600 hover:bg-gray-200 cursor-pointer"
-            role="button"
-            tabindex="0"
-            (click)="openSettingsModal()"
-            (keydown.enter)="openSettingsModal()"
-            (keydown.space)="openSettingsModal(); $event.preventDefault()"
-            matTooltip="Settings"
-          >
-            <ng-icon name="heroCog8Tooth"/>
-          </div>
-
-          <div
-            class="flex justify-center items-center h-8 w-8 rounded-full bg-transparent text-gray-400 hover:text-gray-600 hover:bg-gray-200 cursor-pointer"
-            role="button"
-            tabindex="0"
-            (click)="openSelectRootDirectoryModal()"
-            (keydown.enter)="openSelectRootDirectoryModal()"
-            (keydown.space)="openSelectRootDirectoryModal(); $event.preventDefault()"
-            matTooltip="Choose Destination Folder"
-          >
-            <ng-icon name="heroFolder"/>
-          </div>
-          <div
-            class="flex justify-center items-center h-8 w-8 rounded-full bg-transparent text-gray-400 hover:text-gray-600 hover:bg-gray-200 cursor-pointer"
-            role="button"
-            tabindex="0"
-            (click)="logout()"
-            (keydown.enter)="logout()"
-            (keydown.space)="logout(); $event.preventDefault()"
-            matTooltip="Logout"
-          >
-            <ng-icon name="heroArrowRightOnRectangle"/>
-          </div>
-
+      <div class="flex items-center gap-4">
+        <div
+          class="flex justify-center items-center h-8 w-8 rounded-full bg-transparent text-slate-400 hover:text-slate-600 hover:bg-slate-200 cursor-pointer"
+          role="button"
+          tabindex="0"
+          (click)="openSelectRootDirectoryModal()"
+          (keydown.enter)="openSelectRootDirectoryModal()"
+          (keydown.space)="
+            openSelectRootDirectoryModal(); $event.preventDefault()
+          "
+          matTooltip="Choose Destination Folder"
+        >
+          <ng-icon name="heroFolder" />
         </div>
+
+        <button
+          (click)="openSettingsModal()"
+          (keydown.enter)="openSettingsModal()"
+          (keydown.space)="openSettingsModal(); $event.preventDefault()"
+          class="flex items-center justify-center font-medium opacity-100 transition-colors duration-300 px-3 py-2 gap-2 text-xs rounded-lg border border-slate-700 bg-transparent text-white hover:bg-slate-900"
+        >
+          <ng-icon name="heroCog8Tooth" strokeWidth="2" size="16" />
+          Settings
+        </button>
       </div>
     </div>
   </div>
   <div class="w-full px-8 py-3 flex items-center justify-start">
-    <app-breadcrumbs/>
+    <app-breadcrumbs />
   </div>
 </ng-container>

ui/src/app/components/layout/header/header.component.ts

@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ElectronService } from '../../../services/electron/electron.service';
 import { NGXLogger } from 'ngx-logger';
 import { Router, RouterLink } from '@angular/router';
-import { LlmSettingsComponent } from '../../llm-settings/llm-settings.component';
+import { SettingsComponent } from '../../settings/settings.component';
 import { AuthService } from '../../../services/auth/auth.service';
 import { environment } from '../../../../environments/environment';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
@@ -17,8 +17,6 @@ import {
   heroCog8Tooth,
   heroFolder,
 } from '@ng-icons/heroicons/outline';
-import { ConfirmationDialogComponent } from '../../../components/confirmation-dialog/confirmation-dialog.component';
-import { CONFIRMATION_DIALOG } from '../../../constants/app.constants';
 
 @Component({
   selector: 'app-header',
@@ -57,9 +55,10 @@ export class HeaderComponent {
     this.logger.debug(response);
     if (response.length > 0) {
       localStorage.setItem(APP_CONSTANTS.WORKING_DIR, response[0]);
-      const currentConfig = await this.electronService.getStoreValue("APP_CONFIG") || {};
+      const currentConfig =
+        (await this.electronService.getStoreValue('APP_CONFIG')) || {};
       const updatedConfig = { ...currentConfig, directoryPath: response[0] };
-      await this.electronService.setStoreValue("APP_CONFIG", updatedConfig);
+      await this.electronService.setStoreValue('APP_CONFIG', updatedConfig);
 
       this.logger.debug('===>', this.router.url);
       if (this.router.url === '/apps') {
@@ -83,24 +82,8 @@ export class HeaderComponent {
   }
 
   openSettingsModal() {
-    this.dialog.open(LlmSettingsComponent, {
+    this.dialog.open(SettingsComponent, {
       disableClose: true,
     });
   }
-
-  logout() {
-    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
-      width: '500px',
-      data: {
-        title: CONFIRMATION_DIALOG.LOGOUT.TITLE,
-        description: CONFIRMATION_DIALOG.LOGOUT.DESCRIPTION,
-        cancelButtonText: CONFIRMATION_DIALOG.LOGOUT.CANCEL_BUTTON_TEXT,
-        proceedButtonText: CONFIRMATION_DIALOG.LOGOUT.PROCEED_BUTTON_TEXT,
-      },
-    });
-
-    dialogRef.afterClosed().subscribe((res) => {
-      if (!res) this.authService.logout();
-    });
-  }
 }