From c4f29f4ed482feb8a18d82fe5ff8a889b1320c19 Mon Sep 17 00:00:00 2001
From: motoki317 <motoki317@gmail.com>
Date: Wed, 17 Apr 2024 16:55:39 +0900
Subject: [PATCH 1/5] Move created into settings

---
 .../components/templates/app/AppInfoLists.tsx | 15 ----------
 .../src/pages/apps/[id]/settings/general.tsx  | 29 +++++++++++++++++++
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/dashboard/src/components/templates/app/AppInfoLists.tsx b/dashboard/src/components/templates/app/AppInfoLists.tsx
index c34efcf6..dd3797fb 100644
--- a/dashboard/src/components/templates/app/AppInfoLists.tsx
+++ b/dashboard/src/components/templates/app/AppInfoLists.tsx
@@ -79,21 +79,6 @@ const AppInfoLists: Component<{
   return (
     <>
       <List.Container>
-        <Show when={props.app.createdAt}>
-          {(nonNullCreatedAt) => {
-            const { diff, localeString } = diffHuman(nonNullCreatedAt().toDate())
-            return (
-              <List.Row>
-                <List.RowContent>
-                  <List.RowTitle>作成日</List.RowTitle>
-                  <ToolTip props={{ content: localeString }}>
-                    <List.RowData>{diff}</List.RowData>
-                  </ToolTip>
-                </List.RowContent>
-              </List.Row>
-            )
-          }}
-        </Show>
         <List.Row>
           <List.RowContent>
             <List.RowTitle>Branch (Commit)</List.RowTitle>
diff --git a/dashboard/src/pages/apps/[id]/settings/general.tsx b/dashboard/src/pages/apps/[id]/settings/general.tsx
index 64c01191..b011c45d 100644
--- a/dashboard/src/pages/apps/[id]/settings/general.tsx
+++ b/dashboard/src/pages/apps/[id]/settings/general.tsx
@@ -7,21 +7,49 @@ import type { Application, Repository } from '/@/api/neoshowcase/protobuf/gatewa
 import { Button } from '/@/components/UI/Button'
 import { MaterialSymbols } from '/@/components/UI/MaterialSymbols'
 import ModalDeleteConfirm from '/@/components/UI/ModalDeleteConfirm'
+import { ToolTip } from '/@/components/UI/ToolTip'
 import { DataTable } from '/@/components/layouts/DataTable'
 import FormBox from '/@/components/layouts/FormBox'
 import { FormItem } from '/@/components/templates/FormItem'
+import { List } from '/@/components/templates/List'
 import { AppGeneralConfig, type AppGeneralForm } from '/@/components/templates/app/AppGeneralConfig'
 import { client, handleAPIError } from '/@/libs/api'
+import { diffHuman } from '/@/libs/format'
 import useModal from '/@/libs/useModal'
 import { useApplicationData } from '/@/routes'
 import { colorVars, textVars } from '/@/theme'
 
+const GeneralInfo: Component<{
+  app: Application
+}> = (props) => {
+  return (
+    <List.Container>
+      <Show when={props.app.createdAt}>
+        {(nonNullCreatedAt) => {
+          const { diff, localeString } = diffHuman(nonNullCreatedAt().toDate())
+          return (
+            <List.Row>
+              <List.RowContent>
+                <List.RowTitle>作成日</List.RowTitle>
+                <ToolTip props={{ content: localeString }}>
+                  <List.RowData>{diff}</List.RowData>
+                </ToolTip>
+              </List.RowContent>
+            </List.Row>
+          )
+        }}
+      </Show>
+    </List.Container>
+  )
+}
+
 const DeleteAppNotice = styled('div', {
   base: {
     color: colorVars.semantic.text.grey,
     ...textVars.caption.regular,
   },
 })
+
 const DeleteApp: Component<{
   app: Application
   repo: Repository
@@ -133,6 +161,7 @@ export default () => {
     <DataTable.Container>
       <DataTable.Title>General</DataTable.Title>
       <Show when={loaded()}>
+        <GeneralInfo app={app()!} />
         <General.Form onSubmit={handleSubmit}>
           <FormBox.Container>
             <FormBox.Forms>

From f453f38151b937aedccdbce3a78cf7c141bf5e20 Mon Sep 17 00:00:00 2001
From: motoki317 <motoki317@gmail.com>
Date: Wed, 17 Apr 2024 16:58:58 +0900
Subject: [PATCH 2/5] Use tooltip for latest builds commit time

---
 .../src/components/templates/build/BuildRow.tsx    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/components/templates/build/BuildRow.tsx b/dashboard/src/components/templates/build/BuildRow.tsx
index 392934d5..c381474a 100644
--- a/dashboard/src/components/templates/build/BuildRow.tsx
+++ b/dashboard/src/components/templates/build/BuildRow.tsx
@@ -112,8 +112,18 @@ export const BuildRow: Component<Props> = (props) => {
   const commitDetails = () => {
     const c = commit()
     if (!c || !c.commitDate) return '<no info>'
-    const { diff } = diffHuman(c.commitDate.toDate())
-    return `${c.authorName}, ${diff}, ${shortSha(c.hash)}`
+    const { diff, localeString } = diffHuman(c.commitDate.toDate())
+    return (
+      <>
+        {c.authorName}
+        <span>, </span>
+        <ToolTip props={{ content: localeString }}>
+          <span>{diff}</span>
+        </ToolTip>
+        <span>, </span>
+        {shortSha(c.hash)}
+      </>
+    )
   }
 
   return (

From 44f9c8871c1e5a156ed12a05ebfa37f2ba65e92a Mon Sep 17 00:00:00 2001
From: motoki317 <motoki317@gmail.com>
Date: Wed, 17 Apr 2024 17:14:59 +0900
Subject: [PATCH 3/5] Add "Branch resolution" section

---
 dashboard/src/components/UI/JumpButton.tsx    |  15 ++-
 .../templates/app/AppBranchResolution.tsx     | 127 ++++++++++++++++++
 .../templates/app/AppDeployInfo.tsx           |   6 +-
 .../components/templates/app/AppInfoLists.tsx |  91 +------------
 dashboard/src/pages/apps/[id]/index.tsx       |  11 ++
 5 files changed, 151 insertions(+), 99 deletions(-)
 create mode 100644 dashboard/src/components/templates/app/AppBranchResolution.tsx

diff --git a/dashboard/src/components/UI/JumpButton.tsx b/dashboard/src/components/UI/JumpButton.tsx
index 7ee5b575..33693327 100644
--- a/dashboard/src/components/UI/JumpButton.tsx
+++ b/dashboard/src/components/UI/JumpButton.tsx
@@ -1,6 +1,7 @@
 import { styled } from '@macaron-css/solid'
 import { A } from '@solidjs/router'
 import type { VoidComponent } from 'solid-js'
+import { ToolTip } from '/@/components/UI/ToolTip'
 import { colorVars } from '/@/theme'
 import { MaterialSymbols } from './MaterialSymbols'
 
@@ -35,12 +36,14 @@ const JumpButtonContainer = styled('div', {
     },
   },
 })
-const JumpButton: VoidComponent<{ href: string }> = (props) => (
-  <A href={props.href}>
-    <JumpButtonContainer>
-      <MaterialSymbols opticalSize={20}>arrow_outward</MaterialSymbols>
-    </JumpButtonContainer>
-  </A>
+const JumpButton: VoidComponent<{ href: string; tooltip?: string }> = (props) => (
+  <ToolTip props={{ content: props.tooltip }} disabled={!props.tooltip}>
+    <A href={props.href}>
+      <JumpButtonContainer>
+        <MaterialSymbols opticalSize={20}>arrow_outward</MaterialSymbols>
+      </JumpButtonContainer>
+    </A>
+  </ToolTip>
 )
 
 export default JumpButton
diff --git a/dashboard/src/components/templates/app/AppBranchResolution.tsx b/dashboard/src/components/templates/app/AppBranchResolution.tsx
new file mode 100644
index 00000000..074b5286
--- /dev/null
+++ b/dashboard/src/components/templates/app/AppBranchResolution.tsx
@@ -0,0 +1,127 @@
+import { style } from '@macaron-css/core'
+import { styled } from '@macaron-css/solid'
+import { AiOutlineBranches } from 'solid-icons/ai'
+import { type Component, For, Show } from 'solid-js'
+import { type Application, DeployType } from '/@/api/neoshowcase/protobuf/gateway_pb'
+import { Button } from '/@/components/UI/Button'
+import Code from '/@/components/UI/Code'
+import JumpButton from '/@/components/UI/JumpButton'
+import { ToolTip } from '/@/components/UI/ToolTip'
+import { List } from '/@/components/templates/List'
+import { type CommitsMap, systemInfo } from '/@/libs/api'
+import { ApplicationState, deploymentState } from '/@/libs/application'
+import { diffHuman, shortSha } from '/@/libs/format'
+import { colorVars, textVars } from '/@/theme'
+
+const DataRows = styled('div', {
+  base: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignContent: 'left',
+    gap: '4px',
+  },
+})
+
+const DataRow = styled('div', {
+  base: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '4px',
+    alignItems: 'center',
+  },
+})
+
+const greyText = style({
+  color: colorVars.semantic.text.grey,
+  ...textVars.caption.regular,
+})
+
+const noOverflow = style({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+})
+
+const shrinkFirst = style({
+  flexShrink: 0,
+  flexGrow: 1,
+  flexBasis: 0,
+  minWidth: 0,
+})
+
+const AppBranchResolution: Component<{
+  app: Application
+  commits?: CommitsMap
+  refreshCommit: () => void
+  disableRefreshCommit: boolean
+  hasPermission: boolean
+}> = (props) => {
+  const commit = () => props.commits?.[props.app.commit]
+  const commitDisplay = () => {
+    const c = commit()
+    const base = (
+      <DataRow>
+        <AiOutlineBranches />
+        <div>{`${props.app.refName} → ${shortSha(props.app.commit)}`}</div>
+      </DataRow>
+    )
+    if (!c || !c.commitDate) {
+      return base
+    }
+
+    const { diff, localeString } = diffHuman(c.commitDate.toDate())
+    return (
+      <DataRows>
+        {base}
+        <div>
+          <For each={c.message.split('\n')}>{(line) => <div class={noOverflow}>{line}</div>}</For>
+          <div class={greyText}>
+            {c.authorName}
+            <span>, </span>
+            <ToolTip props={{ content: localeString }}>
+              <span>{diff}</span>
+            </ToolTip>
+            <span>, </span>
+            {shortSha(c.hash)}
+          </div>
+        </div>
+      </DataRows>
+    )
+  }
+
+  return (
+    <>
+      <List.Container>
+        <List.Row>
+          <List.RowContent class={shrinkFirst}>{commitDisplay()}</List.RowContent>
+          <Show when={props.hasPermission}>
+            <Button
+              variants="ghost"
+              size="medium"
+              onClick={props.refreshCommit}
+              disabled={props.disableRefreshCommit}
+              tooltip={{
+                props: {
+                  content: (
+                    <>
+                      <div>リポジトリの最新コミットを取得</div>
+                      <div>Pro Tip: Webhookを設定することで</div>
+                      <div>同期して更新されます</div>
+                    </>
+                  ),
+                },
+              }}
+            >
+              Refresh Commit
+            </Button>
+          </Show>
+          <JumpButton href={`/apps/${props.app.id}/settings`} tooltip="設定を変更" />
+        </List.Row>
+      </List.Container>
+    </>
+  )
+}
+
+export default AppBranchResolution
diff --git a/dashboard/src/components/templates/app/AppDeployInfo.tsx b/dashboard/src/components/templates/app/AppDeployInfo.tsx
index 273e8385..ba74767e 100644
--- a/dashboard/src/components/templates/app/AppDeployInfo.tsx
+++ b/dashboard/src/components/templates/app/AppDeployInfo.tsx
@@ -256,7 +256,7 @@ const AppDeployInfo: Component<{
             <List.RowTitle>Deploy Type</List.RowTitle>
             <List.RowData>{titleCase(DeployType[props.app.deployType])}</List.RowData>
           </List.RowContent>
-          <JumpButton href={`/apps/${props.app.id}/settings/build`} />
+          <JumpButton href={`/apps/${props.app.id}/settings/build`} tooltip="設定を変更" />
         </DeployInfo>
         <DeployInfo long>
           <List.RowContent class={shrinkFirst}>
@@ -271,7 +271,7 @@ const AppDeployInfo: Component<{
             </List.RowData>
           </List.RowContent>
           <Show when={props.deployedBuild}>
-            <JumpButton href={`/apps/${props.app.id}/builds/${props.deployedBuild?.id}`} />
+            <JumpButton href={`/apps/${props.app.id}/builds/${props.deployedBuild?.id}`} tooltip="ビルドの詳細" />
           </Show>
         </DeployInfo>
         <DeployInfo long>
@@ -288,7 +288,7 @@ const AppDeployInfo: Component<{
               )}
             </For>
           </List.RowContent>
-          <JumpButton href={`/apps/${props.app.id}/settings/urls`} />
+          <JumpButton href={`/apps/${props.app.id}/settings/urls`} tooltip="設定を変更" />
         </DeployInfo>
         <Show when={props.app.containerMessage !== ''}>
           <DeployInfo long>
diff --git a/dashboard/src/components/templates/app/AppInfoLists.tsx b/dashboard/src/components/templates/app/AppInfoLists.tsx
index dd3797fb..79cf7c39 100644
--- a/dashboard/src/components/templates/app/AppInfoLists.tsx
+++ b/dashboard/src/components/templates/app/AppInfoLists.tsx
@@ -1,39 +1,10 @@
-import { style } from '@macaron-css/core'
-import { styled } from '@macaron-css/solid'
-import { AiOutlineBranches } from 'solid-icons/ai'
-import { type Component, For, Show } from 'solid-js'
+import { type Component, Show } from 'solid-js'
 import { type Application, DeployType } from '/@/api/neoshowcase/protobuf/gateway_pb'
-import { Button } from '/@/components/UI/Button'
 import Code from '/@/components/UI/Code'
-import { ToolTip } from '/@/components/UI/ToolTip'
 import { type CommitsMap, systemInfo } from '/@/libs/api'
 import { ApplicationState, deploymentState } from '/@/libs/application'
-import { diffHuman, shortSha } from '/@/libs/format'
-import { colorVars, textVars } from '/@/theme'
 import { List } from '../List'
 
-const DataRow = styled('div', {
-  base: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: '4px',
-    alignItems: 'center',
-  },
-})
-
-const DataRows = styled('div', {
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignContent: 'left',
-  },
-})
-
-const greyText = style({
-  color: colorVars.semantic.text.grey,
-  ...textVars.caption.regular,
-})
-
 const AppInfoLists: Component<{
   app: Application
   commits?: CommitsMap
@@ -43,69 +14,9 @@ const AppInfoLists: Component<{
 }> = (props) => {
   const sshAccessCommand = () => `ssh -p ${systemInfo()?.ssh?.port} ${props.app.id}@${systemInfo()?.ssh?.host}`
 
-  const commit = () => props.commits?.[props.app.commit]
-  const commitDisplay = () => {
-    const c = commit()
-    if (!c || !c.commitDate) {
-      return (
-        <DataRow>
-          <AiOutlineBranches />
-          <div>{`${props.app.refName} (${shortSha(props.app.commit)})`}</div>
-        </DataRow>
-      )
-    }
-
-    const { diff, localeString } = diffHuman(c.commitDate.toDate())
-    return (
-      <DataRows>
-        <DataRow>
-          <AiOutlineBranches />
-          <div>{props.app.refName}</div>
-        </DataRow>
-        <For each={c.message.split('\n')}>{(line) => <div>{line}</div>}</For>
-        <div class={greyText}>
-          {c.authorName}
-          <span>, </span>
-          <ToolTip props={{ content: localeString }}>
-            <span>{diff}</span>
-          </ToolTip>
-          <span>, </span>
-          {shortSha(c.hash)}
-        </div>
-      </DataRows>
-    )
-  }
-
   return (
     <>
       <List.Container>
-        <List.Row>
-          <List.RowContent>
-            <List.RowTitle>Branch (Commit)</List.RowTitle>
-            <List.RowData>{commitDisplay()}</List.RowData>
-          </List.RowContent>
-          <Show when={props.hasPermission}>
-            <Button
-              variants="ghost"
-              size="medium"
-              onClick={props.refreshCommit}
-              disabled={props.disableRefreshCommit}
-              tooltip={{
-                props: {
-                  content: (
-                    <>
-                      <div>リポジトリの最新コミットを取得</div>
-                      <div>Pro Tip: Webhookを設定することで</div>
-                      <div>同期して更新されます</div>
-                    </>
-                  ),
-                },
-              }}
-            >
-              Refresh Commit
-            </Button>
-          </Show>
-        </List.Row>
         <Show when={props.app.deployType === DeployType.RUNTIME}>
           <List.Row>
             <List.RowContent>
diff --git a/dashboard/src/pages/apps/[id]/index.tsx b/dashboard/src/pages/apps/[id]/index.tsx
index 93763152..014434d2 100644
--- a/dashboard/src/pages/apps/[id]/index.tsx
+++ b/dashboard/src/pages/apps/[id]/index.tsx
@@ -5,6 +5,7 @@ import { type Application, DeployType } from '/@/api/neoshowcase/protobuf/gatewa
 import { Button } from '/@/components/UI/Button'
 import { DataTable } from '/@/components/layouts/DataTable'
 import SuspenseContainer from '/@/components/layouts/SuspenseContainer'
+import AppBranchResolution from '/@/components/templates/app/AppBranchResolution'
 import AppDeployInfo from '/@/components/templates/app/AppDeployInfo'
 import AppInfoLists from '/@/components/templates/app/AppInfoLists'
 import AppLatestBuilds from '/@/components/templates/app/AppLatestBuilds'
@@ -198,6 +199,16 @@ export default () => {
           </MainViewContainer>
           <MainViewContainer>
             <MainView>
+              <DataTable.Container>
+                <DataTable.Title>Branch Resolution</DataTable.Title>
+                <AppBranchResolution
+                  app={app()!}
+                  commits={commits()}
+                  refreshCommit={refreshCommit}
+                  disableRefreshCommit={disableRefreshCommit()}
+                  hasPermission={hasPermission()}
+                />
+              </DataTable.Container>
               <DataTable.Container>
                 <Show when={builds()}>
                   <DataTable.Title>Latest Builds</DataTable.Title>

From 0029cc322201acac8e9a094c8cdd62b61e3320ac Mon Sep 17 00:00:00 2001
From: motoki317 <motoki317@gmail.com>
Date: Wed, 17 Apr 2024 17:45:58 +0900
Subject: [PATCH 4/5] Move ssh access info

---
 .../templates/app/AppDeployInfo.tsx           | 48 +++++++++----------
 .../components/templates/app/AppInfoLists.tsx | 35 --------------
 dashboard/src/pages/apps/[id]/index.tsx       | 11 -----
 3 files changed, 23 insertions(+), 71 deletions(-)
 delete mode 100644 dashboard/src/components/templates/app/AppInfoLists.tsx

diff --git a/dashboard/src/components/templates/app/AppDeployInfo.tsx b/dashboard/src/components/templates/app/AppDeployInfo.tsx
index ba74767e..b314cb29 100644
--- a/dashboard/src/components/templates/app/AppDeployInfo.tsx
+++ b/dashboard/src/components/templates/app/AppDeployInfo.tsx
@@ -5,11 +5,12 @@ import toast from 'solid-toast'
 import { type Application, type Build, DeployType, type Repository } from '/@/api/neoshowcase/protobuf/gateway_pb'
 import Badge from '/@/components/UI/Badge'
 import { Button } from '/@/components/UI/Button'
+import Code from '/@/components/UI/Code'
 import JumpButton from '/@/components/UI/JumpButton'
 import { ToolTip } from '/@/components/UI/ToolTip'
 import { URLText } from '/@/components/UI/URLText'
-import { client, handleAPIError } from '/@/libs/api'
-import { deploymentState, getWebsiteURL } from '/@/libs/application'
+import { client, handleAPIError, systemInfo } from '/@/libs/api'
+import { ApplicationState, deploymentState, getWebsiteURL } from '/@/libs/application'
 import { titleCase } from '/@/libs/casing'
 import { colorOverlay } from '/@/libs/colorOverlay'
 import { diffHuman, shortSha } from '/@/libs/format'
@@ -215,6 +216,8 @@ const AppDeployInfo: Component<{
     )
   }
 
+  const sshAccessCommand = () => `ssh -p ${systemInfo()?.ssh?.port} ${props.app.id}@${systemInfo()?.ssh?.host}`
+
   return (
     <DeploymentContainer>
       <AppStateContainer variant={deploymentState(props.app)}>
@@ -235,29 +238,21 @@ const AppDeployInfo: Component<{
         </Show>
       </AppStateContainer>
       <InfoContainer>
-        <DeployInfo>
-          <List.RowContent>
-            <List.RowTitle>起動時刻</List.RowTitle>
-            <Show when={props.app.updatedAt}>
-              {(nonNullUpdatedAt) => {
-                const { diff, localeString } = diffHuman(nonNullUpdatedAt().toDate())
-
-                return (
-                  <ToolTip props={{ content: localeString }}>
-                    <List.RowData>{diff}</List.RowData>
-                  </ToolTip>
-                )
-              }}
-            </Show>
-          </List.RowContent>
-        </DeployInfo>
-        <DeployInfo>
+        <DeployInfo long={props.app.containerMessage === ''}>
           <List.RowContent>
             <List.RowTitle>Deploy Type</List.RowTitle>
             <List.RowData>{titleCase(DeployType[props.app.deployType])}</List.RowData>
           </List.RowContent>
           <JumpButton href={`/apps/${props.app.id}/settings/build`} tooltip="設定を変更" />
         </DeployInfo>
+        <Show when={props.app.containerMessage !== ''}>
+          <DeployInfo>
+            <List.RowContent>
+              <List.RowTitle>Container Status</List.RowTitle>
+              <List.RowData>{props.app.containerMessage}</List.RowData>
+            </List.RowContent>
+          </DeployInfo>
+        </Show>
         <DeployInfo long>
           <List.RowContent class={shrinkFirst}>
             <List.RowTitle>Source Commit</List.RowTitle>
@@ -290,14 +285,17 @@ const AppDeployInfo: Component<{
           </List.RowContent>
           <JumpButton href={`/apps/${props.app.id}/settings/urls`} tooltip="設定を変更" />
         </DeployInfo>
-        <Show when={props.app.containerMessage !== ''}>
-          <DeployInfo long>
+        <DeployInfo long>
+          <Show when={props.app.deployType === DeployType.RUNTIME}>
             <List.RowContent>
-              <List.RowTitle>Container Status</List.RowTitle>
-              <List.RowData>{props.app.containerMessage}</List.RowData>
+              <List.RowTitle>SSH Access</List.RowTitle>
+              <Code value={sshAccessCommand()} copyable />
+              <Show when={deploymentState(props.app) !== ApplicationState.Running}>
+                <List.RowData>現在アプリが起動していないためSSHアクセスはできません</List.RowData>
+              </Show>
             </List.RowContent>
-          </DeployInfo>
-        </Show>
+          </Show>
+        </DeployInfo>
       </InfoContainer>
     </DeploymentContainer>
   )
diff --git a/dashboard/src/components/templates/app/AppInfoLists.tsx b/dashboard/src/components/templates/app/AppInfoLists.tsx
deleted file mode 100644
index 79cf7c39..00000000
--- a/dashboard/src/components/templates/app/AppInfoLists.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { type Component, Show } from 'solid-js'
-import { type Application, DeployType } from '/@/api/neoshowcase/protobuf/gateway_pb'
-import Code from '/@/components/UI/Code'
-import { type CommitsMap, systemInfo } from '/@/libs/api'
-import { ApplicationState, deploymentState } from '/@/libs/application'
-import { List } from '../List'
-
-const AppInfoLists: Component<{
-  app: Application
-  commits?: CommitsMap
-  refreshCommit: () => void
-  disableRefreshCommit: boolean
-  hasPermission: boolean
-}> = (props) => {
-  const sshAccessCommand = () => `ssh -p ${systemInfo()?.ssh?.port} ${props.app.id}@${systemInfo()?.ssh?.host}`
-
-  return (
-    <>
-      <List.Container>
-        <Show when={props.app.deployType === DeployType.RUNTIME}>
-          <List.Row>
-            <List.RowContent>
-              <List.RowTitle>SSH Access</List.RowTitle>
-              <Code value={sshAccessCommand()} copyable />
-              <Show when={deploymentState(props.app) !== ApplicationState.Running}>
-                <List.RowData>現在アプリが起動していないためSSHアクセスはできません</List.RowData>
-              </Show>
-            </List.RowContent>
-          </List.Row>
-        </Show>
-      </List.Container>
-    </>
-  )
-}
-export default AppInfoLists
diff --git a/dashboard/src/pages/apps/[id]/index.tsx b/dashboard/src/pages/apps/[id]/index.tsx
index 014434d2..c9e73eca 100644
--- a/dashboard/src/pages/apps/[id]/index.tsx
+++ b/dashboard/src/pages/apps/[id]/index.tsx
@@ -7,7 +7,6 @@ import { DataTable } from '/@/components/layouts/DataTable'
 import SuspenseContainer from '/@/components/layouts/SuspenseContainer'
 import AppBranchResolution from '/@/components/templates/app/AppBranchResolution'
 import AppDeployInfo from '/@/components/templates/app/AppDeployInfo'
-import AppInfoLists from '/@/components/templates/app/AppInfoLists'
 import AppLatestBuilds from '/@/components/templates/app/AppLatestBuilds'
 import { AppMetrics } from '/@/components/templates/app/AppMetrics'
 import { ContainerLog } from '/@/components/templates/app/ContainerLog'
@@ -222,16 +221,6 @@ export default () => {
                   />
                 </Show>
               </DataTable.Container>
-              <DataTable.Container>
-                <DataTable.Title>Information</DataTable.Title>
-                <AppInfoLists
-                  app={app()!}
-                  commits={commits()}
-                  refreshCommit={refreshCommit}
-                  disableRefreshCommit={disableRefreshCommit()}
-                  hasPermission={hasPermission()}
-                />
-              </DataTable.Container>
               <Show when={app()?.deployType === DeployType.RUNTIME && hasPermission()}>
                 <DataTable.Container>
                   <DataTable.Title>Usage</DataTable.Title>

From e626ac15a07d4961714158504392e8914017a73f Mon Sep 17 00:00:00 2001
From: motoki317 <motoki317@gmail.com>
Date: Wed, 17 Apr 2024 18:05:22 +0900
Subject: [PATCH 5/5] Move app last edited

---
 dashboard/src/components/templates/Nav.tsx    |  1 -
 .../templates/app/AppDeployInfo.tsx           |  8 +--
 .../src/components/templates/app/AppNav.tsx   | 50 ++++++++++++++++++-
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/components/templates/Nav.tsx b/dashboard/src/components/templates/Nav.tsx
index 95c3a69f..ded01d57 100644
--- a/dashboard/src/components/templates/Nav.tsx
+++ b/dashboard/src/components/templates/Nav.tsx
@@ -56,7 +56,6 @@ const Titles = styled('div', {
 })
 const Title = styled('h1', {
   base: {
-    width: '100%',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
diff --git a/dashboard/src/components/templates/app/AppDeployInfo.tsx b/dashboard/src/components/templates/app/AppDeployInfo.tsx
index b314cb29..72a8084d 100644
--- a/dashboard/src/components/templates/app/AppDeployInfo.tsx
+++ b/dashboard/src/components/templates/app/AppDeployInfo.tsx
@@ -285,8 +285,8 @@ const AppDeployInfo: Component<{
           </List.RowContent>
           <JumpButton href={`/apps/${props.app.id}/settings/urls`} tooltip="設定を変更" />
         </DeployInfo>
-        <DeployInfo long>
-          <Show when={props.app.deployType === DeployType.RUNTIME}>
+        <Show when={props.app.deployType === DeployType.RUNTIME}>
+          <DeployInfo long>
             <List.RowContent>
               <List.RowTitle>SSH Access</List.RowTitle>
               <Code value={sshAccessCommand()} copyable />
@@ -294,8 +294,8 @@ const AppDeployInfo: Component<{
                 <List.RowData>現在アプリが起動していないためSSHアクセスはできません</List.RowData>
               </Show>
             </List.RowContent>
-          </Show>
-        </DeployInfo>
+          </DeployInfo>
+        </Show>
       </InfoContainer>
     </DeploymentContainer>
   )
diff --git a/dashboard/src/components/templates/app/AppNav.tsx b/dashboard/src/components/templates/app/AppNav.tsx
index fae5d59a..b0914500 100644
--- a/dashboard/src/components/templates/app/AppNav.tsx
+++ b/dashboard/src/components/templates/app/AppNav.tsx
@@ -1,9 +1,13 @@
+import { style } from '@macaron-css/core'
 import { styled } from '@macaron-css/solid'
 import { A } from '@solidjs/router'
-import type { Component } from 'solid-js'
+import { BiRegularPencil } from 'solid-icons/bi'
+import { type Component, Show } from 'solid-js'
 import type { Application, Repository } from '/@/api/neoshowcase/protobuf/gateway_pb'
 import { MaterialSymbols } from '/@/components/UI/MaterialSymbols'
+import { ToolTip } from '/@/components/UI/ToolTip'
 import { originToIcon, repositoryURLToOrigin } from '/@/libs/application'
+import { diffHuman } from '/@/libs/format'
 import { colorVars, textVars } from '/@/theme'
 import { Nav } from '../Nav'
 
@@ -21,6 +25,7 @@ const RepositoryInfoContainer = styled('div', {
     ...textVars.text.regular,
   },
 })
+
 const RepositoryInfo = styled('div', {
   base: {
     width: '100%',
@@ -31,6 +36,7 @@ const RepositoryInfo = styled('div', {
     overflowX: 'hidden',
   },
 })
+
 const RepositoryName = styled('div', {
   base: {
     width: '100%',
@@ -40,12 +46,52 @@ const RepositoryName = styled('div', {
   },
 })
 
+const rowFlex = style({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '4px',
+})
+
+const rightFit = style({
+  width: 'fit-content',
+  marginLeft: 'auto',
+  textAlign: 'right',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+})
+
+const center = style({
+  display: 'flex',
+  alignItems: 'center',
+})
+
 export const AppNav: Component<{
   app: Application
   repository: Repository
 }> = (props) => {
+  const edited = (
+    <div class={`${rowFlex} ${rightFit} ${center}`}>
+      <BiRegularPencil />
+      <Show when={props.app.updatedAt}>
+        {(nonNullUpdatedAt) => {
+          const { diff, localeString } = diffHuman(nonNullUpdatedAt().toDate())
+          return (
+            <ToolTip props={{ content: `App Last Edited: ${localeString}` }}>
+              <div>{diff}</div>
+            </ToolTip>
+          )
+        }}
+      </Show>
+    </div>
+  )
+
   return (
-    <Nav title={props.app.name} icon={<MaterialSymbols displaySize={40}>deployed_code</MaterialSymbols>}>
+    <Nav
+      title={props.app.name}
+      icon={<MaterialSymbols displaySize={40}>deployed_code</MaterialSymbols>}
+      action={edited}
+    >
       <RepositoryInfoContainer>
         created from
         <A