App redesign (#2946)

* Start of app redesign

* format

* continue progress

* Content page nearly done

* Fix recursion issues with content page

* Fix update all alignment

* Discover page progress

* Settings progress

* Removed unlocked-size hack that breaks web

* Revamp project page, refactor web project page to share code with app, fixed loading bar, misc UI/UX enhancements, update ko-fi logo, update arrow icons, fix web issues caused by floating-vue migration, fix tooltip issues, update web tooltips, clean up web hydration issues

* Ads + run prettier

* Begin auth refactor, move common messages to ui lib, add i18n extraction to all apps, begin Library refactor

* fix ads not hiding when plus log in

* rev lockfile changes/conflicts

* Fix sign in page

* Add generated

* (mostly) Data driven search

* Fix search mobile issue

* profile fixes

* Project versions page, fix typescript on UI lib and misc fixes

* Remove unused gallery component

* Fix linkfunction err

* Search filter controls at top, localization for locked filters

* Fix provided filter names

* Fix navigating from instance browse to main browse

* Friends frontend (#2995)

* Friends system frontend

* (almost) finish frontend

* finish friends, fix lint

* Fix lint

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

* Refresh macOS app icon

* Update web search UI more

* Fix link opens

* Fix frontend build

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

packages/ui/src/components/settings/ThemeSelector.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { MoonIcon, RadioButtonChecked, RadioButtonIcon, SunIcon } from '@modrinth/assets'
+import { useVIntl, defineMessages } from '@vintl/vintl'
+
+const { formatMessage } = useVIntl()
+
+defineProps({
+  updateColorTheme: {
+    type: Function,
+    required: true,
+  },
+  currentTheme: {
+    type: String,
+    required: true,
+  },
+  themeOptions: {
+    type: Array,
+    required: true,
+  },
+  systemThemeColor: {
+    type: String,
+    required: true,
+  },
+})
+
+const colorTheme = defineMessages({
+  title: {
+    id: 'settings.display.theme.title',
+    defaultMessage: 'Color theme',
+  },
+  description: {
+    id: 'settings.display.theme.description',
+    defaultMessage: 'Select your preferred color theme for Modrinth on this device.',
+  },
+  system: {
+    id: 'settings.display.theme.system',
+    defaultMessage: 'Sync with system',
+  },
+  light: {
+    id: 'settings.display.theme.light',
+    defaultMessage: 'Light',
+  },
+  dark: {
+    id: 'settings.display.theme.dark',
+    defaultMessage: 'Dark',
+  },
+  oled: {
+    id: 'settings.display.theme.oled',
+    defaultMessage: 'OLED',
+  },
+  retro: {
+    id: 'settings.display.theme.retro',
+    defaultMessage: 'Retro',
+  },
+  preferredLight: {
+    id: 'settings.display.theme.preferred-light-theme',
+    defaultMessage: 'Preferred light theme',
+  },
+  preferredDark: {
+    id: 'settings.display.theme.preferred-dark-theme',
+    defaultMessage: 'Preferred dark theme',
+  },
+})
+</script>
+
+<template>
+  <div class="theme-options mt-4">
+    <button
+      v-for="option in themeOptions"
+      :key="option"
+      class="preview-radio button-base"
+      :class="{ selected: currentTheme === option }"
+      @click="() => updateColorTheme(option)"
+    >
+      <div class="preview" :class="`${option === 'system' ? systemThemeColor : option}-mode`">
+        <div class="example-card card card">
+          <div class="example-icon"></div>
+          <div class="example-text-1"></div>
+          <div class="example-text-2"></div>
+        </div>
+      </div>
+      <div class="label">
+        <RadioButtonChecked v-if="currentTheme === option" class="radio" />
+        <RadioButtonIcon v-else class="radio" />
+        {{ colorTheme[option] ? formatMessage(colorTheme[option]) : option }}
+        <SunIcon
+          v-if="'light' === option"
+          v-tooltip="formatMessage(colorTheme.preferredLight)"
+          class="theme-icon"
+        />
+        <MoonIcon
+          v-else-if="'dark' === option"
+          v-tooltip="formatMessage(colorTheme.preferredDark)"
+          class="theme-icon"
+        />
+      </div>
+    </button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.theme-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
+  gap: var(--gap-lg);
+
+  .preview .example-card {
+    margin: 0;
+    padding: 1rem;
+    display: grid;
+    grid-template: 'icon text1' 'icon text2';
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+    outline: 2px solid transparent;
+
+    .example-icon {
+      grid-area: icon;
+      width: 2rem;
+      height: 2rem;
+      background-color: var(--color-button-bg);
+      border-radius: var(--radius-sm);
+      outline: 2px solid transparent;
+    }
+
+    .example-text-1,
+    .example-text-2 {
+      height: 0.5rem;
+      border-radius: var(--radius-sm);
+      outline: 2px solid transparent;
+    }
+
+    .example-text-1 {
+      grid-area: text1;
+      width: 100%;
+      background-color: var(--color-base);
+    }
+
+    .example-text-2 {
+      grid-area: text2;
+      width: 60%;
+      background-color: var(--color-secondary);
+    }
+  }
+}
+</style>