feat: add quick create-organization button in org header#2664
feat: add quick create-organization button in org header#2664ItzNotABug merged 3 commits intomainfrom
Conversation
Console (appwrite/console)Project ID: Tip Each function runs in its own isolated container with custom environment variables |
WalkthroughThe organization header component was refactored: a plain span was replaced with Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
| <Cover> | ||
| <svelte:fragment slot="header"> | ||
| <span class="u-flex u-cross-center u-gap-8 u-min-width-0"> | ||
| <span class="u-flex u-cross-center u-gap-12 u-min-width-0"> |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/routes/(console)/organization-[organization]/header.svelte (2)
102-102: Confirm increased header gap matches design systemBumping the header gap to
u-gap-12will visually loosen this header row. Please confirm this matches the current console header spacing tokens so this header stays consistent with similar views.
123-129: Add accessible label and consider permission gating for quick-create buttonNice addition, but two refinements would help:
- Icon-only button has no visible text, which is weak for a11y and affordance. Consider adding an accessible label (or visible text) so its intent is clear:
- <Button - secondary - size="xs" - on:click={() => - isCloud ? goto(`${base}/create-organization`) : newOrgModal.set(true)}> + <Button + secondary + size="xs" + aria-label="Create organization" + on:click={() => + isCloud ? goto(`${base}/create-organization`) : newOrgModal.set(true)}> <Icon icon={IconPlus} size="s" /> </Button>
- If there are cases where a user cannot create organizations (role/plan limits), consider mirroring the same gating logic here (hide or disable) so this shortcut doesn’t expose an action that will just error later.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/(console)/organization-[organization]/header.svelte(4 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx,js,jsx,svelte}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx,svelte}: Import reusable modules from the src/lib directory using the $lib alias
Use minimal comments in code; reserve comments for TODOs or complex logic explanations
Use $lib, $routes, and $themes aliases instead of relative paths for module imports
Files:
src/routes/(console)/organization-[organization]/header.svelte
src/routes/**/*.svelte
📄 CodeRabbit inference engine (AGENTS.md)
Use SvelteKit file conventions: +page.svelte for components, +page.ts for data loaders, +layout.svelte for wrappers, +error.svelte for error handling, and dynamic route params in square brackets like [param]
Files:
src/routes/(console)/organization-[organization]/header.svelte
**/*.{ts,tsx,js,jsx,svelte,json}
📄 CodeRabbit inference engine (AGENTS.md)
Use 4 spaces for indentation, single quotes, 100 character line width, and no trailing commas per Prettier configuration
Files:
src/routes/(console)/organization-[organization]/header.svelte
**/*.svelte
📄 CodeRabbit inference engine (AGENTS.md)
Use Svelte 5 + SvelteKit 2 syntax with TypeScript for component development
Files:
src/routes/(console)/organization-[organization]/header.svelte
src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Configure dynamic routes using SvelteKit convention with [param] syntax in route directory names
Files:
src/routes/(console)/organization-[organization]/header.svelte
🧠 Learnings (1)
📚 Learning: 2025-10-13T05:13:54.542Z
Learnt from: ItzNotABug
Repo: appwrite/console PR: 2413
File: src/routes/(console)/project-[region]-[project]/databases/table.svelte:33-39
Timestamp: 2025-10-13T05:13:54.542Z
Learning: In Svelte 5, `import { page } from '$app/state'` provides a reactive state proxy that can be accessed directly (e.g., `page.params`), unlike the older `import { page } from '$app/stores'` which returns a readable store requiring the `$page` syntax for auto-subscription in components.
Applied to files:
src/routes/(console)/organization-[organization]/header.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: e2e
🔇 Additional comments (1)
src/routes/(console)/organization-[organization]/header.svelte (1)
2-23: Imports and organization store usage look consistentThe new imports for navigation and
newOrgModalfollow the alias guidelines ($app/*,$lib/*) and are scoped appropriately for the header’s responsibilities. No changes needed here.
2 participants
What does this PR do?
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
(Write your answer here.)
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.