neon_sakura 0.1.4

data/app/controllers/style_guide_controller.rb

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+# Controller for the style guide - development/test only
+# Displays all UI components, icons, themes, and code examples
+class StyleGuideController < ActionController::Base
+  # Include Pagy method for pagination support (if available)
+  # Pagy 43+ uses Pagy::Method instead of Pagy::Backend
+  include Pagy::Method if defined?(Pagy::Method)
+  include Pagy::Backend if defined?(Pagy::Backend) && !defined?(Pagy::Method)
+
+  # Include helpers in controller for use in actions
+  include NeonSakura::IconHelper
+  include NeonSakura::ThemeHelper
+
+  # Make helpers available to views
+  helper Pagy::Frontend if defined?(Pagy::Frontend)
+  helper NeonSakura::IconHelper
+  helper NeonSakura::ThemeHelper
+  helper NeonSakura::StylesheetHelper
+
+  # Use null_session for CSRF - appropriate for read-only pages with no forms
+  # This resets the session instead of raising an exception for missing/invalid tokens
+  protect_from_forgery with: :exception
+
+  layout "style_guide"
+
+  # Before actions to enforce environment restriction
+  before_action :ensure_dev_or_test_environment
+  before_action :ensure_style_guide_enabled
+
+  def index
+    @page_title = "Neon Sakura Style Guide"
+
+    # Collect all icons dynamically
+    @icons = available_icons
+
+    # Collect all images dynamically
+    @images = available_images
+
+    # Set up Pagy pagination examples if enabled
+    @pagy_enabled = NeonSakura.configuration.style_guide_pagy_examples
+    @pagy_available = false
+    @pagy_error = nil
+
+    if @pagy_enabled
+      # Generate dummy data for Pagy pagination examples
+      @pagy_items = generate_pagy_dummy_data
+
+      # Try to set up Pagy if available
+      if defined?(Pagy)
+        begin
+          # Pagy 43+ uses pagy(:offset, collection, **options)
+          # Older Pagy versions use pagy_array(collection, **options)
+          if defined?(Pagy::Method)
+            # Pagy 43+ API
+            @pagy, @page_items = pagy(:offset, @pagy_items, limit: 10)
+          elsif respond_to?(:pagy_array)
+            # Older Pagy API with array extra
+            @pagy, @page_items = pagy_array(@pagy_items, limit: 10)
+          else
+            raise NoMethodError, "No compatible Pagy pagination method found"
+          end
+          @pagy_available = true
+        rescue StandardError => e
+          # Pagy initialization failed - provide helpful error message
+          @pagy_error = "Pagy pagination examples failed to initialize. " \
+                        "Error: #{e.message}. " \
+                        "To disable these examples, set config.style_guide_pagy_examples = false in your " \
+                        "NeonSakura configuration."
+        end
+      else
+        # Pagy not installed
+        @pagy_error = "Pagy gem is not installed. Add 'gem \"pagy\"' to your Gemfile, " \
+                      "or disable Pagy examples by setting config.style_guide_pagy_examples = false"
+      end
+    end
+
+    # Theme information
+    @available_themes = NeonSakura.config.available_themes
+    @current_theme = current_theme
+  end
+
+  private
+
+  def ensure_dev_or_test_environment
+    unless Rails.env.development? || Rails.env.test?
+      render plain: "Style guide only available in development and test environments", status: :not_found
+    end
+  end
+
+  def ensure_style_guide_enabled
+    unless NeonSakura.configuration.enable_style_guide
+      render plain: "Style guide is disabled", status: :not_found
+    end
+  end
+
+  # Get list of available images
+  def available_images
+    image_dir = File.join(NeonSakura::Engine.root, "app", "assets", "images")
+    return [] unless Dir.exist?(image_dir)
+
+    Dir.glob(File.join(image_dir, "*.{png,jpg,jpeg,svg,gif}")).map do |file|
+      File.basename(file)
+    end.sort
+  end
+
+  # Generate dummy data for Pagy examples
+  def generate_pagy_dummy_data
+    (1..100).map do |i|
+      {
+        id: i,
+        title: "Item #{i}",
+        description: "This is a sample item for pagination demo"
+      }
+    end
+  end
+end

data/app/helpers/errors_helper.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+# Helper methods for error pages
+module ErrorsHelper
+  # Include all route helpers for error pages
+  include Rails.application.routes.url_helpers
+
+  # Provide default_url_options for url_helpers
+  def default_url_options
+    Rails.application.config.action_mailer.default_url_options || {}
+  end
+end

data/app/helpers/neon_sakura/navbar_helper.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module NeonSakura
+  module NavbarHelper
+    # Check if a navigation link is currently active
+    # @param link [Hash] The link configuration
+    # @return [Boolean] true if the link is active
+    def nav_link_active?(link)
+      return false unless link[:path]
+
+      is_active = current_page?(link[:path]) rescue false
+      return true if is_active
+
+      # Check additional active_paths if present
+      if link[:active_paths]
+        link[:active_paths].any? { |path| current_page?(path) rescue false }
+      else
+        false
+      end
+    end
+
+    # Safely evaluate a condition string in the current context
+    # @param condition [String] The Ruby code to evaluate
+    # @return [Boolean] The result of the evaluation
+    def eval_nav_condition(condition)
+      return true if condition.nil? || condition.empty?
+
+      instance_eval(condition.to_s)
+    rescue StandardError => e
+      Rails.logger.warn("Failed to evaluate navbar condition '#{condition}': #{e.message}")
+      false
+    end
+
+    # Check if an icon exists before rendering
+    # @param icon_name [String] The icon partial name
+    # @return [Boolean] true if the icon partial exists
+    def nav_icon_exists?(icon_name)
+      return false if icon_name.blank?
+
+      lookup_context.exists?("shared/icons/#{icon_name}", [], true)
+    end
+  end
+end

data/app/helpers/style_guide_helper.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# Helper methods for the style guide
+module StyleGuideHelper
+  # Render a component example with preview and code
+  # @param title [String] The example title
+  # @param code [String] The ERB code to display
+  # @param options [Hash] Additional options
+  # @yield Block containing the component to render
+  # @return [String] HTML for the example with code
+  def example_with_code(title, code = nil, options = {}, &block)
+    content_tag :div, class: "code-example-wrapper #{options[:wrapper_class]}" do
+      preview_section(title, &block) + code_section(code)
+    end
+  end
+
+  private
+
+  def preview_section(title, &block)
+    content_tag :div, class: "code-example-preview" do
+      title_tag = content_tag :h3, title, class: "text-xl font-semibold mb-4"
+      preview_content = capture(&block)
+      title_tag + preview_content
+    end
+  end
+
+  def code_section(code)
+    return "".html_safe if code.blank?
+
+    content_tag :div, class: "code-example-code" do
+      content_tag :pre do
+        content_tag :code, code
+      end
+    end
+  end
+end

data/app/javascript/neon_sakura/dropdown.js

@@ -0,0 +1,22 @@
+// Dropdown functionality for Mission Control
+document.addEventListener('DOMContentLoaded', function() {
+  // This function handles dropdown toggle behavior
+  const dropdowns = document.querySelectorAll('.dropdown-toggle');
+
+  dropdowns.forEach(function(dropdown) {
+    dropdown.addEventListener('click', function(e) {
+      e.preventDefault();
+      const parent = this.parentElement;
+      parent.classList.toggle('open');
+    });
+  });
+
+  // Close dropdowns when clicking outside
+  document.addEventListener('click', function(e) {
+    if (!e.target.closest('.dropdown')) {
+      document.querySelectorAll('.dropdown.open').forEach(function(dropdown) {
+        dropdown.classList.remove('open');
+      });
+    }
+  });
+});

data/app/javascript/neon_sakura/navbar.js

@@ -0,0 +1,71 @@
+// Navbar dropdown functionality
+// Converted from Stimulus controller to vanilla JavaScript for broader compatibility
+
+document.addEventListener('DOMContentLoaded', function() {
+  initializeNavbarDropdowns();
+});
+
+// Also initialize on Turbo page loads if Turbo is present
+if (typeof Turbo !== 'undefined') {
+  document.addEventListener('turbo:load', function() {
+    initializeNavbarDropdowns();
+  });
+}
+
+function initializeNavbarDropdowns() {
+  const dropdowns = document.querySelectorAll('[data-navbar-dropdown]');
+
+  dropdowns.forEach(function(dropdown) {
+    const toggle = dropdown.querySelector('[data-action="toggle"]');
+    const menu = dropdown.querySelector('[data-menu]');
+
+    if (!toggle || !menu) return;
+
+    // Remove any existing listeners to prevent duplicates
+    const newToggle = toggle.cloneNode(true);
+    toggle.parentNode.replaceChild(newToggle, toggle);
+
+    // Add click handler for toggle button
+    newToggle.addEventListener('click', function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const isOpen = dropdown.classList.contains('open');
+
+      // Close all other dropdowns first
+      closeAllNavDropdowns();
+
+      // Toggle this dropdown
+      if (!isOpen) {
+        dropdown.classList.add('open');
+        newToggle.setAttribute('aria-expanded', 'true');
+      }
+    });
+  });
+
+  // Close dropdowns when clicking outside
+  document.addEventListener('click', function(event) {
+    if (!event.target.closest('[data-navbar-dropdown]')) {
+      closeAllNavDropdowns();
+    }
+  });
+
+  // Close dropdowns on Escape key
+  document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape') {
+      closeAllNavDropdowns();
+    }
+  });
+}
+
+function closeAllNavDropdowns() {
+  const openDropdowns = document.querySelectorAll('[data-navbar-dropdown].open');
+
+  openDropdowns.forEach(function(dropdown) {
+    dropdown.classList.remove('open');
+    const toggle = dropdown.querySelector('[data-action="toggle"]');
+    if (toggle) {
+      toggle.setAttribute('aria-expanded', 'false');
+    }
+  });
+}

data/app/javascript/neon_sakura/theme_switcher.js

@@ -0,0 +1,187 @@
+// Theme switcher functionality for neon_sakura
+// Handles theme switching via localStorage with optional backend persistence
+
+(function() {
+  'use strict';
+
+  // Only initialize once
+  if (window.neonSakuraThemeInitialized) return;
+  window.neonSakuraThemeInitialized = true;
+
+  const STORAGE_KEY_NAME = 'neon_sakura_theme_name';
+  const STORAGE_KEY_MODE = 'neon_sakura_theme_mode';
+
+  // Get available themes from configuration (embedded in page)
+  function getAvailableThemes() {
+    const themesElement = document.querySelector('[data-available-themes]');
+    if (themesElement) {
+      try {
+        return JSON.parse(themesElement.dataset.availableThemes);
+      } catch (e) {
+        console.error('Failed to parse available themes:', e);
+      }
+    }
+    // Fallback to single default theme
+    return [{ name: 'purple', mode: 'dark', label: 'Purple Dark' }];
+  }
+
+  // Get current theme from localStorage or default
+  function getCurrentTheme() {
+    const themes = getAvailableThemes();
+    const storedName = localStorage.getItem(STORAGE_KEY_NAME);
+    const storedMode = localStorage.getItem(STORAGE_KEY_MODE);
+
+    // If we have stored theme, validate it exists in available themes
+    if (storedName && storedMode) {
+      const found = themes.find(t => t.name === storedName && t.mode === storedMode);
+      if (found) {
+        return found;
+      }
+    }
+
+    // Return first available theme as default
+    return themes[0];
+  }
+
+  // Apply theme to HTML element
+  function applyTheme(theme) {
+    const html = document.documentElement;
+    html.setAttribute('data-theme-name', theme.name);
+    html.setAttribute('data-theme-mode', theme.mode);
+
+    // Store in localStorage
+    localStorage.setItem(STORAGE_KEY_NAME, theme.name);
+    localStorage.setItem(STORAGE_KEY_MODE, theme.mode);
+
+    // Set cookie for server-side access
+    document.cookie = `theme_name=${theme.name}; path=/; max-age=31536000`; // 1 year
+    document.cookie = `theme_mode=${theme.mode}; path=/; max-age=31536000`;
+
+    // Optional: Send to backend if API endpoint is configured
+    const apiEndpoint = document.querySelector('[data-theme-api-endpoint]');
+    if (apiEndpoint && apiEndpoint.dataset.themeApiEndpoint) {
+      sendThemeToBackend(theme, apiEndpoint.dataset.themeApiEndpoint);
+    }
+
+    // Update UI elements
+    updateThemeUI(theme);
+  }
+
+  // Send theme to backend via AJAX
+  function sendThemeToBackend(theme, endpoint) {
+    fetch(endpoint, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]')?.content || ''
+      },
+      body: JSON.stringify({
+        theme_name: theme.name,
+        theme_mode: theme.mode
+      })
+    }).catch(function(error) {
+      console.error('Failed to save theme to backend:', error);
+    });
+  }
+
+  // Update theme switcher UI (icons, labels, checkmarks)
+  function updateThemeUI(currentTheme) {
+    const themes = getAvailableThemes();
+
+    // Update toggle button icon (for 2-theme mode)
+    const themeIcon = document.getElementById('theme-icon');
+    if (themeIcon) {
+      // Show moon for light mode (switch to dark), sun for dark mode (switch to light)
+      themeIcon.innerHTML = currentTheme.mode === 'light'
+        ? '<%= render "shared/icons/moon", css_class: "w-4 h-4" %>'  // Switch to dark
+        : '<%= render "shared/icons/sun", css_class: "w-4 h-4" %>';  // Switch to light
+    }
+
+    // Update checkmarks in dropdown (for 3+ theme mode)
+    const themeItems = document.querySelectorAll('[data-theme-item]');
+    themeItems.forEach(function(item) {
+      const themeName = item.dataset.themeName;
+      const themeMode = item.dataset.themeMode;
+      const isActive = themeName === currentTheme.name && themeMode === currentTheme.mode;
+
+      const checkmark = item.querySelector('[data-theme-checkmark]');
+      if (checkmark) {
+        checkmark.style.display = isActive ? 'inline' : 'none';
+      }
+
+      if (isActive) {
+        item.setAttribute('aria-current', 'true');
+      } else {
+        item.removeAttribute('aria-current');
+      }
+    });
+  }
+
+  // Handle theme switching
+  function switchTheme(theme) {
+    applyTheme(theme);
+  }
+
+  // Handle toggle button click (2-theme mode)
+  function handleToggleClick() {
+    const themes = getAvailableThemes();
+    if (themes.length !== 2) return;
+
+    const current = getCurrentTheme();
+    // Switch to the other theme
+    const nextTheme = themes.find(t => t.name !== current.name || t.mode !== current.mode) || themes[0];
+    switchTheme(nextTheme);
+  }
+
+  // Initialize theme switcher
+  function initializeThemeSwitcher() {
+    const currentTheme = getCurrentTheme();
+
+    // Apply theme on page load
+    applyTheme(currentTheme);
+
+    // Set up toggle button (2-theme mode)
+    const toggleButton = document.getElementById('theme-toggle');
+    if (toggleButton) {
+      toggleButton.addEventListener('click', handleToggleClick);
+    }
+
+    // Set up dropdown items (3+ theme mode)
+    const themeItems = document.querySelectorAll('[data-theme-item]');
+    themeItems.forEach(function(item) {
+      item.addEventListener('click', function(event) {
+        event.preventDefault();
+        const themeName = item.dataset.themeName;
+        const themeMode = item.dataset.themeMode;
+        const theme = getAvailableThemes().find(t => t.name === themeName && t.mode === themeMode);
+        if (theme) {
+          switchTheme(theme);
+        }
+      });
+    });
+  }
+
+  // Initialize on DOMContentLoaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeThemeSwitcher);
+  } else {
+    initializeThemeSwitcher();
+  }
+
+  // Re-initialize on Turbo page loads
+  if (typeof Turbo !== 'undefined') {
+    document.addEventListener('turbo:load', initializeThemeSwitcher);
+  }
+
+  // Re-initialize on Turbolinks page loads (legacy)
+  document.addEventListener('turbolinks:load', initializeThemeSwitcher);
+
+  // Export functions for external use
+  window.NeonSakura = window.NeonSakura || {};
+  window.NeonSakura.Theme = {
+    initialize: initializeThemeSwitcher,
+    getCurrentTheme: getCurrentTheme,
+    switchTheme: switchTheme,
+    applyTheme: applyTheme
+  };
+})();

data/app/views/errors/show.html.erb

@@ -0,0 +1,105 @@
+<div class="min-h-screen bg-gray-900 text-white flex items-center justify-center px-4">
+  <div class="max-w-2xl w-full">
+    <!-- Error Content -->
+    <div class="text-center">
+      <!-- Error Icon -->
+      <div class="mb-8 flex justify-center">
+        <% case @error_code %>
+        <% when 400, 422 %>
+          <%= render "shared/icons/alert_triangle", css_class: "w-24 h-24 text-yellow-400" %>
+        <% when 401, 403 %>
+          <%= render "shared/icons/shield_check", css_class: "w-24 h-24 text-red-400" %>
+        <% when 404 %>
+          <%= render "shared/icons/file_question", css_class: "w-24 h-24 text-cyan-400" %>
+        <% when 500, 503 %>
+          <%= render "shared/icons/server_error", css_class: "w-24 h-24 text-red-400" %>
+        <% else %>
+          <%= render "shared/icons/alert_circle", css_class: "w-24 h-24 text-gray-400" %>
+        <% end %>
+      </div>
+
+      <!-- Error Code -->
+      <div class="mb-4">
+        <h1 class="text-6xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          <%= @error_code %>
+        </h1>
+      </div>
+
+      <!-- Error Title -->
+      <h2 class="text-3xl font-bold text-white mb-4">
+        <%= @error_title %>
+      </h2>
+
+      <!-- Error Message -->
+      <p class="text-lg text-gray-300 mb-8 max-w-lg mx-auto">
+        <%= @error_message %>
+      </p>
+
+      <!-- Error Details (if provided) -->
+      <% if @error_details.present? %>
+        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-8 text-left max-w-xl mx-auto">
+          <h3 class="text-lg font-semibold text-white mb-3 flex items-center">
+            <%= render "shared/icons/alert_circle", css_class: "w-5 h-5 text-yellow-400 mr-2" %>
+            Additional Details
+          </h3>
+          <div class="text-sm text-gray-400">
+            <% if @error_details.is_a?(Array) %>
+              <ul class="list-disc list-inside space-y-1">
+                <% @error_details.each do |detail| %>
+                  <li><%= detail %></li>
+                <% end %>
+              </ul>
+            <% elsif @error_details.is_a?(Hash) %>
+              <dl class="space-y-2">
+                <% @error_details.each do |key, value| %>
+                  <div>
+                    <dt class="font-semibold text-gray-300"><%= key.to_s.titleize %>:</dt>
+                    <dd class="ml-4">
+                      <% if value.is_a?(Array) %>
+                        <ul class="list-disc list-inside">
+                          <% value.each do |v| %>
+                            <li><%= v %></li>
+                          <% end %>
+                        </ul>
+                      <% else %>
+                        <%= value %>
+                      <% end %>
+                    </dd>
+                  </div>
+                <% end %>
+              </dl>
+            <% else %>
+              <p><%= @error_details %></p>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+
+      <!-- Action Buttons -->
+      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+        <%= link_to root_path,
+          class: "px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-lg font-medium transition-all inline-flex items-center",
+          "aria-label": "Go to homepage" do %>
+          <%= render "shared/icons/arrow_up", css_class: "w-5 h-5 mr-2 transform rotate-180" %>
+          Go Home
+        <% end %>
+
+        <button
+          onclick="window.history.back()"
+          class="px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors inline-flex items-center"
+          aria-label="Go back to previous page"
+        >
+          <%= render "shared/icons/arrow_up", css_class: "w-5 h-5 mr-2 transform rotate-180" %>
+          Go Back
+        </button>
+      </div>
+
+      <!-- Help Text -->
+      <div class="mt-8 text-sm text-gray-500">
+        <p>
+          If this problem persists, please contact support.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/layouts/error.html.erb

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title><%= @error_code %> - <%= @error_title %> | Artemis</title>
+
+    <link rel="icon" href="/icon.png" type="image/png">
+    <link rel="icon" href="/icon.svg" type="image/svg+xml">
+
+    <%= stylesheet_link_tag "base", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "components", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "forms", "data-turbo-track": "reload" %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/app/views/layouts/mission_control/jobs/_application_selection.html.erb

@@ -0,0 +1,14 @@
+<% if NeonSakura.config.nav_links.blank? %>
+  <%# Only show default Mission Control application selection when custom nav is NOT configured %>
+  <% if defined?(MissionControl::Jobs) && MissionControl::Jobs.applications.size > 1 %>
+    <div class="tabs">
+      <ul>
+        <% MissionControl::Jobs.applications.each do |application| %>
+          <li class="<%= "is-active" if application == Current.application %>">
+            <%= link_to application.name, mission_control_jobs.application_jobs_path(application) %>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

data/app/views/layouts/mission_control/jobs/_navigation.html.erb

@@ -0,0 +1,21 @@
+<% if NeonSakura.config.nav_links.present? %>
+  <!-- Custom back link and auto-refresh inline section -->
+  <div class="mc-back-section">
+    <div class="container">
+      <a href="/">
+        <%= render "shared/icons/arrow_left" %>
+        Back to <%= NeonSakura.config.app_name %>
+      </a>
+      <button id="auto-refresh-btn">
+        <%= render "shared/icons/refresh" %>
+        Start Auto-refresh
+      </button>
+    </div>
+  </div>
+<% else %>
+  <!-- Default Mission Control back link -->
+  <a href="/">
+      <%= render "shared/icons/arrow_left" %>
+      Back to <%= NeonSakura.config.app_name %>
+    </a>
+<% end %>