feat: add directives page

[userquin]

🔗 Linked issue

❓ Type of change

• [ ] 📖 Documentation (updates to the documentation or readme)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [x] 👌 Enhancement (improving an existing functionality)
• [x] ✨ New feature (a non-breaking change that adds functionality)
• [ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Check the title: https://github.com/nuxt/nuxt/pull/29203

This PR includes:

• filter out directive imports in imports.vue page: Nuxt will use import.ts module to auto import and generate the dts
• filter directive imports in directives.vue page
• updated NSectionBlock.vue to allow add the directives when there are no directives (added expandable prop and the logic for mouse and expand icon)
• add directives.md to the docs: will require a review

This PR can be merged, we only need to confirm that Nuxt will use the import.ts module, otherwise we will need to redo some logic here.

Some screenshots

toolbar_

directives page

[antfu]

Can we have it in the imports tab (as a badge or filter) instead? Would that be easier to maintain?

[userquin]

Something like this?

[userquin]

We need to:

• [x] make new filter responsive
• [x] change User composables to User directives and the icon when directives filter is checked.
• [x] use v-<kebab-case> in copy button
• [ ] review used/unused directives: looks like we need to change how we collect the info for the directives (right now directives always shown as not-used): found the problem, we're using 2 different unimport context in Nuxt (I'm going to check required changes in Nuxt PR)