From a5fec885971a97214737168d4530e641dfe6f2bc Mon Sep 17 00:00:00 2001
From: cp-20 <n.naoki.1587@gmail.com>
Date: Mon, 22 Jul 2024 22:58:39 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20sticky=E3=81=AA=E3=83=98=E3=83=83?=
 =?UTF-8?q?=E3=83=80=E3=83=BC=E3=82=92=E3=81=AA=E3=81=8F=E3=81=97=E3=81=9F?=
 =?UTF-8?q?=20(=E4=B8=80=E7=95=AA=E4=B8=8A=E3=81=AEfixed=E3=81=AA=E3=83=98?=
 =?UTF-8?q?=E3=83=83=E3=83=80=E3=83=BC=E3=81=AE=E3=81=BF)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/components/layouts/WithHeader.tsx | 2 +-
 dashboard/src/components/layouts/WithNav.tsx    | 4 +---
 dashboard/src/pages/apps.tsx                    | 4 ++--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/components/layouts/WithHeader.tsx b/dashboard/src/components/layouts/WithHeader.tsx
index da216c077..68dad83d5 100644
--- a/dashboard/src/components/layouts/WithHeader.tsx
+++ b/dashboard/src/components/layouts/WithHeader.tsx
@@ -15,7 +15,7 @@ const Body = styled('div', {
   base: {
     width: '100%',
     height: '100%',
-    overflowY: 'hidden',
+    overflowY: 'auto',
   },
 })
 
diff --git a/dashboard/src/components/layouts/WithNav.tsx b/dashboard/src/components/layouts/WithNav.tsx
index 27fdd38bd..c7ea44170 100644
--- a/dashboard/src/components/layouts/WithNav.tsx
+++ b/dashboard/src/components/layouts/WithNav.tsx
@@ -7,7 +7,7 @@ const Container = styled('div', {
     height: '100%',
     display: 'grid',
     gridTemplateColumns: '1fr',
-    gridTemplateRows: 'auto 1fr',
+    gridTemplateRows: 'max-content 1fr',
   },
 })
 const Navs = styled('div', {
@@ -22,8 +22,6 @@ const Body = styled('div', {
   base: {
     position: 'relative',
     width: '100%',
-    height: '100%',
-    overflowY: 'hidden',
   },
 })
 const TabContainer = styled('div', {
diff --git a/dashboard/src/pages/apps.tsx b/dashboard/src/pages/apps.tsx
index 6163af588..2e917003d 100644
--- a/dashboard/src/pages/apps.tsx
+++ b/dashboard/src/pages/apps.tsx
@@ -28,9 +28,10 @@ import { colorVars, media } from '../theme'
 const MainView = styled('div', {
   base: {
     position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
     width: '100%',
     height: '100%',
-    overflowY: 'auto',
     padding: '0 max(calc(50% - 500px), 32px)',
     background: colorVars.semantic.ui.background,
 
@@ -43,7 +44,6 @@ const MainView = styled('div', {
 })
 const FilterContainer = styled('div', {
   base: {
-    position: 'sticky',
     width: '100%',
     top: '0',
     left: '0',

From 075db27b78645b3884017f210763d79c5e83e101 Mon Sep 17 00:00:00 2001
From: eyemono-moe <ysdr83@gmail.com>
Date: Tue, 23 Jul 2024 23:46:41 +0900
Subject: [PATCH 2/4] =?UTF-8?q?apps=E3=81=A7=E3=81=AE=E4=BB=AE=E6=83=B3?=
 =?UTF-8?q?=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=8C=E5=83=8D?=
 =?UTF-8?q?=E3=81=8F=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/pages/apps.tsx | 199 ++++++++++++++++++-----------------
 1 file changed, 101 insertions(+), 98 deletions(-)

diff --git a/dashboard/src/pages/apps.tsx b/dashboard/src/pages/apps.tsx
index 2e917003d..909a3a8e5 100644
--- a/dashboard/src/pages/apps.tsx
+++ b/dashboard/src/pages/apps.tsx
@@ -45,14 +45,11 @@ const MainView = styled('div', {
 const FilterContainer = styled('div', {
   base: {
     width: '100%',
-    top: '0',
-    left: '0',
     padding: '40px 0 32px',
     zIndex: 1,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    background: `linear-gradient(0deg, rgba(255,255,255,0), ${colorVars.semantic.ui.background} 20px)`,
   },
 })
 const Repositories = styled('div', {
@@ -187,7 +184,10 @@ const AppsList: Component<{
       count: filteredRepos().length,
       getScrollElement: () => props.parentRef,
       estimateSize: (i) => 76 + 16 + filteredRepos()[i].apps.length * 80,
+      // scrollParentRef内に高さ120pxのFilterContainerが存在するため、この分を設定
+      scrollMargin: 120,
       paddingEnd: 72,
+      gap: 16,
     }),
   )
 
@@ -199,41 +199,42 @@ const AppsList: Component<{
         width: '100%',
         height: `${virtualizer().getTotalSize()}px`,
         position: 'relative',
+        // scrollParentRef内に高さ120pxのFilterContainerが存在するため、この分を減算
+        transform: `translateY(${-virtualizer().options.scrollMargin}px)`,
       }}
     >
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          transform: `translateY(${items()?.[0]?.start ?? 0}px)`,
-        }}
+      <For
+        each={items() ?? []}
+        fallback={
+          <List.Container>
+            <List.PlaceHolder>
+              <MaterialSymbols displaySize={80}>search</MaterialSymbols>
+              No Apps Found
+            </List.PlaceHolder>
+          </List.Container>
+        }
       >
-        <For
-          each={items() ?? []}
-          fallback={
-            <List.Container>
-              <List.PlaceHolder>
-                <MaterialSymbols displaySize={80}>search</MaterialSymbols>
-                No Apps Found
-              </List.PlaceHolder>
-            </List.Container>
-          }
-        >
-          {(vRow) => (
-            <div data-index={vRow.index} ref={(el) => queueMicrotask(() => virtualizer().measureElement(el))}>
-              <div style={{ 'padding-bottom': '16px' }}>
-                <RepositoryList
-                  repository={filteredRepos()[vRow.index].repo}
-                  apps={filteredRepos()[vRow.index].apps}
-                  commits={commits()}
-                />
-              </div>
-            </div>
-          )}
-        </For>
-      </div>
+        {(vRow) => (
+          <div
+            data-index={vRow.index}
+            ref={(el) => queueMicrotask(() => virtualizer().measureElement(el))}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: `${items()[vRow.index]}px`,
+              transform: `translateY(${vRow.start}px)`,
+            }}
+          >
+            <RepositoryList
+              repository={filteredRepos()[vRow.index].repo}
+              apps={filteredRepos()[vRow.index].apps}
+              commits={commits()}
+            />
+          </div>
+        )}
+      </For>
     </div>
   )
 }
@@ -264,72 +265,74 @@ export default () => {
   const [scrollParentRef, setScrollParentRef] = createSignal<HTMLDivElement>()
 
   return (
-    <WithNav.Container>
-      <Title>Apps - NeoShowcase</Title>
-      <WithNav.Navs>
-        <AppsNav />
-        <WithNav.Tabs>
-          <For each={scopeItems(user()?.admin)}>
-            {(s) => (
-              <TabRound state={s.value === scope() ? 'active' : 'default'} onClick={() => setScope(s.value)}>
-                <MaterialSymbols>deployed_code</MaterialSymbols>
-                {s.label}
-              </TabRound>
-            )}
-          </For>
-          <A href="/apps/new" style={{ 'margin-left': 'auto' }}>
-            <Button variants="primary" size="medium" leftIcon={<MaterialSymbols>add</MaterialSymbols>}>
-              Add New App
-            </Button>
-          </A>
-        </WithNav.Tabs>
-      </WithNav.Navs>
-      <WithNav.Body>
-        <MainView ref={setScrollParentRef}>
-          <FilterContainer>
-            <TextField
-              placeholder="Search"
-              value={query()}
-              onInput={(e) => setQuery(e.currentTarget.value)}
-              leftIcon={<MaterialSymbols>search</MaterialSymbols>}
-              rightIcon={
-                <AppsFilter
+    <div style={{ 'overflow-y': 'auto', height: '100%' }} ref={setScrollParentRef}>
+      <WithNav.Container>
+        <Title>Apps - NeoShowcase</Title>
+        <WithNav.Navs>
+          <AppsNav />
+          <WithNav.Tabs>
+            <For each={scopeItems(user()?.admin)}>
+              {(s) => (
+                <TabRound state={s.value === scope() ? 'active' : 'default'} onClick={() => setScope(s.value)}>
+                  <MaterialSymbols>deployed_code</MaterialSymbols>
+                  {s.label}
+                </TabRound>
+              )}
+            </For>
+            <A href="/apps/new" style={{ 'margin-left': 'auto' }}>
+              <Button variants="primary" size="medium" leftIcon={<MaterialSymbols>add</MaterialSymbols>}>
+                Add New App
+              </Button>
+            </A>
+          </WithNav.Tabs>
+        </WithNav.Navs>
+        <WithNav.Body>
+          <MainView>
+            <FilterContainer>
+              <TextField
+                placeholder="Search"
+                value={query()}
+                onInput={(e) => setQuery(e.currentTarget.value)}
+                leftIcon={<MaterialSymbols>search</MaterialSymbols>}
+                rightIcon={
+                  <AppsFilter
+                    statuses={statuses()}
+                    setStatues={setStatuses}
+                    origin={origin()}
+                    setOrigin={setOrigin}
+                    sort={sort()}
+                    setSort={setSort}
+                    includeNoApp={includeNoApp()}
+                    setIncludeNoApp={setIncludeNoApp}
+                  />
+                }
+              />
+            </FilterContainer>
+            <Suspense
+              fallback={
+                <Repositories>
+                  <RepositoryList apps={[undefined]} />
+                  <RepositoryList apps={[undefined]} />
+                  <RepositoryList apps={[undefined]} />
+                  <RepositoryList apps={[undefined]} />
+                </Repositories>
+              }
+            >
+              <SuspenseContainer isPending={isPending()}>
+                <AppsList
+                  scope={scope()}
                   statuses={statuses()}
-                  setStatues={setStatuses}
-                  origin={origin()}
-                  setOrigin={setOrigin}
+                  origins={origin()}
+                  query={query()}
                   sort={sort()}
-                  setSort={setSort}
                   includeNoApp={includeNoApp()}
-                  setIncludeNoApp={setIncludeNoApp}
+                  parentRef={scrollParentRef()!}
                 />
-              }
-            />
-          </FilterContainer>
-          <Suspense
-            fallback={
-              <Repositories>
-                <RepositoryList apps={[undefined]} />
-                <RepositoryList apps={[undefined]} />
-                <RepositoryList apps={[undefined]} />
-                <RepositoryList apps={[undefined]} />
-              </Repositories>
-            }
-          >
-            <SuspenseContainer isPending={isPending()}>
-              <AppsList
-                scope={scope()}
-                statuses={statuses()}
-                origins={origin()}
-                query={query()}
-                sort={sort()}
-                includeNoApp={includeNoApp()}
-                parentRef={scrollParentRef()!}
-              />
-            </SuspenseContainer>
-          </Suspense>
-        </MainView>
-      </WithNav.Body>
-    </WithNav.Container>
+              </SuspenseContainer>
+            </Suspense>
+          </MainView>
+        </WithNav.Body>
+      </WithNav.Container>
+    </div>
   )
 }

From b6c3158f1b8fda7d18a45b7bff4b0a7eac56b4a5 Mon Sep 17 00:00:00 2001
From: cp-20 <n.naoki.1587@gmail.com>
Date: Thu, 25 Jul 2024 15:40:10 +0900
Subject: [PATCH 3/4] =?UTF-8?q?wip:=20scrollbarGutter:=20'stable'=20?=
 =?UTF-8?q?=E6=B6=88=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/pages/apps/[id]/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/dashboard/src/pages/apps/[id]/index.tsx b/dashboard/src/pages/apps/[id]/index.tsx
index c9e73eca7..5cda3a6c1 100644
--- a/dashboard/src/pages/apps/[id]/index.tsx
+++ b/dashboard/src/pages/apps/[id]/index.tsx
@@ -19,7 +19,6 @@ const Container = styled('div', {
     width: '100%',
     height: '100%',
     overflowY: 'auto',
-    scrollbarGutter: 'stable',
   },
 })
 const MainViewContainer = styled('div', {

From d3f8a2f308fdccce6bff987c7b0e4effa7b6b245 Mon Sep 17 00:00:00 2001
From: cp-20 <n.naoki.1587@gmail.com>
Date: Tue, 30 Jul 2024 22:59:43 +0900
Subject: [PATCH 4/4] =?UTF-8?q?wip:=20=E3=82=A2=E3=83=97=E3=83=AA=E3=82=84?=
 =?UTF-8?q?=E3=83=AA=E3=83=9D=E3=82=B8=E3=83=88=E3=83=AA=E3=81=AE=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=8C=E3=81=AF=E3=81=BF=E5=87=BA=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/components/layouts/WithNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dashboard/src/components/layouts/WithNav.tsx b/dashboard/src/components/layouts/WithNav.tsx
index c7ea44170..1ff9f61b4 100644
--- a/dashboard/src/components/layouts/WithNav.tsx
+++ b/dashboard/src/components/layouts/WithNav.tsx
@@ -6,7 +6,7 @@ const Container = styled('div', {
     width: '100%',
     height: '100%',
     display: 'grid',
-    gridTemplateColumns: '1fr',
+    gridTemplateColumns: 'minmax(0, 1fr)',
     gridTemplateRows: 'max-content 1fr',
   },
 })