From 94f2bb50774aa380110db98e6fae176f533f2ab3 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 7 Feb 2021 17:30:10 +0100
Subject: [PATCH 1/6] Extract `VersionList::Row` component

---
 app/components/version-list/row.hbs        | 18 ++++++++++++++++
 app/components/version-list/row.js         | 12 +++++++++++
 app/components/version-list/row.module.css | 25 ++++++++++++++++++++++
 app/controllers/crate/versions.js          | 12 -----------
 app/styles/crate/versions.module.css       | 23 --------------------
 app/templates/crate/versions.hbs           | 18 +---------------
 6 files changed, 56 insertions(+), 52 deletions(-)
 create mode 100644 app/components/version-list/row.hbs
 create mode 100644 app/components/version-list/row.js
 create mode 100644 app/components/version-list/row.module.css
 delete mode 100644 app/controllers/crate/versions.js

diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
new file mode 100644
index 00000000000..8999c08b835
--- /dev/null
+++ b/app/components/version-list/row.hbs
@@ -0,0 +1,18 @@
+<div local-class="row" ...attributes>
+  <div>
+    <LinkTo @route="crate.version" @model={{@version.num}}>{{@version.num}}</LinkTo>
+
+    <span local-class="date">{{date-format @version.created_at 'PPP'}}</span>
+    {{#if @version.yanked}}
+      <span local-class='yanked'>yanked</span>
+    {{/if}}
+  </div>
+
+  {{#if this.isOwner}}
+    <YankButton @version={{@version}} />
+  {{else}}
+    <LinkTo @route="crate.version" @model={{@version.num}} local-class="arrow">
+      {{svg-jar "right-arrow"}}
+    </LinkTo>
+  {{/if}}
+</div>
diff --git a/app/components/version-list/row.js b/app/components/version-list/row.js
new file mode 100644
index 00000000000..876041b51de
--- /dev/null
+++ b/app/components/version-list/row.js
@@ -0,0 +1,12 @@
+import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class VersionRow extends Component {
+  @service session;
+
+  @computed('args.version.crate.owner_user', 'session.currentUser.id')
+  get isOwner() {
+    return this.args.version.crate?.owner_user?.findBy('id', this.session.currentUser?.id);
+  }
+}
diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
new file mode 100644
index 00000000000..e95d764e4c6
--- /dev/null
+++ b/app/components/version-list/row.module.css
@@ -0,0 +1,25 @@
+.row {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 20px 0;
+}
+
+.date {
+    composes: small from '../../styles/shared/typography.module.css';
+    display: inline-block;
+    margin-left: 20px;
+}
+
+.yanked {
+    composes: yanked from '../../styles/shared/typography.module.css';
+}
+
+.arrow {
+    display: inline-block;
+    float: right;
+
+    svg {
+        background: #EEECDD;
+    }
+}
diff --git a/app/controllers/crate/versions.js b/app/controllers/crate/versions.js
deleted file mode 100644
index fc43b600fb2..00000000000
--- a/app/controllers/crate/versions.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-import { inject as service } from '@ember/service';
-
-export default class CrateVersionsController extends Controller {
-  @service session;
-
-  @computed('model.owner_user', 'session.currentUser.id')
-  get isOwner() {
-    return this.model.owner_user.findBy('id', this.session.currentUser?.id);
-  }
-}
diff --git a/app/styles/crate/versions.module.css b/app/styles/crate/versions.module.css
index b87805df346..79ee65bee1f 100644
--- a/app/styles/crate/versions.module.css
+++ b/app/styles/crate/versions.module.css
@@ -13,32 +13,9 @@
 }
 
 .row {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding: 20px 0;
     border-bottom: 2px solid #d5d3cb;
 
     &:last-of-type {
         border: none;
     }
 }
-
-.date {
-    composes: small from '../shared/typography.module.css';
-    display: inline-block;
-    margin-left: 20px;
-}
-
-.yanked {
-    composes: yanked from '../shared/typography.module.css';
-}
-
-.arrow {
-    display: inline-block;
-    float: right;
-
-    svg {
-        background: #EEECDD;
-    }
-}
diff --git a/app/templates/crate/versions.hbs b/app/templates/crate/versions.hbs
index c0964e7df50..b4c402b1160 100644
--- a/app/templates/crate/versions.hbs
+++ b/app/templates/crate/versions.hbs
@@ -10,22 +10,6 @@
 
 <div local-class="list">
   {{#each this.model.versions as |version|}}
-    <div local-class="row">
-      <div>
-        <LinkTo @route="crate.version" @model={{version.num}}>{{ version.num }}</LinkTo>
-
-        <span local-class="date">{{date-format version.created_at 'PPP'}}</span>
-        {{#if version.yanked}}
-          <span local-class='yanked'>yanked</span>
-        {{/if}}
-      </div>
-      {{#if this.isOwner}}
-        <YankButton @version={{version}} />
-      {{else}}
-        <LinkTo @route="crate.version" @model={{version.num}} local-class="arrow">
-          {{svg-jar "right-arrow"}}
-        </LinkTo>
-      {{/if}}
-    </div>
+    <VersionList::Row @version={{version}} local-class="row" />
   {{/each}}
 </div>

From 544c069370fec4455f63ac1fcffa52ecac4863ca Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 7 Feb 2021 17:36:24 +0100
Subject: [PATCH 2/6] crate.versions: Convert `div` list to `ul`

---
 app/styles/crate/versions.module.css | 11 ++++++-----
 app/templates/crate/versions.hbs     |  8 +++++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/styles/crate/versions.module.css b/app/styles/crate/versions.module.css
index 79ee65bee1f..54410fb3b2b 100644
--- a/app/styles/crate/versions.module.css
+++ b/app/styles/crate/versions.module.css
@@ -10,12 +10,13 @@
     margin-top: 10px;
     padding: 0 20px;
     background-color: white;
-}
+    list-style: none;
 
-.row {
-    border-bottom: 2px solid #d5d3cb;
+    > li {
+        border-bottom: 2px solid #d5d3cb;
 
-    &:last-of-type {
-        border: none;
+        &:last-of-type {
+            border: none;
+        }
     }
 }
diff --git a/app/templates/crate/versions.hbs b/app/templates/crate/versions.hbs
index b4c402b1160..2222a9e8c5b 100644
--- a/app/templates/crate/versions.hbs
+++ b/app/templates/crate/versions.hbs
@@ -8,8 +8,10 @@
   {{date-format this.model.created_at 'PPP'}}
 </span>
 
-<div local-class="list">
+<ul local-class="list">
   {{#each this.model.versions as |version|}}
-    <VersionList::Row @version={{version}} local-class="row" />
+    <li>
+      <VersionList::Row @version={{version}} local-class="row" />
+    </li>
   {{/each}}
-</div>
+</ul>

From 0b782c3df4a516030c22a2eddd9cf809d86e81e5 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 7 Feb 2021 17:50:49 +0100
Subject: [PATCH 3/6] VersionList::Row: Make the whole row clickable

---
 app/components/version-list/row.hbs        | 14 ++++++-----
 app/components/version-list/row.module.css | 29 ++++++++++++++++------
 app/styles/application.module.css          |  1 +
 app/styles/crate/versions.module.css       |  4 +++
 4 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index 8999c08b835..24e5b1e042c 100644
--- a/app/components/version-list/row.hbs
+++ b/app/components/version-list/row.hbs
@@ -1,6 +1,12 @@
 <div local-class="row" ...attributes>
   <div>
-    <LinkTo @route="crate.version" @model={{@version.num}}>{{@version.num}}</LinkTo>
+    <LinkTo
+      @route="crate.version"
+      @model={{@version.num}}
+      local-class="num-link"
+    >
+      {{@version.num}}
+    </LinkTo>
 
     <span local-class="date">{{date-format @version.created_at 'PPP'}}</span>
     {{#if @version.yanked}}
@@ -9,10 +15,6 @@
   </div>
 
   {{#if this.isOwner}}
-    <YankButton @version={{@version}} />
-  {{else}}
-    <LinkTo @route="crate.version" @model={{@version.num}} local-class="arrow">
-      {{svg-jar "right-arrow"}}
-    </LinkTo>
+    <YankButton @version={{@version}} local-class="yank-button" />
   {{/if}}
 </div>
diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index e95d764e4c6..86384bf57da 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -2,7 +2,25 @@
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
-    padding: 20px 0;
+    position: relative;
+    padding: 20px;
+    transition: background-color 300ms;
+
+    &:hover {
+        background-color: var(--grey200);
+        transition: background-color 0ms;
+    }
+}
+
+.num-link {
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
 }
 
 .date {
@@ -15,11 +33,6 @@
     composes: yanked from '../../styles/shared/typography.module.css';
 }
 
-.arrow {
-    display: inline-block;
-    float: right;
-
-    svg {
-        background: #EEECDD;
-    }
+.yank-button {
+    position: relative;
 }
diff --git a/app/styles/application.module.css b/app/styles/application.module.css
index da8b1c37c11..dba8fd26ebe 100644
--- a/app/styles/application.module.css
+++ b/app/styles/application.module.css
@@ -1,6 +1,7 @@
 :root {
     --violet800: hsl(252, 44%, 24%);
     --grey900: hsl(200, 15%, 19%);
+    --grey200: hsl(200, 17%, 96%);
     --green800: hsl(115, 31%, 31%);
     --yellow500: hsl(44, 100%, 60%);
 
diff --git a/app/styles/crate/versions.module.css b/app/styles/crate/versions.module.css
index 54410fb3b2b..f9e3fe92807 100644
--- a/app/styles/crate/versions.module.css
+++ b/app/styles/crate/versions.module.css
@@ -20,3 +20,7 @@
         }
     }
 }
+
+.row {
+    margin: 0 -20px;
+}

From f4bbf262235c81d04625d33d69bb7c0e1ccac8e6 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 7 Feb 2021 18:45:04 +0100
Subject: [PATCH 4/6] VersionList::Row: Use `tabular-nums` styling for version
 numbers

---
 app/components/version-list/row.module.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index 86384bf57da..36a48d12680 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -13,6 +13,8 @@
 }
 
 .num-link {
+    font-variant-numeric: tabular-nums;
+
     &::after {
         content: '';
         position: absolute;

From 4edef9549226173b1ff374e37a1c24d7beaa2cf2 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 7 Feb 2021 18:57:49 +0100
Subject: [PATCH 5/6] VersionList::Row: Align creation date to the right side

---
 app/components/version-list/row.hbs        | 3 ++-
 app/components/version-list/row.module.css | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index 24e5b1e042c..c72c43ff18f 100644
--- a/app/components/version-list/row.hbs
+++ b/app/components/version-list/row.hbs
@@ -8,12 +8,13 @@
       {{@version.num}}
     </LinkTo>
 
-    <span local-class="date">{{date-format @version.created_at 'PPP'}}</span>
     {{#if @version.yanked}}
       <span local-class='yanked'>yanked</span>
     {{/if}}
   </div>
 
+  <span local-class="date">{{date-format @version.created_at 'PPP'}}</span>
+
   {{#if this.isOwner}}
     <YankButton @version={{@version}} local-class="yank-button" />
   {{/if}}
diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index 36a48d12680..a01fee6a361 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -1,7 +1,6 @@
 .row {
     display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
+    align-items: center;
     position: relative;
     padding: 20px;
     transition: background-color 300ms;
@@ -10,6 +9,10 @@
         background-color: var(--grey200);
         transition: background-color 0ms;
     }
+
+    & >:first-child {
+        flex-grow: 1;
+    }
 }
 
 .num-link {
@@ -37,4 +40,5 @@
 
 .yank-button {
     position: relative;
+    margin-left: 10px;
 }

From 80a7edd8524d59c3f59bca3b806cbd745a755710 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 7 Feb 2021 19:17:35 +0100
Subject: [PATCH 6/6] VersionList::Row: Show relative dates with absolute dates
 as tooltip

---
 app/components/version-list/row.hbs        | 4 +++-
 app/components/version-list/row.module.css | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index c72c43ff18f..785d2d343bf 100644
--- a/app/components/version-list/row.hbs
+++ b/app/components/version-list/row.hbs
@@ -13,7 +13,9 @@
     {{/if}}
   </div>
 
-  <span local-class="date">{{date-format @version.created_at 'PPP'}}</span>
+  <span title={{date-format @version.created_at 'PPP'}} local-class="date">
+    {{date-format-distance-to-now @version.created_at addSuffix=true}}
+  </span>
 
   {{#if this.isOwner}}
     <YankButton @version={{@version}} local-class="yank-button" />
diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index a01fee6a361..419fb1d2eca 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -32,6 +32,7 @@
     composes: small from '../../styles/shared/typography.module.css';
     display: inline-block;
     margin-left: 20px;
+    position: relative;
 }
 
 .yanked {