Design improvements for the new "New Workspace" modal

[jankeromnes]

Suggested improvements

Based on discussion (internal)

1. Recover behavior to show recents by default (#8380 ✅)

   • Autopopulate results even when input is empty
   • Tweak result ranking to show recents first
   • Remove current help text
   • Set placeholder = “Paste repository URL or type for suggestions”

2. Result rendering - visually break down repo URLs into multiple lines

   For results based on existing repositories:

   repo-name
<git provider>/<org-or-user-or gitlab-group...> (wrapped?)
   issue-pr-commit-context (optional?)

   For pasted URLS:

   https://pasted-url/...

3. Modal UX and styles

   • grey background [1].
   • text input consistency: focus/active state colors
   • bold grey vs soft grey selection
   • tweak modal size (may affect all modals - ok)
   • (lower priority - only if time permits) results found at bottom vs. infinite scroll
   • make sure the scrolling area is clear to the user[1]

4. (Optional) Results visual differentiation

   • history / recent worspaces
   • own repos
   • examples

Current design

[jankeromnes]

We could also bake in this requirement here:

• A larger, cleaner user interface

I think we could even make all modals a bit larger, as suggested (internal) by @geropl:

🧵 While having a look at #7715 in noticed something that is tickling me for a while now: Can we make our modals a tad bigger? 🙃

IMO that would help with:

• settings focus on the modal
• auto-wrap of context URLs in various places
• the "cramped" feeling the modal gives

[jankeromnes]

Cool suggestion from @felladrin on Slack (internal):

In the modal's current empty state, the text "Example repositories" could be a link, which either:

• 🅰️ pre-fills the input with gitpod-io/template- to show all example repos, or

• 🅱️ links to our public index of example repos: https://www.gitpod.io/docs/quickstart#templates

Current empty state	Proposal 🅰️ (pre-fill)	Proposal 🅱️ (link)

[felladrin]

Another suggestion: disable spell checking, autocomplete, and autocorrect on the input field, by adding these attributes to the html input tag: autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"

[jldec]

@jankeromnes - I have updated the description above based on our discussion.
@gtsiolis - If you have a figma design which which matches the new outlined changes, please add image inline above.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gtsiolis]

Closing this as the next iteration for improving the new workspace modal has been added in #15389. Cc @svenefftinge

There are still lots of improvements we could make like structure and visual improvements, but I'll close this as this issue lacks a clear problem statement and proposal.