feat: implement feature flags

src/components/SettingsPopover.astro

@@ -1,23 +1,35 @@
 ---
 import Icon from "astro-iconify";
+import { featureFlags, featureLabels } from "../utils/feature-flags";
 export interface Props {
   toggle: string;
 }
 
+const enabledSettings = Object.keys(featureFlags).filter(
+  (key) => featureFlags[key]
+);
+
 const { toggle } = Astro.props;
 ---
 
-<form id="settings-form" hidden>
+<form id="settings-form">
   <div id="toolbar">
     <h2>Settings</h2>
     <label for={toggle}>
       <Icon name="mdi:close" />
     </label>
   </div>
+  {
+    enabledSettings.map(
+      (settings) =>
+        settings !== "" && (
           <div class="field">
-    <input type="checkbox" id="settings-1" name="settings-1" checked />
-    <label for="settings-1">Option 1</label>
+            <input type="checkbox" id="settings-2" name="settings-2" />
+            <label for="settings-2">{featureLabels[settings]}</label>
           </div>
+        )
+    )
+  }
 </form>
 
 <style lang="scss">

src/utils/feature-flags.ts

@@ -0,0 +1,14 @@
+export enum Features {
+  "SendToEmail",
+  "HideImages",
+}
+
+export const featureLabels: Record<Features, string> = {
+  [Features.SendToEmail]: "Send to email",
+  [Features.HideImages]: "Hide images",
+};
+
+export const featureFlags: Record<Features, boolean> = {
+  [Features.SendToEmail]: false,
+  [Features.HideImages]: true,
+};