Dashboard/refactor app info

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

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',

dashboard/src/components/templates/app/AppInfoLists.tsx → dashboard/src/components/templates/app/AppBranchResolution.tsx

@@ -5,27 +5,31 @@ 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'
-import { List } from '../List'
 
-const DataRow = styled('div', {
+const DataRows = styled('div', {
   base: {
+    width: '100%',
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column',
+    alignContent: 'left',
     gap: '4px',
-    alignItems: 'center',
   },
 })
 
-const DataRows = styled('div', {
+const DataRow = styled('div', {
   base: {
+    width: '100%',
     display: 'flex',
-    flexDirection: 'column',
-    alignContent: 'left',
+    flexDirection: 'row',
+    gap: '4px',
+    alignItems: 'center',
   },
 })
 
@@ -34,43 +38,54 @@ const greyText = style({
   ...textVars.caption.regular,
 })
 
-const AppInfoLists: Component<{
+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 sshAccessCommand = () => `ssh -p ${systemInfo()?.ssh?.port} ${props.app.id}@${systemInfo()?.ssh?.host}`
-
   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 (
-        <DataRow>
-          <AiOutlineBranches />
-          <div>{`${props.app.refName} (${shortSha(props.app.commit)})`}</div>
-        </DataRow>
-      )
+      return base
     }
 
     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)}
+        {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>
     )
@@ -79,26 +94,8 @@ 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>
-            <List.RowData>{commitDisplay()}</List.RowData>
-          </List.RowContent>
+          <List.RowContent class={shrinkFirst}>{commitDisplay()}</List.RowContent>
           <Show when={props.hasPermission}>
             <Button
               variants="ghost"
@@ -120,20 +117,11 @@ const AppInfoLists: Component<{
               Refresh Commit
             </Button>
           </Show>
+          <JumpButton href={`/apps/${props.app.id}/settings`} tooltip="設定を変更" />
         </List.Row>
-        <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
+
+export default AppBranchResolution

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`} />
+          <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>
@@ -271,7 +266,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,13 +283,16 @@ 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 !== ''}>
+        <Show when={props.app.deployType === DeployType.RUNTIME}>
           <DeployInfo long>
             <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>

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