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] 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