Merge pull request #112 from luminous-devs/hotfix/settings

Fix settings screen

package.json

@@ -35,6 +35,7 @@
     "@tanstack/react-query": "^5.8.4",
     "@tauri-apps/api": "2.0.0-alpha.11",
     "@tauri-apps/cli": "2.0.0-alpha.17",
+    "@tauri-apps/plugin-autostart": "2.0.0-alpha.3",
     "@tauri-apps/plugin-clipboard-manager": "2.0.0-alpha.3",
     "@tauri-apps/plugin-dialog": "2.0.0-alpha.3",
     "@tauri-apps/plugin-fs": "2.0.0-alpha.3",

pnpm-lock.yaml

@@ -56,6 +56,9 @@ dependencies:
   '@tauri-apps/cli':
     specifier: 2.0.0-alpha.17
     version: 2.0.0-alpha.17
+  '@tauri-apps/plugin-autostart':
+    specifier: 2.0.0-alpha.3
+    version: 2.0.0-alpha.3
   '@tauri-apps/plugin-clipboard-manager':
     specifier: 2.0.0-alpha.3
     version: 2.0.0-alpha.3
@@ -2145,6 +2148,12 @@ packages:
       '@tauri-apps/cli-win32-x64-msvc': 2.0.0-alpha.17
     dev: false
 
+  /@tauri-apps/plugin-autostart@2.0.0-alpha.3:
+    resolution: {integrity: sha512-FWXMun68YPs+czGj063B/R2ItK0lFAHz08GCY8Ez1v5qGfq48MqBVF6EB5AHqQ73Wyq3+RGgDTyxuRFzBnXr6A==}
+    dependencies:
+      '@tauri-apps/api': 2.0.0-alpha.11
+    dev: false
+
   /@tauri-apps/plugin-clipboard-manager@2.0.0-alpha.3:
     resolution: {integrity: sha512-Lo30EM8VRo9bYMeRHhZT65OUgajbxaK1A9UhD7/9VZIFoWGbzKU/jrP78mcJ77lc+RrcCcSJvkAgOaLtuOlhxw==}
     dependencies:

src-tauri/Cargo.lock

@@ -2633,6 +2633,7 @@ dependencies = [
  "tauri-plugin-single-instance",
  "tauri-plugin-sql",
  "tauri-plugin-store",
+ "tauri-plugin-theme",
  "tauri-plugin-updater",
  "tauri-plugin-upload",
  "tauri-plugin-window-state",
@@ -5172,6 +5173,21 @@ dependencies = [
  "thiserror",
 ]
 
+[[package]]
+name = "tauri-plugin-theme"
+version = "0.2.0"
+source = "git+https://github.com/reyamir/tauri-plugin-theme?branch=tauri-v2#73e8fc84cb4fb8363fee4edcbbab82c98c1874cc"
+dependencies = [
+ "cocoa 0.25.0",
+ "futures-lite",
+ "gtk",
+ "once_cell",
+ "serde",
+ "tauri",
+ "tintanum",
+ "tokio",
+]
+
 [[package]]
 name = "tauri-plugin-updater"
 version = "2.0.0-alpha.4"
@@ -5417,6 +5433,16 @@ dependencies = [
  "time-core",
 ]
 
+[[package]]
+name = "tintanum"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7abbcf9173afc80733c20b7e27a30bc9284d6535bdbde2a70904032de63e16e8"
+dependencies = [
+ "futures-lite",
+ "zbus",
+]
+
 [[package]]
 name = "tinyvec"
 version = "1.6.0"

src-tauri/Cargo.toml

@@ -33,6 +33,7 @@ tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspac
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
 tauri-plugin-upload = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
 tauri-plugin-window-state = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-theme = { git = "https://github.com/reyamir/tauri-plugin-theme", branch = "tauri-v2" }
 tauri-plugin-sql = { git = "hhttps://github.com/tauri-apps/plugins-workspace", branch = "v2", features = [
   "sqlite",
 ] }

src-tauri/src/main.rs

@@ -7,6 +7,7 @@ use keyring::Entry;
 use std::time::Duration;
 use tauri_plugin_autostart::MacosLauncher;
 use tauri_plugin_sql::{Migration, MigrationKind};
+use tauri_plugin_theme::ThemePlugin;
 use webpage::{Webpage, WebpageOptions};
 
 #[derive(Clone, serde::Serialize)]
@@ -105,6 +106,7 @@ fn secure_remove(key: String) -> Result<(), ()> {
 }
 
 fn main() {
+  let mut ctx = tauri::generate_context!();
   tauri::Builder::default()
     .setup(|app| {
       #[cfg(desktop)]
@@ -113,6 +115,7 @@ fn main() {
         .plugin(tauri_plugin_updater::Builder::new().build())?;
       Ok(())
     })
+    .plugin(ThemePlugin::init(ctx.config_mut()))
     .plugin(
       tauri_plugin_sql::Builder::default()
         .add_migrations(
@@ -134,10 +137,6 @@ fn main() {
         )
         .build(),
     )
-    .plugin(tauri_plugin_autostart::init(
-      MacosLauncher::LaunchAgent,
-      Some(vec!["--flag1", "--flag2"]),
-    ))
     .plugin(tauri_plugin_clipboard_manager::init())
     .plugin(tauri_plugin_dialog::init())
     .plugin(tauri_plugin_fs::init())
@@ -148,12 +147,16 @@ fn main() {
     .plugin(tauri_plugin_shell::init())
     .plugin(tauri_plugin_upload::init())
     .plugin(tauri_plugin_window_state::Builder::default().build())
+    .plugin(tauri_plugin_autostart::init(
+      MacosLauncher::LaunchAgent,
+      Some(vec![]),
+    ))
     .invoke_handler(tauri::generate_handler![
       opengraph,
       secure_save,
       secure_load,
       secure_remove
     ])
-    .run(tauri::generate_context!())
+    .run(ctx)
     .expect("error while running tauri application");
 }

src/app/settings/about.tsx

@@ -1,5 +1,6 @@
 import { getVersion } from '@tauri-apps/api/app';
 import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 
 export function AboutScreen() {
   const [version, setVersion] = useState('');
@@ -22,6 +23,20 @@ export function AboutScreen() {
           <p className="text-neutral-700 dark:text-neutral-300">Version {version}</p>
         </div>
       </div>
+      <div className="mx-auto mt-4 flex w-full max-w-xs flex-col gap-2">
+        <Link
+          to="https://lume.nu"
+          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+        >
+          Website
+        </Link>
+        <Link
+          to="https://github.com/luminous-devs/lume/issues"
+          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+        >
+          Report a issue
+        </Link>
+      </div>
     </div>
   );
 }

src/app/settings/advanced.tsx

@@ -1,21 +1,24 @@
+import { useStorage } from '@libs/storage/provider';
+
 export function AdvancedSettingScreen() {
+  const { db } = useStorage();
+
+  const clearCache = async () => {
+    await db.clearCache();
+  };
+
   return (
     <div className="mx-auto w-full max-w-lg">
       <div className="flex flex-col gap-6">
         <div className="flex w-full items-center justify-between">
-          <div className="w-24 shrink-0 text-end text-sm font-semibold">Event Caches</div>
+          <div className="flex items-center gap-8">
+            <div className="w-24 shrink-0 text-end text-sm font-semibold">Caches</div>
+            <div className="text-sm">Use for boost up NDK</div>
+          </div>
           <button
             type="button"
-            className="h-9 w-max rounded-lg bg-blue-500 px-2.5 text-white hover:bg-blue-600"
+            onClick={() => clearCache()}
-          >
+            className="h-8 w-max rounded-lg bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
-            Clear
-          </button>
-        </div>
-        <div className="flex w-full items-center justify-between">
-          <div className="w-24 shrink-0 text-end text-sm font-semibold">User Caches</div>
-          <button
-            type="button"
-            className="h-9 w-max rounded-lg bg-blue-500 px-2.5 text-white hover:bg-blue-600"
           >
             Clear
           </button>

src/app/settings/backup.tsx

@@ -1,10 +1,19 @@
+import { nip19 } from 'nostr-tools';
 import { useEffect, useState } from 'react';
 
 import { useStorage } from '@libs/storage/provider';
 
+import { EyeOffIcon } from '@shared/icons';
+
 export function BackupSettingScreen() {
   const { db } = useStorage();
+
   const [privkey, setPrivkey] = useState(null);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const removePrivkey = async () => {
+    await db.secureRemove(db.account.pubkey);
+  };
 
   useEffect(() => {
     async function loadPrivkey() {
@@ -24,12 +33,30 @@ export function BackupSettingScreen() {
             You've stored private key on Lume
           </div>
         ) : (
-          <textarea
+          <>
-            readOnly
+            <div className="relative">
-            className="relative h-36 w-full resize-none rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+              <input
-          >
+                readOnly
-            {privkey}
+                type={showPassword ? 'text' : 'password'}
-          </textarea>
+                value={nip19.nsecEncode(privkey)}
+                className="relative h-11 w-full resize-none rounded-lg bg-neutral-200 py-1 pl-3 pr-11 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-1.5 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 transform items-center justify-center rounded-lg bg-neutral-50 dark:bg-neutral-950"
+              >
+                <EyeOffIcon className="h-4 w-4" />
+              </button>
+            </div>
+            <button
+              type="button"
+              onClick={() => removePrivkey()}
+              className="mt-2 inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-red-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:hover:text-white"
+            >
+              Remove private key
+            </button>
+          </>
         )}
       </div>
     </div>

src/app/settings/general.tsx

@@ -1,5 +1,10 @@
 import * as Switch from '@radix-ui/react-switch';
+import { invoke } from '@tauri-apps/api/primitives';
+import { getCurrent } from '@tauri-apps/api/window';
+import { disable, enable, isEnabled } from '@tauri-apps/plugin-autostart';
+import { isPermissionGranted, requestPermission } from '@tauri-apps/plugin-notification';
 import { useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import { useStorage } from '@libs/storage/provider';
 
@@ -16,46 +21,89 @@ export function GeneralSettingScreen() {
     appearance: 'system',
   });
 
+  const changeTheme = async (theme: 'light' | 'dark' | 'auto') => {
+    await invoke('plugin:theme|set_theme', { theme });
+    // update state
+    setSettings((prev) => ({ ...prev, appearance: theme }));
+  };
+
+  const toggleAutolaunch = async () => {
+    if (!settings.autolaunch) {
+      await enable();
+      // update state
+      setSettings((prev) => ({ ...prev, autolaunch: true }));
+    } else {
+      await disable();
+      // update state
+      setSettings((prev) => ({ ...prev, autolaunch: false }));
+    }
+  };
+
+  const toggleOutbox = async () => {
+    await db.createSetting('outbox', String(+!settings.outbox));
+    // update state
+    setSettings((prev) => ({ ...prev, outbox: !settings.outbox }));
+  };
+
+  const toggleMedia = async () => {
+    await db.createSetting('media', String(+!settings.media));
+    db.settings.media = !settings.media;
+    // update state
+    setSettings((prev) => ({ ...prev, media: !settings.media }));
+  };
+
+  const toggleHashtag = async () => {
+    await db.createSetting('hashtag', String(+!settings.hashtag));
+    db.settings.hashtag = !settings.hashtag;
+    // update state
+    setSettings((prev) => ({ ...prev, hashtag: !settings.hashtag }));
+  };
+
+  const toggleNofitication = async () => {
+    if (settings.notification) return;
+
+    await requestPermission();
+    // update state
+    setSettings((prev) => ({ ...prev, notification: !settings.notification }));
+  };
+
   useEffect(() => {
     async function loadSettings() {
+      const theme = await getCurrent().theme();
+      setSettings((prev) => ({ ...prev, appearance: theme }));
+
+      const autostart = await isEnabled();
+      setSettings((prev) => ({ ...prev, autolaunch: autostart }));
+
+      const permissionGranted = await isPermissionGranted();
+      setSettings((prev) => ({ ...prev, notification: permissionGranted }));
+
       const data = await db.getAllSettings();
       if (!data) return;
 
       data.forEach((item) => {
-        if (item.key === 'autolaunch')
-          setSettings((prev) => ({
-            ...prev,
-            autolaunch: item.value === '1' ? true : false,
-          }));
-
         if (item.key === 'outbox')
           setSettings((prev) => ({
             ...prev,
-            outbox: item.value === '1' ? true : false,
+            outbox: !!parseInt(item.value),
           }));
 
         if (item.key === 'media')
           setSettings((prev) => ({
             ...prev,
-            media: item.value === '1' ? true : false,
+            media: !!parseInt(item.value),
           }));
 
         if (item.key === 'hashtag')
           setSettings((prev) => ({
             ...prev,
-            hashtag: item.value === '1' ? true : false,
+            hashtag: !!parseInt(item.value),
           }));
 
         if (item.key === 'notification')
           setSettings((prev) => ({
             ...prev,
-            notification: item.value === '1' ? true : false,
+            notification: !!parseInt(item.value),
-          }));
-
-        if (item.key === 'appearance')
-          setSettings((prev) => ({
-            ...prev,
-            appearance: item.value,
           }));
       });
     }
@@ -73,6 +121,7 @@ export function GeneralSettingScreen() {
           </div>
           <Switch.Root
             checked={settings.autolaunch}
+            onClick={() => toggleAutolaunch()}
             className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
           >
             <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
@@ -85,6 +134,7 @@ export function GeneralSettingScreen() {
           </div>
           <Switch.Root
             checked={settings.outbox}
+            onClick={() => toggleOutbox()}
             className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
           >
             <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
@@ -97,6 +147,7 @@ export function GeneralSettingScreen() {
           </div>
           <Switch.Root
             checked={settings.media}
+            onClick={() => toggleMedia()}
             className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
           >
             <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
@@ -109,6 +160,7 @@ export function GeneralSettingScreen() {
           </div>
           <Switch.Root
             checked={settings.hashtag}
+            onClick={() => toggleHashtag()}
             className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
           >
             <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
@@ -123,6 +175,8 @@ export function GeneralSettingScreen() {
           </div>
           <Switch.Root
             checked={settings.notification}
+            disabled={settings.notification}
+            onClick={() => toggleNofitication()}
             className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
           >
             <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
@@ -133,9 +187,17 @@ export function GeneralSettingScreen() {
           <div className="flex flex-1 gap-6">
             <button
               type="button"
+              onClick={() => changeTheme('light')}
               className="flex flex-col items-center justify-center gap-0.5"
             >
-              <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+              <div
+                className={twMerge(
+                  'inline-flex h-11 w-11 items-center justify-center rounded-lg',
+                  settings.appearance === 'light'
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-neutral-100 dark:bg-neutral-900'
+                )}
+              >
                 <LightIcon className="h-5 w-5" />
               </div>
               <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
@@ -144,9 +206,17 @@ export function GeneralSettingScreen() {
             </button>
             <button
               type="button"
+              onClick={() => changeTheme('dark')}
               className="flex flex-col items-center justify-center gap-0.5"
             >
-              <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+              <div
+                className={twMerge(
+                  'inline-flex h-11 w-11 items-center justify-center rounded-lg',
+                  settings.appearance === 'dark'
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-neutral-100 dark:bg-neutral-900'
+                )}
+              >
                 <DarkIcon className="h-5 w-5" />
               </div>
               <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
@@ -155,9 +225,17 @@ export function GeneralSettingScreen() {
             </button>
             <button
               type="button"
+              onClick={() => changeTheme('auto')}
               className="flex flex-col items-center justify-center gap-0.5"
             >
-              <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+              <div
+                className={twMerge(
+                  'inline-flex h-11 w-11 items-center justify-center rounded-lg',
+                  settings.appearance === 'auto'
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-neutral-100 dark:bg-neutral-900'
+                )}
+              >
                 <SystemModeIcon className="h-5 w-5" />
               </div>
               <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">

src/libs/storage/instance.ts

@@ -20,11 +20,13 @@ export class LumeStorage {
   public db: Database;
   public account: Account | null;
   public platform: Platform | null;
+  public settings: { outbox: boolean; media: boolean; hashtag: boolean };
 
   constructor(sqlite: Database, platform: Platform) {
     this.db = sqlite;
     this.account = null;
     this.platform = platform;
+    this.settings = { outbox: false, media: true, hashtag: true };
   }
 
   public async secureSave(key: string, value: string) {
@@ -429,10 +431,20 @@ export class LumeStorage {
   }
 
   public async createSetting(key: string, value: string) {
-    return await this.db.execute(
+    const currentSetting = await this.getSettingValue(key);
-      'INSERT OR IGNORE INTO settings (key, value) VALUES ($1, $2);',
+
-      [key, value]
+    if (!currentSetting)
-    );
+      return await this.db.execute(
+        'INSERT OR IGNORE INTO settings (key, value) VALUES ($1, $2);',
+        [key, value]
+      );
+
+    const currentValue = !!parseInt(currentSetting);
+
+    return await this.db.execute('UPDATE settings SET value = $1 WHERE key = $2;', [
+      +!currentValue,
+      key,
+    ]);
   }
 
   public async getAllSettings() {
@@ -452,6 +464,12 @@ export class LumeStorage {
     return results[0].value;
   }
 
+  public async clearCache() {
+    await this.db.execute('DELETE FROM ndk_events;');
+    await this.db.execute('DELETE FROM ndk_eventtags;');
+    await this.db.execute('DELETE FROM ndk_users;');
+  }
+
   public async accountLogout() {
     // update current account status
     await this.db.execute("UPDATE accounts SET is_active = '0' WHERE id = $1;", [

src/libs/storage/provider.tsx

@@ -1,4 +1,3 @@
-import { appConfigDir } from '@tauri-apps/api/path';
 import { message } from '@tauri-apps/plugin-dialog';
 import { platform } from '@tauri-apps/plugin-os';
 import { relaunch } from '@tauri-apps/plugin-process';
@@ -29,11 +28,22 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
     try {
       const sqlite = await Database.load('sqlite:lume_v2.db');
       const platformName = await platform();
-      const dir = await appConfigDir();
 
       const lumeStorage = new LumeStorage(sqlite, platformName);
       if (!lumeStorage.account) await lumeStorage.getActiveAccount();
 
+      const settings = await lumeStorage.getAllSettings();
+      if (settings) {
+        settings.forEach((item) => {
+          if (item.key === 'outbox') lumeStorage.settings.outbox = !!parseInt(item.value);
+
+          if (item.key === 'media') lumeStorage.settings.media = !!parseInt(item.value);
+
+          if (item.key === 'hashtag')
+            lumeStorage.settings.hashtag = !!parseInt(item.value);
+        });
+      }
+
       // check update
       const update = await check();
       if (update) {
@@ -44,7 +54,6 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
       }
 
       setDB(lumeStorage);
-      console.info(dir);
     } catch (e) {
       await message(`Cannot initialize database: ${e}`, {
         title: 'Lume',

src/shared/layouts/settings.tsx

@@ -35,7 +35,8 @@ export function SettingsLayout() {
           </div>
           <div className="flex items-center gap-0.5">
             <NavLink
-              to="/settings/"
+              to="/settings"
+              end
               className={({ isActive }) =>
                 twMerge(
                   'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',

src/utils/hooks/useRichContent.tsx

@@ -4,6 +4,8 @@ import { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import reactStringReplace from 'react-string-replace';
 
+import { useStorage } from '@libs/storage/provider';
+
 import {
   Hashtag,
   ImagePreview,
@@ -44,6 +46,8 @@ const VIDEOS = [
 ];
 
 export function useRichContent(content: string, textmode: boolean = false) {
+  const { db } = useStorage();
+
   let parsedContent: string | ReactNode[] = content.replace(/\n+/g, '\n');
   let linkPreview: string;
   let images: string[] = [];
@@ -54,8 +58,10 @@ export function useRichContent(content: string, textmode: boolean = false) {
   const words = text.split(/( |\n)/);
 
   if (!textmode) {
-    images = words.filter((word) => IMAGES.some((el) => word.endsWith(el)));
+    if (db.settings.media) {
-    videos = words.filter((word) => VIDEOS.some((el) => word.endsWith(el)));
+      images = words.filter((word) => IMAGES.some((el) => word.endsWith(el)));
+      videos = words.filter((word) => VIDEOS.some((el) => word.endsWith(el)));
+    }
     events = words.filter((word) => NOSTR_EVENTS.some((el) => word.startsWith(el)));
   }
 
@@ -83,9 +89,10 @@ export function useRichContent(content: string, textmode: boolean = false) {
 
     if (hashtags.length) {
       hashtags.forEach((hashtag) => {
-        parsedContent = reactStringReplace(parsedContent, hashtag, (match, i) => (
+        parsedContent = reactStringReplace(parsedContent, hashtag, (match, i) => {
-          <Hashtag key={match + i} tag={hashtag} />
+          if (db.settings.hashtag) return <Hashtag key={match + i} tag={hashtag} />;
-        ));
+          return null;
+        });
       });
     }