feat: add Rust language support and concept group handling

app/components/track-page/card.hbs

@@ -7,7 +7,7 @@
     <div class="flex items-center justify-between gap-3 mb-4">
       <div class="flex items-center flex-wrap gap-3">
         <div
-          class="text-lg md:text-xl font-semibold text-gray-800 dark:text-gray-200 flex items-center
+          class="text-xl font-semibold text-gray-800 dark:text-gray-200 flex items-center
             {{if @isNavigatingToOtherPage 'group-hover:text-teal-500 transition-colors'}}"
           data-test-track-page-card-title
         >
@@ -31,7 +31,7 @@
         {{#if @isComplete}}
           {{svg-jar "check-circle" class="w-8 h-8 fill-current text-teal-500"}}
         {{else if (and @logoImageUrl @logoImageAltText)}}
-          <img src={{@logoImageUrl}} alt={{@logoImageAltText}} class="w-8 md:w-12 transform scale-100 group-hover:scale-105 transition-all" />
+          <img src={{@logoImageUrl}} alt={{@logoImageAltText}} class="w-8 transform scale-100 group-hover:scale-105 transition-all" />
         {{/if}}
       </div>
     </div>

app/components/track-page/introduction-and-courses.ts → app/components/track-page/course-card-list.ts

@@ -15,7 +15,7 @@ interface Signature {
   };
 }
 
-export default class TrackPageIntroductionAndCoursesComponent extends Component<Signature> {
+export default class TrackPageCourseCardListComponent extends Component<Signature> {
   logoImage = logoImage;
   comingSoonImage = comingSoonImage;
 
@@ -37,17 +37,10 @@ export default class TrackPageIntroductionAndCoursesComponent extends Component<
       };
     });
   }
-
-  get userHasStartedTrack() {
-    return (
-      this.authenticator.currentUser &&
-      this.authenticator.currentUser.repositories.filterBy('language', this.args.language).filterBy('lastSubmissionAt')[0]
-    );
-  }
 }
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
-    'TrackPage::IntroductionAndCourses': typeof TrackPageIntroductionAndCoursesComponent;
+    'TrackPage::CourseCardList': typeof TrackPageCourseCardListComponent;
   }
 }

app/components/track-page/course-card.hbs

@@ -14,7 +14,7 @@
     </:afterTitle>
 
     <:default>
-      <div class="leading-6 prose dark:prose-invert mb-6">
+      <div class="leading-6 prose dark:prose-invert mb-4 pr-8">
         {{markdown-to-html this.introductionMarkdown}}
       </div>
 
@@ -53,7 +53,7 @@
         </div>
       {{/if}}
 
-      <div class="leading-6 prose dark:prose-invert mb-6 pr-8 md:pr-12">
+      <div class="leading-6 prose dark:prose-invert mb-4 pr-8">
         {{markdown-to-html this.introductionMarkdown}}
       </div>
 

app/components/track-page/header/index.hbs

@@ -29,25 +29,26 @@
     {{#if (has-block "cta")}}
       {{yield to="cta"}}
     {{else}}
-      <div class="flex items-center flex-wrap gap-x-2 gap-y-4 mt-5">
-        {{#if this.currentUserHasStartedTrack}}
+      {{#if this.currentUserHasStartedTrack}}
+        <div class="flex items-center flex-wrap gap-x-2 gap-y-4 mt-5">
           <TrackPage::ResumeTrackButton @language={{@language}} @courses={{@courses}} />
-        {{else}}
-          <TrackPage::StartTrackButton @language={{@language}} @courses={{@courses}} />
-        {{/if}}
 
-        {{#if (gt this.topParticipants.length 0)}}
-          <div class="hidden sm:flex items-center">
-            <div class="flex -space-x-1 hover:space-x-1 items-center">
-              {{#each this.topParticipants as |user|}}
-                <TrackPage::Header::TopParticipantAvatar @user={{user}} />
-              {{/each}}
-            </div>
+          {{! TODO: Bring this the "Start Track" button once we can account for both concepts & challenges }}
+          {{!-- <TrackPage::StartTrackButton @language={{@language}} @courses={{@courses}} /> --}}
 
-            <span class="text-xs text-gray-600 dark:text-gray-400 ml-2">Join the best</span>
-          </div>
-        {{/if}}
-      </div>
+          {{#if (gt this.topParticipants.length 0)}}
+            <div class="hidden sm:flex items-center">
+              <div class="flex -space-x-1 hover:space-x-1 items-center">
+                {{#each this.topParticipants as |user|}}
+                  <TrackPage::Header::TopParticipantAvatar @user={{user}} />
+                {{/each}}
+              </div>
+
+              <span class="text-xs text-gray-600 dark:text-gray-400 ml-2">Join the best</span>
+            </div>
+          {{/if}}
+        </div>
+      {{/if}}
     {{/if}}
   </div>
   <div class="ml-4 hidden md:flex h-36 w-36 flex-shrink-0">

app/components/track-page/primer-concept-group-section/concept-list-item.hbs

@@ -0,0 +1,35 @@
+<LinkTo
+  @route="concept"
+  @models={{array @concept.slug}}
+  class="block hover:bg-gray-50 dark:hover:bg-gray-700/50 py-1.5 -mx-1.5 px-1.5 rounded"
+  data-test-concept-list-item
+  ...attributes
+>
+  <div class="flex items-center justify-between">
+    <div class="flex items-center">
+      <div class="w-2 h-2 {{if @isComplete 'bg-teal-500' 'bg-gray-200 dark:bg-gray-700'}} rounded-full mr-2"></div>
+
+      {{! TODO: Qualify all heroicons with solid/outline }}
+      {{svg-jar "book-open-outline" class="w-6 mr-2 text-gray-400 dark:text-gray-600"}}
+
+      <div class="prose dark:prose-invert prose-sm">
+        {{@concept.title}}
+      </div>
+    </div>
+
+    {{#if @isComplete}}
+      {{svg-jar "check" class="ml-1 w-5 text-teal-500"}}
+    {{else}}
+      <div class="flex items-center gap-1 pl-4 flex-shrink-0">
+        <span class="text-xs text-gray-400 dark:text-gray-600">
+          {{@concept.estimatedReadingTimeInMinutes}}
+          mins
+        </span>
+
+        {{svg-jar "clock" class="w-4 fill-current text-gray-300 dark:text-gray-700"}}
+      </div>
+    {{/if}}
+
+    <EmberTooltip @text={{@concept.descriptionMarkdown}} />
+  </div>
+</LinkTo>

app/components/track-page/primer-concept-group-section/concept-list-item.ts

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
+import type ConceptModel from 'codecrafters-frontend/models/concept';
+import { service } from '@ember/service';
+
+interface Signature {
+  Element: HTMLAnchorElement;
+
+  Args: {
+    isComplete: boolean;
+    concept: ConceptModel;
+  };
+}
+
+export default class ConceptListItemComponent extends Component<Signature> {
+  @service declare authenticator: AuthenticatorService;
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'TrackPage::PrimerConceptGroupSection::ConceptListItem': typeof ConceptListItemComponent;
+  }
+}

app/components/track-page/primer-concept-group-section/concept-list.hbs

@@ -0,0 +1,3 @@
+{{#each this.sortedConcepts as |concept|}}
+  <TrackPage::PrimerConceptGroupSection::ConceptListItem @concept={{concept}} @isComplete={{false}} />
+{{/each}}

app/components/track-page/primer-concept-group-section/concept-list.ts

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import ConceptGroupModel from 'codecrafters-frontend/models/concept-group';
+import ConceptModel from 'codecrafters-frontend/models/concept';
+import Store from '@ember-data/store';
+import { inject as service } from '@ember/service';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    conceptGroup: ConceptGroupModel;
+  };
+}
+
+export default class ConceptListComponent extends Component<Signature> {
+  @service declare store: Store;
+
+  get sortedConcepts() {
+    return this.args.conceptGroup.conceptSlugs.reduce((acc, slug) => {
+      const concept = this.store.peekAll('concept').find((concept) => concept.slug === slug);
+
+      if (concept) {
+        acc.push(concept);
+      }
+
+      return acc;
+    }, [] as ConceptModel[]);
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'TrackPage::PrimerConceptGroupSection::ConceptList': typeof ConceptListComponent;
+  }
+}

app/components/track-page/primer-concept-group-section/index.hbs

@@ -0,0 +1,50 @@
+{{! template-lint-disable no-invalid-interactive }}
+<div
+  class="relative group/concept-group-section {{unless this.conceptListIsExpanded 'cursor-pointer'}}"
+  {{on "click" this.handleSectionClick}}
+  role={{if this.conceptListIsExpanded "region" "button"}}
+  ...attributes
+  data-test-primer-concept-group-section
+>
+  <div class="border-b pb-1 mb-4 flex items-center gap-2 {{unless this.conceptListIsExpanded 'group-hover/concept-group-section:border-gray-300'}}">
+    <div class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
+      {{@language.name}}
+      Basics
+    </div>
+    <Pill @color="green">
+      FREE
+      <EmberTooltip @text="These interactive guides are 100% free to access." />
+    </Pill>
+  </div>
+
+  <div class="prose dark:prose-invert mb-4">
+    <p>
+      New to
+      {{@language.name}}? Start with our interactive byte-sized guides that cover the basics.
+    </p>
+  </div>
+
+  <div class={{if this.conceptListIsExpanded "" "h-60 overflow-hidden"}}>
+    <TrackPage::PrimerConceptGroupSection::ConceptList @conceptGroup={{@conceptGroup}} />
+
+    {{#if this.conceptListIsExpanded}}
+      <div class="flex items-center justify-center mt-2">
+        <PrimaryButton {{on "click" this.handleCollapseButtonClick}}>
+          ↑ Collapse ↑
+        </PrimaryButton>
+      </div>
+    {{else}}
+      <div class="absolute top-20 bottom-0 left-0 right-0 vertical-mask dark:vertical-mask-gray-850 rounded-b-md p-4 flex items-end justify-center">
+        {{#if this.authenticator.isAuthenticated}}
+          <PrimaryButton class="mb-4 group-hover/concept-group-section:bg-teal-600 w-full sm:w-auto">
+            ↓ Show all ↓
+          </PrimaryButton>
+        {{else}}
+          <PrimaryButton class="mb-4 group-hover/concept-group-section:bg-teal-600 w-full sm:w-auto">
+            <span>Start learning →</span>
+          </PrimaryButton>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+</div>

app/components/track-page/primer-concept-group-section/index.ts

@@ -0,0 +1,51 @@
+import Component from '@glimmer/component';
+import ConceptGroupModel from 'codecrafters-frontend/models/concept-group';
+import LanguageModel from 'codecrafters-frontend/models/language';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { next } from '@ember/runloop';
+import { service } from '@ember/service';
+import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
+import type RouterService from '@ember/routing/router-service';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    language: LanguageModel;
+    conceptGroup: ConceptGroupModel;
+  };
+}
+
+export default class TrackPagePrimerConceptGroupSectionComponent extends Component<Signature> {
+  @service declare authenticator: AuthenticatorService;
+  @service declare router: RouterService;
+
+  @tracked conceptListIsExpanded = false;
+
+  @action
+  handleCollapseButtonClick() {
+    next(() => {
+      this.conceptListIsExpanded = false;
+    });
+  }
+
+  @action
+  handleSectionClick() {
+    if (this.conceptListIsExpanded) {
+      return;
+    }
+
+    if (this.authenticator.isAuthenticated) {
+      this.conceptListIsExpanded = true;
+    } else {
+      this.router.transitionTo('concept', this.args.conceptGroup.conceptSlugs[0]!);
+    }
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'TrackPage::PrimerConceptGroupSection': typeof TrackPagePrimerConceptGroupSectionComponent;
+  }
+}

app/controllers/track.ts

@@ -1,13 +1,15 @@
 import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 import type CourseModel from 'codecrafters-frontend/models/course';
+import type Store from '@ember-data/store';
+import { inject as service } from '@ember/service';
 import { type ModelType } from 'codecrafters-frontend/routes/track';
 
 export default class TrackController extends Controller {
   declare model: ModelType;
 
   @service declare authenticator: AuthenticatorService;
+  @service declare store: Store;
 
   get courses(): CourseModel[] {
     if (this.authenticator.currentUser && this.authenticator.currentUser.isStaff) {

app/models/language.ts

@@ -145,6 +145,10 @@
     return this.slug === 'go';
   }
 
+  get isRust() {
+    return this.slug === 'rust';
+  }
+
   get sortPositionForTrack() {
     return [
       // Popular tracks, sorted by usage
@@ -247,4 +251,12 @@
       zig: 7037,
     }[this.slug];
   }
+
+  get trackPrimerConceptGroupSlug() {
+    if (this.isRust) {
+      return 'rust-primer';
+    } else {
+      return null;
+    }
+  }
 }

app/routes/catalog.ts

@@ -7,6 +7,7 @@ import BaseRoute from 'codecrafters-frontend/utils/base-route';
 import RepositoryPoller from 'codecrafters-frontend/utils/repository-poller';
 import { hash as RSVPHash } from 'rsvp';
 import RouteInfoMetadata, { RouteColorScheme } from 'codecrafters-frontend/utils/route-info-metadata';
+import type LanguageModel from 'codecrafters-frontend/models/language';
 
 export type ModelType = {
   repositories?: RepositoryModel[];
@@ -26,6 +27,7 @@ export default class CatalogRoute extends BaseRoute {
     const modelPromises: {
       repositories?: Promise<RepositoryModel[]>;
       courses?: Promise<CourseModel[]>;
+      _languages?: Promise<LanguageModel[]>;
     } = {};
 
     if (this.authenticator.isAuthenticated) {
@@ -39,6 +41,11 @@ export default class CatalogRoute extends BaseRoute {
       include: 'extensions,stages,language-configurations.language',
     }) as unknown as Promise<CourseModel[]>;
 
+    // Resources required by the track page
+    modelPromises._languages = this.store.findAll('language', {
+      include: 'primer-concept-group,primer-concept-group.author,primer-concept-group.concepts,primer-concept-group.concepts.author',
+    }) as unknown as Promise<LanguageModel[]>;
+
     return RSVPHash(modelPromises) as Promise<ModelType>;
   }
 }