Display badge for private repos

httpd-client/lib/project.ts

@@ -56,6 +56,10 @@ const projectSchema = object({
   defaultBranch: string(),
   delegates: array(string()),
   head: string(),
+  visibility: union([
+    object({ type: literal("public") }),
+    object({ type: literal("private"), allow: optional(array(string())) }),
+  ]).optional(),
   patches: object({
     open: number(),
     draft: number(),

src/App/Header/Breadcrumbs/ProjectSegment.svelte

@@ -2,11 +2,12 @@
   import type { ProjectLoadedRoute } from "@app/views/projects/router";
 
   import * as utils from "@app/lib/utils";
+  import { unreachable } from "@app/lib/utils";
 
   import CopyableId from "@app/components/CopyableId.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
   import Link from "@app/components/Link.svelte";
   import Separator from "./Separator.svelte";
-  import { unreachable } from "@app/lib/utils";
 
   export let activeRoute: ProjectLoadedRoute;
 </script>
@@ -23,6 +24,9 @@
 </style>
 
 <span class="segment">
+  {#if activeRoute.params.project.visibility?.type === "private"}
+    <IconSmall name="lock" />
+  {/if}
   <Link
     route={{
       resource: "project.source",

src/components/IconSmall.svelte

@@ -33,6 +33,7 @@
     | "issue"
     | "key"
     | "logo"
+    | "lock"
     | "more"
     | "network"
     | "patch"
@@ -353,6 +354,13 @@
     <path d="M7.40908 13.3182H6.22726V14.5H7.40908V13.3182Z" />
     <path d="M9.77273 13.3182H8.59091V14.5H9.77273V13.3182Z" />
     <path d="M10.9546 13.3182H9.77274V14.5H10.9546V13.3182Z" />
+  {:else if name === "lock"}
+    <path
+      d="M8 12C7.72386 12 7.5 11.7761 7.5 11.5V10.8662C7.2011 10.6933 7 10.3701 7 10C7 9.44772 7.44772 9 8 9C8.55228 9 9 9.44772 9 10C9 10.3701 8.7989 10.6933 8.5 10.8662V11.5C8.5 11.7761 8.27614 12 8 12Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 5V7C3.89543 7 3 7.89543 3 9V12C3 13.1046 3.89543 14 5 14H11C12.1046 14 13 13.1046 13 12V9C13 7.89543 12.1046 7 11 7V5C11 3.34315 9.65685 2 8 2C6.34315 2 5 3.34315 5 5ZM10 7V5C10 3.89543 9.10457 3 8 3C6.89543 3 6 3.89543 6 5V7H10ZM4 9C4 8.44772 4.44772 8 5 8H11C11.5523 8 12 8.44772 12 9V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V9Z" />
   {:else if name === "key"}
     <path
       fill-rule="evenodd"

src/components/ProjectCard.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
   import type { WeeklyActivity } from "@app/lib/commit";
 
+  import capitalize from "lodash/capitalize";
   import { formatCommit, twemoji } from "@app/lib/utils";
 
   import ActivityDiagram from "@app/components/ActivityDiagram.svelte";
+  import Badge from "@app/components/Badge.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
 
   export let activity: WeeklyActivity[];
   export let compact = false;
   export let description: string;
   export let head: string;
+  export let visibility: "public" | "private" = "public";
   export let id: string;
   export let name: string;
 </script>
@@ -63,12 +67,19 @@
   .description {
     font-size: var(--font-size-small);
   }
-  .id {
+  .title {
     display: flex;
-    justify-content: space-between;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
     font-size: var(--font-size-medium);
     font-weight: var(--font-weight-medium);
   }
+  .name {
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
   .rid {
     visibility: hidden;
     color: var(--color-fill-secondary);
@@ -93,7 +104,22 @@
 <div class="project" class:compact>
   <div class="left">
     <div class="text">
-      <div class="id">{name}</div>
+      <div class="title">
+        <span class="name" title={name}>
+          {name}
+        </span>
+        {#if visibility === "private"}
+          {#if compact}
+            <div title="Private" style:color="var(--color-foreground-yellow)">
+              <IconSmall name="lock" />
+            </div>
+          {:else}
+            <Badge variant="yellowOutline" size="tiny">
+              {capitalize(visibility)}
+            </Badge>
+          {/if}
+        {/if}
+      </div>
       <div class="description" use:twemoji>{description}</div>
       <div class="global-hash">
         {#if compact}

src/views/home/Index.svelte

@@ -98,6 +98,7 @@
               compact
               description={project.description}
               head={project.head}
+              visibility={project.visibility?.type}
               id={project.id}
               name={project.name}
               {activity} />

src/views/nodes/View.svelte

@@ -141,6 +141,7 @@
             {activity}
             id={project.id}
             name={project.name}
+            visibility={project.visibility?.type}
             description={project.description}
             head={project.head} />
         </Link>

src/views/projects/Layout.svelte

@@ -4,15 +4,16 @@
 
   import dompurify from "dompurify";
 
+  import capitalize from "lodash/capitalize";
   import markdown from "@app/lib/markdown";
   import { twemoji } from "@app/lib/utils";
 
+  import Badge from "@app/components/Badge.svelte";
   import CloneButton from "@app/views/projects/Header/CloneButton.svelte";
-  import Link from "@app/components/Link.svelte";
-
-  import Header from "./Header.svelte";
-  import TrackButton from "./Header/TrackButton.svelte";
   import CopyableId from "@app/components/CopyableId.svelte";
+  import Header from "@app/views/projects/Header.svelte";
+  import Link from "@app/components/Link.svelte";
+  import TrackButton from "@app/views/projects/Header/TrackButton.svelte";
 
   export let activeTab: ActiveTab = undefined;
   export let baseUrl: BaseUrl;
@@ -32,6 +33,7 @@
   }
   .title {
     align-items: center;
+    gap: 0.5rem;
     color: var(--color-foreground-contrast);
     display: flex;
     font-size: var(--font-size-x-large);
@@ -88,6 +90,11 @@
         </span>
       </Link>
     </span>
+    {#if project.visibility && project.visibility.type === "private"}
+      <Badge variant="caution" size="tiny">
+        {capitalize(project.visibility.type)}
+      </Badge>
+    {/if}
 
     <div
       class="layout-desktop-flex"