Merge pull request #21 from inkonchain/feat/apps-layout-again

feat: make grid scrollable to fit in one screen
inkonchain · Feb 5, 2025 · 6dec51e · 6dec51e
2 parents 9ee6b3e + 2bcdd93
commit 6dec51e
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 20 deletions.
diff --git a/src/app/[locale]/(home)/layout.tsx b/src/app/[locale]/(home)/layout.tsx
@@ -27,7 +27,7 @@ export default async function HomeLayout({
   return (
     <NextIntlClientProvider locale={locale} messages={messages}>
       <HomeHeader />
-      <div className="flex-1 relative pt-24 sm:pt-0 sm:pb-12 pb-48">
+      <div className="flex-1 relative pt-24 sm:pt-0 sm:pb-12 pb-48 flex flex-col gap-4">
         <div>{children}</div>
         <div>
           <Footer />

diff --git a/src/app/[locale]/(info)/layout.tsx b/src/app/[locale]/(info)/layout.tsx
@@ -19,7 +19,7 @@ export default async function InfoLayout({
         </Link>
       </div>
 
-      <div className="flex-1 relative pb-24 pt-32 container mx-auto">
+      <div className="flex-1 relative pb-24 pt-32 container mx-auto flex flex-col gap-4">
         <div className="flex flex-col items-center justify-center">
           <div className="bg-whiteMagic/75 dark:bg-blackMagic/75 p-2 rounded-lg mb-8 mx-2 flex items-center justify-center max-w-4xl w-full">
             <div className="max-w-2xl p-4">{children}</div>

diff --git a/src/app/[locale]/community/layout.tsx b/src/app/[locale]/community/layout.tsx
@@ -18,7 +18,7 @@ export default async function InfoLayout({
       <HomeHeader />
       <HomeShortcuts />
 
-      <div className="flex-1 relative pb-24 pt-32 container mx-auto">
+      <div className="flex-1 relative pb-24 pt-32 container mx-auto flex flex-col gap-4">
         <div className="flex flex-col items-center justify-center">
           {children}
         </div>

diff --git a/src/app/[locale]/new/dashboard/_components/AppMainnetToggle.tsx b/src/app/[locale]/new/dashboard/_components/AppMainnetToggle.tsx
@@ -29,7 +29,7 @@ export function AppMainnetToggle({ value, onChange }: AppMainnetToggleProps) {
     <Listbox value={selectedItem} onChange={(option) => onChange(option.value)}>
       <ListboxButton
         variant="muted"
-        className="backdrop-blur-xl ink:text-body-3-bold w-[160px] whitespace-nowrap"
+        className="backdrop-blur-xl ink:text-body-3-bold w-[160px] whitespace-nowrap h-10"
       >
         <span
           className={classNames(

diff --git a/src/app/[locale]/new/dashboard/_components/AppsCategoryFilter.tsx b/src/app/[locale]/new/dashboard/_components/AppsCategoryFilter.tsx
@@ -47,7 +47,7 @@ export const AppsCategoryFilter = ({
     [selected, query]
   );
   return (
-    <ScrollWithGradient className="flex overflow-x-scroll max-w-[300px] md:max-w-[600px]">
+    <ScrollWithGradient className="flex overflow-x-scroll flex-1 w-full sm:w-auto">
       <SegmentedControl
         variant="primary"
         variableTabWidth

diff --git a/src/app/[locale]/new/dashboard/_components/AppsContent.tsx b/src/app/[locale]/new/dashboard/_components/AppsContent.tsx
@@ -5,8 +5,11 @@ import { Button } from "@inkonchain/ink-kit";
 import { useSearchParams } from "next/navigation";
 
 import { InfiniteScrollContainer } from "@/components/InfiniteScrollContainer";
+import { SearchInput } from "@/components/SearchBar/SearchInput";
+import { useOnWindowSize } from "@/hooks/useOnWindowSize";
 import { useRouter } from "@/routing";
 
+import { AppMainnetToggle } from "./AppMainnetToggle";
 import { AppsCategoryFilter } from "./AppsCategoryFilter";
 import { AppsGrid } from "./AppsGrid";
 import { AppsTagsFilter } from "./AppsTagsFilter";
@@ -147,10 +150,23 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
     [filteredApps, page]
   );
 
+  const isUnderDesktopWindowSize = useOnWindowSize({ size: "xl" });
+
   return (
     <>
-      <div className="flex flex-col gap-8 w-full max-w-[2000px]">
-        <div className="flex-1 mx-4 min-w-[240px] flex items-center justify-between gap-2">
+      <div className="flex flex-col gap-8 max-w-[2000px]">
+        {/* Floating section on desktop */}
+        <div className="lg:fixed lg:flex left-[20%] right-[20%] top-8 justify-center flex-wrap gap-4 mx-4 z-10">
+          <SearchInput
+            className="max-w-md"
+            placeholder="Search"
+            disabled={isUnderDesktopWindowSize}
+            value={search}
+            onValueChange={setSearch}
+          />
+        </div>
+
+        <div className="mx-4 flex items-center justify-between gap-4 flex-col sm:flex-row flex-1">
           <AppsCategoryFilter
             selected={filters.categories?.[0]}
             setSelected={(value) => {
@@ -159,7 +175,7 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
               });
             }}
           />
-          <div>
+          <div className="flex gap-2">
             <AppsTagsFilter
               selected={filters.tags}
               setSelected={(value) => {
@@ -168,18 +184,26 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
                 });
               }}
             />
+            <AppMainnetToggle
+              value={filters.network || "Mainnet"}
+              onChange={(value) => {
+                updateFilters({ network: value });
+              }}
+            />
           </div>
         </div>
 
         {/* Main flexbox */}
         <div className="flex gap-8 flex-col-reverse 2xl:flex-row">
-          <div className="flex flex-col gap-4 w-full">
+          <div className="flex flex-col gap-4">
             <InfiniteScrollContainer
               className="flex px-4 pr-2 lg:pr-4 xl:pr-0"
               onLoadMore={() => setPage(page + 1)}
               hasMore={page < Math.floor(filteredApps.length / 10)}
             >
+              {/** Calculations are manual here so that the grid takes up a good chunk of space, but doesn't make the window scroll. */}
               <AppsGrid
+                className="sm:max-h-[calc(100vh-16rem-20rem)] lg:max-h-[calc(100vh-10rem-18rem)] 2xl:max-h-[calc(100vh-10rem-14rem)] overflow-y-auto"
                 apps={appsToDisplay}
                 featuredApps={inkFeaturedApps}
                 noAppsFound={

diff --git a/src/app/[locale]/new/dashboard/_components/AppsGrid.tsx b/src/app/[locale]/new/dashboard/_components/AppsGrid.tsx
@@ -3,19 +3,21 @@ import Image from "next/image";
 import { useTranslations } from "next-intl";
 
 import { NoisyContainer } from "@/components/Noisy";
+import { classNames } from "@/util/classes";
 
 import { AppLinks } from "./AppLinks";
 import { InkApp, InkAppNetwork } from "./InkApp";
 import { TableRowPill } from "./TableRowPill";
 
 export const AppsGrid: React.FC<{
+  className?: string;
   apps: InkApp[];
   featuredApps: InkApp[];
   noAppsFound: React.ReactNode;
   network: InkAppNetwork;
-}> = ({ apps, featuredApps, noAppsFound, network }) => {
+}> = ({ className, apps, featuredApps, noAppsFound, network }) => {
   return (
-    <div>
+    <div className={classNames("w-full", className)}>
       {apps.length === 0 ? (
         <div className="min-h-[300px] flex flex-col gap-4 justify-center items-center">
           {noAppsFound}
@@ -70,15 +72,15 @@ function AppCard({
           {app.description}
         </div>
         <div className="relative">
-          <div className="w-full opacity-0 group-hover:opacity-100 transition-opacity">
-            <AppLinks links={app.links} network={network} />
-          </div>
-
-          <div className="flex justify-end items-center gap-1 flex-wrap max-w-[200px] group-hover:opacity-0 group-hover:pointer-events-none transition-opacity absolute right-0 bottom-0">
+          <div className="flex justify-end items-center gap-1 flex-wrap group-hover:opacity-0 group-hover:pointer-events-none transition-opacity w-full">
             {app.tags.map((tag) => (
               <TableRowPill key={tag}>{tag}</TableRowPill>
             ))}
           </div>
+
+          <div className="w-full opacity-0 group-hover:opacity-100 transition-opacity absolute right-0 bottom-0">
+            <AppLinks links={app.links} network={network} />
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/app/[locale]/new/dashboard/_components/AppsTagsFilter.tsx b/src/app/[locale]/new/dashboard/_components/AppsTagsFilter.tsx
@@ -51,7 +51,7 @@ export const AppsTagsFilter: React.FC<AppsTagsFilterProps> = ({
   return (
     <Listbox value={selected || []} onChange={setSelected} multiple>
       <ListboxButton
-        className="whitespace-nowrap backdrop-blur-xl ink:text-body-3-bold w-[120px]"
+        className="whitespace-nowrap backdrop-blur-xl ink:text-body-3-bold w-[120px] h-10"
         variant="muted"
       >
         <div className="flex items-center gap-2">

diff --git a/src/app/[locale]/new/layout.tsx b/src/app/[locale]/new/layout.tsx
@@ -19,7 +19,7 @@ export default async function InfoLayout({
   return (
     <OnlyWithFeatureFlag flag="newNav">
       <RoutedLayout>
-        <div className="flex-1 relative pt-24 sm:pt-0 sm:pb-12 pb-48">
+        <div className="relative pt-24 sm:pt-0 overflow-hidden flex flex-col gap-8 hd:flex-1 hd:items-center">
           <div className="flex flex-col">{children}</div>
           <div>
             <Footer />

diff --git a/src/app/[locale]/verify/layout.tsx b/src/app/[locale]/verify/layout.tsx
@@ -30,7 +30,7 @@ export default async function InfoLayout({
         />
       </div>
 
-      <div className="flex-1 relative pb-24 pt-32 container mx-auto">
+      <div className="flex-1 relative pb-24 pt-32 container mx-auto flex flex-col gap-4">
         <div className="flex flex-col">{children}</div>
         <div>
           <Footer />

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -7,7 +7,7 @@ import { classNames } from "@/util/classes";
 
 export const Footer = () => {
   return (
-    <footer className={classNames(containerClasses(), "sm:pt-15")}>
+    <footer className={classNames(containerClasses())}>
       <div className="px-4 lg:px-0">
         <NoisyContainer
           className={classNames(

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -148,6 +148,7 @@ radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255,
           raw: "(max-height: 700px) and (min-width: 640px)",
         },
         hd: "1920px",
+        "2xl": "1600px",
       },
       rotate: {
         // For the arrow icon to point to the top-right.