Merge pull request #24 from vgcman16/codex/implement-real-feature-flag-handling

Implement feature flag handling

app/lib/api/features.ts

@@ -1,35 +1,76 @@
 export interface Feature {
+  /**
+   * Unique identifier for the feature.
+   */
   id: string;
+  /**
+   * Short title of the feature to display in the UI.
+   */
   name: string;
+  /**
+   * Description of what the feature does.
+   */
   description: string;
+  /**
+   * Whether the user has already viewed/acknowledged this feature.
+   */
   viewed: boolean;
+  /**
+   * ISO date string for when the feature was released.
+   */
   releaseDate: string;
 }
 
-export const getFeatureFlags = async (): Promise<Feature[]> => {
+const VIEWED_FEATURES_KEY = 'bolt_viewed_features';
-  /*
+
-   * TODO: Implement actual feature flags logic
+// Import client-side localStorage helpers
-   * This is a mock implementation
+import { getLocalStorage, setLocalStorage } from '~/lib/persistence';
+
+interface FeatureFromFile {
+  id: string;
+  name: string;
+  description: string;
+  releaseDate: string;
+}
+
+/**
+ * Fetch the list of available features from the bundled features.json file
+ * and mark each one as viewed or not based on localStorage state.
  */
-  return [
+export const getFeatureFlags = async (): Promise<Feature[]> => {
-    {
+  try {
-      id: 'feature-1',
+    const response = await fetch('/features.json', { cache: 'no-cache' });
-      name: 'Dark Mode',
+
-      description: 'Enable dark mode for better night viewing',
+    if (!response.ok) {
-      viewed: true,
+      throw new Error(`Failed to fetch features.json: ${response.status}`);
-      releaseDate: '2024-03-15',
+    }
-    },
+
-    {
+    const data = (await response.json()) as FeatureFromFile[];
-      id: 'feature-2',
+    const viewedIds: string[] = getLocalStorage(VIEWED_FEATURES_KEY) || [];
-      name: 'Tab Management',
+
-      description: 'Customize your tab layout',
+    return data.map((feature) => ({
-      viewed: false,
+      ...feature,
-      releaseDate: '2024-03-20',
+      viewed: viewedIds.includes(feature.id),
-    },
+    }));
-  ];
+  } catch (error) {
+    console.error('Error loading feature flags:', error);
+    return [];
+  }
 };
 
+/**
+ * Persist that a feature has been viewed by the user.
+ * The viewed state is stored locally in the browser via localStorage.
+ */
 export const markFeatureViewed = async (featureId: string): Promise<void> => {
-  /* TODO: Implement actual feature viewed logic */
+  try {
-  console.log(`Marking feature ${featureId} as viewed`);
+    const viewedIds: string[] = getLocalStorage(VIEWED_FEATURES_KEY) || [];
+
+    if (!viewedIds.includes(featureId)) {
+      viewedIds.push(featureId);
+      setLocalStorage(VIEWED_FEATURES_KEY, viewedIds);
+    }
+  } catch (error) {
+    console.error(`Failed to mark feature ${featureId} as viewed:`, error);
+  }
 };

public/features.json

@@ -0,0 +1,20 @@
+[
+  {
+    "id": "lock-files",
+    "name": "File Locking",
+    "description": "Protect important files from accidental changes by locking them",
+    "releaseDate": "2024-05-01"
+  },
+  {
+    "id": "code-search",
+    "name": "Code Search",
+    "description": "Quickly search your project files using the new search bar",
+    "releaseDate": "2024-05-15"
+  },
+  {
+    "id": "vercel-deploy",
+    "name": "Vercel Deploy",
+    "description": "Deploy your project to Vercel directly from the interface",
+    "releaseDate": "2024-05-22"
+  }
+]