more fixes, bump version

modrinth · Dec 23, 2024 · 47313d9 · 47313d9
1 parent adf837b
commit 47313d9
Show file tree

Hide file tree

Showing 44 changed files with 390 additions and 1,266 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@modrinth/app-frontend",
   "private": true,
-  "version": "0.9.0-1",
+  "version": "0.9.0-2",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
@@ -62,33 +62,7 @@ import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 
 const themeStore = useTheming()
 
-const news = ref([
-  {
-    title: 'Introducing Modrinth Servers',
-    summary: 'Host your next Minecraft server with Modrinth.',
-    thumbnail:
-      'https://media.beehiiv.com/cdn-cgi/image/format=auto,width=800,height=421,fit=scale-down,onerror=redirect/uploads/asset/file/eefddc59-b4c4-4e7d-92e8-c26bdef42984/Modrinth-Servers-Thumb.png',
-    date: '2024-11-02T00:00:00Z',
-    link: 'https://blog.modrinth.com/p/modrinth-servers-beta',
-  },
-  {
-    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 news = ref([])
 
 const urlModal = ref(null)
 
@@ -133,6 +107,9 @@ async function setupApp() {
     advanced_rendering,
     onboarded,
     default_page,
+    toggle_sidebar,
+    developer_mode,
+    feature_flags,
   } = await get()
 
   if (default_page === 'Library') {
@@ -150,6 +127,9 @@ async function setupApp() {
   themeStore.setThemeState(theme)
   themeStore.collapsedNavigation = collapsed_navigation
   themeStore.advancedRendering = advanced_rendering
+  themeStore.toggleSidebar = toggle_sidebar
+  themeStore.devMode = developer_mode
+  themeStore.featureFlags = feature_flags
 
   isMaximized.value = await getCurrentWindow().isMaximized()
 
@@ -191,6 +171,12 @@ async function setupApp() {
     }
   })
 
+  useFetch(`https://modrinth.com/blog/news.json`, 'news', true).then((res) => {
+    if (res && res.articles) {
+      news.value = res.articles
+    }
+  })
+
   get_opening_command().then(handleCommand)
   checkUpdates()
   fetchCredentials()
@@ -264,13 +250,20 @@ const hasPlus = computed(
     (credentials.value.user.badges & MIDAS_BITFLAG) === MIDAS_BITFLAG,
 )
 
-const sidebarToggled = ref(false)
-const forceSidebar = computed(
-  () => route.path.startsWith('/browse') || route.path.startsWith('/project'),
-)
+const sidebarToggled = ref(true)
+
+themeStore.$subscribe(() => {
+  sidebarToggled.value = !themeStore.toggleSidebar
+})
+
+const forceSidebar = ref(false)
 const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
 const showAd = computed(() => !(!sidebarVisible.value || hasPlus.value))
 
+router.afterEach((to) => {
+  forceSidebar.value = to.path.startsWith('/browse') || to.path.startsWith('/project')
+})
+
 watch(
   showAd,
   () => {
@@ -377,21 +370,21 @@ function handleAuxClick(e) {
       <InstanceCreationModal ref="installationModal" />
     </Suspense>
     <div
-      class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.5rem] z-10 w-[--left-bar-width]"
+      class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.5rem] w-[--left-bar-width]"
     >
-      <NavButton to="/">
+      <NavButton v-tooltip.right="'Home'" to="/">
         <HomeIcon />
-        <template #label>Home</template>
       </NavButton>
       <NavButton
+        v-tooltip.right="'Discover content'"
         to="/browse/modpack"
         :is-primary="() => route.path.startsWith('/browse') && !route.query.i"
         :is-subpage="(route) => route.path.startsWith('/project') && !route.query.i"
       >
         <CompassIcon />
-        <template #label>Discover content</template>
       </NavButton>
       <NavButton
+        v-tooltip.right="'Library'"
         to="/library"
         :is-subpage="
           () =>
@@ -401,24 +394,24 @@ function handleAuxClick(e) {
         "
       >
         <LibraryIcon />
-        <template #label>Library</template>
       </NavButton>
       <div class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
       <suspense>
         <QuickInstanceSwitcher />
       </suspense>
-      <NavButton :to="() => $refs.installationModal.show()" :disabled="offline">
+      <NavButton
+        v-tooltip.right="'Create new instance'"
+        :to="() => $refs.installationModal.show()"
+        :disabled="offline"
+      >
         <PlusIcon />
-        <template #label>Create new instance</template>
       </NavButton>
       <div class="flex flex-grow"></div>
-      <NavButton v-if="updateAvailable" :to="() => restartApp()">
+      <NavButton v-if="updateAvailable" v-tooltip.right="'Install update'" :to="() => restartApp()">
         <DownloadIcon />
-        <template #label>Install update</template>
       </NavButton>
-      <NavButton :to="() => $refs.settingsModal.show()">
+      <NavButton v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
         <SettingsIcon />
-        <template #label>Settings</template>
       </NavButton>
       <ButtonStyled v-if="credentials" type="transparent" circular>
         <OverflowMenu
@@ -440,7 +433,7 @@ function handleAuxClick(e) {
           <template #sign-out> <LogOutIcon /> Sign out </template>
         </OverflowMenu>
       </ButtonStyled>
-      <NavButton v-else :to="() => signIn()">
+      <NavButton v-else v-tooltip.right="'Sign in'" :to="() => signIn()">
         <LogInIcon />
         <template #label>Sign in</template>
       </NavButton>
@@ -452,7 +445,7 @@ function handleAuxClick(e) {
       </div>
       <section class="flex ml-auto items-center">
         <ButtonStyled
-          v-if="!forceSidebar"
+          v-if="!forceSidebar && themeStore.toggleSidebar"
           :type="sidebarToggled ? 'standard' : 'transparent'"
           circular
         >
@@ -505,7 +498,7 @@ function handleAuxClick(e) {
         <ModrinthLoadingIndicator />
       </div>
       <div
-        v-if="themeStore.featureFlag_pagePath"
+        v-if="themeStore.featureFlags.page_path"
         class="absolute bottom-0 left-0 m-2 bg-tooltip-bg text-tooltip-text font-semibold rounded-full px-2 py-1 text-xs z-50"
       >
         {{ route.fullPath }}
@@ -546,7 +539,7 @@ function handleAuxClick(e) {
               <FriendsList :credentials="credentials" :sign-in="() => signIn()" />
             </suspense>
           </div>
-          <div class="pt-4 flex flex-col">
+          <div v-if="news && news.length > 0" class="pt-4 flex flex-col">
             <h3 class="px-4 text-lg m-0">News</h3>
             <template v-for="(item, index) in news" :key="`news-${index}`">
               <a
@@ -725,7 +718,7 @@ function handleAuxClick(e) {
   overflow: visible;
   width: 300px;
   position: relative;
-  height: calc(100vh - 3.75rem);
+  height: calc(100vh - var(--top-bar-height));
   background: var(--brand-gradient-bg);
 
   --color-button-bg: var(--brand-gradient-button);

diff --git a/apps/app-frontend/src/components/ui/NavButton.vue b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -1,29 +1,24 @@
 <template>
-  <div class="tooltip-parent flex items-center justify-center">
-    <RouterLink
-      v-if="typeof to === 'string'"
-      :to="to"
-      v-bind="$attrs"
-      :class="{
-        'router-link-active': isPrimary && isPrimary(route),
-        'subpage-active': isSubpage && isSubpage(route),
-      }"
-      class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
-    >
-      <slot />
-    </RouterLink>
-    <button
-      v-else
-      v-bind="$attrs"
-      class="button-animation border-none text-primary cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
-      @click="to"
-    >
-      <slot />
-    </button>
-    <div class="tooltip-label">
-      <slot name="label" />
-    </div>
-  </div>
+  <RouterLink
+    v-if="typeof to === 'string'"
+    :to="to"
+    v-bind="$attrs"
+    :class="{
+      'router-link-active': isPrimary && isPrimary(route),
+      'subpage-active': isSubpage && isSubpage(route),
+    }"
+    class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+  >
+    <slot />
+  </RouterLink>
+  <button
+    v-else
+    v-bind="$attrs"
+    class="button-animation border-none text-primary cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+    @click="to"
+  >
+    <slot />
+  </button>
 </template>
 
 <script setup lang="ts">
@@ -61,50 +56,4 @@ defineOptions({
 .subpage-active {
   @apply text-contrast bg-button-bg;
 }
-
-.tooltip-parent {
-  position: relative;
-  border-radius: var(--radius-max);
-}
-
-.tooltip-parent:hover .tooltip-label {
-  opacity: 1;
-  translate: 0 0;
-  scale: 1;
-}
-
-.tooltip-label:not(:empty) {
-  --_tooltip-bg: black;
-  --_tooltip-color: var(--dark-color-contrast);
-
-  position: absolute;
-  background-color: var(--_tooltip-bg);
-  color: var(--_tooltip-color);
-  text-wrap: nowrap;
-  padding: 0.5rem 0.5rem;
-  border-radius: var(--radius-sm);
-  left: calc(100% + 0.5rem);
-  font-size: 1rem;
-  line-height: 1;
-  font-weight: bold;
-  filter: drop-shadow(5px 5px 0.8rem rgba(0, 0, 0, 0.35));
-  pointer-events: none;
-  user-select: none;
-
-  opacity: 0;
-  translate: -0.5rem 0;
-  scale: 0.9;
-  transition: all ease-in-out 0.1s;
-}
-
-.tooltip-label:not(:empty)::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 100%; /* To the left of the tooltip */
-  margin-top: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: transparent var(--_tooltip-bg) transparent transparent;
-}
 </style>
diff --git a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
@@ -42,6 +42,7 @@ onUnmounted(() => {
   <NavButton
     v-for="instance in recentInstances"
     :key="instance.id"
+    v-tooltip.right="instance.name"
     :to="`/instance/${encodeURIComponent(instance.path)}`"
   >
     <Avatar
@@ -55,7 +56,6 @@ onUnmounted(() => {
     >
       <SpinnerIcon class="animate-spin w-4 h-4" />
     </div>
-    <template #label>{{ instance.name }}</template>
   </NavButton>
   <div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
 </template>

diff --git a/apps/app-frontend/src/components/ui/RunningAppBar.vue b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -119,7 +119,6 @@ import { useRouter } from 'vue-router'
 import { progress_bars_list } from '@/helpers/state.js'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { handleError } from '@/store/notifications.js'
-import { ChatIcon } from '@/assets/icons'
 import { get_many } from '@/helpers/profile.js'
 import { trackEvent } from '@/helpers/analytics'
 

diff --git a/apps/app-frontend/src/components/ui/SearchCard.vue b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -38,7 +38,7 @@
       <div class="m-0 line-clamp-2">
         {{ project.description }}
       </div>
-      <div class="mt-auto flex items-center gap-1 no-wrap">
+      <div v-if="categories.length > 0" class="mt-auto flex items-center gap-1 no-wrap">
         <TagsIcon class="h-4 w-4 shrink-0" />
         <div
           v-for="tag in categories"

diff --git a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
@@ -190,6 +190,7 @@ const messages = defineMessages({
     description="If you proceed, all data for your instance will be permanently erased, including your worlds. You will not be able to recover it."
     :has-to-type="false"
     proceed-label="Delete"
+    :show-ad-on-close="false"
     @proceed="removeProfile"
   />
   <div class="block">

diff --git a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -457,6 +457,7 @@ const messages = defineMessages({
     :proceed-icon="HammerIcon"
     :proceed-label="formatMessage(messages.repairButton)"
     :danger="false"
+    :show-ad-on-close="false"
     @proceed="() => repairProfile(true)"
   />
   <ModpackVersionModal
@@ -480,6 +481,7 @@ const messages = defineMessages({
     :description="formatMessage(messages.unlinkInstanceConfirmDescription)"
     :proceed-icon="UnlinkIcon"
     :proceed-label="formatMessage(messages.unlinkInstanceButton)"
+    :show-ad-on-close="false"
     @proceed="() => unpairProfile()"
   />
   <ConfirmModalWrapper
@@ -488,6 +490,7 @@ const messages = defineMessages({
     :description="formatMessage(messages.reinstallModpackConfirmDescription)"
     :proceed-icon="DownloadIcon"
     :proceed-label="formatMessage(messages.reinstallModpackButton)"
+    :show-ad-on-close="false"
     @proceed="() => repairModpack()"
   />
   <div>