tomasalias/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

102
apps/frontend/src/plugins/cosmetics.ts
View File

@@ -1,60 +1,60 @@
import type { DarkTheme } from "./theme/index.ts";
import type { DarkTheme } from './theme/index.ts'
export type DisplayMode = "list" | "gallery" | "grid";
export type DisplayMode = 'list' | 'gallery' | 'grid'
export type DisplayLocation =
| "mod"
| "plugin"
| "resourcepack"
| "modpack"
| "shader"
| "datapack"
| "user"
| "collection";
| 'mod'
| 'plugin'
| 'resourcepack'
| 'modpack'
| 'shader'
| 'datapack'
| 'user'
| 'collection'
export interface Cosmetics {
rightSearchLayout: boolean;
leftContentLayout: boolean;
advancedRendering: boolean;
externalLinksNewTab: boolean;
notUsingBlockers: boolean;
hideModrinthAppPromos: boolean;
preferredDarkTheme: DarkTheme;
searchDisplayMode: Record<DisplayLocation, DisplayMode>;
hideStagingBanner: boolean;
rightSearchLayout: boolean
leftContentLayout: boolean
advancedRendering: boolean
externalLinksNewTab: boolean
notUsingBlockers: boolean
hideModrinthAppPromos: boolean
preferredDarkTheme: DarkTheme
searchDisplayMode: Record<DisplayLocation, DisplayMode>
hideStagingBanner: boolean
}
export default defineNuxtPlugin({
name: "cosmetics",
setup() {
const cosmetics = useCookie<Cosmetics>("cosmetics", {
maxAge: 60 * 60 * 24 * 365 * 10,
sameSite: "lax",
secure: true,
httpOnly: false,
path: "/",
default: () => ({
rightSearchLayout: false,
leftContentLayout: false,
advancedRendering: true,
externalLinksNewTab: true,
notUsingBlockers: false,
hideModrinthAppPromos: false,
preferredDarkTheme: "dark",
searchDisplayMode: {
mod: "list",
plugin: "list",
resourcepack: "gallery",
modpack: "list",
shader: "gallery",
datapack: "list",
user: "list",
collection: "list",
},
hideStagingBanner: false,
}),
});
name: 'cosmetics',
setup() {
const cosmetics = useCookie<Cosmetics>('cosmetics', {
maxAge: 60 * 60 * 24 * 365 * 10,
sameSite: 'lax',
secure: true,
httpOnly: false,
path: '/',
default: () => ({
rightSearchLayout: false,
leftContentLayout: false,
advancedRendering: true,
externalLinksNewTab: true,
notUsingBlockers: false,
hideModrinthAppPromos: false,
preferredDarkTheme: 'dark',
searchDisplayMode: {
mod: 'list',
plugin: 'list',
resourcepack: 'gallery',
modpack: 'list',
shader: 'gallery',
datapack: 'list',
user: 'list',
collection: 'list',
},
hideStagingBanner: false,
}),
})
return { provide: { cosmetics } };
},
});
return { provide: { cosmetics } }
},
})

26
apps/frontend/src/plugins/dayjs.js
View File

@@ -1,16 +1,16 @@
import dayjs from "dayjs";
import quarterOfYear from "dayjs/plugin/quarterOfYear";
import advanced from "dayjs/plugin/advancedFormat";
import relativeTime from "dayjs/plugin/relativeTime";
import dayjs from 'dayjs'
import advanced from 'dayjs/plugin/advancedFormat'
import quarterOfYear from 'dayjs/plugin/quarterOfYear'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(quarterOfYear);
dayjs.extend(advanced);
dayjs.extend(relativeTime);
dayjs.extend(quarterOfYear)
dayjs.extend(advanced)
dayjs.extend(relativeTime)
export default defineNuxtPlugin(() => {
return {
provide: {
dayjs,
},
};
});
return {
provide: {
dayjs,
},
}
})

35
apps/frontend/src/plugins/floating-vue.js
View File

@@ -1,19 +1,20 @@
import FloatingVue from "floating-vue";
import "floating-vue/dist/style.css";
import 'floating-vue/dist/style.css'
import FloatingVue from 'floating-vue'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(FloatingVue, {
themes: {
"ribbit-popout": {
$extend: "dropdown",
placement: "bottom-end",
instantMove: true,
distance: 8,
},
"dismissable-prompt": {
$extend: "dropdown",
placement: "bottom-start",
},
},
});
});
nuxtApp.vueApp.use(FloatingVue, {
themes: {
'ribbit-popout': {
$extend: 'dropdown',
placement: 'bottom-end',
instantMove: true,
distance: 8,
},
'dismissable-prompt': {
$extend: 'dropdown',
placement: 'bottom-start',
},
},
})
})

10
apps/frontend/src/plugins/scroll.client.js
View File

@@ -1,7 +1,7 @@
export default defineNuxtPlugin(() => {
const nuxtApp = useNuxtApp();
const nuxtApp = useNuxtApp()
nuxtApp.hooks.hook("page:transition:finish", () => {
document.querySelector("[data-scroll]")?.scrollTo({ top: 0 });
});
});
nuxtApp.hooks.hook('page:transition:finish', () => {
document.querySelector('[data-scroll]')?.scrollTo({ top: 0 })
})
})

398
apps/frontend/src/plugins/shorthands.js
View File

@@ -1,236 +1,236 @@
import { getProjectTypeForUrlShorthand } from "~/helpers/projects.js";
import { getProjectTypeForUrlShorthand } from '~/helpers/projects.js'
export default defineNuxtPlugin((nuxtApp) => {
const tagStore = useTags();
const tagStore = useTags()
nuxtApp.provide("formatNumber", formatNumber);
nuxtApp.provide("capitalizeString", capitalizeString);
nuxtApp.provide("formatMoney", formatMoney);
nuxtApp.provide("formatVersion", (versionsArray) => formatVersions(tagStore, versionsArray));
nuxtApp.provide("orElse", (first, otherwise) => first ?? otherwise);
nuxtApp.provide("external", () => {
const cosmeticsStore = useCosmetics().value;
nuxtApp.provide('formatNumber', formatNumber)
nuxtApp.provide('capitalizeString', capitalizeString)
nuxtApp.provide('formatMoney', formatMoney)
nuxtApp.provide('formatVersion', (versionsArray) => formatVersions(tagStore, versionsArray))
nuxtApp.provide('orElse', (first, otherwise) => first ?? otherwise)
nuxtApp.provide('external', () => {
const cosmeticsStore = useCosmetics().value
return cosmeticsStore.externalLinksNewTab ? "_blank" : "";
});
return cosmeticsStore.externalLinksNewTab ? '_blank' : ''
})
/*
/*
Only use on the complete list of versions for a project, partial lists will generate
the wrong version slugs
*/
nuxtApp.provide("computeVersions", (versions, members) => {
const visitedVersions = [];
const returnVersions = [];
nuxtApp.provide('computeVersions', (versions, members) => {
const visitedVersions = []
const returnVersions = []
const authorMembers = {};
const authorMembers = {}
for (const version of versions.sort(
(a, b) => nuxtApp.$dayjs(a.date_published) - nuxtApp.$dayjs(b.date_published),
)) {
if (visitedVersions.includes(version.version_number)) {
visitedVersions.push(version.version_number);
version.displayUrlEnding = version.id;
} else {
visitedVersions.push(version.version_number);
version.displayUrlEnding = version.version_number;
}
version.primaryFile = version.files.find((file) => file.primary) ?? version.files[0];
for (const version of versions.sort(
(a, b) => nuxtApp.$dayjs(a.date_published) - nuxtApp.$dayjs(b.date_published),
)) {
if (visitedVersions.includes(version.version_number)) {
visitedVersions.push(version.version_number)
version.displayUrlEnding = version.id
} else {
visitedVersions.push(version.version_number)
version.displayUrlEnding = version.version_number
}
version.primaryFile = version.files.find((file) => file.primary) ?? version.files[0]
if (!version.primaryFile) {
version.primaryFile = {
hashes: {
sha1: "",
sha512: "",
},
url: "#",
filename: "unknown",
primary: false,
size: 0,
file_type: null,
};
}
if (!version.primaryFile) {
version.primaryFile = {
hashes: {
sha1: '',
sha512: '',
},
url: '#',
filename: 'unknown',
primary: false,
size: 0,
file_type: null,
}
}
version.author = authorMembers[version.author_id];
if (!version.author) {
version.author = members.find((x) => x.user.id === version.author_id);
authorMembers[version.author_id] = version.author;
}
version.author = authorMembers[version.author_id]
if (!version.author) {
version.author = members.find((x) => x.user.id === version.author_id)
authorMembers[version.author_id] = version.author
}
returnVersions.push(version);
}
returnVersions.push(version)
}
return returnVersions
.reverse()
.map((version, index) => {
const nextVersion = returnVersions[index + 1];
if (nextVersion && version.changelog && nextVersion.changelog === version.changelog) {
return { duplicate: true, ...version };
} else {
return { duplicate: false, ...version };
}
})
.sort((a, b) => nuxtApp.$dayjs(b.date_published) - nuxtApp.$dayjs(a.date_published));
});
nuxtApp.provide("getProjectTypeForDisplay", (type, categories) => {
if (type === "mod") {
const isPlugin = categories.some((category) => {
return tagStore.value.loaderData.allPluginLoaders.includes(category);
});
const isMod = categories.some((category) => {
return tagStore.value.loaderData.modLoaders.includes(category);
});
const isDataPack = categories.some((category) => {
return tagStore.value.loaderData.dataPackLoaders.includes(category);
});
return returnVersions
.reverse()
.map((version, index) => {
const nextVersion = returnVersions[index + 1]
if (nextVersion && version.changelog && nextVersion.changelog === version.changelog) {
return { duplicate: true, ...version }
} else {
return { duplicate: false, ...version }
}
})
.sort((a, b) => nuxtApp.$dayjs(b.date_published) - nuxtApp.$dayjs(a.date_published))
})
nuxtApp.provide('getProjectTypeForDisplay', (type, categories) => {
if (type === 'mod') {
const isPlugin = categories.some((category) => {
return tagStore.value.loaderData.allPluginLoaders.includes(category)
})
const isMod = categories.some((category) => {
return tagStore.value.loaderData.modLoaders.includes(category)
})
const isDataPack = categories.some((category) => {
return tagStore.value.loaderData.dataPackLoaders.includes(category)
})
if (isMod && isPlugin && isDataPack) {
return "mod, plugin, and data pack";
} else if (isMod && isPlugin) {
return "mod and plugin";
} else if (isMod && isDataPack) {
return "mod and data pack";
} else if (isPlugin && isDataPack) {
return "plugin and data pack";
} else if (isDataPack) {
return "data pack";
} else if (isPlugin) {
return "plugin";
}
}
if (isMod && isPlugin && isDataPack) {
return 'mod, plugin, and data pack'
} else if (isMod && isPlugin) {
return 'mod and plugin'
} else if (isMod && isDataPack) {
return 'mod and data pack'
} else if (isPlugin && isDataPack) {
return 'plugin and data pack'
} else if (isDataPack) {
return 'data pack'
} else if (isPlugin) {
return 'plugin'
}
}
return type;
});
nuxtApp.provide("getProjectTypeForUrl", (type, loaders, tags) =>
getProjectTypeForUrlShorthand(type, loaders, tags),
);
nuxtApp.provide("cycleValue", cycleValue);
nuxtApp.provide("sortedCategories", () => {
return tagStore.value.categories.slice().sort((a, b) => {
const headerCompare = a.header.localeCompare(b.header);
if (headerCompare !== 0) {
return headerCompare;
}
if (a.header === "resolutions" && b.header === "resolutions") {
return a.name.replace(/\D/g, "") - b.name.replace(/\D/g, "");
} else if (a.header === "performance impact" && b.header === "performance impact") {
const x = ["potato", "low", "medium", "high", "screenshot"];
return type
})
nuxtApp.provide('getProjectTypeForUrl', (type, loaders, tags) =>
getProjectTypeForUrlShorthand(type, loaders, tags),
)
nuxtApp.provide('cycleValue', cycleValue)
nuxtApp.provide('sortedCategories', () => {
return tagStore.value.categories.slice().sort((a, b) => {
const headerCompare = a.header.localeCompare(b.header)
if (headerCompare !== 0) {
return headerCompare
}
if (a.header === 'resolutions' && b.header === 'resolutions') {
return a.name.replace(/\D/g, '') - b.name.replace(/\D/g, '')
} else if (a.header === 'performance impact' && b.header === 'performance impact') {
const x = ['potato', 'low', 'medium', 'high', 'screenshot']
return x.indexOf(a.name) - x.indexOf(b.name);
}
return 0;
});
});
});
return x.indexOf(a.name) - x.indexOf(b.name)
}
return 0
})
})
})
export const formatNumber = (number, abbreviate = true) => {
const x = +number;
if (x >= 1000000 && abbreviate) {
return (x / 1000000).toFixed(2).toString() + "M";
} else if (x >= 10000 && abbreviate) {
return (x / 1000).toFixed(1).toString() + "k";
} else {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
};
const x = +number
if (x >= 1000000 && abbreviate) {
return (x / 1000000).toFixed(2).toString() + 'M'
} else if (x >= 10000 && abbreviate) {
return (x / 1000).toFixed(1).toString() + 'k'
} else {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
}
export const formatMoney = (number, abbreviate = false) => {
number = Math.floor(number * 100) / 100;
const x = +number;
if (x >= 1000000 && abbreviate) {
return "$" + (x / 1000000).toFixed(2).toString() + "M";
} else if (x >= 10000 && abbreviate) {
return "$" + (x / 1000).toFixed(2).toString() + "k";
} else {
return (
"$" +
x
.toFixed(2)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
);
}
};
number = Math.floor(number * 100) / 100
const x = +number
if (x >= 1000000 && abbreviate) {
return '$' + (x / 1000000).toFixed(2).toString() + 'M'
} else if (x >= 10000 && abbreviate) {
return '$' + (x / 1000).toFixed(2).toString() + 'k'
} else {
return (
'$' +
x
.toFixed(2)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
)
}
}
export const capitalizeString = (name) => {
return name ? name.charAt(0).toUpperCase() + name.slice(1) : name;
};
return name ? name.charAt(0).toUpperCase() + name.slice(1) : name
}
export const formatVersions = (tag, versionArray) => {
const allVersions = tag.value.gameVersions.slice().reverse();
const allReleases = allVersions.filter((x) => x.version_type === "release");
const allVersions = tag.value.gameVersions.slice().reverse()
const allReleases = allVersions.filter((x) => x.version_type === 'release')
const intervals = [];
let currentInterval = 0;
const intervals = []
let currentInterval = 0
for (let i = 0; i < versionArray.length; i++) {
const index = allVersions.findIndex((x) => x.version === versionArray[i]);
const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i]);
for (let i = 0; i < versionArray.length; i++) {
const index = allVersions.findIndex((x) => x.version === versionArray[i])
const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i])
if (i === 0) {
intervals.push([[versionArray[i], index, releaseIndex]]);
} else {
const intervalBase = intervals[currentInterval];
if (i === 0) {
intervals.push([[versionArray[i], index, releaseIndex]])
} else {
const intervalBase = intervals[currentInterval]
if (
(index - intervalBase[intervalBase.length - 1][1] === 1 ||
releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
(allVersions[intervalBase[0][1]].version_type === "release" ||
allVersions[index].version_type !== "release")
) {
intervalBase[1] = [versionArray[i], index, releaseIndex];
} else {
currentInterval += 1;
intervals[currentInterval] = [[versionArray[i], index, releaseIndex]];
}
}
}
if (
(index - intervalBase[intervalBase.length - 1][1] === 1 ||
releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
(allVersions[intervalBase[0][1]].version_type === 'release' ||
allVersions[index].version_type !== 'release')
) {
intervalBase[1] = [versionArray[i], index, releaseIndex]
} else {
currentInterval += 1
intervals[currentInterval] = [[versionArray[i], index, releaseIndex]]
}
}
}
const newIntervals = [];
for (let i = 0; i < intervals.length; i++) {
const interval = intervals[i];
const newIntervals = []
for (let i = 0; i < intervals.length; i++) {
const interval = intervals[i]
if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
let lastSnapshot = null;
for (let j = interval[1][1]; j > interval[0][1]; j--) {
if (allVersions[j].version_type === "release") {
newIntervals.push([
interval[0],
[
allVersions[j].version,
j,
allReleases.findIndex((x) => x.version === allVersions[j].version),
],
]);
if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
let lastSnapshot = null
for (let j = interval[1][1]; j > interval[0][1]; j--) {
if (allVersions[j].version_type === 'release') {
newIntervals.push([
interval[0],
[
allVersions[j].version,
j,
allReleases.findIndex((x) => x.version === allVersions[j].version),
],
])
if (lastSnapshot !== null && lastSnapshot !== j + 1) {
newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]]);
} else {
newIntervals.push([interval[1]]);
}
if (lastSnapshot !== null && lastSnapshot !== j + 1) {
newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]])
} else {
newIntervals.push([interval[1]])
}
break;
} else {
lastSnapshot = j;
}
}
} else {
newIntervals.push(interval);
}
}
break
} else {
lastSnapshot = j
}
}
} else {
newIntervals.push(interval)
}
}
const output = [];
const output = []
for (const interval of newIntervals) {
if (interval.length === 2) {
output.push(`${interval[0][0]}–${interval[1][0]}`);
} else {
output.push(interval[0][0]);
}
}
for (const interval of newIntervals) {
if (interval.length === 2) {
output.push(`${interval[0][0]}–${interval[1][0]}`)
} else {
output.push(interval[0][0])
}
}
return (output.length === 0 ? versionArray : output).join(", ");
};
return (output.length === 0 ? versionArray : output).join(', ')
}
export const cycleValue = (value, values) => {
const index = values.indexOf(value) + 1;
return values[index % values.length];
};
const index = values.indexOf(value) + 1
return values[index % values.length]
}

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'
}