feat!: hub music player

app/[domain]/(blank)/community/featured-hubs/page.tsx

@@ -19,5 +19,9 @@ export default async function FeaturedHubs({ params }: Props) {
   const { data: subSpacesData } = await client.query({ query: GetSubSpacesDocument, variables: { id: space._id } });
   const subSpaces = subSpacesData?.getSubSpaces || [];
 
-  return <SubCommunity subSpaces={subSpaces as PublicSpace[]} />;
+  return (
+    <div className="page mx-auto px-4 xl:px-0 pt-6">
+      <SubCommunity subSpaces={subSpaces as PublicSpace[]} />
+    </div>
+  );
 }

app/[domain]/(blank)/community/music/page.tsx

@@ -0,0 +1,26 @@
+import { HubMusicPlayer } from '$lib/components/features/community/HubMusicPlayer';
+import { Space } from '$lib/graphql/generated/backend/graphql';
+import { getClient } from '$lib/graphql/request';
+import { isObjectId } from '$lib/utils/helpers';
+import { notFound } from 'next/navigation';
+
+export default async function Page({ params }: { params: Promise<{ uid: string }> }) {
+  const uid = (await params).uid;
+  const variables = isObjectId(uid) ? { id: uid, slug: uid } : { slug: uid };
+
+  const client = getClient();
+  const { data, error } = await client.query({
+    query: `query GetSpace($id: MongoID, $slug: String, $hostname: String) {
+      getSpace(_id: $id, slug: $slug, hostname: $hostname) {
+        _id
+        nft_enabled
+      }
+    }`,
+    variables,
+  });
+  const space = data?.getSpace as Space;
+
+  if (!space?._id || !space?.nft_enabled) return notFound();
+
+  return <HubMusicPlayer spaceId={space._id} />;
+}

app/[domain]/(blank)/community/page.tsx

@@ -46,5 +46,11 @@ export default async function Page({ params }: Props) {
 
   if (!space) return notFound();
 
-  return <Community initData={{ space }} />;
+  // const { subSpaces, spaceTags } = await prefetchData(space);
+
+  return (
+    <div className="page mx-auto px-4 xl:px-0 pt-6">
+      <Community initData={{ space }} />
+    </div>
+  );
 }

app/[domain]/(blank)/s/[uid]/featured-hubs/page.tsx

@@ -1,20 +1,24 @@
-import { getClient } from "$lib/graphql/request";
+import { getClient } from '$lib/graphql/request';
 import { isObjectId } from '$lib/utils/helpers';
 import { GetSubSpacesDocument, PublicSpace } from '$lib/graphql/generated/backend/graphql';
-import SubCommunity from "$lib/components/features/sub-community";
-import { getSpace } from "$lib/utils/getSpace";
+import SubCommunity from '$lib/components/features/sub-community';
+import { getSpace } from '$lib/utils/getSpace';
 
-export default async function FeaturedHubs({ params }: { params: Promise<{ uid: string; }>; }) {
+export default async function FeaturedHubs({ params }: { params: Promise<{ uid: string }> }) {
   const uid = (await params).uid;
   const variables = isObjectId(uid) ? { id: uid, slug: uid } : { slug: uid };
 
-
   const space = await getSpace(variables);
 
-  const { data: subSpacesData } = await getClient().query({ query: GetSubSpacesDocument, variables: { id: space._id } });
+  const { data: subSpacesData } = await getClient().query({
+    query: GetSubSpacesDocument,
+    variables: { id: space._id },
+  });
   const subSpaces = subSpacesData?.getSubSpaces || [];
 
   return (
-    <SubCommunity subSpaces={subSpaces as PublicSpace[]} />
+    <div className="page mx-auto px-4 xl:px-0 pt-6">
+      <SubCommunity subSpaces={subSpaces as PublicSpace[]} />
+    </div>
   );
-};
+}

app/[domain]/(blank)/s/[uid]/music/page.tsx

@@ -0,0 +1,26 @@
+import { HubMusicPlayer } from '$lib/components/features/community/HubMusicPlayer';
+import { Space } from '$lib/graphql/generated/backend/graphql';
+import { getClient } from '$lib/graphql/request';
+import { isObjectId } from '$lib/utils/helpers';
+import { notFound } from 'next/navigation';
+
+export default async function Page({ params }: { params: Promise<{ uid: string }> }) {
+  const uid = (await params).uid;
+  const variables = isObjectId(uid) ? { id: uid, slug: uid } : { slug: uid };
+
+  const client = getClient();
+  const { data, error } = await client.query({
+    query: `query GetSpace($id: MongoID, $slug: String, $hostname: String) {
+      getSpace(_id: $id, slug: $slug, hostname: $hostname) {
+        _id
+				nft_enabled
+      }
+    }`,
+    variables,
+  });
+  const space = data?.getSpace as Space;
+
+  if (!space?._id || !space?.nft_enabled) return notFound();
+
+  return <HubMusicPlayer spaceId={space._id} />;
+}

app/[domain]/(blank)/s/[uid]/page.tsx

@@ -22,7 +22,11 @@ export default async function Page({ params }: { params: Promise<{ uid: string }
 
   // const { subSpaces, spaceTags } = await prefetchData(space);
 
-  return <Community initData={{ space }} />;
+  return (
+    <div className="page mx-auto px-4 xl:px-0 pt-6">
+      <Community initData={{ space }} />
+    </div>
+  );
 }
 
 // const prefetchData = async (space: Space) => {

app/[domain]/(blank)/s/[uid]/timeline/[slug]/page.tsx

@@ -12,5 +12,9 @@ export default async function Page({ params }: { params: Promise<{ uid: string;
 
   if (!space?.lens_feed_id || !postSlug) return notFound();
 
-  return <FeedPostDetail postSlug={postSlug} />;
+  return (
+    <div className="page mx-auto px-4 xl:px-0 pt-6">
+      <FeedPostDetail postSlug={postSlug} />
+    </div>
+  );
 }

app/[domain]/(blank)/s/[uid]/timeline/page.tsx

@@ -13,9 +13,11 @@ export default async function Page({ params }: { params: Promise<{ uid: string }
   if (!space?.lens_feed_id) return notFound();
 
   return (
-    <div className="flex flex-col-reverse md:grid md:grid-cols-[1fr_336px] gap-5 md:gap-8 items-start pb-10">
-      <TimelineContent feedAddress={space.lens_feed_id} />
-      <LensAccountCard />
+    <div className="page mx-auto px-4 xl:px-0 pt-6">
+      <div className="flex flex-col-reverse md:grid md:grid-cols-[1fr_336px] gap-5 md:gap-8 items-start pb-10">
+        <TimelineContent feedAddress={space.lens_feed_id} />
+        <LensAccountCard />
+      </div>
     </div>
   );
 }

app/[domain]/(blank)/s/lemonheads/events/page.tsx

@@ -25,17 +25,19 @@ export default async function Page(_props: { params: Promise<{ uid: string }> })
   const { subSpaces, spaceTags } = await prefetchData(space);
 
   return (
-    <div className="flex flex-col gap-6 pb-28 md:pb-20">
-      <div>
-        <div className="flex flex-col gap-2">
-          <TitleSection className="md:text-3xl">Events</TitleSection>
-          <SubTitleSection>
-            Discover gatherings, meetups, and more from this community. Jump into what excites you.
-          </SubTitleSection>
+    <div className="page mx-auto px-4 xl:px-0 pt-6 w-full max-w-[1080px]">
+      <div className="flex flex-col gap-6 pb-28 md:pb-20">
+        <div>
+          <div className="flex flex-col gap-2">
+            <TitleSection className="md:text-3xl">Events</TitleSection>
+            <SubTitleSection>
+              Discover gatherings, meetups, and more from this community. Jump into what excites you.
+            </SubTitleSection>
+          </div>
         </div>
-      </div>
 
-      <Content space={space} subSpaces={subSpaces} spaceTags={spaceTags} />
+        <Content space={space} subSpaces={subSpaces} spaceTags={spaceTags} />
+      </div>
     </div>
   );
 }

app/[domain]/(blank)/s/lemonheads/featured-hubs/page.tsx

@@ -18,15 +18,17 @@ async function Page() {
   const subSpaces = (subSpacesData?.getSubSpaces || []) as PublicSpace[];
 
   return (
-    <div className="flex flex-col gap-8 pb-20">
-      <div className="flex flex-col gap-2">
-        <TitleSection className="md:text-3xl">Featured Hubs</TitleSection>
-        <SubTitleSection>
-          A closer look at all the hubs linked to this community. Discover new events, people, and ideas.
-        </SubTitleSection>
-      </div>
+    <div className="page mx-auto px-4 xl:px-0 pt-6 w-full max-w-[1080px]">
+      <div className="flex flex-col gap-8 pb-20">
+        <div className="flex flex-col gap-2">
+          <TitleSection className="md:text-3xl">Featured Hubs</TitleSection>
+          <SubTitleSection>
+            A closer look at all the hubs linked to this community. Discover new events, people, and ideas.
+          </SubTitleSection>
+        </div>
 
-      <Content subSpaces={subSpaces} />
+        <Content subSpaces={subSpaces} />
+      </div>
     </div>
   );
 }

app/[domain]/(blank)/s/lemonheads/layout.tsx

@@ -60,9 +60,7 @@ async function Layout({ children }: React.PropsWithChildren) {
         <Sidebar space={space} />
         <div>
           <Header hideLogo className="h-[64px]" />
-          <div className="lg:pl-[97px]">
-            <div className="max-w-[1256px] mx-auto px-4 xl:px-0 pt-6 w-ful">{children}</div>
-          </div>
+          <div className="lg:pl-[97px]">{children}</div>
         </div>
         <Footer space={space} />
         {/* </LoadMoreWrapper> */}

app/[domain]/(blank)/s/lemonheads/leaderboards/page.tsx

@@ -4,20 +4,22 @@ import { SubTitleSection, TitleSection } from '../shared';
 
 function Page() {
   return (
-    <div className="flex flex-col gap-2 pb-20">
-      <div className="flex flex-col gap-2">
-        <TitleSection className="md:text-3xl">Leaderboard</TitleSection>
-        <SubTitleSection>
-          Celebrate the top inviters. See who’s growing the community and climbing the ranks.
-        </SubTitleSection>
-      </div>
+    <div className="page mx-auto px-4 xl:px-0 pt-6 w-full max-w-[1080px]">
+      <div className="flex flex-col gap-2 pb-20">
+        <div className="flex flex-col gap-2">
+          <TitleSection className="md:text-3xl">Leaderboard</TitleSection>
+          <SubTitleSection>
+            Celebrate the top inviters. See who’s growing the community and climbing the ranks.
+          </SubTitleSection>
+        </div>
 
-      <div className="pt-6 md:pt-7 pb-1">
-        <LemonHeadsProgressBar />
-      </div>
+        <div className="pt-6 md:pt-7 pb-1">
+          <LemonHeadsProgressBar />
+        </div>
 
-      <div className="py-3 md:py-6">
-        <LemonHeadsLeaderboard />
+        <div className="py-3 md:py-6">
+          <LemonHeadsLeaderboard />
+        </div>
       </div>
     </div>
   );

app/[domain]/(blank)/s/lemonheads/music/page.tsx

@@ -0,0 +1,27 @@
+import { HubMusicPlayer } from '$lib/components/features/community/HubMusicPlayer';
+import { Space } from '$lib/graphql/generated/backend/graphql';
+import { getClient } from '$lib/graphql/request';
+import { notFound } from 'next/navigation';
+
+export default async function Page() {
+  // const uid = (await params).uid;
+  // const variables = isObjectId(uid) ? { id: uid, slug: uid } : { slug: uid };
+  const variables = { slug: 'lemonheads' };
+
+  const client = getClient();
+  const { data, error } = await client.query({
+    query: `query GetSpaceNft($id: MongoID, $slug: String, $hostname: String) {
+      getSpace(_id: $id, slug: $slug, hostname: $hostname) {
+        _id
+        nft_enabled
+      }
+    }`,
+    variables,
+  });
+
+  const space = data?.getSpace as Space;
+
+  if (!space?._id || !space?.nft_enabled) return notFound();
+
+  return <HubMusicPlayer spaceId={space._id} />;
+}

app/[domain]/(blank)/s/lemonheads/page.tsx

@@ -13,16 +13,18 @@ async function Page() {
   if (!space) return notFound();
 
   return (
-    <div className="flex flex-col gap-6 pb-20">
-      <div>
-        <HeroSection space={space} />
-        <CommunityInfoSection space={space} />
+    <div className="page mx-auto px-4 xl:px-0 pt-6 w-full max-w-[1080px]">
+      <div className="flex flex-col gap-6 pb-20">
+        <div>
+          <HeroSection space={space} />
+          <CommunityInfoSection space={space} />
+        </div>
+        <JourneySection />
+        <LemonheadsGallery />
+        <FeatureHubSection spaceId={space._id} />
+        <Divider className="h-2" />
+        <NewFeedSection space={space} />
       </div>
-      <JourneySection />
-      <LemonheadsGallery />
-      <FeatureHubSection spaceId={space._id} />
-      <Divider className="h-2" />
-      <NewFeedSection space={space} />
     </div>
   );
 }

app/[domain]/(blank)/s/lemonheads/posts/[slug]/page.tsx

@@ -7,8 +7,10 @@ export default async function Page({ params }: { params: Promise<{ slug: string
   if (!slug) return notFound();
 
   return (
-    <div className="md:mt-6">
-      <FeedPostDetail postSlug={slug} />
+    <div className="page mx-auto px-4 xl:px-0 pt-6 w-full max-w-[1080px]">
+      <div className="md:mt-6">
+        <FeedPostDetail postSlug={slug} />
+      </div>
     </div>
   );
 }

app/[domain]/(blank)/s/lemonheads/profile/layout.tsx

@@ -14,16 +14,18 @@ async function Layout({ children }: React.PropsWithChildren) {
   if (!space) return notFound();
 
   return (
-    <div className="flex flex-col-reverse md:flex-row gap-4 md:gap-12 pb-28 md:pb-20 w-full">
-      <div className="flex flex-col gap-5 flex-1">
-        <HeroSectionProfile space={space} />
-        <ProfileInfoSection />
+    <div className="page mx-auto px-4 xl:px-0 pt-6 w-full max-w-[1080px]">
+      <div className="flex flex-col-reverse md:flex-row gap-4 md:gap-12 pb-28 md:pb-20 w-full">
+        <div className="flex flex-col gap-5 flex-1">
+          <HeroSectionProfile space={space} />
+          <ProfileInfoSection />
 
-        <Tabs />
-        {children}
-      </div>
+          <Tabs />
+          {children}
+        </div>
 
-      <LemonHeadsHubRightCol spaceId={space._id} options={{ nft: true, upcomingEvents: true, leaderboard: false }} />
+        <LemonHeadsHubRightCol spaceId={space._id} options={{ nft: true, upcomingEvents: true, leaderboard: false }} />
+      </div>
     </div>
   );
 }

app/[domain]/(blank)/s/lemonheads/treasury/page.tsx

@@ -1,11 +1,10 @@
-import { Spacer } from '$lib/components/core';
 import { CouncilMembers } from '$lib/components/features/lemonheads/CouncilMembers';
 import { LemonHeadsTreasury } from '$lib/components/features/lemonheads/LemonHeadsTreasury';
 import { JourneySection, SubTitleSection, TitleSection } from '../shared';
 
 function Page() {
   return (
-    <div>
+    <div className="page mx-auto px-4 xl:px-0 pt-6 w-full max-w-[1080px]">
       <div className="flex flex-col gap-2">
         <TitleSection className="text-3xl">Treasury</TitleSection>
         <SubTitleSection>Shared vault for the community. Create & vote on proposals to access funds.</SubTitleSection>

app/globals.css

@@ -10,6 +10,7 @@
 @import './styles/components/input.css';
 @import './styles/components/tooltips.css';
 @import './styles/components/tiptap.css';
+@import './styles/components/range.css';
 
 @import './styles/presets/minimal.css';
 @import './styles/presets/shader.css';

app/styles/components/range.css

@@ -0,0 +1,29 @@
+@layer utilities {
+  .range {
+    -webkit-appearance: none;
+    --range-thumb: var(--color-primary);
+    width: 100%;
+    background: var(--color-divider);
+    height: 4px;
+    border-radius: 9999;
+    cursor: pointer;
+    outline: none;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      background: var(--range-thumb);
+      border-radius: 9999;
+      width: 16px;
+      height: 16px;
+      transition: 0.2s ease-in-out;
+    }
+
+    &::-moz-range-thumb {
+      background: var(--range-thumb);
+      border-radius: 9999;
+      width: 16px;
+      height: 16px;
+      transition: 0.2s ease-in-out;
+    }
+  }
+}