New promo #2701

ItzNotABug · 2025-12-11T12:34:09Z

What does this PR do?

(Provide a description of what this PR does.)

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

New Features
- Added a new Imagine promo featuring 3D visual effects.
- Enhanced bottom modal alerts with theme-aware colors and custom background components.
Chores
- Updated Node.js requirement to version 22 across workflows and build configuration.
- Added Three.js and associated graphics libraries to project dependencies.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

appwrite · 2025-12-11T12:34:14Z

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage `688b7cf6003b1842c9dc`	Ready	View Logs	Preview URL

Tip

Global CDN and DDoS protection come free with every Sites deployment

coderabbitai · 2025-12-11T12:34:15Z

Walkthrough

This pull request upgrades Node.js version support from 20 to 22 across GitHub Actions workflows and package.json. It introduces Three.js and Threlte dependencies for 3D rendering capabilities and adds two new Svelte components: an "Imagine" promo featuring a 3D shader-based canvas, and a post-processing shader component using procedural noise and radial masking. The bottom modal alert system is extended with theme-aware color resolution, optional background components, and enhanced mobile layout configuration. A feature-flagged Imagine promo replaces the previous cloud/AI suggestions promo in the console route.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~35 minutes

src/lib/components/promos/shader.svelte: Dense GLSL shader logic with procedural noise, radial masking, and Threlte/Three.js material setup; requires understanding of GPU programming patterns and shader injection mechanisms
src/lib/components/bottomModalAlert.svelte: Multiple interdependent logic changes including the new resolveThemeColor() helper, backgroundComponent rendering paths, and CSS variable injection; verify theme resolution covers all UI states
Type contract changes in src/lib/stores/bottom-alerts.ts: Verify that all consumers of BottomModalAlertItem and BottomModalAlertAction properly handle the newly optional src field and new optional fields; cross-reference with src/routes/(console)/bottomAlerts.ts
Feature flag integration in src/routes/(console)/bottomAlerts.ts: Ensure SHOW_IMAGINE_PROMO is properly defined and the fallback behavior when disabled is correct; verify mobile layout configuration with setMobileSingleAlertLayout

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.
Title check	❓ Inconclusive	The title 'New promo' is vague and generic, lacking specificity about which promo or what changes were made.	Use a more descriptive title that specifies the promo being added, such as 'Add Imagine promo to bottom modal alerts' or 'Introduce Imagine 3D canvas promo component'.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch add-imagine-banner

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/lib/components/bottomModalAlert.svelte (1)
216-229: src is now optional but still dereferenced unguarded when no backgroundComponent is provided

With BottomModalAlertItem.src made optional and backgroundComponent added, the template still assumes that if backgroundComponent is absent then src exists:
{:else if $app.themeInUse === 'dark'}
    <img src={currentModalAlert.src.dark} ... />
{:else}
    <img src={currentModalAlert.src.light} ... />
{/if}
This is safe for existing alerts (they all had src before), and the Imagine promo path uses backgroundComponent, so it’s fine there as well. But the updated type now allows callers to define alerts that have neither src nor backgroundComponent, which would cause a runtime error here when src is undefined.

To make the new API harder to misuse, you could either:

Add a defensive check in the template, e.g. only dereference src if it exists and otherwise skip the image entirely, or

Tighten the type to a union that enforces “exactly one of src or backgroundComponent” so consumers can’t create an invalid combination.

Example of the first option:
-{:else if $app.themeInUse === 'dark'}
-    <img src={currentModalAlert.src.dark} ... />
-{:else}
-    <img src={currentModalAlert.src.light} ... />
-{/if}
+{:else if currentModalAlert.src && $app.themeInUse === 'dark'}
+    <img src={currentModalAlert.src.dark} ... />
+{:else if currentModalAlert.src}
+    <img src={currentModalAlert.src.light} ... />
+{/if}
Consider applying the same guard in both desktop and mobile branches.

Also applies to: 339-353

🧹 Nitpick comments (7)

.github/workflows/tests.yml (1)
19-22: Consider upgrading actions/setup-node version for consistency.

This workflow uses actions/setup-node@v3 while copilot-setup-steps.yml uses @v6. Consider upgrading to at least @v4 for consistency across workflows and to benefit from newer features and bug fixes.
             - name: Use Node.js
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version: 22
.github/workflows/e2e.yml (1)
16-19: Consider upgrading actions/setup-node version.

Same as tests.yml, this workflow uses @v3 while copilot-setup-steps.yml uses @v6. Consider upgrading to @v4 for consistency.
             - name: Use Node.js
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version: 22
src/lib/components/promos/imagine.svelte (1)

1-6: File naming convention: consider PascalCase.

As per coding guidelines, component files should use PascalCase (e.g., Imagine.svelte). The current lowercase naming (imagine.svelte) is inconsistent with the convention.
src/lib/components/promos/shader.svelte (2)
4-4: Use $lib alias for imports per coding guidelines.

The import for noise.glsl uses a relative path. Per the coding guidelines, prefer the $lib alias for module imports from the src/lib directory.
-    import noise from './threlte/shaders/noise.glsl?raw';
+    import noise from '$lib/components/promos/threlte/shaders/noise.glsl?raw';
1-6: File naming convention: consider PascalCase.

Similar to imagine.svelte, this component file uses lowercase naming. Per coding guidelines, component files should use PascalCase (e.g., Shader.svelte).
src/routes/(console)/bottomAlerts.ts (1)

3-8: Imagine promo wiring and mobile layout config look consistent; consider future-proofing the list handling

The Imagine promo definition and gating (isCloud && SHOW_IMAGINE_PROMO) plus the call into showBottomModalAlert and setMobileSingleAlertLayout are coherent and match the updated store types. Because listOfPromotions is populated once at module load and showBottomModalAlert dedupes by id, there’s no risk of duplicate alerts.

Two small forward-looking points:

setMobileSingleAlertLayout currently always derives its config from listOfPromotions[0]. If you ever add more promotions to this list, you may want to explicitly pick the promo that should control the single-mobile layout (e.g. via a flag on BottomModalAlertItem) rather than assuming “first in list”.

SHOW_IMAGINE_PROMO as a hard-coded boolean means enabling/disabling requires a deploy. If you expect to toggle this more dynamically later, consider threading it through an env/feature-flag system instead.

Overall, behavior for the current single-promo Imagine case looks correct.

Also applies to: 10-45, 47-55
src/lib/stores/bottom-alerts.ts (1)
2-12: New styling and layout fields are well-scoped; consider enforcing the src/backgroundComponent invariant in the type

The extensions to the store types look good:

Optional color/background/backgroundHover on BottomModalAlertAction give enough flexibility for theming without impacting existing alerts.

Adding backgroundComponent?: Component and sameContentOnMobileLayout?: boolean to BottomModalAlertItem matches how the UI now renders promos and derives the mobile layout.

One thing to watch: the comment // use either of these! for src and backgroundComponent isn’t enforced by the type. Right now, callers can legally provide both or neither, and the rendering code assumes at least one is present. To better encode the intended contract, you could introduce a union type such as:
type WithSrc = { src: Record<'dark' | 'light', string>; backgroundComponent?: never };
type WithBackgroundComponent = { src?: never; backgroundComponent: Component };

export type BottomModalAlertItem = BaseAlertItem & (WithSrc | WithBackgroundComponent);
(where BaseAlertItem holds the rest of the existing fields).

Not required for this PR to function, but it would make the new API harder to misuse.

Also applies to: 39-42, 54-59

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a56bf0b and 09651e0.

⛔ Files ignored due to path filters (3)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
src/lib/components/promos/imagine.svg is excluded by !**/*.svg
src/lib/components/promos/threlte/shaders/noise.glsl is excluded by !**/*.glsl

📒 Files selected for processing (9)

.github/workflows/copilot-setup-steps.yml (1 hunks)
.github/workflows/e2e.yml (1 hunks)
.github/workflows/tests.yml (1 hunks)
package.json (4 hunks)
src/lib/components/bottomModalAlert.svelte (10 hunks)
src/lib/components/promos/imagine.svelte (1 hunks)
src/lib/components/promos/shader.svelte (1 hunks)
src/lib/stores/bottom-alerts.ts (3 hunks)
src/routes/(console)/bottomAlerts.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx,js,jsx,svelte}