mbeditor 0.5.3 → 0.7.1

data/app/assets/stylesheets/mbeditor/editor.css

@@ -8,6 +8,19 @@
   box-shadow: none !important;
 }
 
+/* Prevent Pico CSS from applying its primary-colour focus/active state to IDE buttons.
+   Pico sets --pico-background-color and --pico-border-color to its primary blue on
+   button:focus, which bleeds through as a blue tint on any button not explicitly
+   overriding its background with a literal value. */
+#mbeditor-root button:not(.pico-btn):focus,
+#mbeditor-root button:not(.pico-btn):focus-visible,
+#mbeditor-root button:not(.pico-btn):active {
+  --pico-background-color: transparent;
+  --pico-border-color: transparent;
+  --pico-box-shadow: none;
+  --pico-color: inherit;
+}
+
 html, body, #mbeditor-root {
   margin: 0; padding: 0;
   width: 100%; height: 100%;
@@ -58,33 +71,30 @@ html, body, #mbeditor-root {
 
 /* ── Sidebar ─────────────────────────────────────────────── */
 .ide-sidebar {
-  width: 280px;
   min-width: 280px;
   max-width: 560px;
   background: var(--ide-panel-bg);
-  border-right: 1px solid var(--ide-border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   flex-shrink: 0;
-  transition: width 0.15s ease;
-}
-
-.ide-sidebar.ide-sidebar-collapsed {
-  min-width: 0;
-  max-width: none;
 }
 
-/* ── Collapsed sidebar icon strip ──────────────────────────── */
-.sidebar-icon-strip {
+/* ── Activity Bar (VSCode-style, always visible) ───────── */
+.ide-activity-bar {
+  width: 48px;
+  min-width: 48px;
+  flex-shrink: 0;
+  background: var(--ide-panel-bg);
+  border-right: 1px solid var(--ide-border);
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 100%;
   padding: 4px 0;
+  z-index: 10;
 }
 
-.sidebar-strip-top {
+.ide-activity-bar-top {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -92,7 +102,7 @@ html, body, #mbeditor-root {
   flex: 1;
 }
 
-.sidebar-strip-bottom {
+.ide-activity-bar-bottom {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -100,7 +110,7 @@ html, body, #mbeditor-root {
   padding-bottom: 4px;
 }
 
-.sidebar-strip-btn {
+.ide-activity-btn {
   width: 36px;
   height: 36px;
   background: transparent;
@@ -115,25 +125,28 @@ html, body, #mbeditor-root {
   transition: background 0.12s ease, color 0.12s ease;
 }
 
-.sidebar-strip-btn:hover {
+.ide-activity-btn:hover {
   background: var(--ide-hover-bg);
   color: var(--ide-text);
 }
 
-.sidebar-strip-btn.active {
+.ide-activity-btn.active {
   color: var(--ide-accent-fg);
   border-left: 2px solid var(--ide-accent-fg);
 }
 
-/* Visually groups Explorer + Search + Settings buttons in the collapsed strip */
-.sidebar-nav-group {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--ide-border);
-  border-radius: 4px;
-  overflow: hidden;
+.sidebar-panel-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ide-fg-muted, var(--ide-text-muted, #888));
+  padding: 10px 12px 6px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--ide-border);
 }
 
+
 .panel-divider {
   flex-shrink: 0;
   cursor: col-resize;
@@ -146,13 +159,6 @@ html, body, #mbeditor-root {
   border-right: 1px solid var(--ide-border);
 }
 
-.ide-sidebar-collapsed + .sidebar-divider {
-  cursor: default;
-}
-
-.ide-sidebar-collapsed + .sidebar-divider:hover {
-  background: var(--ide-panel-bg-alt);
-}
 
 .pane-divider {
   width: 4px;
@@ -179,33 +185,6 @@ html, body, #mbeditor-root {
   gap: 6px;
 }
 
-.ide-sidebar-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--ide-border);
-  flex-shrink: 0;
-}
-
-.ide-sidebar-tab {
-  flex: 1;
-  padding: 5px 0;
-  font-size: 11px;
-  text-align: center;
-  cursor: pointer;
-  color: var(--ide-text-muted);
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  transition: color 0.15s, background 0.15s;
-}
-
-.ide-sidebar-tab.ide-sidebar-tab-icon {
-  flex: 0 0 auto;
-  padding: 5px 10px;
-  font-size: 14px;
-}
-
-.ide-sidebar-tab:hover { color: var(--ide-text); background: var(--ide-input-bg); }
-.ide-sidebar-tab.active { color: var(--ide-accent-fg); border-bottom: 2px solid var(--ide-accent-fg); }
 
 .ide-sidebar-content {
   flex: 1;
@@ -319,6 +298,19 @@ html, body, #mbeditor-root {
   box-shadow: inset 0 0 0 1px rgba(78, 201, 176, 0.35);
 }
 
+.branch-switch-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(30, 30, 30, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ccc;
+  font-size: 13px;
+  z-index: 100;
+  pointer-events: none;
+}
+
 /* ── Tab Bar ─────────────────────────────────────────────── */
 .tab-bar {
   display: flex;
@@ -827,6 +819,11 @@ html, body, #mbeditor-root {
   font-size: 10px;
   white-space: nowrap;
   padding-left: 8px;
+  cursor: pointer;
+}
+.statusbar-version:hover {
+  color: var(--ide-accent-text);
+  background: color-mix(in srgb, var(--ide-accent-text) 15%, transparent);
 }
 
 .statusbar-eol-btn {
@@ -861,7 +858,7 @@ html, body, #mbeditor-root {
 }
 
 .search-input-shell {
-  flex-shrink: 0;
+  width: 100%;
   position: relative;
   display: flex;
   align-items: center;
@@ -1069,6 +1066,368 @@ html, body, #mbeditor-root {
   gap: 6px;
 }
 
+/* ── Rails Panel ─────────────────────────────────────────── */
+.rails-panel {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  flex: 1;
+  padding: 8px 0;
+}
+
+.rails-panel-loading,
+.rails-panel-empty {
+  padding: 12px 16px;
+  color: var(--ide-text-muted);
+  font-size: 12px;
+}
+
+.rails-group {
+  margin-bottom: 4px;
+}
+
+.rails-group-title {
+  padding: 4px 12px 2px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ide-text-muted);
+  user-select: none;
+}
+
+.rails-group-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 12px 2px 16px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--ide-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rails-group-item:hover {
+  background: var(--ide-hover-bg);
+}
+
+.rails-group-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.rails-group-item-dirty {
+  flex-shrink: 0;
+  font-size: 8px;
+  color: #e5c07b;
+  line-height: 1;
+}
+
+.rails-group-item-kind {
+  font-size: 10px;
+  color: #888;
+  margin-left: auto;
+  padding-right: 4px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.rails-panel-overflow {
+  padding: 4px 12px 8px;
+  font-size: 11px;
+  color: var(--ide-text-muted, #888);
+  font-style: italic;
+}
+
+/* ── Rails schema button (in CollapsibleSection actions) ──── */
+.rails-schema-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: var(--ide-text-muted, #888);
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 0;
+  font-size: 11px;
+  opacity: 0;
+  transition: opacity 0.1s, color 0.1s;
+}
+.collapsible-header:hover .rails-schema-btn,
+.rails-schema-btn-loading {
+  opacity: 1;
+}
+.rails-schema-btn:hover {
+  color: var(--ide-text, #ccc);
+  background: var(--ide-hover, rgba(255,255,255,0.08));
+}
+
+/* ── Schema modal ─────────────────────────────────────────── */
+.schema-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
+  z-index: 9000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.schema-modal {
+  background: var(--ide-bg, #1e1e1e);
+  border: 1px solid var(--ide-border, #3c3c3c);
+  border-radius: 6px;
+  min-width: 420px;
+  max-width: 680px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  overflow: hidden;
+}
+.schema-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--ide-border, #3c3c3c);
+  flex-shrink: 0;
+}
+.schema-modal-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ide-text, #ccc);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.schema-modal-table-name {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--ide-text-muted, #888);
+  margin-left: 8px;
+  font-family: monospace;
+  background: var(--ide-hover, rgba(255,255,255,0.06));
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.schema-modal-close {
+  background: transparent;
+  border: none;
+  color: var(--ide-text-muted, #888);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 13px;
+}
+.schema-modal-close:hover { color: var(--ide-text, #ccc); background: var(--ide-hover, rgba(255,255,255,0.08)); }
+.schema-modal-body {
+  overflow-y: auto;
+  padding: 0 0 12px;
+  flex: 1;
+}
+.schema-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.schema-table th {
+  text-align: left;
+  padding: 6px 16px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ide-text-muted, #888);
+  border-bottom: 1px solid var(--ide-border, #3c3c3c);
+  background: var(--ide-sidebar-bg, #252526);
+}
+.schema-table td {
+  padding: 5px 16px;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  vertical-align: middle;
+}
+.schema-table tr:last-child td { border-bottom: none; }
+.schema-table tr:hover td { background: var(--ide-hover, rgba(255,255,255,0.04)); }
+.schema-col-name {
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--ide-text, #d4d4d4);
+  white-space: nowrap;
+}
+.schema-col-type {
+  font-family: monospace;
+  font-size: 11px;
+  white-space: nowrap;
+}
+/* type colouring */
+.schema-type-string, .schema-type-text, .schema-type-citext { color: #ce9178; }
+.schema-type-integer, .schema-type-bigint, .schema-type-decimal, .schema-type-float, .schema-type-numeric { color: #b5cea8; }
+.schema-type-boolean { color: #569cd6; }
+.schema-type-datetime, .schema-type-date, .schema-type-time, .schema-type-timestamp { color: #9cdcfe; }
+.schema-type-json, .schema-type-jsonb { color: #dcdcaa; }
+.schema-col-opts {
+  font-size: 11px;
+  color: var(--ide-text-muted, #888);
+  white-space: nowrap;
+}
+.schema-indexes {
+  padding: 0 16px;
+  margin-top: 4px;
+}
+.schema-indexes-header {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ide-text-muted, #888);
+  padding: 8px 0 4px;
+  border-top: 1px solid var(--ide-border, #3c3c3c);
+}
+.schema-index-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 0;
+  font-size: 11px;
+  font-family: monospace;
+  color: var(--ide-text-muted, #999);
+}
+.schema-index-cols { flex: 1; }
+.schema-index-unique {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #569cd6;
+  background: rgba(86,156,214,0.12);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-family: sans-serif;
+}
+.schema-index-name {
+  font-size: 10px;
+  color: var(--ide-text-muted, #666);
+  opacity: 0.7;
+}
+.schema-modal-error {
+  padding: 24px 20px;
+  color: var(--ide-text-muted, #888);
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+/* ── Changelog tab ────────────────────────────────────────── */
+.changelog-view {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--ide-bg, #1e1e1e);
+}
+.changelog-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 40px 48px;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+.changelog-loading,
+.changelog-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--ide-text-muted, #888);
+  font-size: 13px;
+}
+.changelog-h1 {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--ide-text, #d4d4d4);
+  margin: 0 0 28px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--ide-border, #3c3c3c);
+}
+.changelog-version-row {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin: 32px 0 10px;
+}
+.changelog-version-badge {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ide-accent-text, #4fc1ff);
+  letter-spacing: -0.01em;
+}
+.changelog-version-date {
+  font-size: 11px;
+  color: var(--ide-text-muted, #888);
+}
+.changelog-section {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  margin: 18px 0 6px;
+  padding: 3px 0;
+}
+.changelog-section i { font-size: 10px; }
+.changelog-section-added    { color: #4ec9b0; }
+.changelog-section-fixed    { color: #569cd6; }
+.changelog-section-changed  { color: #dcdcaa; }
+.changelog-section-removed  { color: #f44747; }
+.changelog-section-performance { color: #ce9178; }
+.changelog-section-tests    { color: #b5cea8; }
+.changelog-section-security { color: #d7ba7d; }
+.changelog-list {
+  margin: 0 0 4px 0;
+  padding-left: 20px;
+  list-style: none;
+}
+.changelog-list li {
+  position: relative;
+  padding: 2px 0 2px 4px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--ide-text, #ccc);
+}
+.changelog-list li::before {
+  content: '–';
+  position: absolute;
+  left: -12px;
+  color: var(--ide-text-muted, #666);
+}
+.changelog-list li strong {
+  color: var(--ide-text, #d4d4d4);
+  font-weight: 600;
+}
+.changelog-p {
+  font-size: 12px;
+  color: var(--ide-text-muted, #999);
+  margin: 4px 0;
+  line-height: 1.5;
+}
+.changelog-rule {
+  border: none;
+  border-top: 1px solid var(--ide-border, #3c3c3c);
+  margin: 24px 0;
+}
+
 /* ── Git Status Panel ─────────────────────────────────────── */
 .git-panel { padding: 8px; }
 
@@ -1419,9 +1778,9 @@ html, body, #mbeditor-root {
 .collapsible-title {
   flex: 1;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .collapsible-actions {
@@ -1435,7 +1794,7 @@ html, body, #mbeditor-root {
 .project-actions {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 0;
 }
 
 /* Open-editors panel: height is controlled by the --open-editors-height CSS variable
@@ -1473,15 +1832,8 @@ html, body, #mbeditor-root {
 }
 
 .open-editors-group-actions {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.12s ease;
-}
-
-.open-editors-group:hover .open-editors-group-actions,
-.open-editors-group:focus-within .open-editors-group-actions {
   opacity: 1;
-  pointer-events: auto;
+  transition: opacity 0.12s ease;
 }
 
 .ide-icon-btn {
@@ -2109,14 +2461,6 @@ textarea {
   align-items: center;
   justify-content: center;
 }
-.sidebar-strip-btn {
-  padding: 0;
-  margin: 0;
-  border: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
 
 /* Context menu items */
 .context-menu-item {
@@ -2272,3 +2616,24 @@ button:not(.pico-btn) { margin-bottom: 0; }
 .project-actions[role="group"] button {
   --pico-form-element-spacing-horizontal: 0;
 }
+
+/* Pico also sets width:auto on [role=group] button at (0,1,1), beating our
+   .project-action-btn width:24px at (0,1,0). Use (0,2,0) to enforce dimensions. */
+.project-actions .project-action-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+}
+
+/* Pico applies a blue focus ring to the GROUP container via :has(button:focus),
+   not to the button itself — so our button-level fix never reached it.
+   Kill it here by zeroing the group-level box-shadow custom properties. */
+.project-actions[role="group"] {
+  --pico-group-box-shadow: none !important;
+  --pico-group-box-shadow-focus-with-button: none !important;
+  box-shadow: none !important;
+}
+
+.mbeditor-format-changed {
+  background-color: rgba(80, 200, 100, 0.15);
+}

data/app/channels/mbeditor/editor_channel.rb

@@ -1,15 +1,11 @@
 # frozen_string_literal: true
 
-require "fileutils"
 require "pathname"
 
 module Mbeditor
   CableBaseClass = defined?(ActionCable::Channel::Base) ? ActionCable::Channel::Base : Object
 
   class EditorChannel < CableBaseClass
-    STATE_MAX_BYTES    = 1 * 1024 * 1024
-    SAFE_BRANCH_NAME   = /\A[a-zA-Z0-9._\-\/]+\z/
-
     def subscribed
       stream_from "mbeditor_editor" if respond_to?(:stream_from)
     end
@@ -18,48 +14,17 @@ module Mbeditor
       # no-op
     end
 
-    # Called via WebSocketService.perform('save_state', { state: ... })
     def save_state(data)
-      Rails.logger.silence do
-        payload = (data["state"] || data).to_json
-        return if payload.bytesize > STATE_MAX_BYTES
-
-        root = workspace_root
-        path = root.join("tmp", "mbeditor_workspace.json")
-        FileUtils.mkdir_p(root.join("tmp"))
-        File.open(path, File::RDWR | File::CREAT) do |f|
-          f.flock(File::LOCK_EX)
-          f.truncate(0)
-          f.rewind
-          f.write(payload)
-        end
-      end
+      state = data["state"] || data
+      EditorStateService.new(workspace_root).write_state(state)
     rescue StandardError
       # Never let a state-save failure crash the WebSocket connection
     end
 
-    # Called via WebSocketService.perform('save_branch_state', { branch: ..., state: ... })
     def save_branch_state(data)
-      Rails.logger.silence do
-        branch = data["branch"].to_s.strip
-        return unless branch.match?(SAFE_BRANCH_NAME)
-
-        state_data = data["state"]
-        payload_json = state_data.to_json
-        return if payload_json.bytesize > STATE_MAX_BYTES
-
-        root = workspace_root
-        path = root.join("tmp", "mbeditor_branch_states.json")
-        FileUtils.mkdir_p(root.join("tmp"))
-        File.open(path, File::RDWR | File::CREAT) do |f|
-          f.flock(File::LOCK_EX)
-          existing = f.size > 0 ? JSON.parse(f.read) : {}
-          existing[branch] = state_data
-          f.truncate(0)
-          f.rewind
-          f.write(existing.to_json)
-        end
-      end
+      branch = data["branch"].to_s.strip
+      state  = data["state"]
+      EditorStateService.new(workspace_root).write_branch_state(branch, state)
     rescue StandardError
       # Never let a state-save failure crash the WebSocket connection
     end
@@ -70,7 +35,6 @@ module Mbeditor
       configured = Mbeditor.configuration.workspace_root
       return Pathname.new(configured.to_s) if configured.present?
 
-      # Fall back to git root, same logic as ApplicationController
       rails_root = Rails.root.to_s
       out, _err, status = Open3.capture3("git", "-C", rails_root, "rev-parse", "--show-toplevel")
       Pathname.new(status.success? && out.strip.present? ? out.strip : rails_root)