feat(journey): the journal settings list who a linked trip lets in

Under the contributors, the journey settings on desktop and phone get a section of their own, Through trips, with everyone a trip's journal link lets in, their role and the trip they come through. It is read only there, since the trip's settings manage it, and it leaves out whoever is a contributor already. getJourneyFull answers it as trip_access.

client/src/components/Journey/JourneyDetailPageSettingsDialog.test.tsx

@@ -98,6 +98,19 @@ describe('JourneySettingsDialog', () => {
     await screen.findByRole('button', { name: /create share link/i })
   })
 
+  it('FE-JRN-SETTINGS-2683: lists the people a linked trip lets in under their own heading, and nothing without', () => {
+    const { unmount } = mountDialog()
+    expect(screen.queryByText('Through trips')).not.toBeInTheDocument()
+    unmount()
+
+    mountDialog(buildJourney({
+      trip_access: [{ user_id: 7, role: 'viewer', username: 'lena', avatar: null, trip_id: 5, trip_title: 'Italy Trip' }],
+    }))
+    expect(screen.getByText('Through trips')).toBeInTheDocument()
+    expect(screen.getByText('lena')).toBeInTheDocument()
+    expect(screen.getByText('via Italy Trip')).toBeInTheDocument()
+  })
+
   it('FE-JRN-SETTINGS-002: saves the edited title and subtitle', async () => {
     const user = userEvent.setup()
     const { onSaved } = mountDialog()

client/src/components/Journey/JourneyDetailPageSettingsDialog.tsx

@@ -7,7 +7,7 @@ import { DeleteButton, DialogButton, DialogFooter, DialogHeader, DialogSection,
 import { AddRowButton, EditorField, INPUT, Segmented } from '../shared/dialogParts'
 import JourneyShareSection from './JourneyShareSection'
 import { useJourneySettings } from './useJourneySettings'
-import type { JourneyContributor, JourneyDetail } from '../../store/journeyStore'
+import type { JourneyContributor, JourneyDetail, JourneyTripAccess } from '../../store/journeyStore'
 import { pickGradient } from '../../pages/journeyDetail/JourneyDetailPage.helpers'
 import { AddTripDialog } from './JourneyDetailPageAddTripDialog'
 import ToggleSwitch from '../Settings/ToggleSwitch'
@@ -277,6 +277,8 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
               </div>
               <AddRowButton onClick={onOpenInvite}>{t('journey.contributors.invite')}</AddRowButton>
             </DialogSection>
+
+            <TripAccessSection access={journey.trip_access} roleLabel={roleLabel} />
           </div>
         </div>
 
@@ -324,3 +326,32 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
     </>
   )
 }
+
+/**
+ * Who a trip's linked journal lets in (#2683), under its own heading below the
+ * contributors: shown here, but managed in that trip's settings, so read only.
+ */
+function TripAccessSection({ access, roleLabel }: {
+  access: JourneyTripAccess[] | undefined
+  roleLabel: (role: JourneyContributor['role']) => string
+}) {
+  const { t } = useTranslation()
+  if (!access?.length) return null
+  return (
+    <DialogSection label={t('journey.contributors.viaTrips')}>
+      <p className="m-0 mb-2.5 leading-normal text-content-faint" style={fs(11.5)}>{t('journey.contributors.viaTripsHint')}</p>
+      <div className={ROWS}>
+        {access.map(a => (
+          <div key={`${a.user_id}-${a.trip_id}`} className={ROW}>
+            <TripMemberAvatar username={a.username} avatarUrl={avatarSrc(a.avatar)} size={28} />
+            <div className="min-w-0 flex-1">
+              <div className="truncate font-semibold text-content" style={fs(13, 'body')}>{a.username}</div>
+              <div className="truncate text-content-faint" style={fs(11)}>{t('journey.contributors.viaTrip', { trip: a.trip_title })}</div>
+            </div>
+            <span className={`${BADGE} bg-surface-tertiary text-content-muted`} style={fs(10.5)}>{roleLabel(a.role)}</span>
+          </div>
+        ))}
+      </div>
+    </DialogSection>
+  )
+}