Project, Search, User redesign (#1281)

* New project page

* fix silly icon tailwind classes

* Start new versions page, add new ButtonStyled component

* Pagination and finish mocking up versions page functionality

* green download button

* hover animation

* New Modal, Avatar refactor, subpages in NavTabs

* lint

* Download modal

* New user page + fix lint

* fix ui lint

* Download animation fix

* Versions filter + finish project page

* Improve consistency of buttons on home page

* Fix ButtonStyled breaking

* Fix margin on version summary

* finish search, new modals, user + project page mobile

* fix gallery image pages

* New project header

* Fix gallery tab showing improperly

* Use auto direction + position for all popouts

* Preliminary user page

* test to see if this fixes login stuff

* remove extra slash

* Add version actions, move download button on versions page

* Listed -> public

* Shorten download modal selector height

* Fix user menu open direction

* Change breakpoint for header collapse

* Only underline title

* Tighten padding on stats a little

* New nav

* Make mobile breakpoint more consistent

* fix header breakpoint regression

* Add sign in button

* Fix edit icon color

* Fix margin at top of screen

* Fix user bios and ad width

* Fix user nav showing when there's only one type of project

* Fix plural projects on user page & extract i18n

* Remove ads on mobile for now

* Fix overflow menu showing hidden items

* NavTabs on mobile

* Fix navbar z index

* Search filter overhaul + negative filters

* fix no-max-height

* port version filters, fix following/collections, lint

* hide promos

* ui lint

* Disable modal background animation to reduce reported motion sickness

* Hide install with modrinth app button on mobile

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Prospector <prospectordev@gmail.com>

apps/frontend/src/pages/settings/index.vue

@@ -171,7 +171,7 @@
           type="checkbox"
         />
       </div>
-      <div class="adjacent-input small">
+      <div v-if="false" class="adjacent-input small">
         <label for="modrinth-app-promos">
           <span class="label__title">
             {{ formatMessage(toggleFeatures.hideModrinthAppPromosTitle) }}
@@ -190,10 +190,10 @@
       <div class="adjacent-input small">
         <label for="search-layout-toggle">
           <span class="label__title">
-            {{ formatMessage(toggleFeatures.rightAlignedSearchSidebarTitle) }}
+            {{ formatMessage(toggleFeatures.leftAlignedSearchSidebarTitle) }}
           </span>
           <span class="label__description">
-            {{ formatMessage(toggleFeatures.rightAlignedSearchSidebarDescription) }}
+            {{ formatMessage(toggleFeatures.leftAlignedSearchSidebarDescription) }}
           </span>
         </label>
         <input
@@ -206,10 +206,10 @@
       <div class="adjacent-input small">
         <label for="project-layout-toggle">
           <span class="label__title">
-            {{ formatMessage(toggleFeatures.rightAlignedProjectSidebarTitle) }}
+            {{ formatMessage(toggleFeatures.leftAlignedProjectSidebarTitle) }}
           </span>
           <span class="label__description">
-            {{ formatMessage(toggleFeatures.rightAlignedProjectSidebarDescription) }}
+            {{ formatMessage(toggleFeatures.leftAlignedProjectSidebarDescription) }}
           </span>
         </label>
         <input
@@ -368,21 +368,21 @@ const toggleFeatures = defineMessages({
     defaultMessage:
       'Hides the "Get Modrinth App" buttons from primary navigation. The Modrinth App page can still be found on the landing page or in the footer.',
   },
-  rightAlignedSearchSidebarTitle: {
-    id: "settings.display.sidebar.right-aligned-search-sidebar.title",
-    defaultMessage: "Right-aligned search sidebar",
+  leftAlignedSearchSidebarTitle: {
+    id: "settings.display.sidebar.Left-aligned-search-sidebar.title",
+    defaultMessage: "Left-aligned search sidebar",
   },
-  rightAlignedSearchSidebarDescription: {
-    id: "settings.display.sidebar.right-aligned-search-sidebar.description",
-    defaultMessage: "Aligns the search filters sidebar to the right of the search results.",
+  leftAlignedSearchSidebarDescription: {
+    id: "settings.display.sidebar.left-aligned-search-sidebar.description",
+    defaultMessage: "Aligns the search filters sidebar to the left of the search results.",
   },
-  rightAlignedProjectSidebarTitle: {
-    id: "settings.display.sidebar.right-aligned-project-sidebar.title",
-    defaultMessage: "Right-aligned project sidebar",
+  leftAlignedProjectSidebarTitle: {
+    id: "settings.display.sidebar.left-aligned-project-sidebar.title",
+    defaultMessage: "Left-aligned project sidebar",
   },
-  rightAlignedProjectSidebarDescription: {
-    id: "settings.display.sidebar.right-aligned-project-sidebar.description",
-    defaultMessage: "Aligns the project details sidebar to the right of the page's content.",
+  leftAlignedProjectSidebarDescription: {
+    id: "settings.display.sidebar.left-aligned-project-sidebar.description",
+    defaultMessage: "Aligns the project details sidebar to the left of the page's content.",
   },
 });