Merge pull request #1713 from codecrafters-io/update-course-listing

Include stage counts in switch repository flow
codecrafters-io · May 13, 2024 · fa9f0e6 · fa9f0e6
2 parents 071f9bd + 02fc359
commit fa9f0e6
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 28 deletions.
diff --git a/app/components/course-page/repository-dropdown-action.hbs b/app/components/course-page/repository-dropdown-action.hbs
@@ -6,5 +6,5 @@
 >
   {{yield}}
 
-  {{svg-jar @icon class=(concat "w-5 ml-4 text-gray-300 " (if @isDisabled "" "group-hover:text-teal-500"))}}
+  {{svg-jar @icon class=(concat "w-5 ml-8 text-gray-300 " (if @isDisabled "" "group-hover:text-teal-500"))}}
 </div>
diff --git a/app/components/course-page/repository-dropdown.hbs b/app/components/course-page/repository-dropdown.hbs
@@ -23,7 +23,7 @@
       </button>
     </dd.Trigger>
     <dd.Content>
-      <div class="bg-white rounded-lg shadow-lg border py-2 my-1" data-test-repository-dropdown-content>
+      <div class="bg-white rounded-lg shadow-lg border py-2 my-1 max-h-[75vh] overflow-y-auto" data-test-repository-dropdown-content>
         <div class="text-sm text-gray-700">
           <div
             class="px-3 py-2 hover:bg-gray-50 flex group {{if @activeRepository.isNew 'text-gray-300'}}"
@@ -84,19 +84,15 @@
           {{/unless}}
         </div>
         {{#if (gt this.nonActiveRepositories.length 0)}}
-          <div class="pl-3 text-sm">
-            <div class="font-bold text-gray-600 mb-2 mt-3">
-              Switch to a different repo:
-            </div>
-            <div class="">
-              {{#each this.nonActiveRepositories as |repository|}}
-                <CoursePage::RepositoryDropdown::NonActiveRepositoryLink
-                  @onClick={{fn this.handleRepositoryLinkClick repository dd.actions}}
-                  @repository={{repository}}
-                />
-              {{/each}}
-            </div>
+          <div class="font-bold text-gray-600 mb-2 mt-3 pl-3 text-sm">
+            Switch to a different repo:
           </div>
+          {{#each this.nonActiveRepositories as |repository|}}
+            <CoursePage::RepositoryDropdown::NonActiveRepositoryLink
+              @repository={{repository}}
+              {{on "click" (fn this.handleRepositoryLinkClick repository dd.actions)}}
+            />
+          {{/each}}
         {{/if}}
       </div>
     </dd.Content>

diff --git a/app/components/course-page/repository-dropdown/non-active-repository-link.hbs b/app/components/course-page/repository-dropdown/non-active-repository-link.hbs
@@ -1,17 +1,33 @@
-{{! @glint-nocheck: not typesafe yet }}
-<div
-  class="flex justify-between items-center py-2 pl-2 pr-3 hover:bg-gray-50 group cursor-pointer"
-  role="button"
-  data-test-repository-link
-  {{on "click" @onClick}}
->
-  <div class="flex items-center mr-6">
-    <img src={{@repository.language.grayLogoUrl}} alt={{@repository.language.name}} class="w-4 h-4 mr-2 block group-hover:hidden" />
-    <img src={{@repository.language.tealLogoUrl}} alt={{@repository.language.name}} class="w-4 h-4 mr-2 hidden group-hover:block" />
-    <span class="text-gray-700">{{@repository.name}}</span>
+<div class="flex justify-between items-center py-2 px-3 hover:bg-gray-50 group cursor-pointer" role="button" data-test-repository-link ...attributes>
+  <div>
+    <div class="flex items-center">
+      <span class="text-gray-700 text-sm">{{@repository.name}}</span>
+
+      <div class="text-gray-400 text-xs ml-1">
+        {{#if @repository.lastSubmissionAt}}
+          (pushed
+          {{date-from-now @repository.lastSubmissionAt}})
+        {{else}}
+          (not pushed yet)
+        {{/if}}
+      </div>
+    </div>
+
+    <div class="text-gray-400 text-xs mt-1">
+      {{@repository.completedStages.length}}
+      /
+      {{@repository.course.stages.length}}
+      stages
+    </div>
   </div>
 
-  {{#if @repository.lastSubmissionAt}}
-    <span class="text-gray-400 text-xs">(pushed {{date-from-now @repository.lastSubmissionAt}})</span>
-  {{/if}}
+  <div class="text-gray-400 text-xs ml-6">
+    <img
+      src={{@repository.language.grayLogoUrl}}
+      alt={{@repository.language.name}}
+      class="opacity-75 w-6 h-6 block group-hover:hidden flex-shrink-0"
+    />
+
+    <img src={{@repository.language.tealLogoUrl}} alt={{@repository.language.name}} class="w-6 h-6 hidden group-hover:block flex-shrink-0" />
+  </div>
 </div>
diff --git a/app/components/course-page/repository-dropdown/non-active-repository-link.ts b/app/components/course-page/repository-dropdown/non-active-repository-link.ts
@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import type RepositoryModel from 'codecrafters-frontend/models/repository';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    repository: RepositoryModel;
+  };
+
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class NonActiveRepositoryLinkComponent extends Component<Signature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'CoursePage::RepositoryDropdown::NonActiveRepositoryLink': typeof NonActiveRepositoryLinkComponent;
+  }
+}