dbwatcher 1.1.1 → 1.1.3

data/app/assets/stylesheets/dbwatcher/application.css

@@ -1,7 +1,7 @@
 /**
  * DBWatcher Application Styles
  * Compiled CSS for all components
- * Generated at 2025-07-04 17:05:33 +0700
+ * Generated at 2025-07-11 21:59:56 +0700
  */
 
 /**
@@ -97,6 +97,7 @@
   border-spacing: 0;
 }
 
+/* Header styles */
 .compact-table th {
   padding: 4px 8px;
   font-weight: 500;
@@ -112,6 +113,18 @@
   height: 32px;
 }
 
+/* Cell styles */
+.compact-table td {
+  padding: 2px 8px;
+  border-right: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-light);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+/* Sticky columns */
 /* Enhanced sticky header styling */
 .compact-table th.sticky-left-0 {
   position: sticky;
@@ -136,16 +149,6 @@
   box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.05);
 }
 
-.compact-table td {
-  padding: 2px 8px;
-  border-right: 1px solid var(--border-light);
-  border-bottom: 1px solid var(--border-light);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
 /* Enhanced sticky cell styling */
 .compact-table td.sticky-left-0 {
   position: sticky;
@@ -173,19 +176,6 @@
   box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.05);
 }
 
-/* Special cell formatting */
-.compact-table td.highlight-change {
-  background-color: var(--highlight-change);
-}
-
-.compact-table td.highlight-new {
-  color: #047857;
-}
-
-.compact-table td.highlight-deleted {
-  color: #b91c1c;
-}
-
 /* Row styles */
 .compact-table tr:hover td:not(.sticky-left-0):not(.sticky-left-1):not(.sticky-left-2) {
   background-color: rgba(243, 244, 246, 0.7);
@@ -207,7 +197,7 @@
   background-color: #e6f3ff;
 }
 
-/* Smart column width distribution */
+/* Text overflow handling */
 .compact-table th,
 .compact-table td {
   overflow: hidden;
@@ -215,7 +205,7 @@
   white-space: nowrap;
 }
 
-/* Fixed widths for sticky columns only */
+/* Fixed widths for common columns */
 .compact-table th:first-child,
 .compact-table td:first-child {
   width: 60px;
@@ -240,11 +230,78 @@
   font-size: 11px;
 }
 
+/* Sessions table specific overrides */
+.sessions-table th:nth-child(2),
+.sessions-table td:nth-child(2) {
+  width: 22%;
+  min-width: 160px;
+  max-width: 260px;
+  text-align: left;
+  padding-left: 16px;
+}
+
+/* Enhanced sessions table styling */
+.sessions-table tr {
+  border-bottom: 1px solid var(--border-light);
+  transition: all 0.15s ease;
+}
+
+.sessions-table tr:hover {
+  background-color: rgba(230, 243, 255, 0.5);
+}
+
+.sessions-table td {
+  padding: 6px 8px;
+  vertical-align: middle;
+}
+
+.sessions-table td:first-child .font-mono {
+  color: var(--navy-dark);
+  font-weight: 500;
+  background: var(--gray-50);
+  padding: 2px 4px;
+  border-radius: 3px;
+  border: 1px solid var(--border-medium);
+  display: inline-block;
+}
+
+.sessions-table .badge {
+  min-width: 60px;
+  width: auto;
+  height: auto;
+  padding: 2px 8px;
+}
+
+.sessions-table .actions-cell {
+  width: 80px;
+}
+
+.sessions-table .actions-cell .compact-button {
+  transition: transform 0.15s ease, background-color 0.15s ease;
+}
+
+.sessions-table .actions-cell .compact-button:hover {
+  transform: translateY(-1px);
+}
+
 /* Font styling for specific column types */
 .compact-table .text-right {
   font-family: monospace;
 }
 
+/* Special cell formatting */
+.compact-table td.highlight-change {
+  background-color: var(--highlight-change);
+}
+
+.compact-table td.highlight-new {
+  color: #047857;
+}
+
+.compact-table td.highlight-deleted {
+  color: #b91c1c;
+}
+
 /* Highlight colors */
 .highlight-change {
   background: var(--highlight-change);
@@ -313,6 +370,15 @@
   font-weight: 500;
 }
 
+/* Tab content styles */
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}
+
 /**
  * Form Controls
  * Input fields, selects, buttons
@@ -344,43 +410,89 @@
  * Status Badges
  * Operation and status indicators
  */
-/* Status badges */
+/* Base badge style */
+.badge {
+  padding: 1px 6px;
+  font-size: 10px;
+  border-radius: 3px;
+  font-weight: 500;
+  text-transform: uppercase;
+  display: inline-block;
+  min-width: 18px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+}
+
+/* Operation type badges */
 .badge-insert {
-  background: var(--status-insert);
+  background: var(--status-insert, #10b981);
   color: white;
 }
 
 .badge-update {
-  background: var(--status-update);
+  background: var(--status-update, #6CADDF);
   color: white;
 }
 
 .badge-delete {
-  background: var(--status-delete);
+  background: var(--status-delete, #ef4444);
   color: white;
 }
 
 .badge-select {
-  background: var(--status-select);
+  background: var(--status-select, #6b7280);
   color: white;
 }
 
-.badge {
-  padding: 1px 6px;
-  font-size: 10px;
-  border-radius: 3px;
-  font-weight: 500;
-  text-transform: uppercase;
-  display: inline-block;
+/* Status badges */
+.badge-success {
+  background: var(--status-insert, #10b981);
+  color: white;
+}
+
+.badge-primary {
+  background: var(--blue-medium, #3b82f6);
+  color: white;
+}
+
+.badge-warning {
+  background: var(--status-warning, #f59e0b);
+  color: white;
+}
+
+.badge-error {
+  background: var(--status-delete, #ef4444);
+  color: white;
+}
+
+/* Badge sizes */
+.badge-sm {
+  font-size: 9px;
+  padding: 0px 4px;
+  height: 16px;
+  line-height: 16px;
+}
+
+.badge-lg {
+  font-size: 11px;
+  padding: 2px 8px;
+  height: 20px;
+  line-height: 16px;
+}
+
+/* Changes table specific badges */
+.changes-table-badge {
   width: 18px;
-  height: 18px;
-  line-height: 18px;
-  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /**
  * Diagram Component Styles
  */
+/* Code view container */
 .diagram-code-view {
   position: relative;
   height: 100%;
@@ -398,11 +510,13 @@
   border-color: theme("colors.gray.300");
 }
 
+/* Mermaid diagram container */
 [x-ref="diagramContainer"] .mermaid {
   overflow: auto;
   max-height: calc(100vh - 180px);
 }
 
+/* Code container scrollbar styling */
 pre[x-ref="codeContainer"]::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -421,3 +535,539 @@ pre[x-ref="codeContainer"]::-webkit-scrollbar-thumb {
 pre[x-ref="codeContainer"]::-webkit-scrollbar-thumb:hover {
   background: theme("colors.gray.500");
 }
+
+.tabulator {
+  font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
+  font-size: 12px;
+  border: none;
+  background: white;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.tabulator .tabulator-header {
+  background: #f3f3f3;
+  border-bottom: 2px solid #e8e8e8;
+  font-size: 11px;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+  background: #f3f3f3;
+  border-right: 1px solid #e8e8e8;
+  padding: 4px 8px;
+  font-weight: 500;
+  text-transform: none;
+  height: 32px;
+  text-align: left;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.tabulator .tabulator-header .tabulator-col.sticky-left-0 {
+  position: sticky;
+  left: 0;
+  z-index: 20;
+  background: #f3f3f3;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+}
+
+.tabulator .tabulator-header .tabulator-col.sticky-left-1 {
+  position: sticky;
+  left: 60px;
+  z-index: 19;
+  background: #f3f3f3;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+}
+
+.tabulator .tabulator-header .tabulator-col.sticky-left-2 {
+  position: sticky;
+  left: 108px;
+  z-index: 18;
+  background: #f3f3f3;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
+  background: white;
+  border-bottom: 1px solid #f0f0f0;
+  min-height: auto;
+  transition: background-color 0.15s ease;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
+  background: #f3f4f6;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert {
+  background-color: rgba(16, 185, 129, 0.05);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert:hover {
+  background-color: rgba(16, 185, 129, 0.1);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update {
+  background-color: rgba(108, 173, 223, 0.05);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update:hover {
+  background-color: rgba(108, 173, 223, 0.1);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete {
+  background-color: rgba(239, 68, 68, 0.05);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete:hover {
+  background-color: rgba(239, 68, 68, 0.1);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
+  border-right: 1px solid #f0f0f0;
+  padding: 2px 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: top;
+  font-size: 12px;
+  height: auto;
+  min-height: 28px;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell:has(.space-y-1) {
+  white-space: normal;
+  height: auto;
+  padding: 4px 8px;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-0 {
+  position: sticky;
+  left: 0;
+  background: white;
+  z-index: 5;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-1 {
+  position: sticky;
+  left: 60px;
+  background: white;
+  z-index: 4;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-2 {
+  position: sticky;
+  left: 108px;
+  background: white;
+  z-index: 3;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-2 {
+  background: #f9fafb;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert .tabulator-cell.sticky-left-2 {
+  background-color: rgba(16, 185, 129, 0.05);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update .tabulator-cell.sticky-left-2 {
+  background-color: rgba(108, 173, 223, 0.05);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete .tabulator-cell.sticky-left-2 {
+  background-color: rgba(239, 68, 68, 0.05);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert:hover .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert:hover .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-insert:hover .tabulator-cell.sticky-left-2 {
+  background-color: rgba(16, 185, 129, 0.1);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update:hover .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update:hover .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-update:hover .tabulator-cell.sticky-left-2 {
+  background-color: rgba(108, 173, 223, 0.1);
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete:hover .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete:hover .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.operation-delete:hover .tabulator-cell.sticky-left-2 {
+  background-color: rgba(239, 68, 68, 0.1);
+}
+
+.row-detail {
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+  padding: 0;
+}
+
+.row-detail td {
+  padding: 8px;
+  vertical-align: top;
+  border-right: 1px solid #e5e7eb;
+}
+
+.row-detail h4 {
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 8px;
+}
+
+.row-detail .sticky-left-0 {
+  position: sticky;
+  left: 0;
+  z-index: 5;
+  background: #f9fafb;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+  width: 268px;
+  min-width: 268px;
+}
+
+.expand-btn {
+  padding: 2px;
+  border-radius: 2px;
+  transition: all 0.15s ease;
+}
+
+.expand-btn:hover {
+  background-color: #f3f4f6;
+}
+
+.table-container {
+  min-height: 200px;
+  width: 100%;
+  overflow: auto;
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.column-selector {
+  right: 1rem;
+  margin-top: -2px;
+  z-index: 100;
+}
+
+.timeline-container {
+  @apply h-full flex flex-col;
+}
+
+.timeline-controls {
+  @apply p-3 border-b border-gray-300 bg-gray-50;
+}
+
+.timeline-header {
+  @apply flex items-center justify-between mb-3;
+}
+
+.timeline-title {
+  @apply text-sm font-medium text-gray-900;
+}
+
+.timeline-zoom-controls {
+  @apply flex items-center gap-2;
+}
+
+.timeline-filter-controls {
+  @apply flex items-center gap-4 text-xs flex-wrap;
+}
+
+.timeline-filter-group {
+  @apply flex items-center gap-2;
+}
+
+.timeline-filter-label {
+  @apply text-gray-700 font-medium;
+}
+
+.timeline-visualization {
+  @apply flex-1 overflow-hidden;
+}
+
+.timeline-time-header {
+  @apply h-8 bg-gray-100 border-b border-gray-200 relative;
+}
+
+.timeline-time-scale {
+  @apply absolute inset-0 flex items-center px-4;
+}
+
+.timeline-content {
+  @apply flex-1 overflow-auto p-4 bg-white;
+}
+
+.timeline-track {
+  @apply relative h-16 bg-gray-50 rounded border border-gray-200 mb-4;
+}
+
+.timeline-line {
+  @apply absolute top-1/2 left-4 right-4 h-0.5 bg-gray-300 transform -translate-y-1/2;
+}
+
+.timeline-marker {
+  @apply absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 cursor-pointer;
+}
+
+.timeline-marker .timeline-marker-dot {
+  @apply w-3 h-3 rounded-full border-2 border-white shadow-sm transition-transform;
+}
+
+.timeline-marker .timeline-marker-dot:hover {
+  @apply scale-125;
+}
+
+.timeline-stats {
+  @apply grid grid-cols-2 gap-4 text-xs;
+}
+
+@screen md {
+  .timeline-stats {
+    @apply grid-cols-4;
+  }
+}
+
+.timeline-stat-card {
+  @apply bg-gray-50 p-3 rounded;
+}
+
+.timeline-stat-label {
+  @apply text-gray-500 font-medium;
+}
+
+.timeline-stat-value {
+  @apply text-lg font-bold text-gray-900;
+}
+
+.timeline-stat-detail {
+  @apply text-xs text-gray-500;
+}
+
+.timeline-operations {
+  @apply mt-6;
+}
+
+.timeline-operations-title {
+  @apply text-sm font-medium text-gray-900 mb-3;
+}
+
+.timeline-operations-list {
+  @apply space-y-2 max-h-64 overflow-auto;
+}
+
+.timeline-operation-item {
+  @apply flex items-center justify-between p-2 bg-gray-50 rounded hover:bg-gray-100 cursor-pointer text-xs;
+}
+
+.timeline-operation-info {
+  @apply flex items-center gap-3;
+}
+
+.timeline-operation-marker {
+  @apply w-2 h-2 rounded-full;
+}
+
+.timeline-operation-type {
+  @apply font-medium;
+}
+
+.timeline-operation-time {
+  @apply text-gray-500;
+}
+
+.timeline-operation-record {
+  @apply text-gray-500;
+}
+
+.timeline-empty {
+  @apply text-center py-8 text-gray-500;
+}
+
+.timeline-empty-icon {
+  @apply w-12 h-12 mx-auto mb-4 text-gray-300;
+}
+
+.timeline-empty-action {
+  @apply mt-2 text-blue-600 underline;
+}
+
+.timeline-loading {
+  @apply flex items-center justify-center h-64;
+}
+
+.timeline-loading-spinner {
+  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500;
+}
+
+.timeline-loading-text {
+  @apply ml-2 text-gray-600;
+}
+
+.timeline-error {
+  @apply p-4 bg-red-50 border border-red-200 rounded m-4;
+}
+
+.timeline-error-text {
+  @apply text-red-700;
+}
+
+.timeline-error-retry {
+  @apply mt-2 text-red-600 underline;
+}
+
+.timeline-modal-overlay {
+  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
+}
+
+.timeline-modal-content {
+  @apply bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-96 overflow-auto;
+}
+
+.timeline-modal-header {
+  @apply p-4 border-b border-gray-200 flex justify-between items-center;
+}
+
+.timeline-modal-title {
+  @apply text-lg font-medium;
+}
+
+.timeline-modal-close {
+  @apply text-gray-400 hover:text-gray-600;
+}
+
+.timeline-modal-body {
+  @apply p-4;
+}
+
+.timeline-operation-details {
+  @apply grid grid-cols-1 gap-4 text-sm;
+}
+
+@screen md {
+  .timeline-operation-details {
+    @apply grid-cols-2;
+  }
+}
+
+.timeline-operation-detail-label {
+  @apply font-medium;
+}
+
+.timeline-operation-detail-value {
+  @apply ml-2;
+}
+
+.timeline-operation-detail-value.operation-badge {
+  @apply px-2 py-1 rounded text-xs;
+}
+
+.timeline-operation-detail-value.monospace {
+  @apply font-mono;
+}
+
+.timeline-operation-detail-value.small {
+  @apply text-xs;
+}
+
+.timeline-changes-section {
+  @apply mt-4;
+}
+
+.timeline-changes-title {
+  @apply text-sm font-medium;
+}
+
+.timeline-changes-content {
+  @apply mt-2 p-3 bg-gray-50 rounded text-xs overflow-auto border max-h-32;
+}
+
+.timeline-metadata-section {
+  @apply mt-4;
+}
+
+.timeline-metadata-title {
+  @apply text-sm font-medium;
+}
+
+.timeline-metadata-grid {
+  @apply mt-2 grid grid-cols-2 gap-2 text-xs;
+}
+
+.timeline-metadata-key {
+  @apply font-medium capitalize;
+}
+
+@screen sm {
+  .timeline-filter-controls {
+    @apply flex-nowrap;
+  }
+  .timeline-stats {
+    @apply grid-cols-4;
+  }
+}
+
+.operation-insert {
+  @apply text-green-600 bg-green-100;
+}
+
+.operation-update {
+  @apply text-blue-600 bg-blue-100;
+}
+
+.operation-delete {
+  @apply text-red-600 bg-red-100;
+}
+
+.operation-select {
+  @apply text-purple-600 bg-purple-100;
+}
+
+.timeline-transition-enter {
+  @apply transition ease-out duration-300;
+}
+
+.timeline-transition-enter-start {
+  @apply opacity-0;
+}
+
+.timeline-transition-enter-end {
+  @apply opacity-100;
+}
+
+.timeline-transition-leave {
+  @apply transition ease-in duration-200;
+}
+
+.timeline-transition-leave-start {
+  @apply opacity-100;
+}
+
+.timeline-transition-leave-end {
+  @apply opacity-0;
+}
+
+/**
+ * Tabulator Vendor Overrides
+ * Overrides for the Tabulator.js vendor CSS
+ */
+.tabulator {
+  font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace !important;
+}
+
+.tabulator .tabulator-header {
+  background: #f3f3f3 !important;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+  background: #f3f3f3 !important;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
+  background: white !important;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
+  background: #f3f4f6 !important;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-0, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-1, .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-2 {
+  background: #f9fafb !important;
+}