web/preferences: add option to change favicon

This commit is contained in:
Tulir Asokan 2024-12-23 13:30:20 +02:00
parent 4c8497e5d9
commit cebe5374fd
3 changed files with 13 additions and 2 deletions

View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link rel="icon" type="image/png" href="gomuks.png"/> <link id="favicon" rel="icon" type="image/png" href="gomuks.png"/>
<link rel="manifest" href="manifest.json"/> <link rel="manifest" href="manifest.json"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"/>
<title>gomuks web</title> <title>gomuks web</title>

View file

@ -183,6 +183,12 @@ export const preferences = {
allowedContexts: anyGlobalContext, allowedContexts: anyGlobalContext,
defaultValue: "gomuks web", defaultValue: "gomuks web",
}), }),
favicon: new Preference<string>({
displayName: "Favicon",
description: "The URL to use for the favicon.",
allowedContexts: anyContext,
defaultValue: "gomuks.png",
}),
} as const } as const
export const existingPreferenceKeys = new Set(Object.keys(preferences)) export const existingPreferenceKeys = new Set(Object.keys(preferences))

View file

@ -13,7 +13,7 @@
// //
// You should have received a copy of the GNU Affero General Public License // You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. // along with this program. If not, see <https://www.gnu.org/licenses/>.
import React, { useInsertionEffect } from "react" import React, { useEffect, useInsertionEffect } from "react"
import type Client from "@/api/client.ts" import type Client from "@/api/client.ts"
import { RoomStateStore, usePreferences } from "@/api/statestore" import { RoomStateStore, usePreferences } from "@/api/statestore"
@ -128,7 +128,12 @@ const StylePreferences = ({ client, activeRoom }: StylePreferencesProps) => {
@import url("_gomuks/codeblock/${preferences.code_block_theme}.css"); @import url("_gomuks/codeblock/${preferences.code_block_theme}.css");
`, [preferences.code_block_theme], "gomuks-pref-code-block-theme") `, [preferences.code_block_theme], "gomuks-pref-code-block-theme")
useAsyncStyle(() => preferences.custom_css, [preferences.custom_css], "gomuks-pref-custom-css") useAsyncStyle(() => preferences.custom_css, [preferences.custom_css], "gomuks-pref-custom-css")
useEffect(() => {
favicon.href = preferences.favicon
}, [preferences.favicon])
return null return null
} }
const favicon = document.getElementById("favicon") as HTMLLinkElement
export default React.memo(StylePreferences) export default React.memo(StylePreferences)