From cd4ebe4ac7958187921644e9aa6644b47065c018 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Tue, 26 Dec 2023 03:51:30 -0300
Subject: [PATCH] frontend: improve Projects.tsx

---
 .../lib/twenty-backend/model/project.rb       |  7 +++++
 twenty-frontend/src/css/_colors.scss          |  1 +
 twenty-frontend/src/css/_lists.scss           | 12 +++++++--
 twenty-frontend/src/css/main.scss             | 20 ++++++++++++++
 .../src/js/components/Projects.tsx            | 27 +++++++++++++------
 twenty-frontend/src/layouts/default.html      |  9 ++++++-
 6 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/twenty-backend/lib/twenty-backend/model/project.rb b/twenty-backend/lib/twenty-backend/model/project.rb
index 44b9559..6be8248 100644
--- a/twenty-backend/lib/twenty-backend/model/project.rb
+++ b/twenty-backend/lib/twenty-backend/model/project.rb
@@ -15,4 +15,11 @@ class Twenty::Project < Twenty::Model
   def to_json(options = {})
     {id:, name:, path:}.to_json(options)
   end
+
+  ##
+  # @return [String]
+  #  The path to a project.
+  def path
+    super&.sub(Dir.home, "~")
+  end
 end
diff --git a/twenty-frontend/src/css/_colors.scss b/twenty-frontend/src/css/_colors.scss
index c770aa3..35c0574 100644
--- a/twenty-frontend/src/css/_colors.scss
+++ b/twenty-frontend/src/css/_colors.scss
@@ -2,3 +2,4 @@ $black: lighten(#000, 20%);
 $gray1: #f4f0ec;
 $gray2: lighten($gray1, 5%);
 $gray3: #cfcfc4;
+$blue: #008cff;
diff --git a/twenty-frontend/src/css/_lists.scss b/twenty-frontend/src/css/_lists.scss
index be2bda2..15671fa 100644
--- a/twenty-frontend/src/css/_lists.scss
+++ b/twenty-frontend/src/css/_lists.scss
@@ -16,7 +16,7 @@ ul.items {
       justify-content: space-between;
       $blue: #008cff;
       color: $blue;
-      padding: 10px 10px 0px 10px;
+      padding: 10px 10px 5px 10px;
       border: 1px solid #FFF;
       &:hover {
         background: $gray1;
@@ -30,7 +30,7 @@ ul.items {
         flex-wrap: wrap;
         width: 100%;
       }
-      span.date {
+      span.date, span.path {
         font-size: small;
         color: $black;
       }
@@ -51,3 +51,11 @@ ul.items {
     animation-duration: 0.5s;
   }
 }
+
+ul.items.projects {
+  li.item {
+    a {
+      width: 100%;
+    }
+  }
+}
diff --git a/twenty-frontend/src/css/main.scss b/twenty-frontend/src/css/main.scss
index ac3ac1b..2ec3258 100644
--- a/twenty-frontend/src/css/main.scss
+++ b/twenty-frontend/src/css/main.scss
@@ -23,12 +23,32 @@ body header {
   background: $gray1;
   min-height: 40px;
   border-bottom: 1px solid $gray3;
+  .wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    ul.nav {
+      display: flex;
+      flex-direction: row;
+      list-style-type: none;
+      column-gap: 10px;
+      align-items: center;
+      li a {
+        &:hover {
+          color: $blue;
+          text-decoration: none;
+          font-weight: bold;
+        }
+      }
+    }
+  }
 }
 
 .pt-20 { padding-top: 20px; }
 .pb-20 { padding-bottom: 20px; }
 .mb-20 { margin-bottom: 20px; }
 .mb-50 { margin-bottom: 50px; }
+.w-100 { width: 100%; }
 
 .max-width {
   width: 75%;
diff --git a/twenty-frontend/src/js/components/Projects.tsx b/twenty-frontend/src/js/components/Projects.tsx
index 67374ec..d94a50a 100644
--- a/twenty-frontend/src/js/components/Projects.tsx
+++ b/twenty-frontend/src/js/components/Projects.tsx
@@ -4,13 +4,24 @@ import { useProjects } from "/hooks/useProjects";
 export function Projects() {
   const projects = useProjects();
   return (
-    <>
-      <span>Projects</span>
-      <ul className="projects">
-        {projects.map((project, i) => {
-          return <li key={i}>{project.name}</li>;
-        })}
-      </ul>
-    </>
+    <div className="table">
+      <div className="table div">
+        <span>Projects</span>
+      </div>
+      <div className="table content">
+        <ul className="items projects">
+          {projects.map((project, i) => {
+            return (
+              <li className="item" key={i}>
+                <a href={`/tasks#project_id=${project.id}`}>
+                  <span>{project.name}</span>
+                  <span className="path">{project.path}</span>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
   );
 }
diff --git a/twenty-frontend/src/layouts/default.html b/twenty-frontend/src/layouts/default.html
index 1b8b814..d145933 100644
--- a/twenty-frontend/src/layouts/default.html
+++ b/twenty-frontend/src/layouts/default.html
@@ -8,10 +8,17 @@
   </head>
   <body>
     <header class="mb-50">
-      <div class="align-center max-width">
+      <div class="align-center max-width wrapper">
         <a href="/">
           <img width=48 height=48 src="/favicon.svg"/>
         </a>
+        <ul class="nav">
+          <li>
+            <a href="/projects">Projects</a>
+          <li>
+            <a href="/tasks">Tasks</a>
+          </li>
+        </ul>
       </div>
     </header>
     <%= yield %>