feat: user preferences

src/State/Login.ts

@@ -3,12 +3,36 @@ import * as secp from '@noble/secp256k1';
 import { DefaultRelays } from 'Const';
 import { HexKey, RawEvent, TaggedRawEvent } from 'Nostr';
 import { RelaySettings } from 'Nostr/Connection';
+import { useDispatch } from 'react-redux';
 
 const PrivateKeyItem = "secret";
 const PublicKeyItem = "pubkey";
 const NotificationsReadItem = "notifications-read";
+const UserPreferencesKey = "preferences";
 
-interface LoginStore {
+export interface UserPreferences {
+    /**
+     * Enable reactions / reposts / zaps
+     */
+    enableReactions: boolean,
+
+    /**
+     * Automatically load media (show link only) (bandwidth/privacy)
+     */
+    autoLoadMedia: boolean,
+
+    /**
+     * Select between light/dark theme
+     */
+    theme: "light" | "dark",
+
+    /**
+     * Ask for confirmation when reposting notes
+     */
+    confirmReposts: boolean
+}
+
+export interface LoginStore {
     /**
      * If there is no login
      */
@@ -57,7 +81,12 @@ interface LoginStore {
     /**
      * Counter to trigger refresh of unread dms
      */
-    dmInteraction: 0
+    dmInteraction: 0,
+
+    /**
+     * Users cusom preferences
+     */
+    preferences: UserPreferences
 };
 
 const InitState = {
@@ -70,7 +99,13 @@ const InitState = {
     notifications: [],
     readNotifications: new Date().getTime(),
     dms: [],
-    dmInteraction: 0
+    dmInteraction: 0,
+    preferences: {
+        enableReactions: true,
+        autoLoadMedia: true,
+        theme: "dark",
+        confirmReposts: false
+    }
 } as LoginStore;
 
 export interface SetRelaysPayload {
@@ -106,6 +141,16 @@ const LoginSlice = createSlice({
             if (!isNaN(readNotif)) {
                 state.readNotifications = readNotif;
             }
+
+            // preferences
+            let pref = window.localStorage.getItem(UserPreferencesKey);
+            if (pref) {
+                state.preferences = JSON.parse(pref);
+            } else {
+                // get os defaults
+                const osTheme = window.matchMedia("(prefers-color-scheme: light)");
+                state.preferences.theme = osTheme.matches ? "light" : "dark";
+            }
         },
         setPrivateKey: (state, action: PayloadAction<HexKey>) => {
             state.loggedOut = false;
@@ -205,6 +250,10 @@ const LoginSlice = createSlice({
         markNotificationsRead: (state) => {
             state.readNotifications = new Date().getTime();
             window.localStorage.setItem(NotificationsReadItem, state.readNotifications.toString());
+        },
+        setPreferences: (state, action: PayloadAction<UserPreferences>) => {
+            state.preferences = action.payload;
+            window.localStorage.setItem(UserPreferencesKey, JSON.stringify(state.preferences));
         }
     }
 });
@@ -220,6 +269,7 @@ export const {
     addDirectMessage,
     incDmInteraction,
     logout,
-    markNotificationsRead
+    markNotificationsRead,
+    setPreferences
 } = LoginSlice.actions;
 export const reducer = LoginSlice.reducer;