Merge branch 'feat-profiles' into fix-studio-billing

Author: ItzNotABug

docker/generate-env.sh

@@ -74,11 +74,6 @@ echo "✓ Successfully generated $env_file"
 echo "File contents:"
 cat "$env_file"
 
-# NUKE all pre-compressed files so nginx serves fresh content
-echo "Nuking all .br and .gz files..."
-find /usr/share/nginx/html/console -type f \( -name "*.br" -o -name "*.gz" \) -delete
-echo "✓ Nuked all compressed files"
-
 echo "========================================="
 echo "Starting nginx..."
 echo "========================================="

package.json

@@ -9,7 +9,7 @@
         "build": "node build.js",
         "preview": "vite preview",
         "prepare": "svelte-kit sync || echo ''",
-        "clean": "rm -rf node_modules && rm -rf .svelte_kit && pnpm i --force",
+        "clean": "rm -rf node_modules && rm -rf .svelte_kit",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
         "format": "prettier --cache --write --cache .",
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@5b26bb8",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@5b26bb8",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@33845eb",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^10.25.0",

pnpm-lock.yaml

@@ -263,6 +263,7 @@
         margin-top: 48px;
         margin-right: 10px;
         margin-left: 64px;
+        overflow: auto;
         @media (min-width: 1024px) {
             width: 100%;
             padding-left: 190px;

src/lib/layout/shell.svelte

@@ -13,8 +13,8 @@ button.primary {
         ),
         #2d2d31 !important;
     --button-box-shadow:
-        0 3px 0 0 rgba(255, 255, 255, 0.16) inset, 0 -2px 0 0 #000 inset, 0 1px 0 0 #000 inset,
-        0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
+        0 2px 0 0 rgba(255, 255, 255, 0.08) inset, 0 -2px 0 0 rgba(0, 0, 0, 0.24) inset,
+        0 1px 1px 0 rgba(0, 0, 0, 0.08), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
 }
 
 a.primary:hover,
@@ -29,8 +29,8 @@ button.primary:hover {
         ),
         #2d2d31 !important;
     --button-box-shadow:
-        0 3px 0 0 rgba(255, 255, 255, 0.16) inset, 0 -2px 0 0 #000 inset, 0 1px 0 0 #000 inset,
-        0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
+        0 2px 0 0 rgba(255, 255, 255, 0.08) inset, 0 -2px 0 0 rgba(0, 0, 0, 0.24) inset,
+        0 1px 1px 0 rgba(0, 0, 0, 0.08), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
 }
 
 a.primary:active:not(:disabled),
@@ -55,9 +55,8 @@ button.primary:active:not(:disabled) {
         ),
         #f4f4f7 !important;
     --button-box-shadow:
-        0 -2px 0 0 rgba(0, 0, 0, 0.12) inset, 0 1px 0 0 rgba(237, 237, 240, 0.8) inset,
-        0 3px 0 0 rgba(255, 255, 255, 1) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.2),
-        0 2px 5px 0 rgba(0, 0, 0, 0.24);
+        0 -2px 0 0 rgba(0, 0, 0, 0.12) inset, 0 2px 0 0 rgba(255, 255, 255, 1) inset,
+        0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.24);
 }
 
 .theme-dark a.primary:hover,
@@ -72,9 +71,8 @@ button.primary:active:not(:disabled) {
         ),
         #f4f4f7 !important;
     --button-box-shadow:
-        0 -2px 0 0 rgba(0, 0, 0, 0.16) inset, 0 1px 0 0 rgba(237, 237, 240, 0.8) inset,
-        0 3px 0 0 rgba(255, 255, 255, 1) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.16),
-        0 2px 5px 0 rgba(0, 0, 0, 0.2);
+        0 -2px 0 0 rgba(0, 0, 0, 0.12) inset, 0 2px 0 0 rgba(255, 255, 255, 1) inset,
+        0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.24);
 }
 
 .theme-dark a.primary:active:not(:disabled),
@@ -93,8 +91,8 @@ button.primary:active:not(:disabled) {
         0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.24);
 }
 
-a.secondary,
-button.secondary {
+.theme-light a.secondary,
+.theme-light button.secondary {
     --border-width-s: 0px;
     background:
         linear-gradient(
@@ -105,12 +103,11 @@ button.secondary {
         ),
         #f4f4f7 !important;
     --button-box-shadow:
-        0 -2px 0 0 rgba(0, 0, 0, 0.04) inset, 0 1px 0 0 rgba(237, 237, 240, 0.8) inset,
-        0 3px 0 0 rgba(255, 255, 255, 0.5) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.12),
-        0 2px 5px 0 rgba(0, 0, 0, 0.12);
+        0 -2px 0 0 rgba(0, 0, 0, 0.04) inset, 0 2px 0 0 rgba(255, 255, 255, 0.5) inset,
+        0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.08);
 }
-a.secondary:hover,
-button.secondary:hover {
+.theme-light a.secondary:hover,
+.theme-light button.secondary:hover {
     background:
         linear-gradient(0deg, rgba(255, 255, 255, 0) -16.18%, rgba(255, 255, 255, 0.4) 100%),
         linear-gradient(
@@ -121,13 +118,12 @@ button.secondary:hover {
         ),
         #f4f4f7 !important;
     --button-box-shadow:
-        0 -2px 0 0 rgba(0, 0, 0, 0.04) inset, 0 1px 0 0 rgba(237, 237, 240, 0.8) inset,
-        0 3px 0 0 rgba(255, 255, 255, 0.5) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.09),
-        0 2px 5px 0 rgba(0, 0, 0, 0.1);
+        0 -2px 0 0 rgba(0, 0, 0, 0.04) inset, 0 2px 0 0 rgba(255, 255, 255, 0.5) inset,
+        0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
-a.secondary:active:not(:disabled),
-button.secondary:active:not(:disabled) {
+.theme-light a.secondary:active:not(:disabled),
+.theme-light button.secondary:active:not(:disabled) {
     background:
         linear-gradient(
             180deg,
@@ -147,14 +143,14 @@ button.secondary:active:not(:disabled) {
     background:
         linear-gradient(
             180deg,
-            rgba(255, 255, 255, 0.08) 0%,
+            rgba(255, 255, 255, 0.04) 0%,
             rgba(0, 0, 0, 0) 40.87%,
             #2d2d31 100%
         ),
         #2d2d31 !important;
     --button-color: oklch(0.985 0 0);
     --button-box-shadow:
-        0 3px 0 0 rgba(255, 255, 255, 0.1) inset, 0 -2px 0 0 #000 inset, 0 1px 0 0 #000 inset,
+        0 2px 0 0 rgba(255, 255, 255, 0.04) inset, 0 -2px 0 0 rgba(0, 0, 0, 0.24) inset,
         0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
 }
 
@@ -169,10 +165,6 @@ button.secondary:active:not(:disabled) {
             #2d2d31 100%
         ),
         #2d2d31 !important;
-    --button-box-shadow:
-        0 3px 0 0 rgba(255, 255, 255, 0.1) inset, 0 -2px 0 0 #000 inset, 0 1px 0 0 #000 inset,
-        0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
-
     --button-color: oklch(0.985 0 0);
 }
 
@@ -194,3 +186,69 @@ button.secondary:active:not(:disabled) {
 button.danger {
     --button-color: var(--neutral-0);
 }
+
+.tab-primary {
+    transition: none !important;
+    background: none !important;
+    border: none !important;
+    margin: none !important;
+}
+
+.theme-dark .tabs-primary {
+    background: rgba(45, 45, 49, 0.5) !important;
+    box-shadow:
+        0 4px 4px 0 rgba(0, 0, 0, 0.02) inset,
+        0 -3px 4px 0 rgba(255, 255, 255, 0.04) inset,
+        0 1px 1px 0 rgba(0, 0, 0, 0.25) !important;
+}
+.theme-dark .tab-primary.active {
+    background:
+        linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.01) 0%,
+            rgba(0, 0, 0, 0) 40.87%,
+            rgba(0, 0, 0, 0.12) 100%
+        ),
+        linear-gradient(0deg, #2d2d31 0%, #2d2d31 100%), #19191c !important;
+    background-blend-mode: normal, normal, normal;
+    box-shadow:
+        0 1px 1px 0 rgba(0, 0, 0, 0.04),
+        -6px 1px 5.2px 1px rgba(0, 0, 0, 0.04),
+        0 2px 5px 0 rgba(0, 0, 0, 0.04),
+        0 2px 0 0 rgba(255, 255, 255, 0.04) inset,
+        0 -2px 0 0 rgba(0, 0, 0, 0.24) inset,
+        0 1px 0 0 var(--border-neutral-strong, #414146) inset !important;
+}
+.theme-dark .tab-primary:not(.active):hover {
+    color: var(--fgcolor-neutral-primary);
+}
+
+.theme-light .tabs-primary {
+    background: #f4f4f7 !important;
+    box-shadow:
+        0 1px 1px 0 rgba(0, 0, 0, 0.12),
+        0 4px 4px 0 rgba(0, 0, 0, 0.02) inset,
+        0 -3px 4px 0 rgba(255, 255, 255, 0.5) inset !important;
+}
+
+.theme-light .tab-primary.active {
+    background: #fafafb !important;
+    box-shadow:
+        0 2px 5px 0 rgba(0, 0, 0, 0.12),
+        0 -2px 0 0 rgba(0, 0, 0, 0.08) inset,
+        0 1px 0 0 rgba(237, 237, 240, 0.8) inset,
+        0 2px 0 0 #fff inset !important;
+}
+.theme-light .tab-primary:not(.active):hover {
+    color: var(--fgcolor-neutral-primary);
+}
+
+.theme-light .top-cover-console,
+.theme-light .main-content {
+    background: var(--bgcolor-neutral-default);
+}
+
+.theme-dark .top-cover-console,
+.theme-dark .main-content {
+    background: var(--bgcolor-neutral-default);
+}

src/lib/profiles/css/studio.css

@@ -1,18 +1,24 @@
 import { asset, resolve } from '$app/paths';
 import type { ResolvedPathname } from '$app/types';
-import { Platform } from '@appwrite.io/console';
+import { OAuthProvider, Platform } from '@appwrite.io/console';
 import { env } from '$env/dynamic/public';
 import { BillingPlan } from '@appwrite.io/console';
 import type { Component } from 'svelte';
 import UnauthenticatedConsole from './(unauthenticated)/console.svelte';
 import UnauthenticatedStudio from './(unauthenticated)/studio.svelte';
 import StudioCss from './css/studio.css?url';
 import ConsoleCss from './css/console.css?url';
+import { isCloud } from '$lib/system';
 
 export const enum ProfileMode {
     STUDIO = 'studio',
     CONSOLE = 'console'
 }
+export const enum Logins {
+    EMAIL = 'email',
+    GITHUB = 'github',
+    GOOGLE = 'google'
+}
 
 export type Profile = {
     id: ProfileMode;
@@ -26,13 +32,16 @@ export type Profile = {
         };
         alt: string;
     };
+    logins: Array<Logins>;
+    oauthProviders: Partial<Record<Logins, OAuthProvider>>;
     css: string;
     showOnboarding: boolean;
     useCommandCenter: boolean;
     showGithubIssueSupport: boolean;
     showExtendedAccountsMenu: boolean;
     showGeneralAvailability: boolean;
     showConnectProjectOnToolbar: boolean;
+    showProgressBar: boolean;
     services: {
         'get-started': boolean;
         overview: boolean;
@@ -69,13 +78,18 @@ export const base: Profile = {
     component: {
         unauthenticated: UnauthenticatedConsole
     },
+    logins: [Logins.EMAIL, isCloud && Logins.GITHUB].filter(Boolean),
+    oauthProviders: {
+        github: OAuthProvider.Github
+    },
     css: ConsoleCss,
     showOnboarding: true,
     useCommandCenter: true,
     showGithubIssueSupport: true,
     showExtendedAccountsMenu: false,
     showGeneralAvailability: true,
     showConnectProjectOnToolbar: true,
+    showProgressBar: true,
     services: {
         'get-started': true,
         overview: true,
@@ -111,6 +125,11 @@ export const studio: Profile = {
         },
         alt: 'Imagine Appwrite'
     },
+    logins: [/** temporary */ Logins.EMAIL, Logins.GITHUB, Logins.GOOGLE].filter(Boolean),
+    oauthProviders: {
+        github: OAuthProvider.GithubImagine,
+        google: OAuthProvider.Google
+    },
     css: StudioCss,
     component: {
         unauthenticated: UnauthenticatedStudio
@@ -121,6 +140,7 @@ export const studio: Profile = {
     showExtendedAccountsMenu: true,
     showGeneralAvailability: false,
     showConnectProjectOnToolbar: false,
+    showProgressBar: false,
     services: {
         'get-started': false,
         overview: false,

src/lib/profiles/index.svelte.ts

@@ -3,6 +3,7 @@ import type { Component } from 'svelte';
 import { browser } from '$app/environment';
 import { get, writable } from 'svelte/store';
 import { Submit, trackEvent } from '$lib/actions/analytics';
+import { resolvedProfile } from '$lib/profiles/index.svelte';
 import FeedbackNps from '$lib/components/feedback/feedbackNPS.svelte';
 import FeedbackGeneral from '$lib/components/feedback/feedbackGeneral.svelte';
 
@@ -29,12 +30,12 @@ export type FeedbackOption = {
 export const feedbackOptions: FeedbackOption[] = [
     {
         type: 'general',
-        desc: `Appwrite evolves with your input. Share your thoughts and help us improve Appwrite.`,
+        desc: `${resolvedProfile.platform} evolves with your input. Share your thoughts and help us improve ${resolvedProfile.platform}.`,
         component: FeedbackGeneral
     },
     {
         type: 'nps',
-        desc: `How likely are you to recommend Appwrite to a friend or colleague?`,
+        desc: `How likely are you to recommend ${resolvedProfile.platform} to a friend or colleague?`,
         component: FeedbackNps
     }
 ];

src/lib/stores/feedback.ts

@@ -12,6 +12,7 @@
     import AddDomains from './domains/add/view.svelte';
     import VerifyDomain from './domains/verify/view.svelte';
     import ManageDomains from './domains/manage/view.svelte';
+    import { sdk } from '$lib/stores/sdk';
 
     const {
         region,
@@ -24,9 +25,12 @@
     } = $props();
 
     const siteId = `project-${projectId}`;
+    const isStage = sdk.forConsole.client.config.endpoint.includes('stage');
     let showAddDomainsWizard = $state(false);
     let showManageDomainsSheet = $state(false);
-    let primaryDomainForSite = $state(`imagine-${projectId}.stage.appwrite.network`);
+    let primaryDomainForSite = $state(
+        `imagine-${projectId}.${isStage ? 'stage.' : ''}appwrite.network`
+    );
 
     let showVerifyDomainsWizard = $state(false);
     let ruleIdForVerification = $state(null);