address comments.

Author: ItzNotABug

.github/workflows/publish.yml

@@ -117,6 +117,7 @@ jobs:
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=self-hosted"
                       "PUBLIC_APPWRITE_MULTI_REGION=false"
+                      "PUBLIC_CONSOLE_FEATURE_FLAGS="sites,csv-import"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
 
     publish-cloud-no-regions:
@@ -154,5 +155,6 @@ jobs:
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=cloud"
                       "PUBLIC_APPWRITE_MULTI_REGION=false"
+                      "PUBLIC_CONSOLE_FEATURE_FLAGS="sites,csv-import"
                       "PUBLIC_STRIPE_KEY=${{ secrets.PUBLIC_STRIPE_KEY_STAGE }}"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"

src/lib/flags.ts

@@ -1,34 +1,24 @@
 import { env } from '$env/dynamic/public';
-import type { Organization } from './stores/organization';
 import type { Account } from './stores/user';
+import type { Organization } from './stores/organization';
 
-export const PUBLIC_CONSOLE_FEATURE_FLAGS = env.PUBLIC_CONSOLE_FEATURE_FLAGS ?? '';
-
-function setupFlag(name: string, _description: string) {
-    // TODO: Use flags library that provides visual component during development
-
-    return (user: Account, organization: Organization) => {
-        if (PUBLIC_CONSOLE_FEATURE_FLAGS.includes(name)) {
-            return true;
-        }
-
-        const userPrefs = user?.prefs ?? {};
-        const userFlag = userPrefs[`flags-${name}`] ?? null;
-        if (userFlag) {
-            return true;
-        }
+// Parse feature flags from env as a string array (exact match only)
+const flagsRaw = (env.PUBLIC_CONSOLE_FEATURE_FLAGS ?? '').split(',');
 
-        const organizationPrefs = organization?.prefs ?? {};
-        const organizationFlag = organizationPrefs[`flags-${name}`] ?? null;
-        if (organizationFlag) {
-            return true;
-        }
+function isFlagEnabled(name: string) {
+    // loose generic to allow safe access while retaining type safety
+    return <T extends { user?: Account; organization?: Organization }>(data: T) => {
+        const { user, organization } = data;
 
-        return false;
+        return !!(
+            flagsRaw.includes(name) ||
+            user?.prefs?.[`flags-${name}`] ||
+            organization?.prefs?.[`flags-${name}`]
+        );
     };
 }
 
 export const flags = {
-    showSites: setupFlag('sites', 'When disabled, sites view will show high demand'),
-    showCsvImport: setupFlag('csv-import', 'When disabled, documents view will hide import button')
+    showSites: isFlagEnabled('sites'),
+    showCsvImport: isFlagEnabled('csv-import')
 };

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte

@@ -100,7 +100,7 @@
                     analyticsSource="database_documents" />
                 <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                     <ViewSelector view={data.view} {columns} hideView />
-                    {#if flags.showCsvImport(data.account, data.organization)}
+                    {#if flags.showCsvImport(data)}
                         <Button
                             secondary
                             event={Click.DatabaseImportCsv}

src/routes/(console)/project-[region]-[project]/sites/+page.ts

@@ -14,7 +14,7 @@ export const load = async ({ url, depends, route, params, parent }) => {
     const offset = pageToOffset(page, limit);
     const view = getView(url, route, View.Grid, View.Grid);
 
-    if (!flags.showSites(data.account, data.organization)) {
+    if (!flags.showSites(data)) {
         return {
             sitesLive: false,
             offset,