combined JS and HBS

Author: mansona

app/components/color-scheme-menu.gjs

@@ -1,3 +1,21 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class Header extends Component {
+  /** @type {import("../services/dark-mode").default} */
+  @service colorScheme;
+
+  colorSchemes = [
+    { mode: 'light', svg: 'sun' },
+    { mode: 'dark', svg: 'moon' },
+    { mode: 'system', svg: 'color-mode' },
+  ];
+
+  get icon() {
+    return this.colorSchemes.find(({ mode }) => mode === this.colorScheme.scheme)?.svg;
+  }
+}
+
 <Dropdown data-test-dark-mode-menu ...attributes class="dropdown" as |dd|>
   <dd.Trigger @hideArrow={{true}} class="trigger" data-test-dark-mode-toggle>
     {{svg-jar this.icon class=(scoped-class "icon")}}

app/components/color-scheme-menu.js

@@ -1,3 +1,22 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { restartableTask } from 'ember-concurrency';
+
+export default class CrateTomlCopy extends Component {
+  @service notifications;
+
+  copyTask = restartableTask(async () => {
+    let { copyText } = this.args;
+    try {
+      await navigator.clipboard.writeText(copyText);
+      this.notifications.success('Copied to clipboard!');
+    } catch {
+      this.notifications.error('Copy to clipboard failed!');
+    }
+  });
+}
+
 <button type="button" ...attributes {{on "click" (perform this.copyTask)}}>
   {{yield}}
 </button>

app/components/copy-button.gjs

@@ -1,3 +1,32 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { task } from 'ember-concurrency';
+import { alias } from 'macro-decorators';
+
+export default class CrateHeader extends Component {
+  @service session;
+
+  @alias('loadKeywordsTask.last.value') keywords;
+
+  constructor() {
+    super(...arguments);
+
+    this.loadKeywordsTask.perform().catch(() => {
+      // ignore all errors and just don't display keywords if the request fails
+    });
+  }
+
+  get isOwner() {
+    let userId = this.session.currentUser?.id;
+    return this.args.crate?.hasOwnerUser(userId) ?? false;
+  }
+
+  loadKeywordsTask = task(async () => {
+    return (await this.args.crate?.keywords) ?? [];
+  });
+}
+
 <PageHeader class="header" data-test-heading>
   <h1 class="heading">
     <span data-test-crate-name>{{@crate.name}}</span>

app/components/copy-button.js

@@ -1,3 +1,58 @@
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { didCancel } from 'ember-concurrency';
+
+import { simplifyUrl } from './crate-sidebar/link';
+
+export default class CrateSidebar extends Component {
+  @service notifications;
+  @service playground;
+  @service sentry;
+
+  get showHomepage() {
+    let { repository, homepage } = this.args.crate;
+    return homepage && (!repository || simplifyUrl(repository) !== simplifyUrl(homepage));
+  }
+
+  get playgroundLink() {
+    let playgroundCrates = this.playground.crates;
+    if (!playgroundCrates) return;
+
+    let playgroundCrate = playgroundCrates.find(it => it.name === this.args.crate.name);
+    if (!playgroundCrate) return;
+
+    return `https://play.rust-lang.org/?edition=2021&code=use%20${playgroundCrate.id}%3B%0A%0Afn%20main()%20%7B%0A%20%20%20%20%2F%2F%20try%20using%20the%20%60${playgroundCrate.id}%60%20crate%20here%0A%7D`;
+  }
+
+  get canHover() {
+    return window?.matchMedia('(hover: hover)').matches;
+  }
+
+  constructor() {
+    super(...arguments);
+
+    // load Rust Playground crates list, if necessary
+    this.playground.loadCrates().catch(error => {
+      if (!(didCancel(error) || error.isServerError || error.isNetworkError)) {
+        // report unexpected errors to Sentry
+        this.sentry.captureException(error);
+      }
+    });
+  }
+
+  @action
+  async copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+      this.notifications.success('Copied to clipboard!');
+    } catch {
+      this.notifications.error('Copy to clipboard failed!');
+    }
+  }
+}
+
 <section
   aria-label="Crate metadata"
   ...attributes

app/components/crate-header.gjs

@@ -1,3 +1,25 @@
+import Component from '@glimmer/component';
+
+export default class InstallInstructions extends Component {
+  get cargoInstallCommand() {
+    return this.args.exactVersion
+      ? `cargo install ${this.args.crate}@${this.args.version}`
+      : `cargo install ${this.args.crate}`;
+  }
+
+  get cargoAddCommand() {
+    return this.args.exactVersion
+      ? `cargo add ${this.args.crate}@=${this.args.version}`
+      : `cargo add ${this.args.crate}`;
+  }
+
+  get tomlSnippet() {
+    let version = this.args.version.split('+')[0];
+    let exact = this.args.exactVersion ? '=' : '';
+    return `${this.args.crate} = "${exact}${version}"`;
+  }
+}
+
 {{#if @binNames}}
   {{#if (is-clipboard-supported)}}
     <CopyButton