Conditionally hide the "add project resource" button

web/app/components/doc/tile-medium.hbs

@@ -67,7 +67,7 @@
             @route="authenticated.documents"
             @query={{hash owners=(array (get @doc.owners 0))}}
             disabled={{not (get @doc.owners 0)}}
-            class="underlined-link"
+            class="underline-on-hover"
           >
             {{or (get @doc.owners 0) "Unknown"}}
           </LinkTo>
@@ -78,7 +78,7 @@
           <ProductLink
             @product={{@doc.product}}
             tabindex="-1"
-            class="underlined-link"
+            class="underline-on-hover"
           >
             <:default>
               {{@doc.product}}
@@ -88,7 +88,7 @@
             |
           </span>
           {{! Created time }}
-          <span class="text-color-foreground-disabled">
+          <span>
             {{time-ago @doc.createdTime}}
           </span>
         </div>

web/app/components/header/nav.hbs

@@ -8,7 +8,7 @@
       <LinkTo
         data-test-nav-link="projects"
         @route="authenticated.projects"
-        @current-when="authenticated.projects"
+        @current-when="authenticated.projects.index"
         @query={{this.defaultProjectsScreenQueryParams}}
       >
         Projects

web/app/components/project/index.hbs

@@ -1,144 +1,160 @@
-<div class="project-header mt-1 flex w-full justify-between">
+<div class="relative">
 
-  <div class="flex h-9 items-center gap-1">
-    <div class="flex w-9 justify-center">
-      {{! Placeholder until we have ProductAvatars  }}
-      <FlightIcon @name="grid" @size="24" />
+  <div class="project-header mt-1 flex w-full">
+    <div class="flex h-9 w-full justify-between">
+      <div class="flex items-center gap-1.5 text-color-foreground-faint">
+        <LinkTo
+          @route="authenticated.projects"
+          @query={{hash status="active"}}
+          {{tooltip "View all projects"}}
+          class="flex rounded-button-md p-1 hover:bg-color-surface-interactive-hover focus:bg-color-surface-interactive-hover"
+        >
+          <FlightIcon @name="grid" />
+        </LinkTo>
+        <h5 class="hermes-h4 mr-1.5">Project</h5>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="font-bold">Status:</span>
+        <X::DropdownList
+          @items={{this.statuses}}
+          @placement="bottom-end"
+          @selected={{this.status}}
+          @onItemClick={{this.changeStatus}}
+          class="theme--neutral"
+        >
+          <:anchor as |dd|>
+            <dd.ToggleAction
+              data-test-project-status-toggle
+              class="hds-button hds-button--size-medium hds-button--color-secondary pill-button border-color-border-strong"
+              @hasChevron={{true}}
+            >
+              <Project::StatusIcon @status={{dd.selected}} />
+              <span class="ml-1 mr-0.5">
+                {{this.statusLabel}}
+              </span>
+            </dd.ToggleAction>
+          </:anchor>
+          <:item as |dd|>
+            <dd.Action data-test-status-action={{dd.value}}>
+              <X::DropdownList::CheckableItem
+                @isSelected={{dd.isSelected}}
+                @checkmarkPosition="trailing"
+              >
+                <:default>
+                  <div class="flex items-center gap-2 pl-1.5">
+                    <Project::StatusIcon @status={{dd.value}} />
+                    <span>
+                      {{dd.attrs.label}}
+                    </span>
+                  </div>
+                </:default>
+              </X::DropdownList::CheckableItem>
+            </dd.Action>
+          </:item>
+        </X::DropdownList>
+        <CopyURLButton
+          @isIconOnly={{true}}
+          @url={{this.url}}
+          class="hds-button hds-button--color-secondary pill-button h-9 w-9 justify-center border-color-border-strong p-0"
+        />
+      </div>
     </div>
   </div>
 
-  <div class="flex h-9 gap-1.5">
-    <div class="flex gap-2.5">
+  <AnimatedContainer @motion={{this.motion}}>
+    <div class="pb-6">
+      <div class="relative z-20 max-w-3xl pb-5">
+        <AnimatedContainer @motion={{this.motion}}>
 
-      <span class="self-center text-color-foreground-faint">
-        Status:
-      </span>
+          {{! Title }}
+          <div class="mt-7 flex">
+            <EditableField
+              class="project-title text-display-600"
+              data-test-project-title
+              @value={{this.title}}
+              @tag="h1"
+              @placeholder="Add project title"
+              @buttonSize="medium"
+              @onSave={{this.saveTitle}}
+              @isReadOnly={{not this.projectIsActive}}
+              @isRequired={{true}}
+              @isSaving={{this.titleIsSaving}}
+            />
+          </div>
 
-      <X::DropdownList
-        @items={{this.statuses}}
-        @placement="bottom"
-        @selected={{this.status}}
-        class="theme--neutral"
-      >
-        <:anchor as |dd|>
-          <dd.ToggleAction
-            data-test-project-status-toggle
-            class="hds-button hds-button--size-medium hds-button--color-secondary pill-button border-color-border-strong"
-            @hasChevron={{true}}
-          >
-            <Project::StatusIcon @status={{dd.selected}} />
-            <span class="ml-1 mr-0.5">
-              {{this.statusLabel}}
-            </span>
-          </dd.ToggleAction>
-        </:anchor>
-        <:item as |dd|>
-          <dd.Action
-            data-test-status-action={{dd.value}}
-            {{on "click" (fn this.changeStatus dd.value)}}
-          >
-            <X::DropdownList::CheckableItem
-              @isSelected={{dd.isSelected}}
-              @checkmarkPosition="trailing"
-              class=""
-            >
-              <:default>
-                <div class="flex items-center gap-2 pl-1.5">
-                  <Project::StatusIcon @status={{dd.value}} />
-                  <span>
-                    {{dd.attrs.label}}
-                  </span>
-                </div>
-              </:default>
-            </X::DropdownList::CheckableItem>
-          </dd.Action>
-        </:item>
-      </X::DropdownList>
-    </div>
+          {{#animated-if
+            (or this.description this.projectIsActive)
+            rules=this.descriptionTransitionRules
+          }}
+            {{! Description }}
+            <div class="flex">
+              <EditableField
+                class="project-description"
+                data-test-project-description
+                @value="{{this.description}}"
+                @onSave={{this.saveDescription}}
+                @isReadOnly={{not this.projectIsActive}}
+                @isSaving={{this.descriptionIsSaving}}
+                @placeholder="Add a description"
+                @buttonSize="medium"
+              />
+            </div>
+          {{/animated-if}}
+        </AnimatedContainer>
 
-    <CopyURLButton
-      @isIconOnly={{true}}
-      @url={{this.url}}
-      class="hds-button hds-button--color-secondary pill-button w-9 justify-center border-color-border-strong p-0"
-    />
+      </div>
 
-  </div>
-</div>
-<div class="relative z-20 max-w-3xl pb-5">
+      {{#if this.jiraIsEnabled}}
+        <AnimatedContainer
+          @motion={{this.motion}}
+          {{did-insert this.maybeLoadJiraInfo}}
+        >
+          {{! Jira }}
+          {{#animated-if this.jiraWidgetIsShown rules=this.jiraTransitionRules}}
+            <div class="mt-5 w-full">
+              <Project::JiraWidget
+                @issue={{this.jiraIssue}}
+                @onIssueRemove={{this.removeJiraIssue}}
+                @onIssueSelect={{this.addJiraIssue}}
+                @isLoading={{this.loadJiraIssue.isRunning}}
+                @isReadOnly={{not this.projectIsActive}}
+              />
+            </div>
+          {{/animated-if}}
+        </AnimatedContainer>
+      {{/if}}
+
+      {{! Plus button }}
+      <RelatedResources
+        @modalHeaderTitle="Add project resource"
+        @modalInputPlaceholder="Search docs or paste a URL..."
+        @addResource={{this.addResource}}
+      >
+        <:header as |rr|>
+          {{#animated-if
+            this.projectIsActive
+            rules=this.plusButtonTransitionRules
+            initialInsertion=true
+            finalRemoval=true
+          }}
+            <Action
+              data-test-add-project-resource-button
+              {{on "click" rr.showModal}}
+              class="hds-button hds-button--color-primary add-project-resource-button pill-button pointer-events-auto absolute right-14 -bottom-10 z-10 grid h-20 w-20 place-items-center"
+            >
+              <FlightIcon @name="plus" @size="24" class="relative h-9 w-9" />
+            </Action>
+          {{/animated-if}}
+        </:header>
+      </RelatedResources>
 
-  {{! Title }}
-  <div class="mt-7 flex">
-    <EditableField
-      class="project-title text-display-600"
-      data-test-project-title
-      @value={{this.title}}
-      @tag="h1"
-      @placeholder="Add project title"
-      @buttonSize="medium"
-      @onSave={{this.saveTitle}}
-      @isReadOnly={{not this.projectIsActive}}
-      @isRequired={{true}}
-      @isSaving={{this.titleIsSaving}}
-    />
-  </div>
-  {{#if (or this.projectIsActive this.description)}}
-    {{! Description }}
-    <div class="flex">
-      <EditableField
-        class="project-description"
-        data-test-project-description
-        @value="{{this.description}}"
-        @onSave={{this.saveDescription}}
-        @isReadOnly={{not this.projectIsActive}}
-        @isSaving={{this.descriptionIsSaving}}
-        @placeholder="Add a description"
-        @buttonSize="medium"
-      />
     </div>
-  {{/if}}
+  </AnimatedContainer>
 </div>
 
-{{#if this.jiraIsEnabled}}
-  <div {{did-insert this.maybeLoadJiraInfo}}>
-    {{#if this.jiraWidgetIsShown}}
-      {{! Jira }}
-      <div class="mt-5 flex w-full max-w-3xl">
-        <Project::JiraWidget
-          @issue={{this.jiraIssue}}
-          @onIssueRemove={{this.removeJiraIssue}}
-          @onIssueSelect={{this.addJiraIssue}}
-          @isLoading={{this.loadJiraIssue.isRunning}}
-          @isReadOnly={{not this.projectIsActive}}
-        />
-      </div>
-    {{/if}}
-  </div>
-{{/if}}
-
-<div class="relative mt-6 border-t border-t-color-border-primary">
-
-  {{! Plus button }}
-  <RelatedResources
-    @items={{this.relatedResources}}
-    @modalHeaderTitle="Add project resource"
-    @modalInputPlaceholder="Search docs or paste a URL..."
-    @addResource={{this.addResource}}
-  >
-    <:header as |rr|>
-      <div class="sticky top-24 -mb-20 pr-14">
-        <div class="pointer-events-none -translate-y-1/2">
-          <Action
-            data-test-add-project-resource-button
-            {{on "click" rr.showModal}}
-            class="hds-button hds-button--color-primary add-project-resource-button pill-button pointer-events-auto ml-auto grid h-20 w-20 place-items-center"
-          >
-            <FlightIcon @name="plus" @size="24" class="h-9 w-9" />
-          </Action>
-        </div>
-      </div>
-    </:header>
-  </RelatedResources>
-
+<div
+  class="relative border-t border-t-color-border-primary bg-color-page-primary"
+>
   {{! Resources }}
   <div class="max-w-3xl">
     {{#if (or this.hermesDocuments.length this.externalLinks.length)}}
@@ -167,7 +183,10 @@
                   )
                 }}
               >
-                <Doc::TileMedium @doc={{document}} />
+                <Doc::TileMedium
+                  @doc={{document}}
+                  @avatarIsLoading={{this.getOwnerPhoto.isRunning}}
+                />
               </Project::Resource>
             </li>
           {{/each}}
@@ -236,6 +255,7 @@
         data-test-empty-body
         class="mt-7 flex h-48 flex-col items-start justify-center"
       >
+        {{! TODO: this doesn't make sense for completed/archived projects }}
         <div class="text-display-300 font-bold text-color-foreground-strong">
           Nothing here yet
         </div>