style(AuthoringTool): Organize unit listing page using tabs

src/assets/wise5/authoringTool/project-list/project-list.component.html

@@ -1,75 +1,77 @@
-<div id="top" class="view-content view-content--with-sidemenu">
-  <div class="l-constrained" class="flex flex-col">
+<div id="top" class="view-content">
+  <div class="l-constrained flex flex-col">
     <div class="node-content md-whiteframe-1dp flex flex-wrap" style="position: relative">
-      <div class="main-box">
-        <button
-          mat-raised-button
-          color="primary"
-          matTooltip="Back to Teacher Home"
-          i18n-matTooltip
-          (click)="goHome()"
-        >
-          <mat-icon>arrow_back</mat-icon>
-        </button>
-        <button
-          mat-raised-button
-          color="primary"
-          matTooltip="Create a New Unit"
-          i18n-matTooltip
-          (click)="addNewProject()"
-          style="margin-left: 8px"
-        >
-          <mat-icon>add</mat-icon>
-        </button>
+      <div class="p-8 w-full">
+        <div class="flex flex-wrap justify-end gap-1">
+          <button mat-raised-button color="primary" (click)="addNewProject()" class="flex gap-1">
+            <mat-icon>add</mat-icon> <span i18n>Create new unit</span>
+          </button>
+          <button mat-raised-button color="primary" (click)="goHome()" class="flex gap-1">
+            <mat-icon>calendar_month</mat-icon> <span i18n>Class schedule</span>
+          </button>
+        </div>
         <ng-template #projectTemplate let-project="project">
-          <span
-            (click)="previewProject(project.id)"
-            class="projectButton"
-            matTooltip="Preview"
-            matTooltipPosition="left"
-            i18n-matTooltip
-          >
-            <mat-icon>preview</mat-icon>
-          </span>
-          <span
-            (click)="copyProject(project.id)"
-            class="projectButton"
-            matTooltip="Copy"
-            matTooltipPosition="left"
-            i18n-matTooltip
-          >
-            <mat-icon>content_copy</mat-icon>
-          </span>
-          <span (click)="openProject(project.id)" class="projectButton flex grow">
-            <span>{{ project.id }} - {{ project.name }}</span
-            >&nbsp;
-            @if (project.runId != null) {
-              <span i18n>(Run ID: {{ project.runId }})</span>
-            }
-          </span>
+          <button class="projectItem" mat-list-item (click)="openProject(project.id)">
+            <span class="flex items-center justify-between gap-2">
+              <span class="whitespace-normal">
+                <span>{{ project.id }} - {{ project.name }}</span>
+                @if (project.runId != null) {
+                  &nbsp;<span i18n>(Run ID: {{ project.runId }})</span>
+                }
+              </span>
+              <span>
+                <button
+                  matIconButton
+                  (click)="copyProject(project.id); $event.stopPropagation()"
+                  matTooltip="Copy"
+                  matTooltipPosition="above"
+                  i18n-matTooltip
+                >
+                  <mat-icon>content_copy</mat-icon>
+                </button>
+                <button
+                  matIconButton
+                  (click)="previewProject(project.id); $event.stopPropagation()"
+                  matTooltip="Preview"
+                  matTooltipPosition="above"
+                  i18n-matTooltip
+                >
+                  <mat-icon>preview</mat-icon>
+                </button>
+              </span>
+            </span>
+          </button>
         </ng-template>
-        <div style="width: 750px">
-          <h3 i18n>My Units</h3>
-          @if (projects.length == 0) {
-            <div i18n>You have no units</div>
-          } @else {
-            @for (project of projects; track project.id) {
-              <div id="{{ project.id }}" class="projectItem flex">
-                <ng-template *ngTemplateOutlet="projectTemplate; context: { project: project }" />
-              </div>
+        <mat-tab-group mat-stretch-tabs="false">
+          <mat-tab label="My Units" i18n-label>
+            @if (projects.length == 0) {
+              <p i18n>You have no units</p>
+            } @else {
+              <mat-action-list>
+                @for (project of projects; track project.id) {
+                  <ng-container
+                    [ngTemplateOutlet]="projectTemplate"
+                    [ngTemplateOutletContext]="{ project: project }"
+                  />
+                }
+              </mat-action-list>
             }
-          }
-          <h3 i18n>Shared Units</h3>
-          @if (sharedProjects.length == 0) {
-            <div i18n>You have no shared units</div>
-          } @else {
-            @for (project of sharedProjects; track project.id) {
-              <div id="{{ project.id }}" class="projectItem flex">
-                <ng-template *ngTemplateOutlet="projectTemplate; context: { project: project }" />
-              </div>
+          </mat-tab>
+          <mat-tab label="Shared Units" i18n-label>
+            @if (sharedProjects.length == 0) {
+              <div i18n>You have no shared units</div>
+            } @else {
+              <mat-action-list>
+                @for (project of sharedProjects; track project.id) {
+                  <ng-container
+                    [ngTemplateOutlet]="projectTemplate"
+                    [ngTemplateOutletContext]="{ project: project }"
+                  />
+                }
+              </mat-action-list>
             }
-          }
-        </div>
+          </mat-tab>
+        </mat-tab-group>
       </div>
     </div>
   </div>

src/assets/wise5/authoringTool/project-list/project-list.component.ts

@@ -10,17 +10,26 @@ import { DialogWithSpinnerComponent } from '../../directives/dialog-with-spinner
 import { ConfigService } from '../../services/configService';
 import { CopyProjectService } from '../../services/copyProjectService';
 import { SessionService } from '../../services/sessionService';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatListModule } from '@angular/material/list';
 
 @Component({
   imports: [
     CommonModule,
     MatButtonModule,
     MatDialogModule,
     MatIconModule,
+    MatListModule,
+    MatTabsModule,
     MatTooltipModule,
     RouterModule
   ],
-  styleUrl: './project-list.component.scss',
+  styles: `
+    .projectItem:hover {
+      cursor: pointer;
+      background-color: #add8e6;
+    }
+  `,
   templateUrl: './project-list.component.html'
 })
 export class ProjectListComponent implements OnInit, OnDestroy {

src/messages.xlf

@@ -1703,7 +1703,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
-          <context context-type="linenumber">52,54</context>
+          <context context-type="linenumber">46,48</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4794443509874758508" datatype="html">
@@ -5799,7 +5799,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
-          <context context-type="linenumber">38,40</context>
+          <context context-type="linenumber">27,28</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component.html</context>
@@ -6105,7 +6105,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
-          <context context-type="linenumber">29,31</context>
+          <context context-type="linenumber">36,37</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/export-item/export-item.component.html</context>
@@ -8857,7 +8857,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
-          <context context-type="linenumber">47,48</context>
+          <context context-type="linenumber">19,20</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3570561190371217661" datatype="html">
@@ -13188,60 +13188,60 @@ The branches will be removed but the steps will remain in the unit.</source>
           <context context-type="linenumber">10,14</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="3665922072246739344" datatype="html">
-        <source>Back to Teacher Home</source>
+      <trans-unit id="87418722412836884" datatype="html">
+        <source>Create new unit</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
-          <context context-type="linenumber">8,12</context>
+          <context context-type="linenumber">7,9</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="6028595855188256954" datatype="html">
-        <source>Create a New Unit</source>
+      <trans-unit id="5180326923261897886" datatype="html">
+        <source>Class schedule</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
-          <context context-type="linenumber">17,20</context>
+          <context context-type="linenumber">10,13</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2631973667300763051" datatype="html">
         <source>You have no units</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
-          <context context-type="linenumber">54,56</context>
+          <context context-type="linenumber">48,51</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9063616864663648521" datatype="html">
         <source>Shared Units</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
-          <context context-type="linenumber">62,64</context>
+          <context context-type="linenumber">60,62</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7727005768668091798" datatype="html">
         <source>You have no shared units</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
-          <context context-type="linenumber">64,66</context>
+          <context context-type="linenumber">62,65</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5269484094677699060" datatype="html">
         <source>Copying Unit...</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">62</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5317921744918848185" datatype="html">
         <source>There was an error copying this unit. Please contact WISE staff.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.ts</context>
-          <context context-type="linenumber">60</context>
+          <context context-type="linenumber">69</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4550129747596313114" datatype="html">
         <source> (Run ID: <x id="PH" equiv-text="project.runId"/>)</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.ts</context>
-          <context context-type="linenumber">75</context>
+          <context context-type="linenumber">84</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5435676366729047906" datatype="html">
@@ -13250,14 +13250,14 @@ The branches will be removed but the steps will remain in the unit.</source>
 <x id="PH" equiv-text="projectInfo"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.ts</context>
-          <context context-type="linenumber">77</context>
+          <context context-type="linenumber">86</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1460984918484282139" datatype="html">
         <source>Loading Unit...</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.ts</context>
-          <context context-type="linenumber">100</context>
+          <context context-type="linenumber">109</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1278268521087394642" datatype="html">