From ec5429a85cddcebe6f8f554f8341b70f152e5b9b Mon Sep 17 00:00:00 2001
From: Everett <evv.info@gmail.com>
Date: Wed, 18 Oct 2023 12:32:39 +0200
Subject: [PATCH] truncate (...) long project name (closes #540) (#670)

* fix: add back button to funder flow, first step

* style: project header truncates long names; edit button in NW corner on mobile

* style: dont truncate project title in header

* style: improve project profile column layout; project-badge max-width is prop number

---------

Co-authored-by: Jason Efstathiou <j@jason-e.dev>
---
 src/lib/components/copyable/copyable.svelte   |  6 +-
 .../project-badge/project-badge.svelte        |  2 +
 .../project-profile-header.svelte             | 53 ++++++--------
 src/lib/components/section/section.svelte     | 10 +--
 .../supporters.section.svelte                 | 10 +--
 .../unclaimed-project-card.svelte             |  2 +-
 .../project-profile/project-profile.svelte    | 71 ++++++++-----------
 .../streams/sections/splits.section.svelte    | 10 +--
 .../claim-project/steps/review/review.svelte  |  8 ++-
 src/styles/app.css                            |  6 ++
 10 files changed, 73 insertions(+), 105 deletions(-)

diff --git a/src/lib/components/copyable/copyable.svelte b/src/lib/components/copyable/copyable.svelte
index 59f116370..47d07ac96 100644
--- a/src/lib/components/copyable/copyable.svelte
+++ b/src/lib/components/copyable/copyable.svelte
@@ -28,7 +28,10 @@
   on:mouseenter={() => (visible = true)}
   on:mouseleave={() => (visible = false)}
 >
-  <slot />
+  <!-- needs a .min-w-0 wrapper so slotted content that truncates can still truncate ("...") -->
+  <div class="min-w-0">
+    <slot />
+  </div>
   <div
     class="copy-icon"
     class:visible={!disabled && (visible || success || alwaysVisible)}
@@ -48,7 +51,6 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    justify-content: space-between;
   }
 
   .copy-icon {
diff --git a/src/lib/components/project-badge/project-badge.svelte b/src/lib/components/project-badge/project-badge.svelte
index add0772ed..ab345fcdf 100644
--- a/src/lib/components/project-badge/project-badge.svelte
+++ b/src/lib/components/project-badge/project-badge.svelte
@@ -18,6 +18,7 @@
   export let hideAvatar = false;
   export let linkToNewTab = false;
   export let linkTo: 'external-url' | 'project-page' | 'nothing' = 'project-page';
+  export let maxWidth: number | false = 320;
 
   let unclaimedProject: UnclaimedGitProject;
   $: unclaimedProject = {
@@ -38,6 +39,7 @@
     <svelte:element
       this={linkTo === 'nothing' ? 'div' : 'a'}
       class="project-badge flex gap-2 items-center typo-text"
+      style:max-width={maxWidth ? maxWidth + 'px' : 'none'}
       href={linkTo === 'project-page'
         ? buildProjectUrl(project.source)
         : buildExternalUrl(processedProject.source.url)}
diff --git a/src/lib/components/project-profile-header/project-profile-header.svelte b/src/lib/components/project-profile-header/project-profile-header.svelte
index f8b6bd9f5..080510c12 100644
--- a/src/lib/components/project-profile-header/project-profile-header.svelte
+++ b/src/lib/components/project-profile-header/project-profile-header.svelte
@@ -2,41 +2,32 @@
   import ProjectAvatar from '$lib/components/project-avatar/project-avatar.svelte';
   import ProjectBadge from '$lib/components/project-badge/project-badge.svelte';
   import type { GitProject } from '$lib/utils/metadata/types';
+  import { createEventDispatcher } from 'svelte';
+  import Button from '../button/button.svelte';
   import Copyable from '../copyable/copyable.svelte';
+  import Pen from 'radicle-design-system/icons/Pen.svelte';
 
   export let project: GitProject;
+  export let editButton: string | undefined = undefined;
+
+  const dispatch = createEventDispatcher<{ editButtonClick: never }>();
 </script>
 
-<div class="project-profile-header">
-  <div class="avatar">
-    <ProjectAvatar {project} size="huge" />
-  </div>
-  <div class="name">
-    <h1>{project.source.repoName}</h1>
-    <Copyable alwaysVisible={true} value={project.source.url}>
-      <ProjectBadge {project} forceUnclaimed tooltip={false} linkTo="external-url" />
-    </Copyable>
+<div class="flex flex-col gap-4 items-start sm:flex-row sm:justify-between relative">
+  <div class="max-w-full flex-1 min-w-0 flex flex-col gap-2 sm:flex-row sm:gap-8 sm:items-center">
+    <div class="avatar">
+      <ProjectAvatar {project} size="huge" />
+    </div>
+    <div class="flex-1 min-w-0 flex flex-col gap-1">
+      <h1>{project.source.repoName}</h1>
+      <Copyable alwaysVisible={true} value={project.source.url}>
+        <ProjectBadge {project} forceUnclaimed tooltip={false} linkTo="external-url" />
+      </Copyable>
+    </div>
   </div>
+  {#if editButton}
+    <div class="absolute top-0 right-0 sm:static">
+      <Button icon={Pen} on:click={() => dispatch('editButtonClick')}>{editButton}</Button>
+    </div>
+  {/if}
 </div>
-
-<style>
-  .project-profile-header {
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-  }
-
-  .name {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  @media (max-width: 577px) {
-    .project-profile-header {
-      flex-direction: column;
-      gap: 1rem;
-      align-items: flex-start;
-    }
-  }
-</style>
diff --git a/src/lib/components/section/section.svelte b/src/lib/components/section/section.svelte
index 4fe02ba50..3a3e488de 100644
--- a/src/lib/components/section/section.svelte
+++ b/src/lib/components/section/section.svelte
@@ -10,14 +10,14 @@
   export let collapsed = false;
 </script>
 
-<section style:margin-bottom={collapsed ? '-2rem' : 0}>
+<section class="app-section" style:margin-bottom={collapsed ? '-2rem' : 0}>
   <SectionHeader
     bind:collapsable
     bind:collapsed
     {...header}
     actionsDisabled={collapsed || header.actionsDisabled}
   />
-  <div class="content">
+  <div>
     <SectionSkeleton bind:collapsed {...skeleton}>
       <slot />
     </SectionSkeleton>
@@ -26,12 +26,6 @@
 
 <style>
   section {
-    display: flex;
-    flex-direction: column;
     transition: margin-bottom 0.3s ease;
   }
-
-  .content {
-    padding-top: 1.5rem;
-  }
 </style>
diff --git a/src/lib/components/supporters-section/supporters.section.svelte b/src/lib/components/supporters-section/supporters.section.svelte
index d1b0f72c8..7bdb4ca97 100644
--- a/src/lib/components/supporters-section/supporters.section.svelte
+++ b/src/lib/components/supporters-section/supporters.section.svelte
@@ -44,7 +44,7 @@
   }
 </script>
 
-<div class="section">
+<section class="app-section">
   <SectionHeader
     {infoTooltip}
     icon={Heart}
@@ -146,15 +146,9 @@
       <SectionSkeleton loaded={true} error={true} />
     {/await}
   {/if}
-</div>
+</section>
 
 <style>
-  .section {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-  }
-
   .lists {
     display: flex;
     flex-direction: column;
diff --git a/src/lib/components/unclaimed-project-card/unclaimed-project-card.svelte b/src/lib/components/unclaimed-project-card/unclaimed-project-card.svelte
index e7d63b3c5..ddc836031 100644
--- a/src/lib/components/unclaimed-project-card/unclaimed-project-card.svelte
+++ b/src/lib/components/unclaimed-project-card/unclaimed-project-card.svelte
@@ -47,7 +47,7 @@
 <div class="project-info" transition:fly|local={{ y: 8, duration: 300 }}>
   {#if project}
     <div class="basic-info">
-      <ProjectBadge linkToNewTab {project} />
+      <ProjectBadge linkToNewTab {project} maxWidth={false} />
       {#if projectMetadata?.description}
         <p class="description typo-text">
           {projectMetadata.description}
diff --git a/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte b/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte
index 51aa9886d..6f3f60031 100644
--- a/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte
+++ b/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte
@@ -113,8 +113,8 @@
 />
 
 <PrimaryColorThemer colorHex={project.owner ? project.color : undefined}>
-  <div class="project-profile" class:claimed={project.claimed}>
-    <div class="header">
+  <article class="project-profile" class:claimed={project.claimed}>
+    <header class="header">
       {#if project.owner}
         <div class="owner">
           <span class="typo-text" style:color="var(--color-foreground-level-5)"
@@ -157,16 +157,13 @@
           </AnnotationBox>
         </div>
       {/if}
-      <div class="project-profile-header">
-        <ProjectProfileHeader {project} />
-        {#if project.claimed && isOwnProject}
-          <Button
-            icon={Pen}
-            on:click={() =>
-              project.claimed && modal.show(Stepper, undefined, editProjectMetadataSteps(project))}
-            >Edit</Button
-          >
-        {/if}
+      <div>
+        <ProjectProfileHeader
+          {project}
+          editButton={project.claimed && isOwnProject ? 'Edit' : undefined}
+          on:editButtonClick={() =>
+            project.claimed && modal.show(Stepper, undefined, editProjectMetadataSteps(project))}
+        />
       </div>
       {#if project.claimed}
         {#await Promise.all([earnedFunds, splits])}
@@ -202,11 +199,11 @@
           </div>
         {/await}
       {/if}
-    </div>
+    </header>
     <div class="content">
       <Developer accountId={project.repoDriverAccount.accountId} />
       {#if project.owner}
-        <div class="section">
+        <section class="app-section">
           {#if splits}
             {#await splits}
               <SectionHeader icon={SplitsIcon} label="Splits" />
@@ -265,9 +262,9 @@
               <SectionSkeleton loaded={true} error={true} />
             {/await}
           {/if}
-        </div>
+        </section>
       {:else if unclaimedFunds}
-        <div class="section">
+        <section class="app-section">
           <SectionHeader icon={Wallet} label="Claimable funds" />
           {#await unclaimedFunds}
             <SectionSkeleton loaded={false} />
@@ -287,7 +284,7 @@
           {:catch}
             <SectionSkeleton loaded={true} error={true} />
           {/await}
-        </div>
+        </section>
       {/if}
       <SupportersSection type="project" {incomingSplits} />
     </div>
@@ -298,7 +295,7 @@
         </div>
       </aside>
     {/if}
-  </div>
+  </article>
 </PrimaryColorThemer>
 
 <style>
@@ -309,7 +306,7 @@
     grid-template-areas:
       'header'
       'content';
-    gap: 3rem;
+    gap: 2rem;
   }
 
   .project-profile.claimed {
@@ -320,6 +317,11 @@
       'content sidebar';
   }
 
+  aside {
+    grid-area: sidebar;
+    height: 0; /* so it's height doesnt influence .header's height and mess up main column gaps */
+  }
+
   .project-profile > * {
     max-width: 100%;
   }
@@ -329,7 +331,7 @@
     align-self: top;
     display: flex;
     flex-direction: column;
-    gap: 4rem;
+    gap: 3rem;
   }
 
   .unclaimed-project-notice {
@@ -338,27 +340,22 @@
 
   .header {
     grid-area: header;
-  }
-
-  .header .project-profile-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 1rem;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-bottom: 1rem;
   }
 
   .header .owner {
     display: flex;
     gap: 0.375rem;
     align-items: center;
-    margin-bottom: 1.5rem;
   }
 
   .stats {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
-    margin-top: 2rem;
   }
 
   .stats.loading {
@@ -376,10 +373,6 @@
     min-height: 6.125rem;
   }
 
-  aside {
-    grid-area: sidebar;
-  }
-
   .become-supporter-card {
     position: sticky;
     top: 0;
@@ -401,17 +394,12 @@
     gap: 1rem;
   }
 
-  .section {
-    display: flex;
-    gap: 2rem;
-    flex-direction: column;
-  }
-
   @media (max-width: 1024px) {
     .project-profile,
     .project-profile.claimed {
       grid-template-columns: minmax(0, 1fr);
       grid-template-rows: auto auto auto;
+      gap: 3rem;
     }
 
     .project-profile.claimed {
@@ -425,11 +413,8 @@
       margin-bottom: 0;
     }
 
-    .header .project-profile-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      flex-direction: column;
+    aside {
+      height: auto;
     }
   }
 </style>
diff --git a/src/routes/app/(app)/streams/sections/splits.section.svelte b/src/routes/app/(app)/streams/sections/splits.section.svelte
index aa144bfc0..0932e208a 100644
--- a/src/routes/app/(app)/streams/sections/splits.section.svelte
+++ b/src/routes/app/(app)/streams/sections/splits.section.svelte
@@ -144,7 +144,7 @@
   }
 </script>
 
-<div class="section">
+<div class="app-section">
   <SectionHeader
     icon={MergeIcon}
     label="Splits"
@@ -174,11 +174,3 @@
     </SectionSkeleton>
   </div>
 </div>
-
-<style>
-  .section {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-  }
-</style>
diff --git a/src/routes/app/(flows)/claim-project/steps/review/review.svelte b/src/routes/app/(flows)/claim-project/steps/review/review.svelte
index b6fbc3533..1d90fd629 100644
--- a/src/routes/app/(flows)/claim-project/steps/review/review.svelte
+++ b/src/routes/app/(flows)/claim-project/steps/review/review.svelte
@@ -21,7 +21,6 @@
   import GitProjectService from '$lib/utils/project/GitProjectService';
   import PenIcon from 'radicle-design-system/icons/Pen.svelte';
   import Drip from '$lib/components/illustrations/drip.svelte';
-  import Pen from 'radicle-design-system/icons/Pen.svelte';
   import modal from '$lib/stores/modal';
   import ProjectCustomizerModal from './components/project-customizer-modal.svelte';
 
@@ -94,8 +93,11 @@
 >
   <FormField type="div" title="Git project">
     <div class="card">
-      <ProjectProfileHeader project={fakeClaimedProject} />
-      <Button icon={Pen} on:click={customize}>Customize</Button>
+      <ProjectProfileHeader
+        project={fakeClaimedProject}
+        editButton="Customize"
+        on:editButtonClick={customize}
+      />
     </div>
   </FormField>
   <FormField type="div" title="Owned by">
diff --git a/src/styles/app.css b/src/styles/app.css
index bb4167401..2aa3378d7 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -63,3 +63,9 @@ h1,
 .tabular-nums {
   font-feature-settings: 'tnum', 'zero';
 }
+
+.app-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}