From a168ed88e0700c2f2af52bb7b015d3287cd13cda Mon Sep 17 00:00:00 2001 From: Prospector Date: Mon, 14 Oct 2024 12:05:24 -0700 Subject: [PATCH 01/30] Start of app redesign --- apps/app-frontend/src/App.vue | 375 +++++++++++-- apps/app-frontend/src/assets/icons/index.js | 5 - apps/app-frontend/src/assets/modrinth_app.svg | 28 + .../src/assets/stylesheets/global.scss | 16 +- .../src/components/ui/AccountsCard.vue | 24 +- .../src/components/ui/AddContentButton.vue | 41 +- .../src/components/ui/Breadcrumbs.vue | 49 +- .../src/components/ui/NavButton.vue | 79 +++ .../src/components/ui/NavTabs.vue | 163 ++++++ .../src/components/ui/SplashScreen.vue | 3 +- .../components/ui/modal/AppSettingsModal.vue | 83 +++ .../components/ui/settings/AppSettings.vue | 6 + .../ui/settings/AppearanceSettings.vue | 30 ++ .../app-frontend/src/pages/instance/Index.vue | 223 +++++--- apps/app-frontend/src/pages/instance/Mods.vue | 510 ++++++++++-------- apps/app-frontend/tailwind.config.js | 2 +- apps/app/src/macos/window_ext.rs | 4 +- apps/app/src/main.rs | 26 +- apps/frontend/src/assets/styles/global.scss | 86 --- .../components/ui/thread/ThreadMessage.vue | 16 +- packages/assets/icons/coffee.svg | 1 + .../assets/icons/gauge.svg | 2 +- packages/assets/icons/manage.svg | 1 + packages/assets/icons/maximize.svg | 11 + .../assets/icons/minimize.svg | 0 packages/assets/icons/package.svg | 1 + packages/assets/icons/restore.svg | 10 + packages/assets/index.ts | 14 + packages/assets/styles/defaults.scss | 2 +- packages/assets/styles/variables.scss | 166 +++++- packages/ui/src/components/base/AutoLink.vue | 21 + .../ui/src/components/base/ButtonStyled.vue | 2 +- .../components/base/ConditionalNuxtLink.vue | 21 - .../ui/src/components/base/PopoutMenu.vue | 13 +- .../components/base/PreviewSelectButton.vue | 23 + .../components/content/ContentListItem.vue | 80 +++ .../components/content/ContentListPanel.vue | 50 ++ packages/ui/src/components/index.ts | 6 +- packages/ui/src/components/modal/NewModal.vue | 8 +- 39 files changed, 1590 insertions(+), 611 deletions(-) create mode 100644 apps/app-frontend/src/assets/modrinth_app.svg create mode 100644 apps/app-frontend/src/components/ui/NavButton.vue create mode 100644 apps/app-frontend/src/components/ui/NavTabs.vue create mode 100644 apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue create mode 100644 apps/app-frontend/src/components/ui/settings/AppSettings.vue create mode 100644 apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue create mode 100644 packages/assets/icons/coffee.svg rename apps/app-frontend/src/assets/icons/maximize.svg => packages/assets/icons/gauge.svg (61%) create mode 100644 packages/assets/icons/manage.svg create mode 100644 packages/assets/icons/maximize.svg rename {apps/app-frontend/src => packages}/assets/icons/minimize.svg (100%) create mode 100644 packages/assets/icons/package.svg create mode 100644 packages/assets/icons/restore.svg create mode 100644 packages/ui/src/components/base/AutoLink.vue delete mode 100644 packages/ui/src/components/base/ConditionalNuxtLink.vue create mode 100644 packages/ui/src/components/base/PreviewSelectButton.vue create mode 100644 packages/ui/src/components/content/ContentListItem.vue create mode 100644 packages/ui/src/components/content/ContentListPanel.vue diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue index f5cd667b8..0db852571 100644 --- a/apps/app-frontend/src/App.vue +++ b/apps/app-frontend/src/App.vue @@ -2,6 +2,8 @@ import { computed, ref, onMounted } from 'vue' import { RouterView, RouterLink, useRouter, useRoute } from 'vue-router' import { + ArrowBigUpDashIcon, + LogInIcon, HomeIcon, SearchIcon, LibraryIcon, @@ -9,9 +11,14 @@ import { SettingsIcon, XIcon, DownloadIcon, + CompassIcon, + MinimizeIcon, + MaximizeIcon, + RestoreIcon } from '@modrinth/assets' -import { Button, Notifications } from '@modrinth/ui' +import { Avatar, Button, Notifications } from '@modrinth/ui' import { useLoading, useTheming } from '@/store/state' +import ModrinthAppLogo from '@/assets/modrinth_app.svg?component' import AccountsCard from '@/components/ui/AccountsCard.vue' import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue' import { get } from '@/helpers/settings' @@ -22,7 +29,6 @@ import ErrorModal from '@/components/ui/ErrorModal.vue' import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator' import { handleError, useNotifications } from '@/store/notifications.js' import { command_listener, warning_listener } from '@/helpers/events.js' -import { MinimizeIcon, MaximizeIcon } from '@/assets/icons' import { type } from '@tauri-apps/plugin-os' import { isDev, getOS, restartApp } from '@/helpers/utils.js' import { initAnalytics, debugAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics' @@ -43,9 +49,38 @@ import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state' import { renderString } from '@modrinth/utils' import { useFetch } from '@/helpers/fetch.js' import { check } from '@tauri-apps/plugin-updater' +import NavButton from '@/components/ui/NavButton.vue' +import { get as getCreds } from '@/helpers/mr_auth.js' +import { get_user } from '@/helpers/cache.js' +import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue' +import dayjs from 'dayjs' const themeStore = useTheming() +const news = ref([ + { + title: "Modrinth App 0.9.0", + summary: "An all-new UI, Modrinth Servers, and support for collections.", + thumbnail: "https://media.beehiiv.com/cdn-cgi/image/format=auto,width=800,height=421,fit=scale-down,onerror=redirect/uploads/publication/thumbnail/a49f8e1b-3835-4ea1-a85b-118c6425ebc3/landscape_1667087426098458.png", + date: "2024-10-11T00:00:00Z", + link: "https://blog.modrinth.com/p/creator-revenue-update", + }, + { + title: "Becoming Sustainable", + summary: "Announcing 5x creator revenue and updates to the monetization program.", + thumbnail: "https://media.beehiiv.com/cdn-cgi/image/format=auto,width=800,height=421,fit=scale-down,onerror=redirect/uploads/asset/file/c99b9885-8248-4d7a-b19a-3ae2c902fdd5/revenue.png", + date: "2024-09-13T00:00:00Z", + link: "https://blog.modrinth.com/p/creator-revenue-update", + }, + { + title: "Modrinth+ and New Ads", + summary: "Introducing a new advertising system, a subscription to remove ads, and a redesign of the website!\n", + thumbnail: "https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/38ce85e4-5d93-43eb-b61b-b6296f6b9e66/things.png?t=1724260059", + date: "2024-08-21T00:00:00Z", + link: "https://blog.modrinth.com/p/introducing-modrinth-refreshed-site-look-new-advertising-system", + } +]); + const urlModal = ref(null) const offline = ref(!navigator.onLine) @@ -65,6 +100,8 @@ const stateInitialized = ref(false) const criticalErrorMessage = ref() +const isMaximized = ref(false) + onMounted(async () => { await useCheckDisableMouseover() }) @@ -97,6 +134,12 @@ async function setupApp() { themeStore.collapsedNavigation = collapsed_navigation themeStore.advancedRendering = advanced_rendering + isMaximized.value = await getCurrentWindow().isMaximized() + + await getCurrentWindow().onResized(async () => { + isMaximized.value = await getCurrentWindow().isMaximized() + }) + initAnalytics() if (!telemetry) { optOutAnalytics() @@ -176,6 +219,21 @@ const modInstallModal = ref() const installConfirmModal = ref() const incompatibilityWarningModal = ref() +const settingsTest = ref() + +const credentials = ref() + +async function fetchCredentials() { + const creds = await getCreds().catch(handleError) + if (creds && creds.user_id) { + creds.user = await get_user(creds.user_id).catch(handleError) + } + credentials.value = creds +} + +const MIDAS_BITFLAG = 1 << 0 +const hasPlus = computed(() => credentials.value && credentials.value.user && (credentials.value.user.badges & MIDAS_BITFLAG) === MIDAS_BITFLAG) + onMounted(() => { invoke('show_window') @@ -186,6 +244,8 @@ onMounted(() => { install.setIncompatibilityWarningModal(incompatibilityWarningModal) install.setInstallConfirmModal(installConfirmModal) install.setModInstallModal(modInstallModal) + + fetchCredentials(); }) document.querySelector('body').addEventListener('click', function (e) { @@ -260,8 +320,123 @@ async function checkUpdates() {