eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

refactor: migrate to common eslint+prettier configs (#4168)

Browse Source 
* refactor: migrate to common eslint+prettier configs

* fix: prettier frontend

* feat: config changes

* fix: lint issues

* fix: lint

* fix: type imports

* fix: cyclical import issue

* fix: lockfile

* fix: missing dep

* fix: switch to tabs

* fix: continue switch to tabs

* fix: rustfmt parity

* fix: moderation lint issue

* fix: lint issues

* fix: ui intl

* fix: lint issues

* Revert "fix: rustfmt parity"

This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711.

* feat: revert last rs
This commit is contained in:
Cal H.
2025-08-14 21:48:38 +01:00
committed by GitHub
parent 82697278dc
commit 2aabcf36ee
702 changed files with 101360 additions and 102020 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
apps/frontend/src/plugins/theme/index.ts
View File

@@ -1,90 +1,91 @@
import { ref } from "vue";
import { isDarkTheme } from "./themes.ts";
import { useNativeTheme } from "./native-theme.ts";
import { usePreferredThemes } from "./preferred-theme.ts";
import { useThemeSettings } from "./theme-settings.ts";
import { ref } from 'vue'
export * from "./themes.ts";
import { useNativeTheme } from './native-theme.ts'
import { usePreferredThemes } from './preferred-theme.ts'
import { useThemeSettings } from './theme-settings.ts'
import { isDarkTheme } from './themes.ts'
export * from './themes.ts'
export default defineNuxtPlugin({
name: "theme",
dependsOn: ["cosmetics"],
setup(nuxtApp) {
const $nativeTheme = useNativeTheme();
name: 'theme',
dependsOn: ['cosmetics'],
setup(nuxtApp) {
const $nativeTheme = useNativeTheme()
const $preferredThemes = usePreferredThemes();
const $preferredThemes = usePreferredThemes()
function getPreferredNativeTheme() {
const nativeTheme = $nativeTheme.value;
switch (nativeTheme) {
case "light":
return $preferredThemes.light;
case "dark":
case "unknown":
if (import.meta.dev && import.meta.server && nativeTheme === "unknown") {
console.warn(
"[theme] no client hint is available for request, using dark theme as default",
);
}
function getPreferredNativeTheme() {
const nativeTheme = $nativeTheme.value
switch (nativeTheme) {
case 'light':
return $preferredThemes.light
case 'dark':
case 'unknown':
if (import.meta.dev && import.meta.server && nativeTheme === 'unknown') {
console.warn(
'[theme] no client hint is available for request, using dark theme as default',
)
}
return $preferredThemes.dark;
}
}
return $preferredThemes.dark
}
}
const $settings = useThemeSettings(() => getPreferredNativeTheme());
const $settings = useThemeSettings(() => getPreferredNativeTheme())
useHead({ htmlAttrs: { class: () => [`${$settings.active}-mode`] } });
useHead({ htmlAttrs: { class: () => [`${$settings.active}-mode`] } })
function syncTheme() {
$settings.active =
$settings.preferred === "system" ? getPreferredNativeTheme() : $settings.preferred;
}
function syncTheme() {
$settings.active =
$settings.preferred === 'system' ? getPreferredNativeTheme() : $settings.preferred
}
if (
import.meta.server &&
$settings.preferred === "system" &&
$nativeTheme.value !== "unknown"
) {
// take advantage of the client hint
syncTheme();
}
if (
import.meta.server &&
$settings.preferred === 'system' &&
$nativeTheme.value !== 'unknown'
) {
// take advantage of the client hint
syncTheme()
}
if (import.meta.client) {
const $clientReady = ref(false);
if (import.meta.client) {
const $clientReady = ref(false)
nuxtApp.hook("app:suspense:resolve", () => {
$clientReady.value = true;
});
nuxtApp.hook('app:suspense:resolve', () => {
$clientReady.value = true
})
watchEffect(() => $clientReady.value && syncTheme());
}
watchEffect(() => $clientReady.value && syncTheme())
}
function cycle() {
const nextTheme = isDarkTheme($settings.active)
? $preferredThemes.light
: $preferredThemes.dark;
function cycle() {
const nextTheme = isDarkTheme($settings.active)
? $preferredThemes.light
: $preferredThemes.dark
$settings.preferred = nextTheme;
$settings.preferred = nextTheme
return nextTheme;
}
return nextTheme
}
return {
provide: {
theme: reactive({
...toRefs($settings),
/**
* Preferred themes for each mode.
*/
preferences: $preferredThemes,
/**
* Current native (system) theme provided through client hint header or
* `prefers-color-scheme` media query.
*/
native: $nativeTheme,
cycle,
}),
},
};
},
});
return {
provide: {
theme: reactive({
...toRefs($settings),
/**
* Preferred themes for each mode.
*/
preferences: $preferredThemes,
/**
* Current native (system) theme provided through client hint header or
* `prefers-color-scheme` media query.
*/
native: $nativeTheme,
cycle,
}),
},
}
},
})

44
apps/frontend/src/plugins/theme/native-theme.ts
View File

@@ -1,38 +1,38 @@
export type SystemTheme = "unknown" | "light" | "dark";
export type SystemTheme = 'unknown' | 'light' | 'dark'
function useNativeThemeServer() {
let clientHint;
let clientHint
switch (useRequestHeader("Sec-CH-Prefers-Color-Scheme")) {
case "light":
clientHint = "light";
break;
case "dark":
clientHint = "dark";
break;
default:
clientHint = "unknown";
}
switch (useRequestHeader('Sec-CH-Prefers-Color-Scheme')) {
case 'light':
clientHint = 'light'
break
case 'dark':
clientHint = 'dark'
break
default:
clientHint = 'unknown'
}
return computed(() => clientHint as SystemTheme);
return computed(() => clientHint as SystemTheme)
}
function useNativeThemeClient() {
const lightPreference = window.matchMedia("(prefers-color-scheme: light)");
const lightPreference = window.matchMedia('(prefers-color-scheme: light)')
const isLight = ref(lightPreference.matches);
const isLight = ref(lightPreference.matches)
const onPreferenceChange = ({ matches }: MediaQueryListEvent) => (isLight.value = matches);
const onPreferenceChange = ({ matches }: MediaQueryListEvent) => (isLight.value = matches)
lightPreference.addEventListener("change", onPreferenceChange);
lightPreference.addEventListener('change', onPreferenceChange)
onScopeDispose(() => lightPreference.removeEventListener("change", onPreferenceChange));
onScopeDispose(() => lightPreference.removeEventListener('change', onPreferenceChange))
return computed<SystemTheme>(() => (isLight.value ? "light" : "dark"));
return computed<SystemTheme>(() => (isLight.value ? 'light' : 'dark'))
}
export function useNativeTheme() {
if (import.meta.server) return useNativeThemeServer();
if (import.meta.client) return useNativeThemeClient();
throw new Error("Cannot determine the side");
if (import.meta.server) return useNativeThemeServer()
if (import.meta.client) return useNativeThemeClient()
throw new Error('Cannot determine the side')
}

48
apps/frontend/src/plugins/theme/preferred-theme.ts
View File

@@ -1,32 +1,32 @@
import { type DarkTheme, isDarkTheme } from "./themes.ts";
import { type DarkTheme, isDarkTheme } from './themes.ts'
export function usePreferredThemes() {
// TODO: migrate theme preferences out of cosmetics to theme settings
const cosmetics = useCosmetics();
// TODO: migrate theme preferences out of cosmetics to theme settings
const cosmetics = useCosmetics()
const dark = computed({
get(): DarkTheme {
const theme = cosmetics.value?.preferredDarkTheme;
const dark = computed({
get(): DarkTheme {
const theme = cosmetics.value?.preferredDarkTheme
if (theme == null) {
console.warn("[theme] cosmetics.preferredDarkTheme is not defined");
return "dark";
}
if (theme == null) {
console.warn('[theme] cosmetics.preferredDarkTheme is not defined')
return 'dark'
}
if (!isDarkTheme(theme)) {
console.warn(`[theme] cosmetics.preferredDarkTheme contains invalid value: ${theme}`);
return "dark";
}
if (!isDarkTheme(theme)) {
console.warn(`[theme] cosmetics.preferredDarkTheme contains invalid value: ${theme}`)
return 'dark'
}
return theme;
},
set(value) {
cosmetics.value.preferredDarkTheme = value;
},
});
return theme
},
set(value) {
cosmetics.value.preferredDarkTheme = value
},
})
return reactive({
dark,
light: "light" as const,
});
return reactive({
dark,
light: 'light' as const,
})
}

56
apps/frontend/src/plugins/theme/theme-settings.ts
View File

@@ -1,38 +1,38 @@
import type { Theme } from "./themes.ts";
import type { Theme } from './themes.ts'
interface ThemeSettings {
preference: Theme | "system";
value: Theme;
preference: Theme | 'system'
value: Theme
}
export function useThemeSettings(getDefaultTheme?: () => Theme) {
getDefaultTheme ??= () => "dark";
getDefaultTheme ??= () => 'dark'
const $settings = useCookie<ThemeSettings>("color-mode", {
maxAge: 60 * 60 * 24 * 365 * 10,
sameSite: "lax",
secure: true,
httpOnly: false,
path: "/",
});
const $settings = useCookie<ThemeSettings>('color-mode', {
maxAge: 60 * 60 * 24 * 365 * 10,
sameSite: 'lax',
secure: true,
httpOnly: false,
path: '/',
})
// reset theme settings to a default value if the cookie is missing or contains invalid value
if ($settings.value == null || typeof $settings.value !== "object") {
$settings.value = {
preference: "system",
value: getDefaultTheme(),
};
}
// reset theme settings to a default value if the cookie is missing or contains invalid value
if ($settings.value == null || typeof $settings.value !== 'object') {
$settings.value = {
preference: 'system',
value: getDefaultTheme(),
}
}
return reactive({
preferred: computed({
get: () => $settings.value.preference ?? "system",
set: (value) => ($settings.value.preference = value),
}),
return reactive({
preferred: computed({
get: () => $settings.value.preference ?? 'system',
set: (value) => ($settings.value.preference = value),
}),
active: computed({
get: () => $settings.value.value ?? getDefaultTheme(),
set: (value) => ($settings.value.value = value),
}),
});
active: computed({
get: () => $settings.value.value ?? getDefaultTheme(),
set: (value) => ($settings.value.value = value),
}),
})
}

26
apps/frontend/src/plugins/theme/themes.ts
View File

@@ -1,27 +1,27 @@
export const LightThemes = ["light"] as const;
export const LightThemes = ['light'] as const
export type LightTheme = (typeof LightThemes)[number];
export type LightTheme = (typeof LightThemes)[number]
export const DarkThemes = ["dark", "oled", "retro"] as const;
export const DarkThemes = ['dark', 'oled', 'retro'] as const
export type DarkTheme = (typeof DarkThemes)[number];
export type DarkTheme = (typeof DarkThemes)[number]
export type Theme = LightTheme | DarkTheme;
export type Theme = LightTheme | DarkTheme
export function isLightTheme(theme: Theme | (string & Record<never, never>)): theme is LightTheme {
return LightThemes.includes(theme as any);
return LightThemes.includes(theme as any)
}
export function isDarkTheme(theme: Theme | (string & Record<never, never>)): theme is DarkTheme {
return DarkThemes.includes(theme as any);
return DarkThemes.includes(theme as any)
}
export type ThemeType = "light" | "dark";
export type ThemeType = 'light' | 'dark'
export function getThemeType(
theme: Theme | (string & Record<never, never>),
): ThemeType | "unknown" {
if (isLightTheme(theme)) return "light";
if (isDarkTheme(theme)) return "dark";
return "unknown";
theme: Theme | (string & Record<never, never>),
): ThemeType | 'unknown' {
if (isLightTheme(theme)) return 'light'
if (isDarkTheme(theme)) return 'dark'
return 'unknown'
}