chore: 🤖 Integrate tab rose component into ui/core

addons/rose/addon/styles/rose/components/nav/_tab.scss

@@ -19,7 +19,7 @@
       color: var(--ui-gray-subtler-2);
     }
 
-    &:active {
+    &:active, &.active {
       color: var(--action);
       border-color: var(--action);
       background-color: var(--subtle);

ui/core/app/styles/app.scss

@@ -64,4 +64,12 @@
       width: 100%;
     }
   }
+
+  .tabs {
+    border-bottom: 2px solid #bac1cc;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    margin-bottom: 10px;
+  }
 }

ui/core/app/templates/orgs/org/projects/project.hbs

@@ -7,7 +7,11 @@
     <LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
   </div>
 
-  <h2>{{@model.name}}</h2>
+  <h2>{{t "resources.project.settings"}}</h2>
+
+  <div class="tabs">
+    <Rose::Nav::Tab @title={{t "nav.overview"}} @route='orgs.org.projects.project' @model={{@model}} />
+  </div>
 
   <Form::Project
     @model={{@model}}

ui/core/translations/en-us.yaml

@@ -5,6 +5,8 @@ actions:
   save: Save
 resources:
   projects: Projects
+  project:
+    settings: Project Settings
 titles:
   new: New
 states:
@@ -16,6 +18,8 @@ form:
   label:
     name: Name
     description: Description
+nav:
+  overview: Overview
 dev:
   default-org: Default Org
   menu-item: Menu item