Feature request: Folder dropdown for nested slugs when using `**` paths

[kylejrp]

I just started using Keystatic on my personal site with Astro (loving it so far! great work!), and have a few collections set up with nested slugs. For example, I have a media collection where I store different podcasts as folders, and the episodes as items in that folder:

src/content/media/
    example-podcast/123.json
    example-podcast/124.json
    other-podcast/2.json

However, I was surprised to see that the Keystatic UI doesn't change when a path/slug is defined as a nested slug:

Problem

When I'm manually entering slugs, it's hard to remember what folders have I have created. Was the folder called example-podcast or podcast-example? It would be preferred to select an existing folder so I know I'm putting it in the right spot without having to go back to the main collection index in Keystatic to see the other nested slugs/folders.

Proposal

When the path is configured with a wildcard ** at the end which supports nested slugs, would it be possible to offer an alternative UI that lets you select from folders that already exist or prompts you to create a new folder? Something like my crude codepen mockup:

I guess you'd need to make some design decisions around a few things:

• How do you handle the root folder? (empty), (root), just a blank option, or something else?
• How do you specify a new folder? Is it a modal where you enter the name, or does the <select> turn into an <input>?
  • If it transforms from a <select> into an <input>, how do you get back to the <select> list? With an X button or something?
• How do you handle folders more than one level deep? Is it just one really long option like example-podcast/some-series/some-category, or something else? (This option seems simplest, but probably gets messy with a really nested folder structure as you'd have to repeat the same top-level folders over and over again)

Keystatic config

If it's at all relevant, here's my keystatic config for that collection:

    media: collection({
      label: "Media Appearances",
      slugField: "title",
      path: "src/content/media/**",
      format: { data: "json" },
      schema: {
        title: fields.slug({ name: { label: "Title" } }),
        publication: fields.relationship({ label: "Publication", collection: "publications" }),
        date: fields.date({ label: "Date" }),
        url: fields.url({ label: "URL" }),
        topics: fields.array(fields.relationship({ label: "Topic", collection: "topics" }), {
          label: "Topics",
          itemLabel: (props) => props.value ?? "Select a topic",
        }),
        draft: fields.checkbox({ label: "Draft", defaultValue: false }),
      },
    }),

Related UI in fields.array(fields.relationship(...))

I can see that for my topics field, it does already have a similar UI:

Maybe worth stealing something from that? 🤷

Documentation nitpick

I see in the [documentation for the path reference field], it says:

The pathReference field is used to reference an existing file in the file system. It renders a combobox in the Admin UI.

I can't find a reference to what a combobox is in Keystatic, but from what I can tell, it just renders as a plain old <input> with a regenerate button next to it.

[kylejrp]

#1481 may be related?