🎯 Bounty: Feature Flag Folders for Organization

[izadoesdev]

🎯 Bounty: Feature Flag Folders for Organization

Bounty: $15

Priority: Design & UX First ⭐

Before starting, please ⭐ star the repository - it helps us grow and shows you're committed to contributing! 😊

Overview

Add a folder system to organize feature flags in the dashboard UI. This is purely for UI organization and should NOT affect any business logic - flag evaluation, dependencies, API responses, and SDK behavior must remain unchanged. The focus is on creating an intuitive, beautiful folder management experience.

Success Criteria

Most Important: The design must be excellent. We're looking for:

• Clean, intuitive folder UI that matches Databuddy's design system
• Smooth interactions (expand/collapse, drag-to-reorder if possible)
• Mobile-responsive folder management
• Visual hierarchy that makes large flag lists manageable
• Screenshots required - show your design work!

Requirements

1. Database Schema (Required)

Add folder support to the database schema.

Option A - Simple String Field (Recommended):

• Add optional folder text field to flags table
• Store folder path as string (e.g., "auth/login", "checkout/payment")
• Allows nested folders via path separator

Option B - Folder Table:

• Create flag_folders table with id, name, parentId, websiteId, createdAt
• Add folderId foreign key to flags table

Acceptance Criteria:

• Schema change in packages/db/src/drizzle/schema.ts
• Migration runs successfully
• Existing flags work without folders (backward compatible)
• Indexes added for performance (folder, websiteId)

2. API Endpoints (Required)

Extend ORPC endpoints to support folder operations.

Endpoints:

• flags.list - Add optional folder filter parameter
• flags.update - Allow updating folder field
• flags.create - Allow setting folder on creation

Optional (if using Folder Table):

• folders.list - List all folders for a website
• folders.create - Create new folder
• folders.update - Rename/move folder
• folders.delete - Delete folder (move flags to root)

Acceptance Criteria:

• Folder field included in flag responses
• Folder filtering works in flags.list
• Folder updates don't affect flag evaluation logic
• Proper validation (folder name length, allowed characters)
• Authorization checks (user can only access their website's folders)

3. Dashboard UI - Folder Management (Required)

Create folder management UI in the flags page.

UI Components Needed:

• Folder tree/sidebar (collapsible)
• Create folder button/modal
• Rename folder (inline or modal)
• Delete folder (with confirmation - move flags to root or delete)
• Drag flags into folders (nice-to-have)
• Folder breadcrumbs when viewing folder contents

Acceptance Criteria:

• Folder sidebar/tree view matches Databuddy design patterns
• Uses existing UI components (Button, Dialog, Input, etc.)
• Mobile responsive (folders accessible on mobile)
• Smooth animations for expand/collapse
• Uses Phosphor icons (not Lucide)
• Loading states and optimistic updates
• Error handling with Sonner toasts

4. Dashboard UI - Flag List Integration (Required)

Integrate folders into the flags list view.

UI Requirements:

• Show folders as collapsible sections in the list
• Flags grouped under their folder
• "Uncategorized" or "Root" section for flags without folders
• Folder header shows flag count
• Expand/collapse all folders button (nice-to-have)
• Visual indicator when dragging flag to folder (nice-to-have)

Acceptance Criteria:

• Flags list shows folders with nested flags
• Folder sections are visually distinct but match design system
• Clicking folder header expands/collapses
• Empty folders show appropriate empty state
• Folder assignment visible in flag row (badge or icon)
• Works with existing flag actions (edit, delete, toggle)

5. Flag Sheet Integration (Required)

Add folder selection to flag create/edit sheet.

UI Requirements:

• Folder selector dropdown/combobox in flag form
• Shows folder tree/hierarchy
• Option to create new folder from form
• "No folder" option to move flag to root

Acceptance Criteria:

• Folder field in flag creation form
• Folder field in flag edit form
• Folder selector matches existing form patterns
• Can create folder without leaving form (nice-to-have)
• Validation and error handling

6. Testing (Required)

Acceptance Criteria:

• API endpoint tests for folder operations
• Test folder filtering in flags.list
• Test folder updates don't break flag evaluation
• Test authorization (user can only access their folders)
• Test backward compatibility (flags without folders work)

Technical Requirements

• Follow existing codebase patterns and conventions
• Use bun for all package management (never npm/pnpm)
• TypeScript with strict types (no any, unknown, or never)
• Use dayjs for dates (never date-fns)
• Use Tanstack Query for data fetching hooks
• Use Jotai for local state if needed
• Proper error boundaries
• Use rounded class (not rounded-xl or rounded-md)
• Mobile responsive design
• Use Phosphor icons (not Lucide)
• Follow accessibility guidelines from .cursor/rules/guidelines.mdc

Design Reference

The UI should match the existing dashboard design. Reference these for patterns:

• apps/dashboard/app/(main)/websites/[id]/flags/ - Current flags page
• apps/dashboard/components/ - Existing component patterns
• .cursor/rules/guidelines.mdc - Design and accessibility guidelines
• .cursor/rules/01-MUST-DO.mdc - Code style requirements

Files to Reference

• packages/db/src/drizzle/schema.ts - Database schema (flags table around line 694)
• packages/rpc/src/routers/flags.ts - API router for flags
• apps/dashboard/app/(main)/websites/[id]/flags/_components/ - Flag UI components
• apps/dashboard/app/(main)/websites/[id]/flags/page.tsx - Flags page
• apps/dashboard/app/(main)/websites/[id]/flags/_components/flag-sheet.tsx - Flag create/edit form

Important Notes

⚠️ Business Logic Must Not Change:

• Flag evaluation logic must remain unchanged
• API responses for SDKs must remain unchanged (folder is UI-only metadata)
• Dependencies between flags must work regardless of folders
• Flag keys, values, and behavior must be unaffected

✅ Focus Areas:

• Beautiful, intuitive folder UI
• Smooth user experience
• Mobile-friendly
• Performance (don't slow down flag list loading)

Submission Requirements

• All code follows linting rules (run bun run lint)
• Type checks pass (run bun run check-types)
• Tests pass
• PR includes screenshots of folder UI (desktop and mobile)
• PR includes screenshots of folder management (create, rename, delete)
• PR includes screenshots of flags organized in folders
• PR description explains design choices and implementation approach
• Design matches Databuddy's existing UI patterns

Questions?

Comment on this issue for any clarification needed before starting. We're happy to discuss design approaches and implementation details!

Remember to ⭐ star the repo before starting! 🚀

[izadoesdev]

/bounty 15

[algora-pbc]

💎 $15 bounty • Databuddy

Steps to solve:

1. Start working: Comment /attempt #271 with your implementation plan
2. Submit work: Create a pull request including /claim #271 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

❗ Important guidelines:

• To claim a bounty, you need to provide a short demo video of your changes in your pull request
• If anything is unclear, ask for clarification before starting as this will help avoid potential rework
• Low quality AI PRs will not receive review and will be closed
• Do not ask to be assigned unless you've contributed before

Thank you for contributing to databuddy-analytics/Databuddy!

Attempt	Started (UTC)	Solution	Actions
🟢 @CharlesWong	Apr 03, 2026, 05:13:20 AM	#378	Reward
🟢 @maoshuorz	Mar 06, 2026, 11:50:06 AM	#330	Reward
🟢 @jaysu66	Apr 06, 2026, 05:17:27 PM	WIP
🟢 @jasperbot99-crypto	Feb 09, 2026, 02:34:36 PM	WIP
🟢 @ccc196884	Feb 12, 2026, 08:53:11 AM	WIP
🟢 @agent-sure	Feb 12, 2026, 02:50:29 PM	WIP
🟢 @subhu339	Jan 14, 2026, 09:38:45 AM	#275	Reward
🟢 @Pranjal6955	Jan 14, 2026, 09:20:08 AM	WIP
🟢 @bhavik-college	Jan 14, 2026, 12:12:19 PM	WIP
🟢 @promisingcoder	Mar 15, 2026, 10:58:03 AM	#352	Reward
🟢 @dingmon1019	Feb 17, 2026, 04:58:07 AM	#315	Reward
🟢 @bimakw	Jan 17, 2026, 05:23:46 PM	#280	Reward
🟢 @makaiachildress-web	Feb 18, 2026, 04:11:01 AM	#322	Reward
🟢 @bikramadhikari001	Jan 20, 2026, 04:07:59 AM	WIP
🟢 @chengyixu	Mar 20, 2026, 04:52:04 AM	WIP
🟢 @MAVRICK-1	Jan 21, 2026, 04:41:28 AM	WIP
🟢 @FraktalDeFiDAO	Mar 24, 2026, 02:08:08 AM	#361	Reward
🟢 @Sadik111	Jan 24, 2026, 09:00:22 PM	#289	Reward
🟢 @jhaayushkumar	Mar 25, 2026, 09:17:41 AM	#363	Reward
🟢 @dagangtj	Feb 26, 2026, 08:45:13 PM	#326	Reward

[Pranjal6955]

/attempt #271

[subhu339]

/attempt #271

[bhavik-college]

/attempt #271

Implementation Plan:

Database & Schema (packages/db):
Add a folder string field to the flags table in schema.ts.
Reasoning: Option A (Path-based strings) is more flexible for nested folders (e.g., auth/login) and simplifies the UI logic without needing a complex recursive folder table.
Add an index on (websiteId, folder) for optimized list fetching.
Run bunx drizzle-kit generate and verify migration.

API Layer (packages/rpc):
Update flags.list router to include an optional folder filter.
Update flags.create and flags.update Zod schemas to accept the folder field.
Ensure folder updates do not touch evaluation or secretKey logic to maintain business logic integrity.
UI - Folder Organization (apps/dashboard):
Sidebar/Tree View: Create a FlagFolderSidebar component using the existing design system. Use dayjs for any date sorting if required.
Grouping Logic: In the main flags list, use Jotai for local state (managing collapsed/expanded folder IDs).
Components: Implement collapsible sections for folders using Framer Motion (if already in the project) for smooth transitions.
Icons: Use Phosphor Icons (Folder, FolderOpen, CaretRight) as requested.

UI - Integration:
Flag Sheet: Add a Combobox/Select in flag-sheet.tsx to allow users to assign a folder during creation/editing.
Mobile: Ensure the folder sidebar is accessible via a drawer or dropdown on smaller screens.
Styling: Strictly follow the .cursor/rules (using the rounded class and matching the Databuddy color palette).

Testing & Verification:
Run bun run lint and bun run check-types.
Manual verification of "Uncategorized" flags.
Test backward compatibility with flags that have a null folder value.

[lotbones1-code]

Hi @izadoesdev! I'd love to work on this bounty. ⭐ Just starred the repo!

I have experience with React/TypeScript frontend development and recently worked on UI components for another open source project. I'm confident I can deliver a clean, intuitive folder system that matches Databuddy's design system.

My approach:

• Clean folder tree UI with expand/collapse
• Drag-and-drop reordering (if possible)
• Mobile-responsive design
• Following your existing .cursor/rules and Phosphor icons

Could I be assigned to this issue? I'm ready to start immediately and will provide screenshots as requested.

Thanks!