feat(styles): update summary page

packages/ui/locales/en/views.json

@@ -116,14 +116,16 @@
     "general": "General",
     "codeAutomation": "Code and automation",
     "webhooks": "Webhooks",
-    "clone": "Clone",
     "cloneRepo": "Clone repository",
     "cloneHttps": "HTTPS",
     "cloneSsh": "SSH",
+    "gitCloneUrl": "Git clone URL",
     "generateCredential": "Please generate a clone credential if its your first time.",
-    "addFile": "Add file",
     "readme": "README.md",
+    "editReadme": "Edit README.md",
     "openPullReq": "Open pull requests",
+    "clone": "Clone",
+    "addFile": "Add file",
     "enableWebhookToggle": "Enable the webhook",
     "toggleDescription": "We will deliver event details when this hook is triggered",
     "desciptionPlaceholder": "Enter a description of this rule...",

packages/ui/locales/es/views.json

@@ -116,14 +116,16 @@
     "general": "General",
     "codeAutomation": "Code and automation",
     "webhooks": "Webhooks",
-    "clone": "Clone",
     "cloneRepo": "Clone repository",
     "cloneHttps": "HTTPS",
     "cloneSsh": "SSH",
+    "gitCloneUrl": "Git clone URL",
     "generateCredential": "Please generate a clone credential if its your first time.",
-    "addFile": "Add file",
     "readme": "README.md",
+    "editReadme": "Edit README.md",
     "openPullReq": "Open pull requests",
+    "clone": "Clone",
+    "addFile": "Add file",
     "enableWebhookToggle": "Enable the webhook",
     "toggleDescription": "We will deliver event details when this hook is triggered",
     "desciptionPlaceholder": "Enter a description of this rule...",

packages/ui/locales/fr/views.json

@@ -116,14 +116,16 @@
     "general": "Général",
     "codeAutomation": "Automatisation du code",
     "webhooks": "Webhooks",
-    "clone": "Cloner",
     "cloneRepo": "Cloner le dépôt",
     "cloneHttps": "HTTPS",
     "cloneSsh": "SSH",
+    "gitCloneUrl": "Git clone URL",
     "generateCredential": "Veuillez générer un identifiant de clonage si c'est la première fois.",
-    "addFile": "Ajouter un fichier",
     "readme": "README.md",
+    "editReadme": "Edit README.md",
     "openPullReq": "Requêtes de tirage ouvertes",
+    "clone": "Cloner",
+    "addFile": "Ajouter un fichier",
     "enableWebhookToggle": "Activer le webhook",
     "toggleDescription": "Nous enverrons les détails lorsque ce webhook sera déclenché",
     "desciptionPlaceholder": "Entrez une description de cette règle...",

packages/ui/src/components/copy-button.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, MouseEvent, useEffect, useState } from 'react'
 
 import { Button, ButtonProps, Icon } from '@/components'
 import copy from 'clipboard-copy'
@@ -8,11 +8,23 @@ export interface CopyButtonProps {
   className?: string
   buttonVariant?: ButtonProps['variant']
   iconSize?: number
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
 }
 
-export const CopyButton: FC<CopyButtonProps> = ({ name, className, buttonVariant = 'custom', iconSize = 16 }) => {
+export const CopyButton: FC<CopyButtonProps> = ({
+  name,
+  className,
+  buttonVariant = 'custom',
+  iconSize = 16,
+  onClick
+}) => {
   const [copied, setCopied] = useState(false)
 
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    onClick?.(e)
+    setCopied(true)
+  }
+
   useEffect(() => {
     let timeoutId: number
 
@@ -29,8 +41,8 @@ export const CopyButton: FC<CopyButtonProps> = ({ name, className, buttonVariant
   const changeIcon = copied ? 'tick' : 'clone'
 
   return (
-    <Button className={className} variant={buttonVariant} size="icon" aria-label="Copy" onClick={() => setCopied(true)}>
-      <Icon name={changeIcon} size={iconSize} className="text-icons-3" />
+    <Button className={className} variant={buttonVariant} size="icon" aria-label="Copy" onClick={handleClick}>
+      <Icon className="text-icons-3" name={changeIcon} size={iconSize} />
     </Button>
   )
 }

packages/ui/src/components/dialog.tsx

@@ -64,7 +64,7 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
             {mainContent}
           </div>
           {footer}
-          <DialogPrimitive.Close className="absolute right-4 top-[18px] disabled:pointer-events-none" asChild>
+          <DialogPrimitive.Close className="absolute right-3 top-[18px] disabled:pointer-events-none" asChild>
             <Button size="icon" variant="custom" className="text-icons-4 hover:text-icons-2">
               <Icon name="close" size={16} />
               <span className="sr-only">Close</span>

packages/ui/src/views/repo/components/token-dialog/clone-credential-dialog.tsx

@@ -1,3 +1,4 @@
+import { FC } from 'react'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
@@ -35,7 +36,7 @@ const formSchema = z.object({
 
 export type TCloneCredentialsDialog = z.infer<typeof formSchema>
 
-export const CloneCredentialDialog: React.FC<CloneCredentialDialogProps> = ({
+export const CloneCredentialDialog: FC<CloneCredentialDialogProps> = ({
   open,
   onClose,
   toManageToken,
@@ -49,36 +50,43 @@ export const CloneCredentialDialog: React.FC<CloneCredentialDialogProps> = ({
   })
   return (
     <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="max-w-[576px]">
+      <DialogContent className="max-w-xl">
         <DialogHeader>
           <DialogTitle>{t('views:repos.cloneCredential', 'Generate Clone Credential')}</DialogTitle>
         </DialogHeader>
-        <form className="flex flex-col gap-y-7 pb-4">
+        <form className="flex flex-col gap-y-7">
           {/* NAME */}
 
           <Input
+            className="py-px"
             id="identifier"
             label={t('views:repos.name')}
             value={tokenData?.identifier}
             readOnly
             variant="extended"
             rightElementVariant="default"
-            rightElement={<CopyButton name={tokenData?.identifier} />}
+            rightElement={<CopyButton name={tokenData?.identifier} onClick={e => e.preventDefault()} />}
           />
 
-          <Input id="lifetime" label={t('views:repos.expiration')} value={tokenData?.lifetime} readOnly />
+          <Input
+            className="py-px"
+            id="lifetime"
+            label={t('views:repos.expiration')}
+            value={tokenData?.lifetime}
+            readOnly
+          />
 
           {/* Expiration Info */}
           <Input
+            className="py-px truncate"
             id="token"
             label={t('views:repos.token')}
             variant="extended"
             value={tokenData?.token}
             readOnly
             rightElementVariant="default"
-            rightElement={<CopyButton name={tokenData?.token} />}
+            rightElement={<CopyButton name={tokenData?.token} onClick={e => e.preventDefault()} />}
             autoFocus
-            className="truncate"
           />
 
           <span>{t('views:repos.cloneCredGenerated')}</span>

packages/ui/src/views/repo/repo-summary/components/clone-repo-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { FC, useState } from 'react'
 
 import {
   Button,
@@ -27,7 +27,7 @@ export enum CloneRepoTabs {
   SSH = 'ssh'
 }
 
-export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
+export const CloneRepoDialog: FC<CloneRepoDialogProps> = ({
   httpsUrl,
   sshUrl,
   handleCreateToken,
@@ -39,30 +39,30 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button>
-          <Icon name="clone" />
-          &nbsp; {t('views:repos.clone', 'Clone')}
+        <Button className="gap-x-2 items-center pl-5 pr-2.5">
+          {t('views:repos.cloneRepo', 'Clone repository')}
+          <Icon name="chevron-down" size={12} className="text-icons-5" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-[328px] p-0" align="end">
-        <div className="px-4 pt-4">
-          <span className="text-14 font-medium leading-none">{t('views:repos.cloneRepo', 'Clone repository')}</span>
+      <DropdownMenuContent className="w-[328px] p-0 shadow-2" align="end">
+        <div className="px-4 pt-4 leading-none">
+          <span className="text-14 font-medium inline-block">{t('views:repos.cloneRepo', 'Clone repository')}</span>
         </div>
         <Tabs
-          className="mt-2"
+          className="mt-4"
           variant="branch"
           value={currentTab}
           onValueChange={val => setCurrentTab(val as CloneRepoTabs)}
         >
-          <TabsList>
+          <TabsList className="px-4">
             <DropdownMenuItem
               className="rounded-t-md p-0"
               onSelect={e => {
                 e.preventDefault()
                 setCurrentTab(CloneRepoTabs.HTTPS)
               }}
             >
-              <TabsTrigger className="data-[state=active]:bg-background-2" value={CloneRepoTabs.HTTPS}>
+              <TabsTrigger className="data-[state=active]:bg-background-2 px-4" value={CloneRepoTabs.HTTPS}>
                 {t('views:repos.cloneHttps', 'HTTPS')}
               </TabsTrigger>
             </DropdownMenuItem>
@@ -74,7 +74,7 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
               }}
             >
               <TabsTrigger
-                className="data-[state=active]:bg-background-2"
+                className="data-[state=active]:bg-background-2 px-4"
                 value={CloneRepoTabs.SSH}
                 onClick={e => e.stopPropagation()}
               >
@@ -83,20 +83,25 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
             </DropdownMenuItem>
           </TabsList>
         </Tabs>
-        <div className="px-5 py-4">
+        <div className="p-4">
+          <div className="flex items-center mb-2.5">
+            <span className="text-foreground-2 leading-none inline-block">
+              {t('views:repos.gitCloneUrl', 'Git clone URL')}
+            </span>
+          </div>
           {currentTab === 'https' ? (
             <>
               <Input
+                className="text-foreground-1 py-px"
                 id="httpsUrl"
                 readOnly
                 value={httpsUrl}
                 variant="extended"
-                className="text-foreground-2"
                 rightElementVariant="default"
                 rightElement={<CopyButton name={httpsUrl} />}
               />
               <div className="flex items-center mt-4">
-                <span className="text-foreground-4">
+                <span className="text-foreground-4 leading-snug">
                   {t('views:repos.generateCredential', 'Please generate a clone credential if its your first time.')}
                 </span>
               </div>
@@ -108,10 +113,10 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
             </>
           ) : (
             <Input
+              className="text-foreground-1 py-px"
               id="sshUrl"
               readOnly
               value={sshUrl}
-              className="text-tertiary-background"
               variant="extended"
               rightElementVariant="default"
               rightElement={<CopyButton name={sshUrl} />}

packages/ui/src/views/repo/repo-summary/repo-summary.tsx

@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
-import { Link, useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
 import {
   Button,
   ButtonGroup,
+  FileAdditionsTrigger,
+  Icon,
   ListActions,
   MarkdownViewer,
   NoData,
@@ -96,7 +98,6 @@ export function RepoSummaryView({
   setSearchQuery,
   handleCreateToken
 }: RepoSummaryViewProps) {
-  const navigate = useNavigate()
   const { t } = useTranslationStore()
   const { repoId, spaceId, selectedBranchTag } = useRepoBranchesStore()
 
@@ -190,11 +191,12 @@ export function RepoSummaryView({
               </ListActions.Left>
               <ListActions.Right>
                 <ButtonGroup>
-                  <Button variant="outline" asChild>
-                    <Link to={`/${spaceId}/repos/${repoId}/code/new/${gitRef || selectedBranchTag?.name || ''}/~/`}>
-                      {t('views:repos.addFile', 'Add File')}
-                    </Link>
-                  </Button>
+                  <FileAdditionsTrigger
+                    useTranslationStore={useTranslationStore}
+                    pathNewFile={`/${spaceId}/repos/${repoId}/code/new/${gitRef || selectedBranchTag?.name || ''}/~/`}
+                    // TODO: set the actual file upload path
+                    pathUploadFiles={`/${spaceId}/repos/${repoId}/code/upload/${gitRef || selectedBranchTag?.name || ''}/~/`}
+                  />
                   <CloneRepoDialog
                     sshUrl={repository?.git_ssh_url ?? 'could not fetch url'}
                     httpsUrl={repository?.git_url ?? 'could not fetch url'}
@@ -231,12 +233,28 @@ export function RepoSummaryView({
             />
             <Spacer size={5} />
             <StackedList.Root>
-              <StackedList.Item isHeader disableHover>
+              <StackedList.Item className="py-2" isHeader disableHover>
                 <StackedList.Field
                   title={<Text color="tertiaryBackground">{t('views:repos.readme', 'README.md')}</Text>}
                 />
-                {/* TODO: add component and file editing logic */}
-                <StackedList.Field right />
+                <StackedList.Field
+                  right
+                  title={
+                    <Button
+                      className="flex border border-borders-1 hover:bg-background-3"
+                      variant="ghost"
+                      size="icon"
+                      asChild
+                    >
+                      <Link
+                        to={`/${spaceId}/repos/${repoId}/code/edit/${gitRef || selectedBranchTag?.name}/~/README.md`}
+                      >
+                        <Icon name="edit-pen" size={16} className="text-icons-3" />
+                        <span className="sr-only">{t('views:repos.editReadme', 'Edit README.md')}</span>
+                      </Link>
+                    </Button>
+                  }
+                />
               </StackedList.Item>
               <StackedList.Item disableHover>
                 <MarkdownViewer source={decodedReadmeContent || ''} />