rails_den 2.0.0

data/app/assets/stylesheets/rails_den/composer.css

@@ -0,0 +1,358 @@
+.rails-den-composer-card {
+  width: 100%;
+  max-width: none;
+}
+
+.rails-den-composer {
+  overflow: visible;
+  width: 100%;
+  border: 1px solid var(--rails-den-border);
+  border-radius: 10px;
+  background: var(--rails-den-surface-input);
+}
+
+.rails-den-composer-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px 0;
+  border-bottom: 1px solid var(--rails-den-border);
+  background: var(--rails-den-surface);
+}
+
+.rails-den-composer-tab {
+  margin: 0;
+  padding: 9px 14px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--rails-den-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+.rails-den-composer-tab:hover {
+  color: var(--rails-den-text);
+}
+
+.rails-den-composer-tab.is-active {
+  border-bottom-color: var(--rails-den-primary);
+  color: var(--rails-den-text);
+}
+
+.rails-den-composer-toolbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+  padding: 9px 10px;
+  border-bottom: 1px solid var(--rails-den-border);
+  background: rgba(255, 255, 255, 0.018);
+}
+
+.rails-den-composer-tool {
+  min-width: 36px;
+  min-height: 34px;
+  padding: 6px 9px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--rails-den-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.85rem;
+}
+
+.rails-den-composer-tool:hover {
+  border-color: var(--rails-den-border);
+  background: var(--rails-den-surface-raised);
+  color: var(--rails-den-text);
+}
+
+.rails-den-composer-toolbar-divider {
+  width: 1px;
+  height: 24px;
+  margin: 0 4px;
+  background: var(--rails-den-border);
+}
+
+.rails-den-composer-emoji-container {
+  position: relative;
+}
+
+.rails-den-composer-emoji-toggle {
+  font-size: 1rem;
+}
+
+.rails-den-composer-emoji-picker {
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 220px;
+  padding: 10px;
+  display: grid;
+  grid-template-columns:
+    repeat(4, 1fr);
+  gap: 5px;
+  border: 1px solid var(--rails-den-border);
+  border-radius: 8px;
+  background: var(--rails-den-surface-raised);
+  box-shadow: var(--rails-den-shadow);
+}
+
+.rails-den-composer-emoji-picker[hidden] {
+  display: none;
+}
+
+.rails-den-composer-emoji {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 4px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.35rem;
+}
+
+.rails-den-composer-emoji:hover {
+  border-color: var(--rails-den-border);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.rails-den-composer-pane {
+  position: relative;
+  width: 100%;
+}
+
+.rails-den-mention-caret-mirror {
+  position: absolute;
+  visibility: hidden;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.rails-den-mention-suggestions {
+  position: absolute;
+  z-index: 60;
+  max-height: 386px;
+  overflow-y: auto;
+  border: 1px solid var(--rails-den-border);
+  border-radius: 8px;
+  background: var(--rails-den-surface-raised);
+  box-shadow: var(--rails-den-shadow);
+}
+
+.rails-den-mention-suggestion {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--rails-den-border);
+  color: var(--rails-den-text);
+  cursor: pointer;
+}
+
+.rails-den-mention-suggestion:last-child {
+  border-bottom: 0;
+}
+
+.rails-den-mention-suggestion:hover,
+.rails-den-mention-suggestion.is-active {
+  outline: 2px solid var(--rails-den-primary);
+  outline-offset: -2px;
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.rails-den-mention-suggestion-name {
+  font-weight: 700;
+}
+
+.rails-den-mention-suggestion-display {
+  overflow: hidden;
+  color: var(--rails-den-muted);
+  font-size: 0.85rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rails-den-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.rails-den-composer-pane[hidden] {
+  display: none;
+}
+
+.rails-den-composer textarea {
+  display: block;
+  width: 100%;
+  min-height: 200px;
+  margin: 0;
+  padding: 16px;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+  background: var(--rails-den-surface-input);
+  color: var(--rails-den-text);
+  font: inherit;
+  line-height: 1.6;
+  resize: vertical;
+}
+
+.rails-den-composer textarea:focus {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 2px
+    rgba(200, 59, 50, 0.28);
+}
+
+.rails-den-composer textarea::placeholder {
+  color: #737b86;
+}
+
+.rails-den-composer-preview {
+  min-height: 200px;
+  padding: 16px;
+  background: var(--rails-den-surface-input);
+}
+
+.rails-den-composer-preview-content {
+  color: var(--rails-den-text);
+  line-height: 1.65;
+}
+
+.rails-den-composer-preview-content > :first-child {
+  margin-top: 0;
+}
+
+.rails-den-composer-preview-content > :last-child {
+  margin-bottom: 0;
+}
+
+.rails-den-composer-preview-content a {
+  color: #e06a62;
+}
+
+.rails-den-composer-preview-content blockquote {
+  margin: 1rem 0;
+  padding: 0.2rem 0 0.2rem 1rem;
+  border-left: 3px solid var(--rails-den-primary);
+  color: var(--rails-den-muted);
+}
+
+.rails-den-composer-preview-content pre {
+  overflow-x: auto;
+  padding: 14px 16px;
+  border: 1px solid var(--rails-den-border);
+  border-radius: 8px;
+  background: #111419;
+}
+
+.rails-den-composer-preview-content code {
+  font-family:
+    "SFMono-Regular",
+    Consolas,
+    "Liberation Mono",
+    Menlo,
+    monospace;
+}
+
+.rails-den-composer-preview-content :not(pre) > code {
+  padding: 2px 5px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.rails-den-composer-status {
+  padding: 7px 12px;
+  border-top: 1px solid var(--rails-den-border);
+  background: var(--rails-den-surface);
+  color: var(--rails-den-muted);
+  font-size: 0.78rem;
+  text-align: right;
+}
+
+/*
+ * Spoilers
+ */
+
+.rails-den-post-body .spoiler,
+.rails-den-composer-preview .spoiler {
+  padding: 0 4px;
+  border: 1px solid var(--rails-den-border);
+  border-radius: 3px;
+  background: #0f1115;
+  color: transparent;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.rails-den-post-body .spoiler:hover,
+.rails-den-post-body .spoiler:focus,
+.rails-den-post-body .spoiler.is-revealed,
+.rails-den-composer-preview .spoiler:hover,
+.rails-den-composer-preview .spoiler:focus,
+.rails-den-composer-preview .spoiler.is-revealed {
+  border-color: var(--rails-den-primary);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--rails-den-text);
+  user-select: text;
+}
+
+.rails-den-post-body .spoiler:focus,
+.rails-den-composer-preview .spoiler:focus {
+  outline: 2px solid var(--rails-den-primary);
+  outline-offset: 2px;
+}
+
+@media (max-width: 640px) {
+  .rails-den-composer-toolbar {
+    gap: 3px;
+  }
+
+  .rails-den-composer-tool {
+    min-width: 32px;
+    padding: 6px 7px;
+  }
+
+  .rails-den-composer-toolbar-divider {
+    display: none;
+  }
+
+  .rails-den-composer textarea,
+  .rails-den-composer-preview {
+    min-height: 180px;
+  }
+
+  .rails-den-composer-emoji-picker {
+    right: auto;
+    left: 0;
+  }
+
+  .rails-den-mention-suggestions {
+    max-width: calc(100% - 16px);
+  }
+
+  .rails-den-mention-suggestion {
+    min-height: 44px;
+  }
+}

data/app/assets/stylesheets/rails_den/emoji_catalog.css

@@ -0,0 +1,33 @@
+.rails-den-emoji-admin-header { align-items: flex-start; gap: 1rem; }
+.rails-den-emoji-admin-header p, .rails-den-emoji-workflow header p { color: var(--rails-den-muted); }
+.rails-den-emoji-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
+.rails-den-emoji-admin-actions form { margin: 0; }
+.rails-den-emoji-add-all { background: var(--rails-den-danger); }
+.rails-den-emoji-import-result { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-bottom: 1rem; padding: .8rem 1rem; color: var(--rails-den-success); background: var(--rails-den-surface-raised); border: 1px solid currentColor; border-radius: var(--rails-den-radius); }
+.rails-den-emoji-import-result.has-failures { color: var(--rails-den-danger); }
+.rails-den-emoji-admin-panel, .rails-den-emoji-workflow { display: grid; gap: 1.25rem; }
+.rails-den-emoji-record-search { display: grid; gap: .45rem; max-width: 34rem; }
+.rails-den-emoji-record-search > div, .rails-den-emoji-search-row { display: flex; gap: .6rem; }
+.rails-den-emoji-record-search input, .rails-den-emoji-search-row input { flex: 1; min-width: 0; padding: .7rem .8rem; color: var(--rails-den-text); background: var(--rails-den-surface-input); border: 1px solid var(--rails-den-border); border-radius: 8px; }
+.rails-den-emoji-result-summary { margin: 0; color: var(--rails-den-muted); }
+.rails-den-emoji-record-table-wrap { overflow-x: auto; }
+.rails-den-emoji-record-table { width: 100%; border-collapse: collapse; }
+.rails-den-emoji-record-table th, .rails-den-emoji-record-table td { padding: .7rem; border-bottom: 1px solid var(--rails-den-border); text-align: left; }
+.rails-den-emoji-cell { font-size: 1.5rem; }
+.rails-den-emoji-status { display: inline-block; padding: .2rem .55rem; color: var(--rails-den-success); border: 1px solid currentColor; border-radius: 999px; font-size: .8rem; font-weight: 700; }
+.rails-den-emoji-status.is-disabled { color: var(--rails-den-muted); }
+.rails-den-emoji-catalog { display: grid; gap: .75rem; padding: 1rem; background: var(--rails-den-surface-raised); border: 1px solid var(--rails-den-border); border-radius: var(--rails-den-radius); }
+.rails-den-emoji-catalog[aria-busy="true"] .rails-den-emoji-grid { opacity: .55; }
+.rails-den-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; max-height: 30rem; overflow: auto; padding: .2rem; }
+.rails-den-emoji-choice { position: relative; min-width: 0; }
+.rails-den-emoji-choice button, .rails-den-emoji-choice-content { display: flex; width: 100%; min-height: 3.25rem; align-items: center; gap: .55rem; padding: .55rem; color: var(--rails-den-text); background: var(--rails-den-surface); border: 1px solid var(--rails-den-border); border-radius: 8px; text-align: left; cursor: pointer; }
+.rails-den-emoji-choice button:hover, .rails-den-emoji-choice button.is-selected, .rails-den-emoji-choice input:checked + .rails-den-emoji-choice-content { border-color: var(--rails-den-primary); box-shadow: inset 0 0 0 1px var(--rails-den-primary); }
+.rails-den-emoji-choice button > span:first-child, .rails-den-emoji-choice-content > span:first-child { flex: 0 0 auto; font-size: 1.5rem; }
+.rails-den-emoji-choice button > span:last-child, .rails-den-emoji-choice-content > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rails-den-emoji-choice input { position: absolute; z-index: 1; top: .35rem; right: .35rem; width: 1.1rem; height: 1.1rem; }
+.rails-den-emoji-reaction-form { display: grid; gap: 1rem; max-width: 44rem; }
+.rails-den-emoji-reaction-form .field-unit { display: grid; grid-template-columns: 9rem 1fr; gap: .5rem 1rem; align-items: center; }
+.rails-den-emoji-reaction-form .field-unit input[type="text"], .rails-den-emoji-reaction-form .field-unit input[type="number"] { padding: .7rem; color: var(--rails-den-text); background: var(--rails-den-surface-input); border: 1px solid var(--rails-den-border); border-radius: 8px; }
+.rails-den-emoji-reaction-form .field-unit p { grid-column: 2; margin: 0; color: var(--rails-den-muted); }
+.rails-den-emoji-selection-bar { position: sticky; bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1rem; background: var(--rails-den-surface-raised); border: 1px solid var(--rails-den-primary); border-radius: var(--rails-den-radius); box-shadow: var(--rails-den-shadow); }
+@media (max-width: 44rem) { .rails-den-emoji-admin-header { display: grid; } .rails-den-emoji-admin-actions { justify-content: flex-start; } .rails-den-emoji-search-row { display: grid; } .rails-den-emoji-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rails-den-emoji-reaction-form .field-unit { grid-template-columns: 1fr; } .rails-den-emoji-reaction-form .field-unit p { grid-column: 1; } }