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>

apps/labrinth/assets/auth/style.css

@@ -1,63 +1,78 @@
 :root {
-    --color-bg: #16181c;
-    --color-fg: #b0bac5;
-    --color-section-bg: #26292f;
+  --color-bg: #16181c;
+  --color-fg: #b0bac5;
+  --color-section-bg: #26292f;
 
-    --content-width: 30%;
-    --content-max-width: 300px;
-    --content-padding: 1.5rem;
-    --edge-rounding: 1rem;
+  --content-width: 30%;
+  --content-max-width: 300px;
+  --content-padding: 1.5rem;
+  --edge-rounding: 1rem;
 }
 
-html, body {
-    height: 100%;
-    overflow: hidden;
+html,
+body {
+  height: 100%;
+  overflow: hidden;
 }
 
 body {
-    color: var(--color-fg);
-    background-color: var(--color-bg);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica Neue, Helvetica,
-    Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, 'Apple Color Emoji', 'Segoe UI Emoji',
-    Arial, sans-serif;
+  color: var(--color-fg);
+  background-color: var(--color-bg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Helvetica Neue,
+    Helvetica,
+    Oxygen,
+    Ubuntu,
+    Roboto,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    Arial,
+    sans-serif;
 }
 
 .content {
-    background-color: var(--color-section-bg);
-    width: var(--content-width);
-    max-width: var(--content-max-width);
-    border-radius: var(--edge-rounding);
-    padding: var(--content-padding);
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
+  background-color: var(--color-section-bg);
+  width: var(--content-width);
+  max-width: var(--content-max-width);
+  border-radius: var(--edge-rounding);
+  padding: var(--content-padding);
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
 }
 
 .content h2 {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .logo {
-    display: block;
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 2rem;
-    border-radius: 1.5rem;
+  display: block;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2rem;
+  border-radius: 1.5rem;
 }
 
 a {
-    color: #4f9cff;
-    text-decoration: underline;
+  color: #4f9cff;
+  text-decoration: underline;
 }
 
 a:visited {
-    color: #4f9cff
+  color: #4f9cff;
 }
 
 img {
-    image-rendering: pixelated;
+  image-rendering: pixelated;
 }

apps/labrinth/src/auth/templates/error.html

@@ -1,21 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <link rel="stylesheet" href="/auth/style.css"/>
-    <link rel="icon" type="image/png" href="/favicon.ico"/>
+  <head>
+    <link rel="stylesheet" href="/auth/style.css" />
+    <link rel="icon" type="image/png" href="/favicon.ico" />
     <title>Error - Modrinth</title>
-</head>
+  </head>
 
-<body>
-<div class="content">
-    <img src="/logo.svg" alt="Modrinth Logo" class="logo"/>
-    <h2>{{ code }}</h2>
-    <p>An error has occurred during the authentication process.</p>
-    <p>
-        Try closing this window and signing in again.
-        Join <a href="https://discord.modrinth.com">our Discord server</a> to get help if this error persists after three attempts.
-    </p>
-    <p><b>Debug information:</b> {{ message }}</p>
-</div>
-</body>
+  <body>
+    <div class="content">
+      <img src="/logo.svg" alt="Modrinth Logo" class="logo" />
+      <h2>{{ code }}</h2>
+      <p>An error has occurred during the authentication process.</p>
+      <p>
+        Try closing this window and signing in again. Join
+        <a href="https://discord.modrinth.com">our Discord server</a> to get help if this error
+        persists after three attempts.
+      </p>
+      <p><b>Debug information:</b> {{ message }}</p>
+    </div>
+  </body>
 </html>

apps/labrinth/src/auth/templates/success.html

@@ -1,16 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <link rel="stylesheet" href="/auth/style.css"/>
-    <link rel="icon" type="image/png" href="/favicon.ico"/>
+  <head>
+    <link rel="stylesheet" href="/auth/style.css" />
+    <link rel="icon" type="image/png" href="/favicon.ico" />
     <title>Login - Modrinth</title>
-</head>
+  </head>
 
-<body>
-<div class="content">
-    <img src="{{ icon }}" alt="{{ name }}" class="logo"/>
-    <h2>Login Successful</h2>
-    <p>Hey, {{ name }}! You can now safely close this tab.</p>
-</div>
-</body>
-</html>
+  <body>
+    <div class="content">
+      <img src="{{ icon }}" alt="{{ name }}" class="logo" />
+      <h2>Login Successful</h2>
+      <p>Hey, {{ name }}! You can now safely close this tab.</p>
+    </div>
+  </body>
+</html>

apps/labrinth/src/auth/validate.rs

@@ -146,6 +146,7 @@ where
         }
         _ => return Err(AuthenticationError::InvalidAuthMethod),
     };
+
     Ok(possible_user)
 }
 

apps/labrinth/src/models/v3/users.rs

@@ -191,8 +191,11 @@ impl Role {
 
 #[derive(Serialize, Deserialize)]
 pub struct UserFriend {
+    // The user who accepted the friend request
     pub id: UserId,
-    pub pending: bool,
+    /// THe user who sent the friend request
+    pub friend_id: UserId,
+    pub accepted: bool,
     pub created: DateTime<Utc>,
 }
 
@@ -202,7 +205,8 @@ impl UserFriend {
     ) -> Self {
         Self {
             id: data.friend_id.into(),
-            pending: data.accepted,
+            friend_id: data.user_id.into(),
+            accepted: data.accepted,
             created: data.created,
         }
     }

apps/labrinth/src/routes/internal/session.rs

@@ -61,7 +61,7 @@ pub async fn get_session_metadata(
         .headers()
         .get("user-agent")
         .and_then(|x| x.to_str().ok())
-        .ok_or_else(|| AuthenticationError::InvalidCredentials)?;
+        .unwrap_or("No user agent");
 
     let parser = Parser::new();
     let info = parser.parse(user_agent);