From d6560b6fd5e0f683fa4540a74f33d79b5e26530a Mon Sep 17 00:00:00 2001
From: Anton Sabotovich <sab94a@yandex.ru>
Date: Fri, 20 Sep 2024 01:22:51 +0300
Subject: [PATCH] feat: sticky layout

---
 package-lock.json                              |  8 ++++----
 package.json                                   |  2 +-
 src/components/DashboardPage/DashboardPage.tsx |  3 ++-
 src/components/Kanban/Kanban.module.css        | 10 ++++++++--
 src/components/Page/Page.module.css            |  9 +++++++--
 src/components/Page/Page.tsx                   | 18 +++++++++++++++---
 .../ProjectListItemCollapsable.module.css      |  8 ++++++++
 .../ProjectListItemCollapsable.tsx             |  9 ++++++++-
 .../ProjectListItemConnected.tsx               |  1 +
 src/components/ProjectPage/ProjectPage.tsx     |  3 ++-
 10 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a1fb15857..6affe2bc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@sentry/nextjs": "7.99.0",
         "@tanstack/react-query": "4.29.5",
         "@tanstack/react-query-devtools": "4.29.6",
-        "@taskany/bricks": "5.48.1",
+        "@taskany/bricks": "5.50.0",
         "@taskany/colors": "1.13.0",
         "@taskany/icons": "2.0.7",
         "@tippyjs/react": "4.2.6",
@@ -8605,9 +8605,9 @@
       }
     },
     "node_modules/@taskany/bricks": {
-      "version": "5.48.1",
-      "resolved": "https://registry.npmjs.org/@taskany/bricks/-/bricks-5.48.1.tgz",
-      "integrity": "sha512-coccGy1fTxHpnJTrSlk1ar4sYUpABZWbREF5KFlJ5NBPo+Tiw93iR9qChQugfMXFtJyZ7x4/EsB/o+dv11QbGw==",
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@taskany/bricks/-/bricks-5.50.0.tgz",
+      "integrity": "sha512-vsk7HPtjafMPmpWwsZiyyhiVi9QlkodtYJBKWdpakZupEoa4au2tneBJyQHCO+u+176RmwWiQ1Ihm+Q1I18m/w==",
       "dependencies": {
         "@monaco-editor/react": "4.6.0",
         "@taskany/colors": "1.13.0",
diff --git a/package.json b/package.json
index df2c3446f..03f387b17 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "@sentry/nextjs": "7.99.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.6",
-    "@taskany/bricks": "5.48.1",
+    "@taskany/bricks": "5.50.0",
     "@taskany/colors": "1.13.0",
     "@taskany/icons": "2.0.7",
     "@tippyjs/react": "4.2.6",
diff --git a/src/components/DashboardPage/DashboardPage.tsx b/src/components/DashboardPage/DashboardPage.tsx
index 01c8b30e9..3e2663186 100644
--- a/src/components/DashboardPage/DashboardPage.tsx
+++ b/src/components/DashboardPage/DashboardPage.tsx
@@ -23,7 +23,7 @@ import { tr } from './DashboardPage.i18n';
 export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPageProps) => {
     const { preset } = useFiltersPreset({ defaultPresetFallback });
 
-    const { currentPreset, queryState, projectsSort } = useUrlFilterParams({
+    const { currentPreset, queryState, projectsSort, view } = useUrlFilterParams({
         preset,
     });
 
@@ -75,6 +75,7 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
             user={user}
             ssrTime={ssrTime}
             title={tr('title')}
+            scrollerShadow={view === 'kanban' ? 70 : 0}
             header={
                 <FiltersPanel
                     title={getPageTitle({
diff --git a/src/components/Kanban/Kanban.module.css b/src/components/Kanban/Kanban.module.css
index 5ac032a8a..4805d2ef8 100644
--- a/src/components/Kanban/Kanban.module.css
+++ b/src/components/Kanban/Kanban.module.css
@@ -1,5 +1,11 @@
 .KanbanState{
-    margin-bottom: var(--gap-m);
+    padding: var(--gap-m) 0;
+    position: sticky;
+    width: 100%;
+    top: calc(var(--gap-l) + var(--gap-s));
+    background: var(--background);
+    background: linear-gradient(var(--background) 70%, rgba(0, 0, 0, 0) 100%);
+    z-index: 2;
 }
 
 .KanbanLink {
@@ -12,4 +18,4 @@
 
 .KanbanLink:not(:last-child) {
     margin-bottom: var(--gap-sm);
-}
\ No newline at end of file
+}
diff --git a/src/components/Page/Page.module.css b/src/components/Page/Page.module.css
index cf9b24b93..452263d86 100644
--- a/src/components/Page/Page.module.css
+++ b/src/components/Page/Page.module.css
@@ -19,6 +19,11 @@
 .PageContent {
     flex: 1;
     overflow: auto;
-    margin: var(--gap-xs) var(--gap-sm) 0;
-    padding: var(--gap-m) var(--gap-s);
+}
+
+.PageScroller {
+    margin: 0 var(--gap-sm);
+    padding: 0 var(--gap-s);
+    padding-top: calc(var(--gap-m) + var(--gap-xs));
+    box-sizing: border-box;
 }
\ No newline at end of file
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 216ee7683..e68bebb34 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { KanbanScroller } from '@taskany/bricks/harmony';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
@@ -37,6 +38,7 @@ interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
     title?: string;
     header: React.ReactNode;
     children?: React.ReactNode;
+    scrollerShadow?: number;
 }
 
 const mapThemeOnId = { light: 0, dark: 1 } as const;
@@ -53,7 +55,15 @@ const toastOptions: ToastOptions = {
     },
 };
 
-export const Page: React.FC<PageProps> = ({ user, ssrTime, title = 'Untitled', children, header, ...attrs }) => {
+export const Page: React.FC<PageProps> = ({
+    user,
+    ssrTime,
+    title = 'Untitled',
+    children,
+    header,
+    scrollerShadow,
+    ...attrs
+}) => {
     const { setPreview } = useGoalPreview();
     const { data: userSettings = user?.settings } = trpc.user.settings.useQuery();
     const { data: config } = trpc.appConfig.get.useQuery();
@@ -103,8 +113,10 @@ export const Page: React.FC<PageProps> = ({ user, ssrTime, title = 'Untitled', c
 
                 <main className={s.PageMain} {...attrs}>
                     {header}
-                    <div className={s.PageContent} {...pageContent.attr}>
-                        {children}
+                    <div className={s.PageContent}>
+                        <KanbanScroller className={s.PageScroller} shadow={scrollerShadow} {...pageContent.attr}>
+                            {children}
+                        </KanbanScroller>
                     </div>
                     <PageFooter />
                 </main>
diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.module.css b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.module.css
index 85b787086..ea5eba136 100644
--- a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.module.css
+++ b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.module.css
@@ -18,4 +18,12 @@
     color: var(--text-ghost);
     font-size: inherit;
     font-weight: inherit;
+}
+
+.ProjectListItemCollapsableHeader_sticky {
+    cursor: pointer;
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    background-color: var(--background);
 }
\ No newline at end of file
diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
index 72fac0844..a75c2aa47 100644
--- a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
+++ b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
@@ -1,5 +1,6 @@
 import React, { ComponentProps, MouseEventHandler, ReactNode } from 'react';
 import { nullable } from '@taskany/bricks';
+import cn from 'classnames';
 import { TreeView, TreeViewNode, TreeViewTitle, Text } from '@taskany/bricks/harmony';
 import { IconServersOutline } from '@taskany/icons';
 
@@ -21,6 +22,7 @@ interface ProjectListItemCollapsableProps extends Omit<ComponentProps<typeof Tre
     onClick?: MouseEventHandler<HTMLElement>;
     titleSize?: 'm' | 'l';
     actionButtonView?: 'default' | 'icons';
+    sticky?: boolean;
 }
 
 export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProps> = ({
@@ -34,6 +36,7 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
     interactive = true,
     actionButtonView,
     onClick,
+    sticky,
     ...props
 }) => {
     const projectComponent = (
@@ -77,7 +80,11 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
         <TreeView className={className} {...projectListItem.attr}>
             <TreeViewNode
                 interactive={interactive}
-                title={<TreeViewTitle>{projectComponent}</TreeViewTitle>}
+                title={
+                    <TreeViewTitle className={cn({ [s.ProjectListItemCollapsableHeader_sticky]: sticky })}>
+                        {projectComponent}
+                    </TreeViewTitle>
+                }
                 {...props}
             >
                 {goals}
diff --git a/src/components/ProjectListItemConnected/ProjectListItemConnected.tsx b/src/components/ProjectListItemConnected/ProjectListItemConnected.tsx
index e770fd862..5d2b47da4 100644
--- a/src/components/ProjectListItemConnected/ProjectListItemConnected.tsx
+++ b/src/components/ProjectListItemConnected/ProjectListItemConnected.tsx
@@ -77,6 +77,7 @@ export const ProjectListItemConnected: FC<ProjectListItemConnectedProps> = ({
                 href={routes.project(project.id, view ? `view=${view}` : undefined)}
                 onClick={onProjectClickHandler}
                 project={project}
+                sticky={isKanbanView}
                 parent={isKanbanView ? parent : undefined}
                 goals={
                     <TreeViewElement>
diff --git a/src/components/ProjectPage/ProjectPage.tsx b/src/components/ProjectPage/ProjectPage.tsx
index f4ef1476b..c09494de6 100644
--- a/src/components/ProjectPage/ProjectPage.tsx
+++ b/src/components/ProjectPage/ProjectPage.tsx
@@ -28,7 +28,7 @@ export const ProjectPage = ({ user, ssrTime, params: { id }, defaultPresetFallba
 
     const { preset } = useFiltersPreset({ defaultPresetFallback });
 
-    const { queryState } = useUrlFilterParams({
+    const { queryState, view } = useUrlFilterParams({
         preset,
     });
 
@@ -84,6 +84,7 @@ export const ProjectPage = ({ user, ssrTime, params: { id }, defaultPresetFallba
             <Page
                 user={user}
                 ssrTime={ssrTime}
+                scrollerShadow={view === 'kanban' ? 70 : 0}
                 title={tr
                     .raw('title', {
                         project: project?.title,