feat: Workspaces

apps/builder/.env

@@ -3,14 +3,12 @@
 DATABASE_URL=postgresql://postgres:pass@localhost/webstudio?pgbouncer=true
 DIRECT_URL=postgresql://postgres:pass@localhost/webstudio
 
-AUTH_SECRET="# Linux: $(openssl rand -hex 32) or go to https://generate-secret.now.sh/64"
+AUTH_SECRET=0000
+
 # GH_CLIENT_SECRET=
 # GH_CLIENT_ID=
 DEV_LOGIN=true
 
-# Restrictions
-MAX_ASSETS_PER_PROJECT=50
-
 POSTGREST_URL=http://localhost:3000
 # JWT token, decode using jwt.io. Encoded with PGRST_JWT_SECRET from docker-compose.yml
 POSTGREST_API_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImttZHBpeHpvcWlpcmJtcGRpcHB5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2NjYzMzY0MjgsImV4cCI6MTk4MTkxMjQyOH0.jjeYvTDrWP9pV7dfZr6fptualNQ3aR13kuPhvT25Sso"
@@ -49,9 +47,36 @@ POSTGREST_API_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIs
 # BUILD_REQUIRE_SUBDOMAIN=
 
 # Enable features behind a flag, * enables all.
-FEATURES=*
-# Current user plan features (default)
-USER_PLAN=pro
+FEATURE_FLAGS=*
+# Plan definitions. JSON array of {name, extends?, features} objects.
+# extends: inherit all features from a named parent plan, then override.
+# Multiple active plans are merged (booleans: OR, numbers: max).
+# Schema: packages/trpc-interface/src/shared/plan-features.ts
+PLANS='[
+  {
+    "name": "Pro",
+    "features": {
+      "canDownloadAssets": true,
+      "canRestoreBackups": true,
+      "allowAdditionalPermissions": true,
+      "allowDynamicData": true,
+      "allowContentMode": true,
+      "allowStagingPublish": true,
+      "maxContactEmailsPerProject": 5,
+      "maxDomainsAllowedPerUser": 200,
+      "maxDailyPublishesPerUser": 100,
+      "maxProjectsAllowedPerUser": 300,
+      "maxAssetsPerProject": 350
+    }
+  },
+  {
+    "name": "Team",
+    "extends": "Pro",
+    "features": {
+      "maxWorkspaces": 20
+    }
+  }  
+]'
 
 
 # TRCP server url and API token. If empty local TRPC server is used

apps/builder/app/auth/login.tsx

@@ -24,13 +24,15 @@ export type LoginProps = {
   isGithubEnabled?: boolean;
   isGoogleEnabled?: boolean;
   isSecretLoginEnabled?: boolean;
+  devPlanNames?: string[];
 };
 
 export const Login = ({
   errorMessage,
   isGithubEnabled,
   isGoogleEnabled,
   isSecretLoginEnabled,
+  devPlanNames,
 }: LoginProps) => {
   globalStyles();
   return (
@@ -86,7 +88,9 @@ export const Login = ({
                 Sign in with GitHub
               </Button>
             </Form>
-            {isSecretLoginEnabled && <SecretLogin />}
+            {isSecretLoginEnabled && (
+              <SecretLogin devPlanNames={devPlanNames} />
+            )}
           </Flex>
         </TooltipProvider>
         {errorMessage ? (

apps/builder/app/auth/secret-login.tsx

@@ -2,7 +2,11 @@ import { Button, Flex, InputField, theme } from "@webstudio-is/design-system";
 import { useState } from "react";
 import { authPath } from "~/shared/router-utils";
 
-export const SecretLogin = () => {
+type SecretLoginProps = {
+  devPlanNames?: string[];
+};
+
+export const SecretLogin = ({ devPlanNames }: SecretLoginProps) => {
   const [show, setShow] = useState(false);
   if (show) {
     return (
@@ -11,16 +15,28 @@ export const SecretLogin = () => {
         action={authPath({ provider: "dev" })}
         style={{ display: "contents" }}
       >
-        <Flex gap="2">
+        <Flex gap="2" direction="column">
           <InputField
             name="secret"
             type="text"
             minLength={2}
             required
             autoFocus
             placeholder="Auth secret"
-            css={{ flexGrow: 1 }}
           />
+          <InputField
+            name="email"
+            type="email"
+            placeholder="Email (optional)"
+          />
+          <select name="devPlan">
+            <option value="">Default plan</option>
+            {devPlanNames?.map((name) => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </select>
           <Button type="submit">Login</Button>
         </Flex>
       </form>

apps/builder/app/builder/builder.tsx

@@ -11,6 +11,7 @@ import {
   rawTheme,
 } from "@webstudio-is/design-system";
 import type { AuthPermit } from "@webstudio-is/trpc-interface/index.server";
+import type { Role } from "@webstudio-is/project";
 import { initializeClientSync, getSyncClient } from "~/shared/sync/sync-client";
 import { usePreventUnload } from "~/shared/sync/project-queue";
 import { usePublish, $publisher } from "~/shared/pubsub";
@@ -32,7 +33,7 @@ import {
   $authTokenPermissions,
   $isDesignMode,
   $isContentMode,
-  $userPlanFeatures,
+  setSharedStores,
   subscribeModifierKeys,
   $stagingUsername,
   $stagingPassword,
@@ -44,7 +45,10 @@ import { useSyncPageUrl } from "~/shared/pages";
 import { useMount, useUnmount } from "~/shared/hook-utils/use-mount";
 import { subscribeCommands } from "~/builder/shared/commands";
 import { ProjectSettings } from "~/shared/project-settings";
-import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
+import type {
+  PlanFeatures,
+  Purchase,
+} from "@webstudio-is/trpc-interface/plan-features";
 import {
   $activeSidebarPanel,
   $dataLoadingState,
@@ -74,6 +78,10 @@ import {
 import { useInertHandlers } from "./shared/inert-handlers";
 import { TextToolbar } from "./features/workspace/canvas-tools/text-toolbar";
 import { RemoteDialog } from "./features/help/remote-dialog";
+import {
+  startSubscription,
+  stopSubscription,
+} from "~/shared/notifications/subscription";
 import type { SidebarPanelName } from "./sidebar-left/types";
 import { SidebarLeft } from "./sidebar-left/sidebar-left";
 import { useDisableContextMenu } from "./shared/use-disable-context-menu";
@@ -226,28 +234,31 @@ export type BuilderProps = {
   projectId: string;
   authToken?: string;
   authPermit: AuthPermit;
+  role: Role | "own";
   authTokenPermissions: TokenPermissions;
-  userPlanFeatures: UserPlanFeatures;
+  planFeatures: PlanFeatures;
+  purchases: Array<Purchase>;
   stagingUsername: string;
   stagingPassword: string;
 };
 
-export const Builder = ({
-  projectId,
-  authToken,
-  authPermit,
-  userPlanFeatures,
-  authTokenPermissions,
-  stagingUsername,
-  stagingPassword,
-}: BuilderProps) => {
+export const Builder = (props: BuilderProps) => {
+  const {
+    projectId,
+    authToken,
+    authPermit,
+    authTokenPermissions,
+    stagingUsername,
+    stagingPassword,
+  } = props;
+
   useMount(initBuilderApi);
 
   useMount(() => {
     // additional data stores
     $authPermit.set(authPermit);
     $authToken.set(authToken);
-    $userPlanFeatures.set(userPlanFeatures);
+    setSharedStores(props);
     $authTokenPermissions.set(authTokenPermissions);
     $stagingUsername.set(stagingUsername);
     $stagingPassword.set(stagingPassword);
@@ -283,6 +294,10 @@ export const Builder = ({
   useToastErrors();
   useEffect(subscribeCommands, []);
   useEffect(subscribeResources, []);
+  useEffect(() => {
+    startSubscription();
+    return stopSubscription;
+  }, []);
   useDisableContextMenu();
 
   useUnmount(() => {

apps/builder/app/builder/features/builder-mode.stories.tsx

@@ -4,7 +4,7 @@ import {
   $builderMode,
   $authPermit,
   $authToken,
-  $userPlanFeatures,
+  $planFeatures,
 } from "~/shared/nano-states";
 
 export default {
@@ -15,8 +15,8 @@ export const BuilderMode = () => {
   $builderMode.set("design");
   $authPermit.set("own");
   $authToken.set(undefined);
-  $userPlanFeatures.set({
-    ...$userPlanFeatures.get(),
+  $planFeatures.set({
+    ...$planFeatures.get(),
     allowContentMode: true,
   });
 

apps/builder/app/builder/features/menu/menu.stories.tsx

@@ -5,7 +5,8 @@ import {
   $authToken,
   $authTokenPermissions,
   $builderMode,
-  $userPlanFeatures,
+  $purchases,
+  $planFeatures,
 } from "~/shared/nano-states";
 
 export default {
@@ -21,11 +22,11 @@ const OwnerDesignModeVariant = () => {
     canCopy: true,
     canPublish: true,
   });
-  $userPlanFeatures.set({
-    ...$userPlanFeatures.get(),
+  $planFeatures.set({
+    ...$planFeatures.get(),
     allowContentMode: true,
-    purchases: [{ planName: "Pro" }],
   });
+  $purchases.set([{ planName: "Pro" }]);
   return (
     <Toolbar>
       <Menu defaultOpen />
@@ -58,11 +59,11 @@ const AdminContentModeVariant = () => {
     canCopy: true,
     canPublish: true,
   });
-  $userPlanFeatures.set({
-    ...$userPlanFeatures.get(),
+  $planFeatures.set({
+    ...$planFeatures.get(),
     allowContentMode: true,
-    purchases: [{ planName: "Pro" }],
   });
+  $purchases.set([{ planName: "Pro" }]);
   return (
     <Toolbar>
       <Menu defaultOpen />

apps/builder/app/builder/features/menu/menu.tsx

@@ -26,7 +26,7 @@ import {
   $authToken,
   $authTokenPermissions,
   $isDesignMode,
-  $userPlanFeatures,
+  $purchases,
 } from "~/shared/nano-states";
 import { emitCommand } from "~/builder/shared/commands";
 import { MenuButton } from "./menu-button";
@@ -58,8 +58,7 @@ const ViewMenuItem = () => {
 };
 
 export const Menu = ({ defaultOpen }: { defaultOpen?: boolean } = {}) => {
-  const userPlanFeatures = useStore($userPlanFeatures);
-  const hasPaidPlan = userPlanFeatures.purchases.length > 0;
+  const purchases = useStore($purchases);
   const authPermit = useStore($authPermit);
   const authTokenPermission = useStore($authTokenPermissions);
   const authToken = useStore($authToken);
@@ -285,7 +284,7 @@ export const Menu = ({ defaultOpen }: { defaultOpen?: boolean } = {}) => {
           </DropdownMenuSubContent>
         </DropdownMenuSub>
 
-        {hasPaidPlan === false && (
+        {purchases.length === 0 && (
           <>
             <DropdownMenuSeparator />
             <DropdownMenuItem

apps/builder/app/builder/features/pages/page-settings.stories.tsx

@@ -73,6 +73,7 @@ $project.set({
   tags: [],
 
   marketplaceApprovalStatus: "UNLISTED",
+  workspaceId: null,
 
   latestStaticBuild: null,
   previewImageAssetId: null,

apps/builder/app/builder/features/pages/page-settings.tsx

@@ -73,7 +73,7 @@ import {
   $pages,
   $publishedOrigin,
   $project,
-  $userPlanFeatures,
+  $permissions,
   $isDesignMode,
 } from "~/shared/nano-states";
 import { $openProjectSettings } from "~/shared/nano-states/project-settings";
@@ -320,7 +320,7 @@ const PathField = ({
   value: string;
   onChange: (value: string) => void;
 }) => {
-  const { allowDynamicData } = useStore($userPlanFeatures);
+  const { allowDynamicData } = useStore($permissions);
   const id = useId();
   return (
     <Grid gap={1}>
@@ -464,7 +464,7 @@ const RedirectField = ({
   onChange: (value: string) => void;
 }) => {
   const id = useId();
-  const { allowDynamicData } = useStore($userPlanFeatures);
+  const { allowDynamicData } = useStore($permissions);
   const { variableValues, scope, aliases } = useStore($pageRootScope);
   return (
     <Grid gap={1}>
@@ -692,7 +692,7 @@ const FormFields = ({
   const fieldIds = useIds(fieldNames);
   const assets = useStore($assets);
   const pages = useStore($pages);
-  const { allowDynamicData } = useStore($userPlanFeatures);
+  const { allowDynamicData } = useStore($permissions);
   const { variableValues, scope, aliases } = useStore($pageRootScope);
 
   const pageUrl = usePageUrl(values);