Add install, embeddings enabled notices for post-hoc app setup

[dominiccooney]

Adds popups to install app, set up embeddings, etc. when using the simplified onboarding flow.

Automatically switches to app for embeddings, when app has embeddings available.

Polishes vscode storybook so codicons work and there are more relevant style variables.

Part of #632.

Caveats

• The app prompts are still displayed on Windows, but there's no Windows app to download.
• These prompts for Enterprise are not implemented. Enterprise uses the legacy widget.
• There's little/no logging for interactions with this UI.

Test plan

pnpm -C vscode storybook

Open http://localhost:6007 and examine the App-less Onboarding storybooks.

Manual tests:

0. Uninstall Cody App. Remove test VScode state: rm -rf /tmp/vscode-cody-extension-dev-host
1. Run VScode with "Launch VScode Extension (Desktop; separate instance)" (equivalently, --user-data-dir=/tmp/vscode-cody-extension-dev-host) so you have no App token cached.
2. Open user settings JSON and add "testing.simplified-onboarding": true and restart VScode.
3. Create a new git repository with git init /tmp/bar; cd /tmp/bar; git remote add origin git@host.example:bar/bar.git . Open /tmp/bar in VScode.
4. Sign in with simplified onboarding.
5. The context underneath the chat box should be red. Click to open the notification. Check the link and Install App buttons work.
6. Install App. Click the Reload button. The prompt should change to Embeddings Not Found/Open App.
7. Click Open App, add embeddings for the repo. Wait for embeddings to complete. Back in VScode, click the Reload button. The indicator should change to a checked database icon. Or, if App presents a "back to VScode" button, click it and the indicator should change automatically. Or simulate that click by going `open vscode://sourcegraph.cody-ai/app-done' at the console.
8. Close app and wait 20 seconds. The indicator should go red/show a cross.
9. Open app and wait 20 seconds. The indicator should be checked.
10. Close app. Wait for the indicator to go read. Immediately open app, pop up the toast, and hit reload. The indicator should be checked immediately.
11. Clone something indexed by dotcom, for example, https://github.com/preactjs/preact . Open in VScode and open a file in the repository. The database icon should be checked (that is, using dotcom embeddings.)

[toolmantim]

This is looking fantastic! And the storybook fixes are great too.

[toolmantim]

🗡️

[thenamankumar]

IF the Icon may be used in a different color in future, it is better to have fill="currentColor and then put color: green wherever we use the Icon.

In that case, also better to extract Icon in a separate file.

[dominiccooney]

Thanks, TIL! I have done the currentColor refactoring and moved the color to the stylesheet.

I will leave the icon inline for now, we could reuse it by exporting the typescript symbol. The svg needs to be married to the style for the animation and that's how one more of these icons do it.

[thenamankumar]

I don't know about cody, but we don't do px in sourcegraph only rem.

[dominiccooney]

77 uses of px, let me leave this as-is for now.

@toolmantim , would love your input here, how should we architect CSS for consistency? Another thing this does that is mildly sketchy, the popup needs to both (approximately) align with items like the chat box, but be relative to the icon. So there's a few approaches to that:

• Make the popup a positioned child of the icon. Makes aligning with the icon easy.
• Make the popup a child closer to the root. Makes being a consistent width easy.
• Computed layouts in JS 🤮

I've opted to make it a child of the icon, and I've fudged the width by calculating the same margin off vw. But if this was a variable we could enforce some consistency for this.

Would love to benefit from your and @thenamankumar 's experience here for making a consistent, scalable CSS and DOM structure which reflects a design system...