Create topic dropdown component

[iagocarmona]

Contributor checklist

• [] This pull request is on a separate branch and not the main branch

---

Description

Creating component dropdown topics

Closed dropdown

Opened dropdown

Hovered item

Possible props

  defineProps<{
    topic: string;
    hasIcon?: boolean;
    iconName?: string;
    isRounded?: boolean;
    items: string[];
  }>();

Related issue

• Create topic dropdown component #455

I was thinking about adding a new property to talk about whether the dropdown will override the others, but I would like your opinion first.

[netlify]

✅ Deploy Preview for activist-org ready!

Name	Link
🔨 Latest commit	44906fc
🔍 Latest deploy log	https://app.netlify.com/sites/activist-org/deploys/655e2079d07dee00084657e4
😎 Deploy Preview	https://deploy-preview-497--activist-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Thank you for the pull request!

The activist team will do our best to address your contribution as soon as we can. The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

If you're not already a member of our public Matrix community, please consider joining! We'd suggest using Element as your Matrix client, and definitely join the General and Development rooms once you're in. It'd be great to have you!

Maintainer checklist

• The commit messages for the remote branch should be checked to make sure the contributor's email is set up correctly so that they receive credit for their contribution

  • The contributor's name and icon in remote commits should be the same as what appears in the PR
  • If there's a mismatch, the contributor needs to make sure that the email they use for GitHub matches what they have for git config user.email in their local activist repo

• The TypeScript and formatting workflows within the PR checks do not indicate new errors in the files changed

• The CHANGELOG has been updated with a description of the changes for the upcoming release (if necessary)

[andrewtavis]

Hey @iagocarmona 👋 Looking really good so far! I wanted to check in with you on some options for this, and am glad you sent along some questions/suggestions 😊 What do you think about adding in typing functionality to the select functionality via Headless UI's combobox?

I was thinking about adding a new property to talk about whether the dropdown will override the others, but I would like your opinion first.

Do you mean that the selected one would be the label? We could do that with the combobox, or what I was thinking was also to allow the user to select more than one? This section of the docs shows how we can select more than one. We'd then maintain the label of the component as is.

Let me know how this sounds! I think this would definitely make it easier for the user to quick select things, and filtering by more than one would make searches much easier.

[andrewtavis]

And what do you think of converting the super long topic selection with all the checkboxes (see sidebar) to something similar to what we're talking above? We could have all the topics in a combobox in the sidebar, and for the component we're working on here it would just be those that the user has indicated as being their favorites in their profile so it's easier for them to select those :)

[andrewtavis]

Hey @iagocarmona 👋 How are you doing on this issue here? Do you think that a conversion over to Headless UI's combobox is possible? We're trying to use Headless as much as possible to make sure that we have accessibility at a high standard.

[iagocarmona]

Hello, Im working on this, I will change to use the this UI. I think it would be better too.

[andrewtavis]

Thanks @iagocarmona! Looking forward :) I can figure out the merge conflict when you resend as well - no stress. I flattened the i18n JSON so we can search for where we define the key and for all its instances during one all codebase search. Figured it'd be easier to make changes as we can also find and replace now 😊

Hope you're well!

[andrewtavis]

Hey there, @iagocarmona! Let me know what the plans here are :) I'll deal with the merge conflicts by dropping in the current i18n file before merge, so no stress. We can also check in on this on Saturday during the sync/Code Night if that could work on your end 😊

[andrewtavis]

Hey @iagocarmona 👋 There are a couple things that are relying on this at this point, so I'm going to bring this in and do a refactor for it being a combobox. Thanks for the contribution here! Sorry that the issue wasn't was well defined from the get go :)