CrateSidebar: Show "cargo install" snippet for crates with binaries

app/components/crate-sidebar.hbs

@@ -52,6 +52,8 @@
         @crate={{@crate.name}}
         @version={{@version.num}}
         @exactVersion={{@requestedVersion}}
+        @hasLib={{not (@version.has_lib false)}}
+        @binNames={{@version.bin_names}}
       />
     </div>
   {{/unless}}

app/components/crate-sidebar/install-instructions.hbs

@@ -1,33 +1,76 @@
-<p local-class="copy-help">Run the following Cargo command in your project directory:</p>
+{{#if @binNames}}
+  {{#if (is-clipboard-supported)}}
+    <CopyButton
+      @copyText={{this.cargoInstallCommand}}
+      title="Copy command to clipboard"
+      local-class="copy-button"
+    >
+      <span local-class="selectable">{{this.cargoInstallCommand}}</span>
+      {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+    </CopyButton>
+  {{else}}
+    <code local-class="copy-fallback">
+      {{this.cargoInstallCommand}}
+    </code>
+  {{/if}}
 
-{{#if (is-clipboard-supported)}}
-  <CopyButton
-    @copyText={{this.cargoAddCommand}}
-    title="Copy command to clipboard"
-    local-class="copy-button"
-  >
-    <span local-class="selectable">{{this.cargoAddCommand}}</span>
-    {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
-  </CopyButton>
-{{else}}
-  <code local-class="copy-fallback">
-    {{this.cargoAddCommand}}
-  </code>
+  <p local-class="copy-help">
+    Running the above command will globally install the following binaries:
+    {{#if (eq @binNames.length 1)}}
+      <span local-class="bin-name">{{get @binNames 0}}</span>
+    {{else if (eq @binNames.length 2)}}
+      <span local-class="bin-name">{{get @binNames 0}}</span> and <span local-class="bin-name">{{get @binNames 1}}</span>
+    {{else}}
+      {{#each @binNames as |binName index|~}}
+        {{~#if (eq index 0)~}}
+          <span local-class="bin-name">{{binName}}</span>
+        {{~else if (eq index (sum @binNames.length -1))~}}
+          , and <span local-class="bin-name">{{binName}}</span>
+        {{~else~}}
+          , <span local-class="bin-name">{{binName}}</span>
+        {{~/if}}
+      {{~/each}}
+    {{/if}}
+  </p>
+
+{{/if}}
+
+{{#if (and @hasLib @binNames)}}
+  <h3>Install as library</h3>
 {{/if}}
 
-<p local-class="copy-help">Or add the following line to your Cargo.toml:</p>
+{{#if @hasLib}}
+  <p local-class="copy-help">Run the following Cargo command in your project directory:</p>
+
+  {{#if (is-clipboard-supported)}}
+    <CopyButton
+      @copyText={{this.cargoAddCommand}}
+      title="Copy command to clipboard"
+      local-class="copy-button"
+    >
+      <span local-class="selectable">{{this.cargoAddCommand}}</span>
+      {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+    </CopyButton>
+  {{else}}
+    <code local-class="copy-fallback">
+      {{this.cargoAddCommand}}
+    </code>
+  {{/if}}
+
+  <p local-class="copy-help">Or add the following line to your Cargo.toml:</p>
 
-{{#if (is-clipboard-supported)}}
-  <CopyButton
-    @copyText={{this.tomlSnippet}}
-    title="Copy Cargo.toml snippet to clipboard"
-    local-class="copy-button"
-  >
-    <span local-class="selectable">{{this.tomlSnippet}}</span>
-    {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
-  </CopyButton>
-{{else}}
-  <code local-class="copy-fallback">
-    {{this.tomlSnippet}}
-  </code>
+  {{#if (is-clipboard-supported)}}
+    <CopyButton
+      @copyText={{this.tomlSnippet}}
+      title="Copy Cargo.toml snippet to clipboard"
+      local-class="copy-button"
+    >
+      <span local-class="selectable">{{this.tomlSnippet}}</span>
+      {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+    </CopyButton>
+  {{else}}
+    <code local-class="copy-fallback">
+      {{this.tomlSnippet}}
+    </code>
+  {{/if}}
 {{/if}}

app/components/crate-sidebar/install-instructions.js

@@ -1,6 +1,12 @@
 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}`

app/components/crate-sidebar/install-instructions.module.css

@@ -1,5 +1,6 @@
 .copy-help {
     font-size: 12px;
+    overflow-wrap: break-word;
 }
 
 .copy-button,
@@ -51,3 +52,8 @@
 .selectable {
     user-select: text;
 }
+
+.bin-name {
+    font-family: var(--font-monospace);
+    font-weight: bold;
+}