Add frontend linecount display

This implements linecount display in the crate sidebar by adding a `linecounts` attribute to the `Version` Ember Data model and displaying total code lines alongside existing crate size information. A code icon is included for visual consistency with other metrics.

The implementation handles `null` linecount data gracefully for backward compatibility.

Author: Turbo87

app/components/crate-sidebar.css

@@ -22,6 +22,7 @@
 .msrv,
 .edition,
 .license,
+.linecount,
 .bytes,
 .purl {
     display: flex;
@@ -37,7 +38,8 @@
 
 .date,
 .msrv,
-.edition {
+.edition,
+.linecount {
     > span {
         cursor: help;
     }
@@ -49,6 +51,7 @@
     }
 }
 
+.linecount,
 .bytes {
     font-variant-numeric: tabular-nums;
 }

app/components/crate-sidebar.gjs

@@ -21,6 +21,7 @@ import Tooltip from 'crates-io/components/tooltip';
 import dateFormat from 'crates-io/helpers/date-format';
 import dateFormatDistanceToNow from 'crates-io/helpers/date-format-distance-to-now';
 import dateFormatIso from 'crates-io/helpers/date-format-iso';
+import formatShortNum from 'crates-io/helpers/format-short-num';
 import prettyBytes from 'crates-io/helpers/pretty-bytes';
 
 import { simplifyUrl } from './crate-sidebar/link';
@@ -125,6 +126,20 @@ export default class CrateSidebar extends Component {
           </div>
         {{/if}}
 
+        {{#if @version.linecounts.total_code_lines}}
+          <div class='linecount' data-test-linecounts>
+            {{svgJar 'code'}}
+            <span>
+              {{formatShortNum @version.linecounts.total_code_lines}}
+              SLoC
+              <Tooltip>
+                Source Lines of Code<br />
+                <small>(excluding comments, integration tests and example code)</small>
+              </Tooltip>
+            </span>
+          </div>
+        {{/if}}
+
         {{#if @version.crate_size}}
           <div class='bytes'>
             {{svgJar 'weight'}}

app/models/version.js

@@ -25,6 +25,7 @@ export default class Version extends Model {
   @attr yanked;
   @attr license;
   @attr crate_size;
+  @attr linecounts;
 
   /**
    * The minimum supported Rust version of this crate version.

e2e/acceptance/crate.spec.ts

@@ -210,6 +210,18 @@ test.describe('Acceptance | crate page', { tag: '@acceptance' }, () => {
     await expect(page.locator('[data-test-license]')).toHaveText('MIT OR Apache-2.0');
   });
 
+  test('sidebar shows correct information', async ({ page, msw }) => {
+    let crate = msw.db.crate.create({ name: 'foo' });
+    msw.db.version.create({ crate, num: '0.5.0' });
+    msw.db.version.create({ crate, num: '1.0.0' });
+
+    await page.goto('/crates/foo');
+    await expect(page.locator('[data-test-linecounts]')).toHaveText('1,119 SLoC');
+
+    await page.goto('/crates/foo/0.5.0');
+    await expect(page.locator('[data-test-linecounts]')).toHaveText('520 SLoC');
+  });
+
   test.skip('crates can be yanked by owner', async ({ page, msw }) => {
     loadFixtures(msw.db);
 

public/assets/code.svg

@@ -306,4 +306,18 @@ module('Acceptance | crate page', function (hooks) {
     assert.strictEqual(currentURL(), '/crates/nanomsg');
     assert.dom('[data-test-keyword]').exists();
   });
+
+  test('sidebar shows correct information', async function (assert) {
+    this.owner.lookup('service:intl').locale = 'en';
+
+    let crate = this.db.crate.create({ name: 'foo' });
+    this.db.version.create({ crate, num: '0.5.0' });
+    this.db.version.create({ crate, num: '1.0.0' });
+
+    await visit('/crates/foo');
+    assert.dom('[data-test-linecounts]').hasText('1,119 SLoC');
+
+    await visit('/crates/foo/0.5.0');
+    assert.dom('[data-test-linecounts]').hasText('520 SLoC');
+  });
 });