Merge branch 'main' into feat/docker

.gitignore

@@ -5,7 +5,13 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 # testing
 /coverage

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

next.config.js

@@ -19,6 +19,7 @@ module.exports = withBundleAnalyzer({
     loader: 'custom',
     loaderFile: './src/utils/imageLoader.ts',
   },
+  optimizeFonts: false,
   async redirects() {
     return [
       {

package.json

@@ -44,7 +44,7 @@
     "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-icons": "^4.4.0",
+    "react-icons": "^5.0.1",
     "react-infinite-scroller": "^1.2.6",
     "react-use": "^17.4.0",
     "remark-html": "^15.0.1",
@@ -83,5 +83,6 @@
     "prettier": "^3.2.5",
     "tailwindcss": "^3.1.5",
     "typescript": "4.9"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/components/Navbar.tsx

@@ -4,15 +4,46 @@ import { useAuth } from '@/hooks';
 import { MdAccountCircle, MdExitToApp, MdManageAccounts } from 'react-icons/md';
 import { Transition } from '@headlessui/react';
 import { event } from 'nextjs-google-analytics';
+import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
 import Cookies from 'js-cookie';
+import type { UserPrivate } from '@statsfm/statsfm.js';
 import { Logo } from './Logo';
 import { Avatar } from './Avatar/Avatar';
 import { Menu } from './Menu';
 import { Container } from './Container';
 import { Button } from './Button';
 import { CrownIcon } from './Icons';
 
+const navigation = [
+  {
+    link: ({
+      user,
+      router,
+    }: {
+      user: UserPrivate | null;
+      router: NextRouter;
+    }) =>
+      user && !user.isPlus && !router.pathname.includes('/plus') ? (
+        <Link
+          className="flex flex-row gap-1 font-medium text-plus"
+          href="/plus"
+          onClick={() => event('NAV_plus')}
+        >
+          <CrownIcon className="m-[2px] mt-0 h-[20px] w-[20px] lg:mt-[2px]" />
+          Unlock Plus
+        </Link>
+      ) : (
+        <Link href="/plus" className="font-medium">
+          Plus
+        </Link>
+      ),
+    name: 'Plus',
+  },
+  { name: 'Support', href: 'https://support.stats.fm' },
+  { name: 'Feedback', href: 'https://feedback.stats.fm' },
+];
+
 export const NavBar = () => {
   const { user, logout, login } = useAuth();
   const router = useRouter();
@@ -29,25 +60,28 @@ export const NavBar = () => {
 
   return (
     <nav className="absolute z-40 flex w-full">
-      <div className="fixed bottom-0 left-0 z-50 w-screen border-t-[1px] border-neutral-700 bg-background py-1 text-center">
-        <span className="text-sm font-semibold text-primary">
-          This site is still a work in progress.
-        </span>
-        <span className="pl-1 text-sm font-semibold text-neutral-100">
-          We are working on adding features that are in the app to the website.
-          If you want to enjoy the full experience, please use our app.
-        </span>
-      </div>
       <Container className="flex w-full items-center bg-inherit py-3">
         <Link
           href="/"
           className="mr-auto flex gap-3"
           onClick={() => event('NAV_home')}
         >
           <Logo className="h-[1.7rem] w-[1.7rem] cursor-pointer" />
-          <h3 className="mt-[-3px]">stats.fm</h3>
+          <h3 className="mt-[-3px]">
+            stats.fm{router.pathname === '/business' && ' for business'}
+          </h3>
         </Link>
-
+        <div className="hidden lg:flex lg:gap-x-12">
+          {navigation.map((item) =>
+            item.link ? (
+              <div key={item.name}>{item.link({ user, router })}</div>
+            ) : (
+              <Link key={item.name} href={item.href} className="font-medium">
+                {item.name}
+              </Link>
+            ),
+          )}
+        </div>
         <form
           className="relative ml-auto hidden pt-2 md:mr-10 md:block"
           action="/search"
@@ -78,10 +112,10 @@ export const NavBar = () => {
 
         {user && !user.isPlus && router.pathname !== '/plus' && (
           <Link
-            className="mr-0 flex flex-row gap-1 px-4 py-2 font-bold text-plus lg:mr-2 lg:font-medium"
+            className="mr-0 flex flex-row gap-1 px-4 py-2 font-bold text-plus lg:hidden"
             href="/plus"
           >
-            <CrownIcon className="m-[2px] mt-0 h-[20px] w-[20px] lg:mt-[2px]" />
+            <CrownIcon className="m-[2px] mt-0 h-[20px] w-[20px]" />
             Unlock Plus
           </Link>
         )}
@@ -147,21 +181,6 @@ export const NavBar = () => {
                         <MdManageAccounts className="text-white" /> Settings
                       </Link>
                     </Menu.Item>
-
-                    {!user.isPlus && router.pathname !== '/plus' && (
-                      <Menu.Item
-                        className="!p-0"
-                        onClick={() => event('NAV_plus')}
-                      >
-                        <Link
-                          className="flex h-full w-full flex-row gap-2 px-4 py-2 text-plus"
-                          href="/plus"
-                        >
-                          <CrownIcon className="m-[2px] h-[20px] w-[20px]" />{' '}
-                          Unlock Plus
-                        </Link>
-                      </Menu.Item>
-                    )}
                     <hr className="my-1 mx-3 border-t-2 border-neutral-400/10" />
                     <Menu.Item
                       icon={<MdExitToApp />}

src/pages/index.tsx

@@ -131,17 +131,15 @@ const Home: NextPage = () => {
           <div className="w-full lg:w-6/12">
             <h1 className="leading-10">Easy, extensive and secure</h1>
             <p>
-              With the click of a button you&apos;ll be logged with your Spotify
-              account and you&apos;ll instantly gain access to a valhalla of
-              cool stats and insights
+              With the click of a button, you&apos;ll be logged into your
+              account, instantly gaining access to a valhalla of cool stats and
+              insights
             </p>
             <div className="mt-5 mb-8 flex flex-col gap-3">
               <FeatureItem Icon={MdLock} title="Safe & secure">
-                Privacy is key, and I&apos;ve built the platform keeping
-                security and privacy at the highest priority. As far as
-                possible, all data is saved anonymously, and is stored and
-                transferred fully encrypted. Unless you import your streaming
-                history no data is saved on the servers.
+                We prioritize privacy and security. We only store the data we
+                need to store to provide you with a magical experience, and all
+                data is stored securely.
               </FeatureItem>
               <FeatureItem
                 Icon={MdShowChart}
@@ -155,23 +153,21 @@ const Home: NextPage = () => {
                 Icon={MdFormatListBulleted}
                 title="Top tracks, artists and albums at a glance*"
               >
-                Of course most people are here to check their top lists, which
-                becomes an amazing experience on this platform. For example:
-                order the lists by times played, minutes streamed or by advanced
-                machine learning!
+                Many users love checking their top lists here—it&apos;s a
+                magical experience. You can organize lists by playtime, stream
+                count, or use provided ordering methods from connected services.
               </FeatureItem>
               <FeatureItem
                 Icon={MdHistory}
                 title="Import your lifetime history*"
               >
-                Follow the unique import process to import your lifetime
-                streaming history and unlock the full potential of the platform
-                by getting access to lots of cool features. It&apos;s really
-                cool, I promise : )
+                Take advantage of our unique import process to bring in your
+                complete streaming history and unleash a wave of fantastic
+                features. Believe us, it&apos;s really cool!
               </FeatureItem>
               <p>
                 *{' '}
-                <Link legacyBehavior href="import">
+                <Link legacyBehavior href="/settings/import">
                   <a
                     className="text-white hover:opacity-80"
                     onClick={() => {