diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx
index 979500b7..0106a50e 100644
--- a/src/components/board-buttons/board-buttons.tsx
+++ b/src/components/board-buttons/board-buttons.tsx
@@ -172,6 +172,24 @@ export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView
);
};
+const AdButton = () => {
+ return (
+
-
- [
- {
- e.preventDefault();
- alert('work in progress');
- }}
- >
- Vote for Boards
-
- ]
-
+
{isInPostView || isInPendingPostPage ? (
<>
@@ -248,19 +254,7 @@ export const DesktopBoardButtons = () => {
return (
<>
-
- [
- {
- e.preventDefault();
- alert('work in progress');
- }}
- >
- Vote for Boards
-
- ]
-
+
{isInPostView || isInPendingPostPage ? (
diff --git a/src/hooks/use-initial-theme.ts b/src/hooks/use-initial-theme.ts
index d445f83c..5ec6209c 100644
--- a/src/hooks/use-initial-theme.ts
+++ b/src/hooks/use-initial-theme.ts
@@ -15,21 +15,18 @@ const useInitialTheme = () => {
const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
- if (isInAllView || isInSubscriptionsView) {
- const userTheme = getTheme(isInAllView ? 'all' : 'subscriptions');
- return userTheme || 'yotsuba-b';
+ if (isInAllView) {
+ return getTheme('all') || 'yotsuba-b';
+ } else if (isInSubscriptionsView) {
+ return getTheme('subscriptions') || 'yotsuba-b';
} else if (isInHomeView || isInNotFoundView) {
return 'yotsuba';
} else if (subplebbitAddress) {
- const userTheme = getTheme(subplebbitAddress);
- if (userTheme) {
- return userTheme;
- }
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
- return 'yotsuba';
+ return getTheme('nsfw') || 'yotsuba';
}
- return 'yotsuba-b';
+ return getTheme('sfw') || 'yotsuba-b';
}
return 'yotsuba';
};
diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts
index 9011d9c0..b6b7734b 100644
--- a/src/hooks/use-theme.ts
+++ b/src/hooks/use-theme.ts
@@ -2,7 +2,9 @@ import { useState, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { isAllView, isSubscriptionsView } from '../lib/utils/view-utils';
import useThemeStore from '../stores/use-theme-store';
+import useDefaultSubplebbits from './use-default-subplebbits';
import useInitialTheme from './use-initial-theme';
+import { nsfwTags } from '../views/home/home';
const themeClasses = ['yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon'];
@@ -15,10 +17,11 @@ const updateThemeClass = (newTheme: string) => {
const useTheme = (): [string, (theme: string) => void] => {
const location = useLocation();
- const params = useParams();
+ const params = useParams<{ subplebbitAddress: string }>();
const setThemeStore = useThemeStore((state) => state.setTheme);
const getTheme = useThemeStore((state) => state.getTheme);
const loadThemes = useThemeStore((state) => state.loadThemes);
+ const subplebbits = useDefaultSubplebbits();
const initialTheme = useInitialTheme();
const [theme, setLocalTheme] = useState(() => initialTheme);
@@ -41,30 +44,40 @@ const useTheme = (): [string, (theme: string) => void] => {
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
let storedTheme = null;
- if (subplebbitAddress) {
- storedTheme = getTheme(subplebbitAddress);
- } else if (isInAllView) {
+ if (isInAllView) {
storedTheme = getTheme('all');
} else if (isInSubscriptionsView) {
storedTheme = getTheme('subscriptions');
+ } else if (subplebbitAddress) {
+ const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+ if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
+ storedTheme = getTheme('nsfw');
+ } else {
+ storedTheme = getTheme('sfw');
+ }
}
const themeToSet = storedTheme || initialTheme;
setLocalTheme(themeToSet);
updateThemeClass(themeToSet);
- }, [initialTheme, location.pathname, params, getTheme, themesLoaded]);
+ }, [initialTheme, location.pathname, params, getTheme, themesLoaded, subplebbits]);
const setSubplebbitTheme = async (newTheme: string) => {
const subplebbitAddress = params?.subplebbitAddress;
const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
- if (subplebbitAddress) {
- await setThemeStore(subplebbitAddress, newTheme);
- } else if (isInAllView) {
+ if (isInAllView) {
await setThemeStore('all', newTheme);
} else if (isInSubscriptionsView) {
await setThemeStore('subscriptions', newTheme);
+ } else if (subplebbitAddress) {
+ const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+ if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
+ await setThemeStore('nsfw', newTheme);
+ } else {
+ await setThemeStore('sfw', newTheme);
+ }
}
setLocalTheme(newTheme);
diff --git a/src/stores/use-theme-store.ts b/src/stores/use-theme-store.ts
index 85c68e91..95fe3941 100644
--- a/src/stores/use-theme-store.ts
+++ b/src/stores/use-theme-store.ts
@@ -2,9 +2,14 @@ import { create, StoreApi } from 'zustand';
import localForageLru from '@plebbit/plebbit-react-hooks/dist/lib/localforage-lru/index.js';
interface ThemeState {
- themes: Record;
- setTheme: (subplebbitAddress: string, theme: string) => void;
- getTheme: (subplebbitAddress: string) => string | null;
+ themes: {
+ nsfw: string;
+ sfw: string;
+ all: string;
+ subscriptions: string;
+ };
+ setTheme: (category: keyof ThemeState['themes'], theme: string) => void;
+ getTheme: (category: keyof ThemeState['themes']) => string | null;
loadThemes: () => Promise;
}
@@ -14,20 +19,30 @@ const themeStore = localForageLru.createInstance({
});
const useThemeStore = create((set: StoreApi['setState'], get: StoreApi['getState']) => ({
- themes: {},
- setTheme: async (subplebbitAddress: string, theme: string) => {
+ themes: {
+ nsfw: 'yotsuba',
+ sfw: 'yotsuba-b',
+ all: 'yotsuba-b',
+ subscriptions: 'yotsuba-b',
+ },
+ setTheme: async (category, theme) => {
const currentThemes = get().themes;
- const updatedThemes = { ...currentThemes, [subplebbitAddress]: theme };
- await themeStore.setItem(subplebbitAddress, theme);
+ const updatedThemes = { ...currentThemes, [category]: theme };
+ await themeStore.setItem(category, theme);
set({ themes: updatedThemes });
},
- getTheme: (subplebbitAddress: string) => {
+ getTheme: (category) => {
const currentThemes = get().themes;
- return currentThemes[subplebbitAddress] || null;
+ return currentThemes[category] || null;
},
loadThemes: async () => {
- const entries: [string, string][] = await themeStore.entries();
- const themes: Record = {};
+ const entries: [keyof ThemeState['themes'], string][] = await themeStore.entries();
+ const themes: Record = {
+ nsfw: 'yotsuba',
+ sfw: 'yotsuba-b',
+ all: 'yotsuba-b',
+ subscriptions: 'yotsuba-b',
+ };
entries.forEach(([key, value]) => {
themes[key] = value;
});