Feat: Show visibility in workspace settings (#5592)

packages/frontend-2/components/settings/shared/projects/index.vue

@@ -22,8 +22,9 @@
     <LayoutTable
       class="mt-6"
       :columns="[
-        { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
+        { id: 'name', header: 'Name', classes: 'col-span-2 truncate' },
         { id: 'created', header: 'Created', classes: 'col-span-2' },
+        { id: 'visibility', header: 'Visibility', classes: 'col-span-2' },
         { id: 'modified', header: 'Modified', classes: 'col-span-2' },
         { id: 'models', header: 'Models', classes: 'col-span-1' },
         { id: 'versions', header: 'Versions', classes: 'col-span-1' },
@@ -33,20 +34,28 @@
       :items="projects"
     >
       <template #name="{ item }">
-        <NuxtLink :to="projectRoute(item.id)">
-          {{ isProject(item) ? item.name : '' }}
-        </NuxtLink>
+        <div v-tippy="item.name" class="truncate">
+          <NuxtLink :to="projectRoute(item.id)">
+            {{ isProject(item) ? item.name : '' }}
+          </NuxtLink>
+        </div>
       </template>
 
       <template #created="{ item }">
-        <div class="text-xs">
-          {{ formattedFullDate(item.createdAt) }}
+        <div v-tippy="formattedFullDate(item.createdAt)" class="text-xs inline-block">
+          {{ formattedDateOnly(item.createdAt) }}
+        </div>
+      </template>
+
+      <template #visibility="{ item }">
+        <div class="text-xs capitalize">
+          {{ item.visibility.toLowerCase() }}
         </div>
       </template>
 
       <template #modified="{ item }">
-        <div class="text-xs">
-          {{ formattedFullDate(item.updatedAt) }}
+        <div v-tippy="formattedFullDate(item.updatedAt)" class="text-xs inline-block">
+          {{ formattedDateOnly(item.updatedAt) }}
         </div>
       </template>
 
@@ -171,8 +180,8 @@ const props = defineProps<{
   workspace: MaybeNullOrUndefined<SettingsSharedProjects_WorkspaceFragment>
 }>()
 
+const { formattedFullDate, formattedDateOnly } = useDateFormatters()
 const navigateToProject = useNavigateToProject()
-const { formattedFullDate } = useDateFormatters()
 const { activeUser } = useActiveUser()
 const canCreatePersonal = useCanCreatePersonalProject({
   activeUser: computed(() => activeUser.value)

packages/frontend-2/composables/dates.ts

@@ -67,6 +67,14 @@ const isTimeframe = (date: ConfigType, now: ConfigType, tz: Optional<string>) =>
 const formattedFullDate = (date: ConfigType, tz: Optional<string>): string =>
   createDayjs(date, tz).format('MMM D, YYYY, H:mm')
 
+/**
+ * Formats a given date input into a date string without time
+ * @example
+ * formattedDateOnly('2023-12-01') - returns "Dec 12, 2023"
+ */
+const formattedDateOnly = (date: ConfigType, tz: Optional<string>): string =>
+  createDayjs(date, tz).format('MMM D, YYYY')
+
 /**
  * Formats a given date input into a relative time string with optional prefix
  * @example
@@ -127,6 +135,13 @@ export const useDateFormatters = () => {
      * formattedFullDate('2023-12-01') - returns "Dec 12, 2023"
      */
     formattedFullDate: (date: ConfigType): string =>
-      formattedFullDate(date, timeZone.value)
+      formattedFullDate(date, timeZone.value),
+    /**
+     * Formats a given date input into a date string without time
+     * @example
+     * formattedDateOnly('2023-12-01') - returns "Dec 12, 2023"
+     */
+    formattedDateOnly: (date: ConfigType): string =>
+      formattedDateOnly(date, timeZone.value)
   }
 }