+
-
-
- {{ colorTheme[asString(option)] ? formatMessage(colorTheme[asString(option)]) : option }}
+
+
+ {{ formatTheme(option) }}
diff --git a/packages/ui/src/layouts/shared/appearance-settings/index.ts b/packages/ui/src/layouts/shared/appearance-settings/index.ts
new file mode 100644
index 0000000000..fe563b8435
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/index.ts
@@ -0,0 +1,3 @@
+export { default as AppearanceSettingsLayout } from './layout.vue'
+export * from './providers'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/appearance-settings/layout.vue b/packages/ui/src/layouts/shared/appearance-settings/layout.vue
new file mode 100644
index 0000000000..b3415b19c6
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/layout.vue
@@ -0,0 +1,181 @@
+
+
+
+
+
+
+
+ {{ formatMessage(messages.colorThemeTitle) }}
+
+
+ {{ formatMessage(messages.colorThemeDescription) }}
+
+
+
+
+
+
+ {{ formatMessage(messages.projectListLayoutsTitle) }}
+
+
+ {{ formatMessage(messages.projectListLayoutsDescription) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/layouts/shared/appearance-settings/messages.ts b/packages/ui/src/layouts/shared/appearance-settings/messages.ts
new file mode 100644
index 0000000000..3ef3cd7e02
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/messages.ts
@@ -0,0 +1,108 @@
+import { defineMessages } from '#ui/composables'
+
+export const appearanceSettingsMessages = defineMessages({
+ colorThemeTitle: {
+ id: 'settings.display.theme.title',
+ defaultMessage: 'Color theme',
+ },
+ colorThemeDescription: {
+ id: 'settings.display.theme.description',
+ defaultMessage: 'Select your preferred color theme across Modrinth.',
+ },
+ syncAcrossDevicesTitle: {
+ id: 'settings.display.theme.sync-across-devices',
+ defaultMessage: 'Sync theme across devices',
+ },
+ syncAcrossDevicesDescription: {
+ id: 'settings.display.theme.sync-across-devices.description',
+ defaultMessage:
+ "Use this theme everywhere you're signed in. Turn this off to keep a separate theme on this device.",
+ },
+ syncAcrossDevicesSignedOutTooltip: {
+ id: 'settings.display.theme.sync-across-devices.sign-in-tooltip',
+ defaultMessage: 'Sign into Modrinth to sync theme',
+ },
+ projectListLayoutsTitle: {
+ id: 'settings.display.project-list-layouts.title',
+ defaultMessage: 'Project list layouts',
+ },
+ projectListLayoutsDescription: {
+ id: 'settings.display.project-list-layouts.description',
+ defaultMessage: 'Select your preferred layout for each page that displays project lists.',
+ },
+ mod: {
+ id: 'settings.display.project-list-layouts.mod',
+ defaultMessage: 'Mods page',
+ },
+ plugin: {
+ id: 'settings.display.project-list-layouts.plugin',
+ defaultMessage: 'Plugins page',
+ },
+ datapack: {
+ id: 'settings.display.project-list-layouts.datapack',
+ defaultMessage: 'Data Packs page',
+ },
+ shader: {
+ id: 'settings.display.project-list-layouts.shader',
+ defaultMessage: 'Shaders page',
+ },
+ resourcepack: {
+ id: 'settings.display.project-list-layouts.resourcepack',
+ defaultMessage: 'Resource Packs page',
+ },
+ modpack: {
+ id: 'settings.display.project-list-layouts.modpack',
+ defaultMessage: 'Modpacks page',
+ },
+ server: {
+ id: 'settings.display.project-list-layouts.server',
+ defaultMessage: 'Servers page',
+ },
+ user: {
+ id: 'settings.display.project-list-layouts.user',
+ defaultMessage: 'User profile pages',
+ },
+ advancedRenderingTitle: {
+ id: 'settings.display.sidebar.advanced-rendering.title',
+ defaultMessage: 'Advanced rendering',
+ },
+ advancedRenderingDescription: {
+ id: 'settings.display.sidebar.advanced-rendering.description',
+ defaultMessage:
+ 'Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering.',
+ },
+ externalLinksNewTabTitle: {
+ id: 'settings.display.sidebar.external-links-new-tab.title',
+ defaultMessage: 'Open external links in new tab',
+ },
+ externalLinksNewTabDescription: {
+ id: 'settings.display.sidebar.external-links-new-tab.description',
+ defaultMessage:
+ 'Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab.',
+ },
+ rightAlignedFiltersSidebarTitle: {
+ id: 'settings.display.sidebar.right-aligned-filters-sidebar.title',
+ defaultMessage: 'Right-aligned filters sidebar on search pages',
+ },
+ rightAlignedFiltersSidebarDescription: {
+ id: 'settings.display.sidebar.right-aligned-filters-sidebar.description',
+ defaultMessage: 'Aligns the filters sidebar to the right of the search results.',
+ },
+ leftAlignedContentSidebarTitle: {
+ id: 'settings.display.sidebar.left-aligned-content-sidebar.title',
+ defaultMessage: 'Left-aligned sidebar on content pages',
+ },
+ leftAlignedContentSidebarDescription: {
+ id: 'settings.display.sidebar.left-aligned-content-sidebar.description',
+ defaultMessage: "Aligns the sidebar to the left of the page's content.",
+ },
+ nativeDecorationsTitle: {
+ id: 'app.appearance-settings.native-decorations.title',
+ defaultMessage: 'System window frame',
+ },
+ nativeDecorationsDescription: {
+ id: 'app.appearance-settings.native-decorations.description',
+ defaultMessage:
+ "Use your operating system's title bar and window controls. Requires an app restart.",
+ },
+})
diff --git a/packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts b/packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts
new file mode 100644
index 0000000000..c0ddd9e9e7
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/providers/appearance-settings.ts
@@ -0,0 +1,229 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { toValue } from 'vue'
+
+import { createContext } from '#ui/providers/create-context'
+
+import type {
+ AppearanceRef,
+ AppearanceSetter,
+ AppearanceTheme,
+ AppearanceThemeSelection,
+ ProjectDisplayLocation,
+ ProjectLayout,
+ ProjectLayoutSetting,
+ SidebarPreferences,
+ WritableAppearanceSetting,
+} from '../types'
+
+interface AppearanceSetting
{
+ value: AppearanceRef
+ update: AppearanceSetter
+ disabled?: AppearanceRef
+}
+
+interface ThemeSettings {
+ current: AppearanceRef
+ options: AppearanceRef
+ system: AppearanceRef
+ update: AppearanceSetter
+ syncAcrossDevices: AppearanceSetting
+}
+
+interface ProjectLayoutSettings {
+ value: AppearanceRef
+ update: (type: ProjectDisplayLocation, layout: ProjectLayout) => Promise
+}
+
+interface SidebarSettings {
+ value: AppearanceRef
+ update: (key: keyof SidebarPreferences, enabled: boolean) => Promise
+}
+
+export interface AppearanceSettingsContext {
+ theme: ThemeSettings
+ advancedRendering: AppearanceSetting
+ nativeDecorations?: AppearanceSetting
+ projectLayouts?: ProjectLayoutSettings
+ externalLinksNewTab?: AppearanceSetting
+ sidebarPreferences?: SidebarSettings
+}
+
+export interface AppearanceSettingsProviderOptions {
+ deferPersistence?: boolean
+ theme: {
+ current: AppearanceRef
+ options: AppearanceRef
+ system: AppearanceRef
+ set: AppearanceSetter
+ syncAcrossDevices: WritableAppearanceSetting
+ syncDisabled: AppearanceRef
+ }
+ advancedRendering: WritableAppearanceSetting
+ nativeDecorations?: WritableAppearanceSetting
+ projectLayouts?: {
+ value: AppearanceRef
+ set: (type: ProjectDisplayLocation, layout: ProjectLayout) => void | Promise
+ }
+ externalLinksNewTab?: WritableAppearanceSetting
+ sidebarPreferences?: {
+ value: AppearanceRef
+ set: (key: keyof SidebarPreferences, enabled: boolean) => void | Promise
+ }
+ updatePreferences: (
+ preferences: Labrinth.Users.v3.PartialUserPreferences,
+ ) => Promise
+}
+
+const layoutPreferenceKeys: Record<
+ ProjectDisplayLocation,
+ keyof Labrinth.Users.v3.LayoutPreferences
+> = {
+ mod: 'mods',
+ plugin: 'plugins',
+ datapack: 'datapacks',
+ shader: 'shaders',
+ resourcepack: 'resourcepacks',
+ modpack: 'modpacks',
+ server: 'servers',
+ user: 'users',
+}
+
+const [injectAppearanceSettings, provideAppearanceSettingsContext] =
+ createContext('AppearanceSettingsLayout', 'appearanceSettings')
+
+export { injectAppearanceSettings }
+
+function createSetting(setting: WritableAppearanceSetting): AppearanceSetting {
+ return {
+ value: setting.value,
+ update: setting.set,
+ }
+}
+
+export function provideAppearanceSettings(
+ options: AppearanceSettingsProviderOptions,
+): AppearanceSettingsContext {
+ const projectLayouts = options.projectLayouts
+ const sidebarPreferences = options.sidebarPreferences
+
+ async function syncThemePreference(theme: AppearanceThemeSelection): Promise {
+ await options.updatePreferences({
+ appearance:
+ theme === 'system'
+ ? { auto: true }
+ : {
+ auto: false,
+ theme,
+ },
+ })
+ }
+
+ async function syncThemeOrDisable(theme: AppearanceThemeSelection): Promise {
+ try {
+ await syncThemePreference(theme)
+ } catch {
+ await options.theme.syncAcrossDevices.set(false)
+ }
+ }
+
+ async function updateTheme(theme: AppearanceThemeSelection): Promise {
+ await options.theme.set(theme)
+ if (options.deferPersistence) return
+ if (!toValue(options.theme.syncAcrossDevices.value) || toValue(options.theme.syncDisabled)) {
+ return
+ }
+
+ await syncThemeOrDisable(theme)
+ }
+
+ async function updateThemeSync(enabled: boolean): Promise {
+ if (toValue(options.theme.syncDisabled)) return
+
+ await options.theme.syncAcrossDevices.set(enabled)
+ if (options.deferPersistence) return
+ if (enabled) {
+ await syncThemeOrDisable(toValue(options.theme.current))
+ }
+ }
+
+ async function updateProjectLayout(
+ type: ProjectDisplayLocation,
+ layout: ProjectLayout,
+ ): Promise {
+ if (!projectLayouts) return
+
+ const previousLayout = toValue(projectLayouts.value).find(
+ (setting) => setting.type === type,
+ )?.layout
+
+ await projectLayouts.set(type, layout)
+ if (options.deferPersistence) return
+ try {
+ const layouts: Partial = {}
+ layouts[layoutPreferenceKeys[type]] = layout
+ await options.updatePreferences({ layouts })
+ } catch {
+ const currentLayout = toValue(projectLayouts.value).find(
+ (setting) => setting.type === type,
+ )?.layout
+ if (previousLayout && currentLayout === layout) {
+ await projectLayouts.set(type, previousLayout)
+ }
+ }
+ }
+
+ async function updateSidebarPreference(
+ key: keyof SidebarPreferences,
+ enabled: boolean,
+ ): Promise {
+ if (!sidebarPreferences) return
+
+ const previousValue = toValue(sidebarPreferences.value)[key]
+ await sidebarPreferences.set(key, enabled)
+ if (options.deferPersistence) return
+ try {
+ const sidebars: Partial = {}
+ sidebars[key] = enabled
+ await options.updatePreferences({ sidebars })
+ } catch {
+ if (toValue(sidebarPreferences.value)[key] === enabled) {
+ await sidebarPreferences.set(key, previousValue)
+ }
+ }
+ }
+
+ const context: AppearanceSettingsContext = {
+ theme: {
+ current: options.theme.current,
+ options: options.theme.options,
+ system: options.theme.system,
+ update: updateTheme,
+ syncAcrossDevices: {
+ value: options.theme.syncAcrossDevices.value,
+ disabled: options.theme.syncDisabled,
+ update: updateThemeSync,
+ },
+ },
+ advancedRendering: createSetting(options.advancedRendering),
+ nativeDecorations: options.nativeDecorations
+ ? createSetting(options.nativeDecorations)
+ : undefined,
+ projectLayouts: projectLayouts
+ ? {
+ value: projectLayouts.value,
+ update: updateProjectLayout,
+ }
+ : undefined,
+ externalLinksNewTab: options.externalLinksNewTab
+ ? createSetting(options.externalLinksNewTab)
+ : undefined,
+ sidebarPreferences: sidebarPreferences
+ ? {
+ value: sidebarPreferences.value,
+ update: updateSidebarPreference,
+ }
+ : undefined,
+ }
+
+ return provideAppearanceSettingsContext(context)
+}
diff --git a/packages/ui/src/layouts/shared/appearance-settings/providers/index.ts b/packages/ui/src/layouts/shared/appearance-settings/providers/index.ts
new file mode 100644
index 0000000000..d5589cbfd5
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/providers/index.ts
@@ -0,0 +1 @@
+export * from './appearance-settings'
diff --git a/packages/ui/src/layouts/shared/appearance-settings/types.ts b/packages/ui/src/layouts/shared/appearance-settings/types.ts
new file mode 100644
index 0000000000..778e260415
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/types.ts
@@ -0,0 +1,36 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { ComputedRef, Ref } from 'vue'
+
+export type AppearanceTheme = Labrinth.Users.v3.Theme
+export type AppearanceThemeSelection = AppearanceTheme | 'system'
+export type ProjectLayout = Labrinth.Users.v3.LayoutOption
+export type SidebarPreferences = Labrinth.Users.v3.SidebarPreferences
+export type AppearanceRef = Ref | ComputedRef
+export type AppearanceSetter = (value: T) => void | Promise
+
+export const projectDisplayLocations = [
+ 'mod',
+ 'plugin',
+ 'resourcepack',
+ 'modpack',
+ 'shader',
+ 'datapack',
+ 'server',
+ 'user',
+] as const
+
+export type ProjectDisplayLocation = (typeof projectDisplayLocations)[number]
+
+export function isProjectDisplayLocation(value: string): value is ProjectDisplayLocation {
+ return projectDisplayLocations.some((location) => location === value)
+}
+
+export interface ProjectLayoutSetting {
+ type: ProjectDisplayLocation
+ layout: ProjectLayout
+}
+
+export interface WritableAppearanceSetting {
+ value: AppearanceRef
+ set: AppearanceSetter
+}
diff --git a/packages/ui/src/layouts/shared/content-tab/layout.vue b/packages/ui/src/layouts/shared/content-tab/layout.vue
index 0eac52f168..cad1e4d367 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -19,6 +19,7 @@ import {
TrashIcon,
UserIcon,
} from '@modrinth/assets'
+import { useSessionStorage } from '@vueuse/core'
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import Avatar from '#ui/components/base/Avatar.vue'
@@ -179,7 +180,9 @@ function getItemId(item: ContentItem) {
}
type SortMode = 'alphabetical-asc' | 'alphabetical-desc' | 'date-added-newest' | 'date-added-oldest'
-const sortMode = ref('alphabetical-asc')
+const sortMode = ctx.filterPersistKey
+ ? useSessionStorage(`content-sort:${ctx.filterPersistKey}`, 'alphabetical-asc')
+ : ref('alphabetical-asc')
const sortLabels: Record string> = {
'alphabetical-asc': () => formatMessage(messages.sortAlphabeticalAscending),
diff --git a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
index fad0eb1f0b..37fcd018cc 100644
--- a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
+++ b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
@@ -99,7 +99,7 @@ export interface ContentManagerContext {
// Table item mapping (link generation differs per platform)
mapToTableItem: (item: ContentItem) => ContentCardTableItem
- // Filter persistence key — when set, selected filters are saved/restored via sessionStorage
+ // Filter persistence key — when set, filter and sort settings are saved/restored via sessionStorage
filterPersistKey?: string
showSharedContentFilter?: Ref | ComputedRef
}
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index 79bec2d024..59ba8d7109 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -1,5 +1,3 @@
-export { default as AccountProfileSettings } from './AccountProfileSettings.vue'
-export { default as AccountSocialSettings } from './AccountSocialSettings.vue'
export { default as ServersManageAccessPage } from './hosting/manage/[id]/access/access.vue'
export { default as ServerOnboardingPanelPage } from './hosting/manage/[id]/onboarding.vue'
export { default as ServersManageBackupsPage } from './hosting/manage/backups.vue'
@@ -8,3 +6,4 @@ export { default as ServersManageFilesPage } from './hosting/manage/files.vue'
export { default as ServersManagePageIndex } from './hosting/manage/index.vue'
export { default as ServersManageOverviewPage } from './hosting/manage/overview.vue'
export { default as ServersManageRootLayout } from './hosting/manage/root.vue'
+export * from './settings'
diff --git a/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue b/packages/ui/src/layouts/wrapped/settings/AccountProfileSettings.vue
similarity index 100%
rename from packages/ui/src/layouts/wrapped/AccountProfileSettings.vue
rename to packages/ui/src/layouts/wrapped/settings/AccountProfileSettings.vue
diff --git a/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue b/packages/ui/src/layouts/wrapped/settings/AccountSocialSettings.vue
similarity index 69%
rename from packages/ui/src/layouts/wrapped/AccountSocialSettings.vue
rename to packages/ui/src/layouts/wrapped/settings/AccountSocialSettings.vue
index 240744fa31..93f36cd34c 100644
--- a/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue
+++ b/packages/ui/src/layouts/wrapped/settings/AccountSocialSettings.vue
@@ -29,13 +29,14 @@
{{ formatMessage(messages.friendRequestsTitle) }}
{{ formatMessage(messages.friendRequestsDescription) }}
@@ -47,18 +48,38 @@
{{ formatMessage(messages.sharedInstanceInvitesTitle) }}
{{ formatMessage(messages.sharedInstanceInvitesDescription) }}