Move app last edited

traPtitech · Apr 17, 2024 · 9159563 · 9159563
1 parent 0029cc3
commit 9159563
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 7 deletions.
diff --git 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
@@ -285,17 +285,17 @@ 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 />
               <Show when={deploymentState(props.app) !== ApplicationState.Running}>
                 <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
@@ -1,11 +1,15 @@
 import { styled } from '@macaron-css/solid'
 import { A } from '@solidjs/router'
-import type { Component } from 'solid-js'
+import { Component, Show } from 'solid-js'
 import type { Application, Repository } from '/@/api/neoshowcase/protobuf/gateway_pb'
 import { MaterialSymbols } from '/@/components/UI/MaterialSymbols'
 import { originToIcon, repositoryURLToOrigin } from '/@/libs/application'
 import { colorVars, textVars } from '/@/theme'
 import { Nav } from '../Nav'
+import { style } from '@macaron-css/core'
+import { BiRegularPencil } from 'solid-icons/bi'
+import { diffHuman } from '/@/libs/format'
+import { ToolTip } from '/@/components/UI/ToolTip'
 
 const RepositoryInfoContainer = styled('div', {
   base: {
@@ -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,48 @@ 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