feat: UI/UX improvements and unified schema selector

[wicky-zipstack]

What

• Make entire project card clickable (header + body)
• Redesign Model Configuration modal: Hierarchy on top, Source/Destination below with full width
• Increase project_schema max_length from 20 to 1024
• Fix table pagination wrapping to new line
• Add distinct background color to toolbar (Filter, Sort, etc.)
• Replace AI chat schema tooltip with interactive dropdown selector
• Sync schema selection bidirectionally across AI Chat, Explorer, and Seeds

Why

• Feedback from staging testing on BigQuery warehouse — multiple UX friction points identified
• Schema selector was confusing (tooltip said "click settings icon" but unclear which one)
• Model Configuration modal had truncated names due to narrow layout

How

• ProjectListCard: moved onClick to wrapper div, action buttons use stopPropagation
• configure-source-destination: split into 2 stacked cards, removed inline styles, added popupMatchSelectWidth
• project_details.py: max_length 20 → 1024
• no-code-model.css: flex-wrap on pagination container
• no-code-toolbar.css: background color using --menu-items-bg variable
• PromptActions.jsx: replaced InfoChip with Select dropdown, added API call for schema change
• project-store.js: added schemaList state for shared access

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

• No. All changes are additive UI improvements. Card click behavior preserved (action buttons still work via stopPropagation). Schema selection uses same backend API and store. No logic changes to data flow.

Database Migrations

• None required. max_length change on project_schema is handled at Django model level only.

Env Config

• None required

Relevant Docs

• N/A

Related Issues or PRs

• N/A

Dependencies Versions

• No dependency changes

Notes on Testing

• Test project card: clicking title/header area should navigate to project, clicking Edit/Delete/Share buttons should NOT navigate
• Test schema selector in AI chat: changing schema should reflect in Explorer and Seeds
• Test Model Configuration modal: dropdowns should show full names without truncation
• Test pagination: resize window narrow, pagination should wrap to new line
• Test toolbar: should have visible background distinguishing it from table headers

Screenshots

Checklist

• I have read and understood the Contribution Guidelines.

[greptile-apps]

Greptile Summary

This PR delivers a set of UI/UX improvements: making project cards fully clickable, redesigning the Model Configuration modal layout into two stacked cards, adding a toolbar background, fixing pagination wrapping, and replacing the static schema tooltip in AI Chat with an interactive dropdown that syncs schema selection bidirectionally across Explorer, AI Chat, and Seeds via the shared project-store.

Confidence Score: 5/5

Safe to merge — all findings are P2 style/cleanup suggestions with no blocking correctness issues.

All changes are additive UI improvements with no logic regressions. Three open P2 findings: stale schemaList on cross-project navigation, ineffective useCallback, and missing Spacebar handler. None affect data correctness or the primary user path.

frontend/src/ide/explorer/explorer-component.jsx (schemaList cleanup), frontend/src/ide/chat-ai/PromptActions.jsx (useCallback deps)

Important Files Changed

Filename	Overview
frontend/src/base/components/project-list/ProjectListCard.jsx	Moves onClick/onKeyDown from inner body div to outer wrapper; action buttons correctly use stopPropagation. Missing Spacebar activation on the new role=button wrapper.
frontend/src/ide/chat-ai/PromptActions.jsx	Replaces static InfoChip with interactive Select dropdown backed by shared schemaList store; useCallback memoization is broken because expService (recreated each render) is listed as a dependency.
frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx	Refactors layout to two stacked cards; migrates deprecated bodyStyle to v5 styles prop and adds popupMatchSelectWidth to all selects. No functional logic changed.
frontend/src/ide/explorer/explorer-component.jsx	Stores fetched schema list in shared project-store; unmount cleanup only resets currentSchema, leaving schemaList stale across project navigations.
frontend/src/store/project-store.js	Adds schemaList state and setSchemaList action; correctly excluded from persisted partialize so it resets on page reload.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: frontend/src/ide/explorer/explorer-component.jsx
Line: 88-92

Comment:
**`schemaList` not cleared on Explorer unmount**

The cleanup effect resets `currentSchema` but leaves `schemaList` populated. When a user navigates from Project A's IDE to Project B's IDE in the same session, AI Chat will briefly display Project A's schema options (with no selection) until `getSchemas()` completes for Project B.

```suggestion
  useEffect(() => {
    return () => {
      setCurrentSchema("");
      setSchemaList([]);
    };
  }, [setCurrentSchema, setSchemaList]);
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: frontend/src/ide/chat-ai/PromptActions.jsx
Line: 61-83

Comment:
**`useCallback` memoization broken by unstable `expService` reference**

`explorerService()` returns a new object on every render (because it calls `useAxiosPrivate()` internally), so `expService` changes identity each render. Including it in `handleSchemaChange`'s dependency array means the callback is also recreated every render, making `useCallback` a no-op here.

Alternatively, simply omit `useCallback` here since `handleSchemaChange` is only passed to an Ant Design `Select` that isn't memoised itself.

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: frontend/src/base/components/project-list/ProjectListCard.jsx
Line: 92-95

Comment:
**`role="button"` missing Spacebar activation**

WAI-ARIA requires `role="button"` elements to respond to both Enter and the Spacebar key. The current `onKeyDown` only checks for `"Enter"`, leaving keyboard-only users unable to activate the card via the Spacebar.

Consider adding `e.key === " "` to the key check so both keys trigger `handleCardClick`.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (3): Last reviewed commit: "fix: address PR #55 review feedback" | Re-trigger Greptile}

[tahierhussain]

@wicky-zipstack Can you please add screenshots for the UI changes addressed in this PR?

[wicky-zipstack]

@tahierhussain All review comments addressed in commit 917ed8a. Summary:

1. ✅ Removed unused .project-list-card-clickable-content class
2. ✅ Reduced !important — increased specificity instead, kept only 3 where Ant Design inline styles require it
3. ✅ Replaced message.success/error with useNotificationService
4. ✅ Replaced duplicate API call with explorerService.setProjectSchema()
5. ✅ Show error InfoChip ("No schema") when schema list is empty
6. ✅ Reverted max_length change — will be added to PR feat: track model execution status with failure icon in explorer #54 with migration

Will add screenshots shortly.

[tahierhussain]

LGTM