@igstack/app-catalog-frontend-core 6.9.0 → 6.10.0

package/dist/index.css

@@ -249,38 +249,27 @@
   padding-left: 1.25rem;
 }
 
-/* Review labels. Plain CSS rather than utilities: there is no success token in the
-   palette, and a tinted chip needs a colour the theme does not name. `--chart-3` is
-   the palette's green and already shifts for dark mode.
-
-   Mix percentages are low on purpose. At 75%/72% these measured 3.55:1 and 3.24:1
-   against the cream page — under the 4.5:1 floor for 11px text — and the old 600/700
-   weights were compensating for that, which is why they shouted and were still hard
-   to read. Lowering the mix raises contrast in both themes, so there is no .dark
-   override. Verify any change by measurement, not by eye: 60%/55% looks fine and
-   still fails. */
-.comment-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
+/* Comment badges. Plain CSS rather than utilities: there is no success or
+   pending token in the palette, so each tints a chart colour, which already
+   shifts for dark mode. The text is mixed toward the foreground so it stays
+   readable at 10.5px in both themes: an untinted chart colour on its own pale
+   ground measured under 4.5:1. Verify any change by measurement, not by eye. */
+.comment__badge {
+  margin-left: 0.375rem;
+  padding: 0 0.4375rem;
   border-radius: 999px;
-  padding: 0.05rem 0.5rem;
-  font-size: 0.6875rem;
+  font-size: 0.65625rem;
   font-weight: 500;
-  line-height: 1.5;
+  line-height: 1rem;
   white-space: nowrap;
 }
-.comment-chip-applied {
-  /* 5.46:1 light, 7.67:1 dark */
-  color: color-mix(in oklab, var(--chart-3) 50%, var(--foreground));
-  background: color-mix(in oklab, var(--chart-3) 16%, var(--card));
-  border: 1px solid color-mix(in oklab, var(--chart-3) 35%, var(--card));
+.comment__badge.is-pending {
+  color: color-mix(in oklab, var(--chart-1) 62%, var(--foreground));
+  background: color-mix(in oklab, var(--chart-1) 12%, var(--card));
 }
-.comment-chip-seen {
-  color: var(--muted-foreground);
-  background: var(--muted);
-  border: 1px solid var(--border);
-  font-weight: 400;
+.comment__badge.is-used {
+  color: color-mix(in oklab, var(--chart-3) 50%, var(--foreground));
+  background: color-mix(in oklab, var(--chart-3) 13%, var(--card));
 }
 
 /* One register for every section label inside the detail card.
@@ -431,16 +420,136 @@
 
 /* The tab strip. Horizontally scrollable rather than wrapping: a wrapped strip
    changes the band's height from one entry to the next. */
+.detail-tabs-row {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
 .detail-tabs {
   display: flex;
+  flex: 1;
+  min-width: 0;
   gap: 2px;
-  border-bottom: 1px solid var(--border);
   overflow-x: auto;
   scrollbar-width: none;
+  scroll-behavior: smooth;
 }
 .detail-tabs::-webkit-scrollbar {
   display: none;
 }
+/* Outside the scrolling tablist, so the button never scrolls out of view. */
+.detail-tabs-trailing {
+  flex: none;
+  align-self: center;
+  padding-left: 0.75rem;
+}
+.detail-share {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--background);
+  color: var(--foreground);
+  font-size: 0.8125rem;
+  padding: 0.25rem 0.75rem;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color 0.14s ease-out,
+    border-color 0.14s ease-out;
+}
+/* Below 640px, render the Share button compact: icon only, text visually hidden. */
+@media (max-width: 639px) {
+  .detail-share {
+    padding: 0.4375rem;
+    width: 36px;
+    height: 36px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.detail-share:hover {
+  color: color-mix(in oklab, var(--primary) 85%, black);
+  border-color: color-mix(in oklab, var(--primary) 85%, black);
+}
+.detail-share:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--primary) 85%, black);
+  outline-offset: 2px;
+}
+
+/* Behind this card: one left-aligned reading column. The input and its
+   Comments come first; each later group sits under a hairline with generous
+   room either side, and a plain title. */
+.behind-panel {
+  container-type: inline-size;
+  container-name: behind;
+}
+@container behind (min-width: 900px) {
+  .behind-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 68ch) minmax(240px, 1fr);
+    column-gap: 3.5rem;
+  }
+  .behind-main {
+    grid-column: 1;
+  }
+  .behind-aside {
+    grid-column: 2;
+  }
+  .behind-aside .behind-group {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: none;
+  }
+  .behind-aside .behind-group + .behind-group {
+    margin-top: 2.5rem;
+    padding-top: 0;
+    border-top: none;
+  }
+}
+.behind-group + .behind-group {
+  margin-top: 3.5rem;
+  padding-top: 2.25rem;
+  border-top: 1px solid var(--border);
+}
+.behind-group__title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--foreground);
+  margin-bottom: 0.875rem;
+}
+.behind-dates {
+  margin-top: 0.375rem;
+  font-size: 0.78125rem;
+  color: var(--muted-foreground);
+}
+/* Touch targets: inline links in Behind get ≥24px hit area on coarse pointers. */
+@media (pointer: coarse) {
+  .behind-group a {
+    padding-block: 0.375rem;
+    display: inline-block;
+  }
+}
+.behind-ai__label {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  margin: 0.5rem 0 0.25rem;
+}
+.behind-ai {
+  font-size: 0.8125rem;
+  white-space: pre-wrap;
+  color: var(--muted-foreground);
+  background: var(--muted);
+  border-radius: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  margin-bottom: 0.5rem;
+}
+.behind-card-source {
+  margin-top: 2rem;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+.behind-card-source:empty {
+  display: none;
+}
 .detail-tab {
   position: relative;
   display: inline-flex;
@@ -516,27 +625,6 @@
   background: var(--chart-4, oklch(0.72 0.16 70));
   box-shadow: 0 0 0 2px
     color-mix(in oklab, var(--chart-4, oklch(0.72 0.16 70)) 25%, transparent);
-
-  /* How many items are still waiting on a maintainer. Amber rather than red: an entry
-   with open feedback is disputed, not broken, and red is already the withdraw
-   affordance in the same thread. 5.45:1 light, 8.08:1 dark. */
-  .feedback-open-count {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 1.15rem;
-    border-radius: 999px;
-    padding: 0.15rem 0.35rem;
-    font-size: 0.6875rem;
-    font-weight: 600;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    white-space: nowrap;
-    color: color-mix(in oklab, var(--chart-4) 45%, var(--foreground));
-    background: color-mix(in oklab, var(--chart-4) 18%, var(--card));
-    border: 1px solid color-mix(in oklab, var(--chart-4) 38%, var(--card));
-  }
 }
 
 /* tw-animate-css ships no reduced-motion rules of its own, so honour the
@@ -551,3 +639,391 @@
     scroll-behavior: auto !important;
   }
 }
+
+/* Comments on Behind this card: the heading with its help, then one feed.
+   A comment is a small meta line above the words, like a thread. */
+.comments-head {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.875rem;
+}
+.comments-head .behind-group__title {
+  margin-bottom: 0;
+}
+.comments-help-button {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  color: var(--muted-foreground);
+}
+.comments-help-button:hover,
+.comments-help-button[aria-expanded='true'] {
+  color: var(--foreground);
+}
+.comments-help-button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+/* Touch targets: ≥44×44px on coarse pointers, without moving the icon. */
+@media (pointer: coarse) {
+  .comments-help-button {
+    width: 44px;
+    height: 44px;
+    margin: -10px;
+  }
+}
+.comments-help {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 20;
+  width: min(24rem, 100%);
+  margin-top: 0.375rem;
+  padding: 0.75rem 0.875rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+.comments-help[hidden] {
+  display: none;
+}
+.comments-help__title {
+  font-weight: 600;
+  margin-bottom: 0.375rem;
+}
+.comments-help ul {
+  list-style: disc;
+  margin: 0 0 0.5rem;
+  padding-left: 1.125rem;
+}
+.comments-help__note {
+  color: var(--muted-foreground);
+}
+.comments {
+  display: grid;
+  gap: 1.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.comment__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 0.3rem;
+  font-size: 0.71875rem;
+  line-height: 1.3;
+  color: var(--muted-foreground);
+}
+.comment__who {
+  font-weight: 500;
+  color: color-mix(in oklab, var(--muted-foreground) 60%, var(--foreground));
+}
+.comment__text {
+  margin-top: 1px;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--foreground);
+  white-space: pre-wrap;
+}
+.comment__text.is-empty {
+  font-style: italic;
+  color: var(--muted-foreground);
+}
+.comment__reply {
+  margin-top: 0.25rem;
+  font-size: 0.84375rem;
+  color: var(--muted-foreground);
+  white-space: pre-wrap;
+}
+.comment__actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+.comment__actions button {
+  text-decoration: underline;
+}
+.comment__actions button:hover {
+  color: var(--foreground);
+}
+.comment__actions button.is-destructive:hover {
+  color: var(--destructive);
+}
+.community-shots {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-top: 0.375rem;
+}
+.community-shots img {
+  display: block;
+  width: 48px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 5px;
+  border: 1px solid var(--border);
+}
+.community-shots a:hover img {
+  border-color: var(--ring);
+}
+.comments-skeleton {
+  display: grid;
+  gap: 1.375rem;
+}
+.comments-skeleton__item {
+  display: grid;
+  gap: 0.375rem;
+}
+.comments-skeleton__item::before,
+.comments-skeleton__item::after {
+  content: '';
+  height: 1em;
+  background: var(--muted);
+  border-radius: 4px;
+}
+.comments-skeleton__item::before {
+  width: 30%;
+}
+.comments-skeleton__item::after {
+  width: 80%;
+  margin-top: 0.125rem;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .comments-skeleton__item::before,
+  .comments-skeleton__item::after {
+    animation: skeleton-shimmer 2s ease-in-out infinite;
+  }
+}
+@keyframes skeleton-shimmer {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.comments-empty {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--muted-foreground);
+}
+
+/* "Know more?" — the input at the top of Behind this card */
+.know-more {
+  margin-bottom: 3rem;
+}
+/* "Share what you know" points here; a dragged file shows where it lands. */
+.know-more.is-flash .know-more-field textarea:not(.know-more-mirror),
+.know-more[data-drop] .know-more-field textarea:not(.know-more-mirror) {
+  border-color: color-mix(in oklab, var(--primary) 85%, black);
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 25%, transparent);
+}
+.know-more[data-drop] .know-more-field textarea:not(.know-more-mirror) {
+  border-style: dashed;
+}
+.know-more-field {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+.know-more-field textarea:not(.know-more-mirror) {
+  flex: 1;
+  min-height: 0;
+  resize: none;
+  font: inherit;
+  font-size: 0.9375rem;
+  line-height: 20px;
+  padding: 9px 14px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--card);
+  outline: none;
+  transition:
+    height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
+    border-color 0.15s,
+    background 0.15s,
+    box-shadow 0.15s;
+}
+/* iOS zooms inputs under 16px on mobile; use 16px below 640px. */
+@media (max-width: 639px) {
+  .know-more-field textarea:not(.know-more-mirror) {
+    font-size: 1rem;
+  }
+}
+.know-more-field textarea:not(.know-more-mirror):focus {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
+}
+.know-more-field textarea:not(.know-more-mirror)::placeholder {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.know-more-clip {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  color: var(--muted-foreground);
+  opacity: 0.6;
+  transition: opacity 0.15s;
+}
+/* Touch targets: ≥44×44px on coarse pointers. */
+@media (pointer: coarse) {
+  .know-more-clip {
+    width: 44px;
+    height: 44px;
+  }
+}
+.know-more-clip:hover:not(:disabled),
+.know-more-clip:focus-visible {
+  opacity: 1;
+  background: var(--muted);
+}
+.know-more-clip:disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+.know-more-thumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0 0.5rem;
+  padding: 0;
+  list-style: none;
+}
+.know-more-thumb {
+  position: relative;
+  width: 56px;
+  height: 42px;
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+}
+.know-more-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.know-more-thumb button {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 0.55);
+  color: white;
+}
+/* Always there, so the input never shifts; grey until there is something to send. */
+.know-more-send {
+  flex: none;
+  height: 40px;
+  padding-inline: 1rem;
+  border-radius: 10px;
+  font-size: 0.875rem;
+}
+@media (pointer: coarse) {
+  .know-more-send {
+    height: 44px;
+  }
+}
+.know-more-send:disabled {
+  opacity: 1;
+  background: var(--muted);
+  color: var(--muted-foreground);
+}
+.know-more-mirror {
+  position: absolute;
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  padding: 9px 14px;
+  font: inherit;
+  font-size: 0.9375rem;
+  line-height: 20px;
+  border: 1px solid transparent;
+  resize: none;
+}
+@media (max-width: 639px) {
+  .know-more-mirror {
+    font-size: 1rem;
+  }
+}
+.know-more-hint {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition:
+    max-height 0.2s ease,
+    opacity 0.2s ease,
+    margin 0.2s ease;
+}
+.know-more-hint.is-on {
+  /* Room for two lines: on a narrow card the hint wraps. */
+  max-height: 3rem;
+  opacity: 1;
+  margin-top: 0.375rem;
+}
+.know-more-attaching {
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+.know-more-attaching:empty {
+  display: none;
+}
+.know-more-clip[aria-busy] {
+  cursor: progress;
+}
+.know-more-error {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--destructive);
+}
+.know-more-sent {
+  font-size: 0.8125rem;
+  color: oklch(0.52 0.14 150);
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition:
+    max-height 0.25s ease,
+    opacity 0.25s ease;
+}
+.know-more-sent.is-on {
+  max-height: 1.5rem;
+  opacity: 1;
+  margin-top: 0.5rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .know-more-field textarea:not(.know-more-mirror),
+  .know-more-clip,
+  .know-more-hint,
+  .know-more-sent,
+  .detail-share {
+    transition: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "6.9.0",
+  "version": "6.10.0",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -118,7 +118,7 @@
     "tailwindcss": "^4.1.7",
     "tiptap-markdown": "^0.8.0",
     "tslib": "^2.3.0",
-    "@igstack/app-catalog-shared-core": "6.9.0"
+    "@igstack/app-catalog-shared-core": "6.10.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.5",
@@ -146,7 +146,7 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "6.9.0"
+    "@igstack/app-catalog-backend-core": "6.10.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": "1.170.41",
@@ -156,7 +156,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "6b0730c9d2d396517940db7d847080f4737df2fd",
+  "gitHead": "8a9a5fb554ef3414c474c608d32f830907dfcc72",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/modules/appCatalog/ui/catalog/AppDetailPanel.appSwitch.test.tsx

@@ -36,8 +36,11 @@ vi.mock('~/modules/auth', () => ({
   useUser: vi.fn(() => null),
   useOptionalUser: vi.fn(() => null),
 }))
-vi.mock('~/modules/appCatalog/ui/detail/FeedbackSection', () => ({
-  FeedbackSection: () => <div />,
+vi.mock('~/modules/appCatalog/ui/detail/CommunitySection', () => ({
+  CommunitySection: () => <div />,
+}))
+vi.mock('~/modules/appCatalog/ui/detail/usePendingCount', () => ({
+  usePendingCount: () => 0,
 }))
 
 const { AppDetailPanel } =

package/src/__tests__/modules/appCatalog/ui/catalog/AppDetailPanel.enter.test.tsx

@@ -30,8 +30,11 @@ vi.mock('~/modules/auth', () => ({
   useUser: vi.fn(() => null),
   useOptionalUser: vi.fn(() => null),
 }))
-vi.mock('~/modules/appCatalog/ui/detail/FeedbackSection', () => ({
-  FeedbackSection: () => <div />,
+vi.mock('~/modules/appCatalog/ui/detail/CommunitySection', () => ({
+  CommunitySection: () => <div />,
+}))
+vi.mock('~/modules/appCatalog/ui/detail/usePendingCount', () => ({
+  usePendingCount: () => 0,
 }))
 vi.mock('~/modules/appCatalog/ui/components/SubResourceDetailPanel', () => ({
   SubResourceDetailPanel: () => null,

package/src/__tests__/modules/appCatalog/ui/detail/AppDetails.background.test.tsx

@@ -28,8 +28,11 @@ vi.mock('~/modules/appCatalog/ui/context/AppCatalogFiltersContext', () => ({
   useAppCatalogFilters: vi.fn(() => ({ selectedTags: [], toggleTag: vi.fn() })),
 }))
 vi.mock('~/modules/auth', () => ({ useUser: vi.fn(() => null) }))
-vi.mock('~/modules/appCatalog/ui/detail/FeedbackSection', () => ({
-  FeedbackSection: () => <div />,
+vi.mock('~/modules/appCatalog/ui/detail/CommunitySection', () => ({
+  CommunitySection: () => <div />,
+}))
+vi.mock('~/modules/appCatalog/ui/detail/usePendingCount', () => ({
+  usePendingCount: () => 0,
 }))
 
 const { AppDetails } = await import('~/modules/appCatalog/ui/detail/AppDetails')
@@ -66,17 +69,13 @@ describe('AppDetails — Background', () => {
     ).toBeInTheDocument()
   })
 
-  // Asserted ON the Documentation tab on purpose. Asserting it from Overview would
-  // pass whether or not the section works, because Background is in another
-  // panel either way — a test that cannot fail is worse than no test.
-  it('leaves no empty section when the entry has no history recorded', () => {
+  // With neither links nor history the tab has nothing to say, so it is not
+  // offered at all — an empty tab is the same dead end as an empty section.
+  it('offers no Documentation tab when the entry has no history recorded', () => {
     const { background: _omitted, ...withoutBackground } = app
     render(<AppDetails app={withoutBackground as Resource} />)
 
-    fireEvent.click(screen.getByRole('tab', { name: /documentation/i }))
-
+    expect(screen.queryByRole('tab', { name: /documentation/i })).toBeNull()
     expect(screen.queryByRole('heading', { name: 'Background' })).toBeNull()
-    // Proves the panel really is open, so the absence above means something.
-    expect(screen.getByRole('heading', { name: 'Sources' })).toBeVisible()
   })
 })