SF-2508 Add projects page

src/SIL.XForge.Scripture/ClientApp/src/app/app-routing.module.ts

@@ -8,20 +8,20 @@ import { ProjectComponent } from './project/project.component';
 import { SettingsComponent } from './settings/settings.component';
 import { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';
 import { SettingsAuthGuard, SyncAuthGuard } from './shared/project-router.guard';
-import { StartComponent } from './start/start.component';
+import { MyProjectsComponent } from './start/start.component';
 import { SyncComponent } from './sync/sync.component';
 import { JoinComponent } from './join/join.component';
 
 const routes: Routes = [
-  { path: 'callback/auth0', component: StartComponent, canActivate: [AuthGuard] },
+  { path: 'callback/auth0', component: MyProjectsComponent, canActivate: [AuthGuard] },
   { path: 'connect-project', component: ConnectProjectComponent, canActivate: [AuthGuard] },
   { path: 'login', redirectTo: 'projects', pathMatch: 'full' },
   { path: 'join/:shareKey', component: JoinComponent },
   { path: 'join/:shareKey/:locale', component: JoinComponent },
   { path: 'projects/:projectId/settings', component: SettingsComponent, canActivate: [SettingsAuthGuard] },
   { path: 'projects/:projectId/sync', component: SyncComponent, canActivate: [SyncAuthGuard] },
   { path: 'projects/:projectId', component: ProjectComponent, canActivate: [AuthGuard] },
-  { path: 'projects', component: StartComponent, canActivate: [AuthGuard] },
+  { path: 'projects', component: MyProjectsComponent, canActivate: [AuthGuard] },
   { path: 'system-administration', component: SystemAdministrationComponent, canActivate: [SystemAdminAuthGuard] },
   { path: '**', component: PageNotFoundComponent }
 ];

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html

@@ -10,11 +10,12 @@
         <button mat-icon-button *ngIf="!isDrawerPermanent && isProjectSelected" (click)="toggleDrawer()">
           <mat-icon>menu</mat-icon>
         </button>
-        <span (click)="goHome()" class="title">
-          <img src="/assets/images/sf_logo_with_name.svg" height="40" fxHide.xs />
-          <button mat-icon-button fxHide.gt-xs>
-            <img src="/assets/images/sf.svg" height="38" />
-          </button>
+        <a mat-icon-button fxHide.xs [routerLink]="homeUrl$ | async" class="logo">
+          <img src="/assets/images/sf.svg" height="38" />
+        </a>
+        <span class="project-name-wrapper" *ngIf="isProjectSelected" fxHide.xs>
+          <span class="project-name">{{ selectedProjectDoc?.data?.name }}</span>
+          <span class="project-short-name">{{ selectedProjectDoc?.data?.shortName }}</span>
         </span>
         <span class="toolbar-spacer"></span>
         <button mat-icon-button title="{{ t('language') }}" [matMenuTriggerFor]="localeMenu" *ngIf="isAppOnline">
@@ -79,13 +80,19 @@
           </div>
           <mat-divider></mat-divider>
           <button mat-menu-item *ngIf="isSystemAdmin" [disabled]="!isAppOnline" appRouterLink="/system-administration">
+            <mat-icon>admin_panel_settings</mat-icon>
             {{ t("system_administration") }}
           </button>
-          <button mat-menu-item appRouterLink="/projects" id="project-home-link">{{ t("project_home") }}</button>
+          <button mat-menu-item appRouterLink="/projects" id="project-home-link">
+            <mat-icon>home</mat-icon> {{ t("my_projects") }}
+          </button>
           <button mat-menu-item *ngIf="canChangePassword" (click)="changePassword()" [disabled]="!isAppOnline">
+            <mat-icon>vpn_key</mat-icon>
             {{ t("change_password") }}
           </button>
-          <button mat-menu-item (click)="logOut()" id="log-out-link">{{ t("log_out") }}</button>
+          <button mat-menu-item (click)="logOut()" id="log-out-link">
+            <mat-icon>logout</mat-icon> {{ t("log_out") }}
+          </button>
           <mat-divider></mat-divider>
           <div class="pseudo-menu-item online-status">
             <ng-container *ngIf="isAppOnline"><mat-icon>cloud</mat-icon> {{ t("online") }}</ng-container>
@@ -109,11 +116,6 @@
       [opened]="isExpanded || isDrawerPermanent"
       (closed)="drawerCollapsed()"
     >
-      <app-navigation-project-selector
-        [projectDocs]="projectDocs"
-        [selected]="selectedProjectDoc"
-        (changed)="projectChanged($event)"
-      ></app-navigation-project-selector>
       <app-navigation (menuItemClicked)="itemSelected()"></app-navigation>
     </mat-drawer>
     <!-- The cdkScrollable attribute is needed so the CDK can listen to scroll events within this container -->

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.scss

@@ -211,3 +211,31 @@ header {
   flex-direction: column;
   width: 255px;
 }
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.project-name-wrapper {
+  display: flex;
+  flex-direction: column;
+  line-height: 1em;
+  max-width: 20em;
+  min-width: 0;
+  margin-inline-start: 4px;
+
+  .project-name {
+    font-size: 0.8em;
+  }
+
+  .project-short-name {
+    font-size: 0.6em;
+  }
+
+  > * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.ts

@@ -7,9 +7,9 @@ import { SystemRole } from 'realtime-server/lib/esm/common/models/system-role';
 import { AuthType, User, getAuthType } from 'realtime-server/lib/esm/common/models/user';
 import { SFProjectRole } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-role';
 import { TextInfo } from 'realtime-server/lib/esm/scriptureforge/models/text-info';
-import { filter, map } from 'rxjs/operators';
+import { filter, map, startWith } from 'rxjs/operators';
 import { ActivatedProjectService } from 'xforge-common/activated-project.service';
-import { Subscription, combineLatest } from 'rxjs';
+import { Subscription, combineLatest, Observable } from 'rxjs';
 import { AuthService } from 'xforge-common/auth.service';
 import { DataLoadingComponent } from 'xforge-common/data-loading-component';
 import { DialogService } from 'xforge-common/dialog.service';
@@ -19,7 +19,6 @@ import { FeatureFlagService } from 'xforge-common/feature-flags/feature-flag.ser
 import { FeatureFlagsDialogComponent } from 'xforge-common/feature-flags/feature-flags-dialog.component';
 import { FileService } from 'xforge-common/file.service';
 import { I18nService } from 'xforge-common/i18n.service';
-import { LocationService } from 'xforge-common/location.service';
 import { UserDoc } from 'xforge-common/models/user-doc';
 import { NoticeService } from 'xforge-common/notice.service';
 import { OnlineStatusService } from 'xforge-common/online-status.service';
@@ -31,6 +30,7 @@ import {
 import { SFUserProjectsService } from 'xforge-common/user-projects.service';
 import { UserService } from 'xforge-common/user.service';
 import { issuesEmailTemplate, supportedBrowser } from 'xforge-common/utils';
+import { filterNullish } from 'xforge-common/util/rxjs-util';
 import versionData from '../../../version.json';
 import { environment } from '../environments/environment';
 import { SFProjectProfileDoc } from './core/models/sf-project-profile-doc';
@@ -53,7 +53,6 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
   isExpanded: boolean = false;
   versionNumberClickCount = 0;
 
-  projectDocs?: SFProjectProfileDoc[];
   hasUpdate: boolean = false;
 
   private currentUserDoc?: UserDoc;
@@ -66,7 +65,6 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
   constructor(
     private readonly router: Router,
     private readonly authService: AuthService,
-    private readonly locationService: LocationService,
     private readonly userService: UserService,
     private readonly projectService: SFProjectService,
     private readonly dialogService: DialogService,
@@ -159,8 +157,11 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
     }
   }
 
-  get isLoggedIn(): Promise<boolean> {
-    return this.authService.isLoggedIn;
+  get homeUrl$(): Observable<string> {
+    return this.authService.loggedInState$.pipe(
+      map(state => (state.loggedIn ? '/projects' : '/')),
+      startWith('/')
+    );
   }
 
   get isAppLoading(): boolean {
@@ -183,15 +184,15 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
   }
 
   get selectedProjectDoc(): SFProjectProfileDoc | undefined {
-    return this._selectedProjectDoc;
+    return this.activatedProjectService.projectDoc;
   }
 
   get selectedProjectId(): string | undefined {
     return this._selectedProjectDoc == null ? undefined : this._selectedProjectDoc.id;
   }
 
   get isProjectSelected(): boolean {
-    return this.selectedProjectId != null;
+    return this.activatedProjectService.projectId != null;
   }
 
   get selectedProjectRole(): SFProjectRole | undefined {
@@ -231,13 +232,18 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
 
     const projectDocs$ = this.userProjectsService.projectDocs$;
 
+    const selectedProjectDoc$ = projectDocs$.pipe(
+      map(projectDocs => {
+        const projectId = this.activatedProjectService.projectId;
+        return projectId == null ? undefined : projectDocs.find(p => p.id === projectId);
+      }),
+      filterNullish()
+    );
+
     // select the current project
     this.subscribe(
-      combineLatest([projectDocs$, this.activatedProjectService.projectId$]),
-      async ([projectDocs, projectId]) => {
-        this.projectDocs = projectDocs;
-        const selectedProjectDoc = projectId == null ? undefined : this.projectDocs.find(p => p.id === projectId);
-
+      combineLatest([selectedProjectDoc$, this.activatedProjectService.projectId$]),
+      async ([selectedProjectDoc, projectId]) => {
         if (this.selectedProjectDeleteSub != null) {
           this.selectedProjectDeleteSub.unsubscribe();
           this.selectedProjectDeleteSub = undefined;
@@ -333,14 +339,6 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
     this.authService.logOut();
   }
 
-  async goHome(): Promise<void> {
-    if (await this.isLoggedIn) {
-      this.router.navigateByUrl('/projects');
-    } else {
-      this.locationService.go('/');
-    }
-  }
-
   projectChanged(value: string): void {
     if (value === CONNECT_PROJECT_OPTION) {
       if (!this.isDrawerPermanent) {

src/SIL.XForge.Scripture/ClientApp/src/app/app.module.ts

@@ -27,15 +27,14 @@ import { CheckingModule } from './checking/checking.module';
 import { ConnectProjectComponent } from './connect-project/connect-project.component';
 import { CoreModule } from './core/core.module';
 import { JoinComponent } from './join/join.component';
-import { NavigationProjectSelectorComponent } from './navigation-project-selector/navigation-project-selector.component';
 import { ProjectSelectComponent } from './project-select/project-select.component';
 import { ProjectComponent } from './project/project.component';
 import { ScriptureChooserDialogComponent } from './scripture-chooser-dialog/scripture-chooser-dialog.component';
 import { DeleteProjectDialogComponent } from './settings/delete-project-dialog/delete-project-dialog.component';
 import { SettingsComponent } from './settings/settings.component';
 import { SharedModule } from './shared/shared.module';
 import { TextNoteDialogComponent } from './shared/text/text-note-dialog/text-note-dialog.component';
-import { StartComponent } from './start/start.component';
+import { MyProjectsComponent } from './start/start.component';
 import { SyncProgressComponent } from './sync/sync-progress/sync-progress.component';
 import { SyncComponent } from './sync/sync.component';
 import { TranslateModule } from './translate/translate.module';
@@ -50,7 +49,7 @@ import { NavigationComponent } from './navigation/navigation.component';
     DeleteProjectDialogComponent,
     ProjectComponent,
     SettingsComponent,
-    StartComponent,
+    MyProjectsComponent,
     SyncComponent,
     ScriptureChooserDialogComponent,
     SupportedBrowsersDialogComponent,
@@ -79,7 +78,6 @@ import { NavigationComponent } from './navigation/navigation.component';
     TranslocoModule,
     AppRoutingModule,
     SharedModule,
-    NavigationProjectSelectorComponent,
     AvatarComponent
   ],
   providers: [