The completed app

app/components/create.gjs

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { isBlank } from '@ember/utils';
+
+export default class Create extends Component {
+  <template>
+    <input
+      class="new-todo"
+      {{on 'keydown' this.createTodo}}
+      aria-label="What needs to be done?"
+      placeholder="What needs to be done?"
+      autofocus
+    >
+  </template>
+
+  @service repo;
+
+  // TODO: we should use a <form> instead of this.
+  //       this logic was copied from "the old way"
+  //       which was Ember 3.2, and todomvc has historically
+  //       been not great for a11y
+  createTodo = (event) => {
+    let { keyCode, target } = event;
+    let value = target.value.trim();
+
+    if (keyCode === 13 && !isBlank(value)) {
+				this.repo.add({ title: value, completed: false });
+				target.value = '';
+			}
+  };
+}

app/components/filters.gjs

@@ -0,0 +1,21 @@
+import { LinkTo } from '@ember/routing';
+
+<template>
+  <ul class="filters">
+    <li>
+      <LinkTo @route="index" @activeClass="selected">
+        All
+      </LinkTo>
+    </li>
+    <li>
+      <LinkTo @route="active" @activeClass="selected">
+        Active
+      </LinkTo>
+    </li>
+    <li>
+      <LinkTo @route="completed" @activeClass="selected">
+        Completed
+      </LinkTo>
+    </li>
+  </ul>
+</template>

app/components/footer.gjs

@@ -0,0 +1,37 @@
+import { on } from '@ember/modifier';
+
+import { service } from 'ember-primitives';
+
+import Filters from './filters';
+
+function itemLabel(count) {
+  if (count === 0 || count > 1) {
+    return 'items';
+  }
+
+  return 'item';
+}
+
+<template>
+  {{#let (service 'repo') as |repo|}}
+    <footer class="footer">
+      <span class="todo-count">
+        <strong>{{repo.remaining.length}}</strong>
+       {{itemLabel repo.remaining.length}} left
+      </span>
+
+      <Filters />
+
+      {{#if repo.completed.length}}
+        <button class="clear-completed" type="button" {{on "click" repo.clearCompleted}}>
+          Clear completed
+        </button>
+      {{/if}}
+    </footer>
+
+  {{!-- 
+    Looks like the latest todoMVC styles are broken?
+      or maybe the markup is supposed to change
+    --}}
+  {{/let}}
+</template>

app/components/layout.gjs

@@ -1,4 +1,26 @@
+import { service } from 'ember-primitives';
+
+import Create from './create';
+import Footer from './footer';
+
+function hasTodos(todos) {
+  return todos.length > 0;
+}
 
 <template>
-  todo: write the app
+  <section class="todoapp">
+    <header class="header">
+      <h1>todos</h1>
+
+      <Create />
+    </header>
+
+    {{yield}}
+
+    {{#let (service 'repo') as |repo|}}
+      {{#if (hasTodos repo.all)}}
+        <Footer />
+      {{/if}}
+    {{/let}}
+  </section>
 </template>

app/components/todo-item.gjs

@@ -0,0 +1,74 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { isBlank } from '@ember/utils';
+
+export default class TodoItem extends Component {
+  <template>
+    <li class="{{if @todo.completed 'completed'}} {{if this.editing 'editing'}}">
+      <div class="view">
+        <input
+          class="toggle"
+          type="checkbox"
+          aria-label="Toggle the completion state of this todo"
+          checked={{@todo.completed}}
+          {{on 'change' this.toggleCompleted}}
+        >
+        <label {{on 'dblclick' this.startEditing}}>{{@todo.title}}</label>
+        <button
+          class="destroy"
+          {{on 'click' this.removeTodo}}
+          type="button"
+          aria-label="Delete this todo"></button>
+      </div>
+      <input
+        class="edit"
+        value={{@todo.title}}
+        {{on 'blur' this.doneEditing}}
+        {{on 'keydown' this.handleKeydown}}
+        autofocus
+      >
+    </li>
+  </template>
+
+  @service repo;
+  @tracked editing;
+
+  removeTodo = () => this.repo.delete(this.args.todo);
+
+  toggleCompleted = (event) => {
+      this.args.todo.completed = event.target.checked;
+			this.repo.persist();
+  }
+
+  handleKeydown = (event) => {
+    if (event.keyCode === 13) {
+      event.target.blur();
+    } else if (event.keyCode === 27) {
+      this.editing = false;
+    }
+  }
+
+		startEditing = (event) => {
+			this.args.onStartEdit();
+      this.editing = true;
+
+      event.target.closest('li')?.querySelector('input.edit').focus();
+		}
+
+  doneEditing = (event) => {
+			if (!this.editing) { return; }
+
+      let todoTitle = event.target.value.trim();
+
+			if (isBlank(todoTitle)) {
+        this.removeTodo();
+			} else {
+        this.args.todo.title = todoTitle;
+        this.editing = false;
+				this.args.onEndEdit();
+			}
+  }
+
+}

app/components/todo-list.gjs

@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+
+import Item from './todo-item';
+
+export default class TodoList extends Component {
+  <template>
+    <section class="main">
+      {{#if @todos.length}}
+        {{#if this.canToggle}}
+          <input
+            id="toggle-all"
+            class="toggle-all"
+            type="checkbox"
+            checked={{this.areAllCompleted}}
+            {{on 'change' this.toggleAll}}
+          >
+          <label for="toggle-all">Mark all as complete</label>
+        {{/if}}
+        <ul class="todo-list">
+          {{#each @todos as |todo|}}
+            <Item
+              @todo={{todo}}
+              @onStartEdit={{this.disableToggle}}
+              @onEndEdit={{this.enableToggle }}
+            />
+          {{/each}}
+        </ul>
+      {{/if}}
+    </section>
+  </template>
+
+  @service repo;
+
+  @tracked canToggle = true;
+
+  get areAllCompleted() {
+    return this.repo.completed.length === this.repo.all.length;
+  }
+
+  toggleAll = () => {
+    let allCompleted = this.areAllCompleted;
+
+    this.args.todos.forEach(todo => todo.completed = !allCompleted);
+    this.repo.persist();
+  }
+
+  enableToggle = () => this.canToggle = true;
+  disableToggle = () => this.canToggle = false;
+
+}

app/router.js

@@ -8,4 +8,6 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
+	this.route('active');
+	this.route('completed');
 });

app/routes/active.js

@@ -0,0 +1,28 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class ActiveTodos extends Route {
+	@service repo;
+
+	/**
+	 * This should probably be renamed to "data"
+	 * its under active development.
+	 *
+	 * In a real app you'd use this to load your
+	 * _minimally required_ data to show the page.
+	 */
+	model() {
+		let repo = this.repo;
+
+		/**
+		 * We use a getter so that we make evaluation
+		 * lazy, rather than evaluate (and detach from auto-tracking)
+		 * in this function
+		 */
+		return {
+			get todos() {
+				return repo.active;
+			},
+		};
+	}
+}

app/routes/application.js

@@ -6,4 +6,11 @@ import { service } from '@ember/service';
  */
 export default class Application extends Route {
 	@service repo;
+
+	beforeModel() {
+		/**
+		 * Load from localStorage
+		 */
+		this.repo.load();
+	}
 }

app/routes/completed.js

@@ -0,0 +1,28 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class CompletedTodos extends Route {
+	@service repo;
+
+	/**
+	 * This should probably be renamed to "data"
+	 * its under active development.
+	 *
+	 * In a real app you'd use this to load your
+	 * _minimally required_ data to show the page.
+	 */
+	model() {
+		let repo = this.repo;
+
+		/**
+		 * We use a getter so that we make evaluation
+		 * lazy, rather than evaluate (and detach from auto-tracking)
+		 * in this function
+		 */
+		return {
+			get todos() {
+				return repo.completed;
+			},
+		};
+	}
+}

app/routes/index.js

@@ -0,0 +1,28 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class AllTodos extends Route {
+	@service repo;
+
+	/**
+	 * This should probably be renamed to "data"
+	 * its under active development.
+	 *
+	 * In a real app you'd use this to load your
+	 * _minimally required_ data to show the page.
+	 */
+	model() {
+		let repo = this.repo;
+
+		/**
+		 * We use a getter so that we make evaluation
+		 * lazy, rather than evaluate (and detach from auto-tracking)
+		 * in this function
+		 */
+		return {
+			get todos() {
+				return repo.all;
+			},
+		};
+	}
+}