UI: Add organization switcher - #861
Conversation
Anif7
commented
May 15, 2026
Anif7
commented
- Add an organization switcher dropdown in the top navigation bar.
- Allow users to switch between organizations they belong to.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds an organization switcher component to the top search bar. The review feedback suggests replacing hardcoded organization data with dynamic content, using unique keys for the organization list, and aligning the dropdown's styling with existing components for UI consistency. Further recommendations include improving accessibility by adding menu item roles, providing functionality for the 'Add another organization' button, and implementing internationalization for UI strings.
| selectedOrg: { name: 'Testpress', email: 'hari@testpress.in', shortName: 'TS', color: 'bg-gray-100', text: 'text-gray-600', darkText: 'dark:text-neutral-400' }, | ||
| organizations: [ | ||
| { name: 'Testpress', email: 'hari@testpress.in', shortName: 'TS', color: 'bg-gray-100', text: 'text-gray-600', darkText: 'dark:text-neutral-400' }, | ||
| { name: 'TP Streams', email: 'hari@tpstreams.com', shortName: 'TS', color: 'bg-gray-100', text: 'text-gray-600', darkText: 'dark:text-neutral-400' } | ||
| ], |
There was a problem hiding this comment.
The organization data is currently hardcoded within the Alpine.js x-data object. This should be dynamically populated from the template context (e.g., using Nunjucks variables) to ensure it reflects the actual organizations the user belongs to. Additionally, consider using a unique identifier (like an id) for the :key in the x-for loop (line 48) instead of org.name to avoid potential issues if multiple organizations share the same name.
| x-transition:leave="transition ease-in duration-75" | ||
| x-transition:leave-start="transform opacity-100 scale-100" | ||
| x-transition:leave-end="transform opacity-0 scale-95" | ||
| class="absolute right-0 top-full mt-2 w-60 z-30 origin-top-right bg-white border border-gray-200 rounded-xl shadow-xl dark:bg-neutral-900 dark:border-neutral-700" |
There was a problem hiding this comment.
The dropdown's styling (specifically z-30, mt-2, and rounded-xl) and its dark mode implementation differ from the existing profile_dropdown.html (which uses z-10, mt-2.5, and rounded-md). Aligning these properties will ensure a consistent user interface across the navigation bar.
| <div class="p-1 space-y-0.5"> | ||
| <template x-for="org in organizations" :key="org.name"> | ||
| <button type="button" @click="selectOrg(org)" | ||
| class="py-2 px-3 group block w-full text-start rounded-lg focus:outline-none" |
There was a problem hiding this comment.
To improve accessibility and maintain consistency with the profile dropdown, the menu items should include role="menuitem".
| class="py-2 px-3 group block w-full text-start rounded-lg focus:outline-none" | |
| class="py-2 px-3 group block w-full text-start rounded-lg focus:outline-none" role="menuitem" |
| <button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> | ||
| <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | ||
| <circle cx="12" cy="12" r="10"></circle> | ||
| <path d="M12 8v8"></path> | ||
| <path d="M8 12h8"></path> | ||
| </svg> | ||
| Add another organization | ||
| </button> |
There was a problem hiding this comment.
The 'Add another organization' button is currently a placeholder without any functionality. It should be updated to either a link (<a>) pointing to the organization creation page or given an @click handler to trigger the relevant action.
| <path d="M12 8v8"></path> | ||
| <path d="M8 12h8"></path> | ||
| </svg> | ||
| Add another organization |
There was a problem hiding this comment.
The string 'Add another organization' is hardcoded. Please use the project's internationalization (i18n) system to ensure this text can be translated.
|
1 participant
