sincerely 1.0.0 → 1.1.1

data/app/assets/javascripts/sincerely/template_preview.js

@@ -0,0 +1,12 @@
+document.querySelectorAll('.preview-tab').forEach(function(tab) {
+  tab.addEventListener('click', function() {
+    var selected = tab.dataset.tab;
+
+    document.querySelectorAll('.preview-tab').forEach(function(t) {
+      t.classList.toggle('active', t.dataset.tab === selected);
+    });
+
+    document.getElementById('html-preview').classList.toggle('preview-frame--hidden', selected !== 'html');
+    document.getElementById('text-preview').classList.toggle('preview-frame--hidden', selected !== 'text');
+  });
+});

data/app/assets/javascripts/sincerely/theme_init.js

@@ -0,0 +1,9 @@
+(function() {
+  var theme = localStorage.getItem('sincerely-theme');
+  if (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    theme = 'dark';
+  }
+  if (theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+  }
+})();

data/app/assets/stylesheets/sincerely/charts.css

@@ -0,0 +1,250 @@
+/* Donut Chart */
+.donut-chart-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1rem 0;
+}
+
+.donut-chart-wrapper {
+  position: relative;
+  width: 300px;
+  height: 300px;
+  flex-shrink: 0;
+}
+
+.donut-chart {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.donut-segment {
+  fill: none;
+  stroke-width: 32;
+  stroke-linecap: butt;
+  transition: opacity 0.2s, filter 0.2s;
+  cursor: pointer;
+}
+
+.donut-segment.dimmed {
+  opacity: 0.3;
+  filter: grayscale(60%);
+}
+
+.donut-segment.highlighted {
+  filter: brightness(1.1);
+}
+
+.donut-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  pointer-events: none;
+}
+
+.donut-center-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1;
+}
+
+.donut-center-label {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-top: 0.25rem;
+}
+
+.donut-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.donut-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 0.15s, opacity 0.2s;
+}
+
+.donut-legend-item:hover {
+  background: var(--gray-100);
+}
+
+.donut-legend-item.dimmed {
+  opacity: 0.4;
+}
+
+.donut-legend-item.highlighted {
+  background: var(--gray-100);
+}
+
+.donut-legend-color {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.donut-legend-text {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.donut-legend-count {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.donut-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Line Chart */
+.line-chart-container {
+  padding: 1rem 0;
+}
+
+.line-chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 280px;
+}
+
+.line-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.line-chart-line {
+  fill: none;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: opacity 0.2s, stroke-width 0.2s;
+  cursor: pointer;
+}
+
+.line-chart-line.dimmed {
+  opacity: 0.15;
+}
+
+.line-chart-line.highlighted {
+  stroke-width: 4;
+}
+
+.line-chart-area {
+  opacity: 0.1;
+  transition: opacity 0.2s;
+}
+
+.line-chart-area.dimmed {
+  opacity: 0.02;
+}
+
+.line-chart-area.highlighted {
+  opacity: 0.2;
+}
+
+.line-chart-axis {
+  stroke: var(--border-color);
+  stroke-width: 1;
+}
+
+.line-chart-grid {
+  stroke: var(--border-color);
+  stroke-width: 0.5;
+  opacity: 0.5;
+}
+
+.line-chart-label {
+  font-size: 0.625rem;
+  fill: var(--text-secondary);
+}
+
+.line-chart-label-y {
+  text-anchor: end;
+}
+
+.line-chart-label-x {
+  text-anchor: middle;
+}
+
+.line-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.line-chart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 0.15s, opacity 0.2s;
+}
+
+.line-chart-legend-item:hover {
+  background: var(--gray-100);
+}
+
+.line-chart-legend-item.dimmed {
+  opacity: 0.4;
+}
+
+.line-chart-legend-item.highlighted {
+  background: var(--gray-100);
+}
+
+.line-chart-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 280px;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .donut-chart-wrapper {
+    width: 220px;
+    height: 220px;
+  }
+
+  .line-chart-wrapper {
+    height: 200px;
+  }
+}
+
+@media (max-width: 480px) {
+  .donut-chart-wrapper {
+    width: 180px;
+    height: 180px;
+  }
+
+  .donut-center-value {
+    font-size: 1.5rem;
+  }
+}