@rmdes/indiekit-endpoint-activitypub 3.8.6 → 3.9.0

package/assets/css/features.css

@@ -0,0 +1,436 @@
+/* ==========================================================================
+   Post Detail View — Thread Layout
+   ========================================================================== */
+
+.ap-post-detail__back {
+  margin-bottom: var(--space-m);
+}
+
+.ap-post-detail__back-link {
+  color: var(--color-primary-on-background);
+  font-size: var(--font-size-s);
+  text-decoration: none;
+}
+
+.ap-post-detail__back-link:hover {
+  text-decoration: underline;
+}
+
+.ap-post-detail__not-found {
+  background: var(--color-offset);
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-offset);
+  padding: var(--space-l);
+  text-align: center;
+}
+
+.ap-post-detail__section-title {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
+  font-weight: 600;
+  margin: var(--space-m) 0 var(--space-s);
+  padding-bottom: var(--space-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Parent posts — indented with left border to show thread chain */
+.ap-post-detail__parents {
+  border-left: 3px solid var(--color-outline);
+  margin-bottom: var(--space-s);
+  padding-left: var(--space-m);
+}
+
+.ap-post-detail__parent-item .ap-card {
+  opacity: 0.85;
+}
+
+/* Main post — highlighted */
+.ap-post-detail__main {
+  margin-bottom: var(--space-m);
+}
+
+.ap-post-detail__main .ap-card {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 1px var(--color-primary);
+}
+
+/* Replies — indented from the other side */
+.ap-post-detail__replies {
+  margin-left: var(--space-l);
+}
+
+.ap-post-detail__reply-item {
+  border-left: 2px solid var(--color-outline);
+  padding-left: var(--space-m);
+  margin-bottom: var(--space-xs);
+}
+
+/* ==========================================================================
+   Tag Timeline Header
+   ========================================================================== */
+
+.ap-tag-header {
+  align-items: flex-start;
+  background: var(--color-offset);
+  border-bottom: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  display: flex;
+  gap: var(--space-m);
+  justify-content: space-between;
+  margin-bottom: var(--space-m);
+  padding: var(--space-m);
+}
+
+.ap-tag-header__title {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  margin: 0 0 var(--space-xs);
+}
+
+.ap-tag-header__count {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
+  margin: 0;
+}
+
+.ap-tag-header__actions {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--space-s);
+}
+
+.ap-tag-header__follow-btn {
+  background: var(--color-primary);
+  border: none;
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-primary, var(--color-neutral99));
+  cursor: pointer;
+  font-size: var(--font-size-s);
+  padding: var(--space-xs) var(--space-s);
+}
+
+.ap-tag-header__follow-btn:hover {
+  opacity: 0.85;
+}
+
+.ap-tag-header__unfollow-btn {
+  background: transparent;
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-background);
+  cursor: pointer;
+  font-size: var(--font-size-s);
+  padding: var(--space-xs) var(--space-s);
+}
+
+.ap-tag-header__unfollow-btn:hover {
+  border-color: var(--color-on-background);
+}
+
+.ap-tag-header__back {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
+  text-decoration: none;
+}
+
+.ap-tag-header__back:hover {
+  color: var(--color-on-background);
+  text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+  .ap-tag-header {
+    flex-direction: column;
+    gap: var(--space-s);
+  }
+
+  .ap-tag-header__actions {
+    flex-wrap: wrap;
+  }
+}
+
+/* ==========================================================================
+   Reader Tools Bar (Explore link, etc.)
+   ========================================================================== */
+
+.ap-reader-tools {
+  display: flex;
+  gap: var(--space-s);
+  justify-content: flex-end;
+  margin-bottom: var(--space-s);
+}
+
+.ap-reader-tools__explore {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
+  text-decoration: none;
+}
+
+.ap-reader-tools__explore:hover {
+  color: var(--color-on-background);
+  text-decoration: underline;
+}
+
+/* Followed tags bar */
+.ap-followed-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) 0;
+  margin-bottom: var(--space-s);
+  font-size: var(--font-size-s);
+}
+
+.ap-followed-tags__label {
+  color: var(--color-on-offset);
+  font-weight: 600;
+}
+
+/* ==========================================================================
+   New Posts Banner
+   ========================================================================== */
+
+.ap-new-posts-banner {
+  left: 0;
+  position: sticky;
+  right: 0;
+  top: 0;
+  z-index: 10;
+}
+
+.ap-new-posts-banner__btn {
+  background: var(--color-primary);
+  border: none;
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-primary);
+  cursor: pointer;
+  display: block;
+  font-family: inherit;
+  font-size: var(--font-size-s);
+  margin: 0 auto var(--space-s);
+  padding: var(--space-xs) var(--space-m);
+  text-align: center;
+  width: auto;
+}
+
+.ap-new-posts-banner__btn:hover {
+  opacity: 0.9;
+}
+
+/* ==========================================================================
+   Read State
+   ========================================================================== */
+
+.ap-card--read {
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+}
+
+.ap-card--read:hover {
+  opacity: 1;
+}
+
+/* ==========================================================================
+   Unread Toggle
+   ========================================================================== */
+
+.ap-unread-toggle {
+  margin-left: auto;
+}
+
+.ap-unread-toggle--active {
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  font-weight: 600;
+}
+
+/* ==========================================================================
+   Quote Embeds
+   ========================================================================== */
+
+.ap-quote-embed {
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  margin-top: var(--space-s);
+  overflow: hidden;
+  transition: border-color 0.15s ease;
+}
+
+.ap-quote-embed:hover {
+  border-color: var(--color-outline-variant);
+}
+
+.ap-quote-embed--pending {
+  border-style: dashed;
+}
+
+.ap-quote-embed__link {
+  color: inherit;
+  display: block;
+  padding: var(--space-s) var(--space-m);
+  text-decoration: none;
+}
+
+.ap-quote-embed__link:hover {
+  background: color-mix(in srgb, var(--color-offset) 50%, transparent);
+}
+
+.ap-quote-embed__author {
+  align-items: center;
+  display: flex;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-xs);
+}
+
+.ap-quote-embed__avatar {
+  border-radius: 50%;
+  flex-shrink: 0;
+  height: 24px;
+  object-fit: cover;
+  width: 24px;
+}
+
+.ap-quote-embed__avatar--default {
+  align-items: center;
+  background: var(--color-offset);
+  color: var(--color-on-offset);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  justify-content: center;
+}
+
+.ap-quote-embed__author-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.ap-quote-embed__name {
+  font-size: var(--font-size-s);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ap-quote-embed__handle {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ap-quote-embed__time {
+  color: var(--color-on-offset);
+  flex-shrink: 0;
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+.ap-quote-embed__title {
+  font-size: var(--font-size-s);
+  font-weight: 600;
+  margin: 0 0 var(--space-xs);
+}
+
+.ap-quote-embed__content {
+  color: var(--color-on-background);
+  font-size: var(--font-size-s);
+  line-height: calc(4 / 3 * 1em);
+  max-height: calc(1.333em * 6);
+  overflow: hidden;
+}
+
+.ap-quote-embed__content a {
+  display: inline;
+}
+
+.ap-quote-embed__content a span {
+  display: inline;
+}
+
+.ap-quote-embed__content p {
+  margin: 0 0 var(--space-xs);
+}
+
+.ap-quote-embed__content p:last-child {
+  margin-bottom: 0;
+}
+
+.ap-quote-embed__media {
+  margin-top: var(--space-xs);
+}
+
+.ap-quote-embed__photo {
+  border-radius: var(--border-radius-small);
+  max-height: 160px;
+  max-width: 100%;
+  object-fit: cover;
+}
+
+/* ==========================================================================
+   Poll / Question
+   ========================================================================== */
+
+.ap-poll {
+  margin-top: var(--space-s);
+}
+
+.ap-poll__option {
+  position: relative;
+  padding: var(--space-xs) var(--space-s);
+  margin-bottom: var(--space-xs);
+  border-radius: var(--border-radius-small);
+  background: var(--color-offset);
+  overflow: hidden;
+}
+
+.ap-poll__bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: var(--color-primary);
+  opacity: 0.15;
+  border-radius: var(--border-radius-small);
+}
+
+.ap-poll__label {
+  position: relative;
+  font-size: var(--font-size-s);
+  color: var(--color-on-background);
+}
+
+.ap-poll__votes {
+  position: relative;
+  float: right;
+  font-size: var(--font-size-s);
+  font-weight: 600;
+  color: var(--color-on-offset);
+}
+
+.ap-poll__footer {
+  font-size: var(--font-size-xs);
+  color: var(--color-on-offset);
+  margin-top: var(--space-xs);
+}
+
+/* Hashtag tab sources info line */
+.ap-hashtag-sources {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-s);
+  margin: 0;
+  padding: var(--space-s) 0 var(--space-xs);
+}
+
+/* Custom emoji */
+.ap-custom-emoji {
+  height: 1.2em;
+  width: auto;
+  vertical-align: middle;
+  display: inline;
+  margin: 0 0.05em;
+}

package/assets/css/federation.css

@@ -0,0 +1,242 @@
+/* ==========================================================================
+   Federation Management
+   ========================================================================== */
+
+.ap-federation__section {
+  margin-block-end: var(--space-l);
+}
+
+.ap-federation__section h2 {
+  margin-block-end: var(--space-s);
+}
+
+.ap-federation__stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+  gap: var(--space-s);
+}
+
+.ap-federation__stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-s);
+  background: var(--color-offset);
+  border-radius: var(--border-radius-small);
+  text-align: center;
+}
+
+.ap-federation__stat-count {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--color-on-background);
+}
+
+.ap-federation__stat-label {
+  font-size: var(--font-size-s);
+  color: var(--color-on-offset);
+  word-break: break-word;
+}
+
+.ap-federation__actions-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-s);
+  align-items: center;
+}
+
+.ap-federation__result {
+  margin-block-start: var(--space-xs);
+  color: var(--color-green50);
+  font-size: var(--font-size-s);
+}
+
+.ap-federation__error {
+  margin-block-start: var(--space-xs);
+  color: var(--color-red45);
+  font-size: var(--font-size-s);
+}
+
+.ap-federation__lookup-form {
+  display: flex;
+  gap: var(--space-s);
+}
+
+.ap-federation__lookup-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.5rem 0.75rem;
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  font: inherit;
+  color: var(--color-on-background);
+  background: var(--color-background);
+}
+
+.ap-federation__json-view {
+  margin-block-start: var(--space-s);
+  padding: var(--space-m);
+  background: var(--color-offset);
+  border-radius: var(--border-radius-small);
+  font-family: monospace;
+  font-size: var(--font-size-s);
+  color: var(--color-on-background);
+  max-height: 24rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.ap-federation__posts-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.ap-federation__post-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-m);
+  padding: var(--space-s);
+  background: var(--color-offset);
+  border-radius: var(--border-radius-small);
+}
+
+.ap-federation__post-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  min-width: 0;
+}
+
+.ap-federation__post-title {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ap-federation__post-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: var(--font-size-s);
+  color: var(--color-on-offset);
+}
+
+.ap-federation__post-actions {
+  display: flex;
+  gap: var(--space-xs);
+  flex-shrink: 0;
+}
+
+.ap-federation__post-btn {
+  padding: var(--space-xs) var(--space-s);
+  font-size: var(--font-size-s);
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  background: var(--color-background);
+  color: var(--color-on-background);
+  cursor: pointer;
+}
+
+.ap-federation__post-btn:hover {
+  background: var(--color-offset);
+}
+
+.ap-federation__post-btn--danger {
+  color: var(--color-red45);
+  border-color: var(--color-red45);
+}
+
+.ap-federation__post-btn--danger:hover {
+  background: color-mix(in srgb, var(--color-red45) 10%, transparent);
+}
+
+.ap-federation__modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--tint-neutral) 10% / 0.5);
+}
+
+.ap-federation__modal {
+  width: min(90vw, 48rem);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-background);
+  border-radius: var(--border-radius-small);
+  box-shadow: 0 4px 24px hsl(var(--tint-neutral) 10% / 0.2);
+}
+
+.ap-federation__modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-s) var(--space-m);
+  border-block-end: var(--border-width-thin) solid var(--color-outline);
+}
+
+.ap-federation__modal-header h3 {
+  margin: 0;
+  font-size: var(--font-size-m);
+}
+
+.ap-federation__modal-close {
+  font-size: var(--font-size-xl);
+  line-height: 1;
+  padding: 0 var(--space-xs);
+  border: none;
+  background: none;
+  color: var(--color-on-offset);
+  cursor: pointer;
+}
+
+.ap-federation__modal .ap-federation__json-view {
+  margin: 0;
+  border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
+  flex: 1;
+  overflow: auto;
+}
+
+@media (max-width: 40rem) {
+  .ap-federation__post-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .ap-federation__lookup-form {
+    flex-direction: column;
+  }
+}
+
+/* Follow request approve/reject actions */
+.ap-follow-request {
+  margin-block-end: var(--space-m);
+}
+
+.ap-follow-request__actions {
+  display: flex;
+  gap: var(--space-s);
+  margin-block-start: var(--space-xs);
+  padding-inline-start: var(--space-l);
+}
+
+.ap-follow-request__form {
+  display: inline;
+}
+
+.button--danger {
+  background-color: var(--color-red45);
+  color: white;
+}
+
+.button--danger:hover {
+  background-color: var(--color-red35, #c0392b);
+}