Restructure project and general improments (#91)

webapp/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component, isDevMode } from '@angular/core';
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { LucideAngularModule, Hammer } from 'lucide-angular';
-import { ThemeSwitcherComponent } from './components/theme-switcher/theme-switcher.component';
+import { ThemeSwitcherComponent } from 'app/core/theme/theme-switcher.component';
 
 @Component({
   selector: 'app-root',

webapp/src/app/app.routes.ts

@@ -1,8 +1,8 @@
 import { Routes } from '@angular/router';
 import { AboutComponent } from 'app/about/about.component';
-import { MainComponent } from 'app/main/main.component';
+import { HomeComponent } from 'app/home/home.component';
 
 export const routes: Routes = [
-  { path: '', component: MainComponent },
+  { path: '', component: HomeComponent },
   { path: 'about', component: AboutComponent }
 ];

webapp/src/app/components/theme-switcher/theme-switcher.stories.ts → webapp/src/app/core/theme/theme-switcher.stories.ts

@@ -4,7 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta: Meta<ThemeSwitcherComponent> = {
-  title: 'Components/ThemeSwitcher',
+  title: 'Components/Core/ThemeSwitcher',
   component: ThemeSwitcherComponent,
   tags: ['autodocs'],
   decorators: [

webapp/src/app/home/home.component.html

@@ -0,0 +1,11 @@
+<div class="flex gap-2 m-2 flex-col items-start justify-center">
+  <h1 class="text-3xl font-bold">Artemis Leaderboard</h1>
+  @if (query.isPending()) {
+    <span class="text-muted-foreground">Data is loading...</span>
+  } @else if (query.error()) {
+    <span class="text-destructive">An error has occurred</span>
+  }
+  @if (query.data()) {
+    <app-leaderboard [leaderboard]="query.data()" />
+  }
+</div>

webapp/src/app/home/home.component.ts

@@ -0,0 +1,21 @@
+import { Component, inject } from '@angular/core';
+import { injectQuery } from '@tanstack/angular-query-experimental';
+import { LeaderboardService } from 'app/core/modules/openapi/api/leaderboard.service';
+import { LeaderboardComponent } from 'app/home/leaderboard/leaderboard.component';
+import { lastValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [LeaderboardComponent],
+  templateUrl: './home.component.html'
+})
+export class HomeComponent {
+  leaderboardService = inject(LeaderboardService);
+
+  query = injectQuery(() => ({
+    queryKey: ['leaderboard'],
+    queryFn: async () => lastValueFrom(this.leaderboardService.getLeaderboard()),
+    gcTime: Infinity
+  }));
+}

webapp/src/app/home/home.stories.ts

@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { HomeComponent } from './home.component';
+
+const meta: Meta<HomeComponent> = {
+  title: 'Pages/Home',
+  component: HomeComponent,
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<HomeComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<app-home />`
+  })
+};

webapp/src/app/home/leaderboard/leaderboard.component.html

@@ -0,0 +1,49 @@
+<app-table>
+  <thead appTableHeader>
+    <tr appTableRow>
+      <th appTableHead class="text-center">Rank</th>
+      <th appTableHead>Contributor</th>
+      <th appTableHead class="text-center">Score</th>
+      <th appTableHead>Activity</th>
+    </tr>
+  </thead>
+  <tbody appTableBody>
+    @for (entry of leaderboard(); track entry.githubName) {
+      <tr appTableRow>
+        <td appTableCell class="text-center">{{ entry.rank }}</td>
+        <td appTableCell>
+          <a href="https://github.com/{{ entry.githubName }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 font-medium">
+            <app-avatar class="-my-2">
+              <app-avatar-image [src]="entry.avatarUrl ?? ''" [alt]="'${entry.name}\'s avatar'" />
+              <app-avatar-fallback>
+                {{ entry.name?.slice(0, 1)?.toUpperCase() }}
+              </app-avatar-fallback>
+            </app-avatar>
+            <span class="text-muted-foreground">{{ entry.name }}</span>
+          </a>
+        </td>
+        <td appTableCell class="text-center">{{ entry.score }}</td>
+        <td appTableCell class="flex items-center gap-3">
+          @if (entry.changesRequested && entry.changesRequested > 0) {
+            <div class="flex items-center gap-1 text-github-danger-foreground" title="Changes Requested">
+              <ng-icon [svg]="octFileDiff" size="16" />
+              {{ entry.changesRequested }}
+            </div>
+          }
+          @if (entry.approvals && entry.approvals > 0) {
+            <div class="flex items-center gap-1 text-github-success-foreground" title="Approvals">
+              <ng-icon [svg]="octCheck" size="16" />
+              {{ entry.approvals }}
+            </div>
+          }
+          @if (entry.comments && entry.comments > 0) {
+            <div class="flex items-center gap-1 text-github-muted-foreground" title="Comments">
+              <ng-icon [svg]="octComment" size="16" />
+              {{ entry.comments }}
+            </div>
+          }
+        </td>
+      </tr>
+    }
+  </tbody>
+</app-table>

webapp/src/app/home/leaderboard/leaderboard.component.ts

@@ -0,0 +1,42 @@
+import { Component, input } from '@angular/core';
+import { NgIconComponent } from '@ng-icons/core';
+import { octFileDiff, octCheck, octComment } from '@ng-icons/octicons';
+import { LeaderboardEntry } from 'app/core/modules/openapi';
+import { AvatarFallbackComponent } from 'app/ui/avatar/avatar-fallback.component';
+import { AvatarImageComponent } from 'app/ui/avatar/avatar-image.component';
+import { AvatarComponent } from 'app/ui/avatar/avatar.component';
+import { TableBodyDirective } from 'app/ui/table/table-body.directive';
+import { TableCaptionDirective } from 'app/ui/table/table-caption.directive';
+import { TableCellDirective } from 'app/ui/table/table-cell.directive';
+import { TableFooterDirective } from 'app/ui/table/table-footer.directive';
+import { TableHeadDirective } from 'app/ui/table/table-head.directive';
+import { TableHeaderDirective } from 'app/ui/table/table-header.directive';
+import { TableRowDirective } from 'app/ui/table/table-row.directive';
+import { TableComponent } from 'app/ui/table/table.component';
+
+@Component({
+  selector: 'app-leaderboard',
+  standalone: true,
+  imports: [
+    AvatarComponent,
+    AvatarFallbackComponent,
+    AvatarImageComponent,
+    TableComponent,
+    TableBodyDirective,
+    TableCaptionDirective,
+    TableCellDirective,
+    TableFooterDirective,
+    TableHeaderDirective,
+    TableHeadDirective,
+    TableRowDirective,
+    NgIconComponent
+  ],
+  templateUrl: './leaderboard.component.html'
+})
+export class LeaderboardComponent {
+  protected octFileDiff = octFileDiff;
+  protected octCheck = octCheck;
+  protected octComment = octComment;
+
+  leaderboard = input<LeaderboardEntry[]>();
+}