index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1F1F1F" />
    <meta name="description" content="Script - A fast, friendly plain text editor" />
    <title>Script</title>
    <!-- Modern Expressive Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Cascadia+Code&family=JetBrains+Mono&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="/src/styles/base.css" />
    <link rel="stylesheet" href="/src/styles/sidebar.css" />
    <link rel="stylesheet" href="/src/styles/editor.css" />
    <link rel="stylesheet" href="/src/styles/find.css" />
    <link rel="stylesheet" href="/src/styles/first-run.css" />
    <link rel="stylesheet" href="/src/styles/print.css" media="print" />
  </head>
  <body>
    <div id="app" class="app-container">
      
      <!-- First Run Drawer Overlay -->
      <div id="first-run-drawer" class="first-run-drawer hidden">
        <div class="first-run-content">
          <div class="first-run-hero">
            <div class="first-run-logo-container">
              <i data-lucide="pen-tool" class="first-run-logo-icon"></i>
            </div>
            <h1 data-i18n="firstRun.title">Meet your new favorite editor.</h1>
            <p data-i18n="firstRun.subtitle">Fast, beautiful, and packed with magic.</p>
          </div>
          
          <div class="first-run-features">
            <div class="feature-item">
              <div class="feature-icon"><i data-lucide="code"></i></div>
              <div class="feature-text">
                <h3>Syntax Highlighting</h3>
                <p>Rich support for most file formats natively.</p>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon"><i data-lucide="wifi-off"></i></div>
              <div class="feature-text">
                <h3>Offline Enabled</h3>
                <p>Fully local. Write anywhere, anytime.</p>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon"><i data-lucide="gavel"></i></div>
              <div class="feature-text">
                <h3>Kuscher Judgement AI</h3>
                <p>Brutal, honest feedback on your writing.</p>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon"><i data-lucide="sparkles"></i></div>
              <div class="feature-text">
                <h3>AI Rephrasing</h3>
                <p>Adjust tone and get smart completions.</p>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon"><i data-lucide="eye"></i></div>
              <div class="feature-text">
                <h3>Markup Preview</h3>
                <p>Instant live rendering for Markdown files.</p>
              </div>
            </div>
          </div>
          
          <div class="first-run-actions">
            <button id="btn-first-run-install" class="btn-first-run-primary">
              <i data-lucide="download"></i> <span data-i18n="firstRun.installApp">Install Script App</span>
            </button>
            <button id="btn-first-run-dismiss" class="btn-first-run-ghost" data-i18n="firstRun.dismiss">
              I have commitment issues. Use in browser.
            </button>
          </div>
        </div>
      </div>

      <!-- Persistent Top Header -->
      <header class="app-header">
        <!-- Top / Left Row: Branding & Title -->
        <div class="header-title-bar">
          <button class="hamburger-btn" id="btn-hamburger" aria-label="Toggle Navigation">
            <i data-lucide="menu"></i>
          </button>
          <div class="header-title-container">
            <i data-lucide="file-text" id="header-file-icon" style="margin-right:8px; width:20px; color:var(--text-secondary);"></i>
            <span id="header-title" contenteditable="true" spellcheck="false" title="Click to rename">Untitled.txt</span>
          </div>
        </div>

        <!-- Bottom / Right Row: Actions -->
        <div class="header-actions-bar">
          <div id="disk-warning" class="disk-warning-inline hidden" title="Only saved locally. Click to save to disk.">
            <button class="icon-btn danger-icon-btn" id="btn-disk-warn-save" style="color:var(--danger);"><i data-lucide="save"></i></button>
          </div>
          <button class="icon-btn" id="btn-undo" title="Undo (Ctrl+Z)" disabled><i data-lucide="undo-2"></i></button>
          <button class="icon-btn" id="btn-redo" title="Redo (Ctrl+Y)" disabled><i data-lucide="redo-2"></i></button>
          
          <div class="header-divider"></div>
          
          <button class="icon-btn" id="btn-sync-reload" title="Force Sync" style="display: none;"><i data-lucide="refresh-cw"></i></button>
          <button class="icon-btn" id="btn-smart-format" title="Auto-Format (Markdown)" style="color: #A626A4;"><i data-lucide="wand-2"></i></button>
          <button class="icon-btn" id="btn-toggle-word-wrap" title="Toggle Word Wrap"><i data-lucide="wrap-text"></i></button>
          <button class="icon-btn" id="btn-toggle-preview" title="Toggle Markdown Preview" style="display: none;"><i data-lucide="eye"></i></button>
          <button class="icon-btn" id="btn-find-toggle" title="Search"><i data-lucide="search"></i></button>
          <button class="icon-btn hidden" id="btn-install-pwa" title="Install App" style="color: var(--accent);"><i data-lucide="download"></i></button>
        </div>
      </header>


      
      <!-- Top level overlay for drag and drop -->
      <div id="drop-overlay" class="hidden">
        <div class="drop-zone">
          <i data-lucide="file-down" style="width:48px;height:48px;"></i>
          <p style="font-family: var(--font-ui); font-size: 18px; font-weight:500; padding:16px;" data-i18n="ui.dropToOpen">Drop to open</p>
        </div>
      </div>

      <!-- Wrapper for Sidebar + Main -->
      <div class="layout-wrapper" id="layout-wrapper">
        <!-- Sidebar -->
        <aside id="sidebar" class="sidebar">
          
          <!-- Sidebar: Normal View -->
          <div id="sidebar-tabs-view" class="sidebar-view active">
            <div class="sidebar-header">
              <button class="icon-btn" id="btn-menu" aria-haspopup="true" aria-expanded="false"><i data-lucide="more-vertical"></i></button>
              <div class="sidebar-header-actions">
                <button class="icon-btn" id="btn-email-doc" title="Send via Email"><i data-lucide="mail"></i></button>
                <button class="icon-btn" id="btn-open-file" title="Open (Ctrl+O)"><i data-lucide="folder-open"></i></button>
                <button class="icon-btn" id="btn-save-file" title="Save (Ctrl+S)"><i data-lucide="save"></i></button>
              </div>
            </div>
            
            <div class="sidebar-body">
              <div id="tab-list" class="tab-list" role="tablist">
                <!-- Managed by tabs.js -->
              </div>
            </div>
            
            <div class="sidebar-footer">
              <button class="new-tab-btn" id="btn-new-tab">
                <i data-lucide="plus"></i>
              </button>
            </div>
          </div>

          <!-- Sidebar: Settings View -->
          <div id="sidebar-settings-view" class="sidebar-view hidden">
            <div class="sidebar-header">
              <button class="icon-btn" id="btn-settings-back"><i data-lucide="arrow-left"></i></button>
              <span class="settings-title" data-i18n="ui.settingsTitle">Settings</span>
            </div>
            <!-- Rendered by settings.js -->
            <div id="settings-container" class="settings-container"></div>
          </div>

          <!-- Overflow Menu Dropdown -->
          <div id="overflow-menu" class="hidden shadow-menu">
            <ul>
              <li data-action="new"><i data-lucide="file-plus"></i> <span data-i18n="ui.menuNew">New</span> <small>Alt+N</small></li>
              <li data-action="open"><i data-lucide="folder-open"></i> <span data-i18n="ui.menuOpen">Open</span> <small>Ctrl+O</small></li>
              <li data-action="save"><i data-lucide="save"></i> <span data-i18n="ui.menuSave">Save</span> <small>Ctrl+S</small></li>
              <li data-action="saveAs"><i data-lucide="save"></i> <span data-i18n="ui.menuSaveAs">Save As</span> <small>Ctrl+Shift+S</small></li>
              <li data-action="print"><i data-lucide="printer"></i> <span data-i18n="ui.menuPrint">Print</span> <small>Ctrl+P</small></li>
              <li class="divider"></li>
              <li data-action="goTo"><i data-lucide="arrow-down-to-line"></i> <span data-i18n="ui.menuGoToLine">Go to Line</span> <small>Ctrl+G</small></li>
              <li class="divider"></li>
              <li data-action="settings"><i data-lucide="settings"></i> <span data-i18n="ui.menuSettings">Settings</span></li>
              <li data-action="shortcuts"><i data-lucide="keyboard"></i> <span data-i18n="ui.menuShortcuts">Keyboard Shortcuts</span> <small>Ctrl+/</small></li>
            </ul>
          </div>
        </aside>

        <!-- Sidebar Resizer -->
        <div id="sidebar-resizer" class="sidebar-resizer"></div>

        <!-- Mobile Sidebar Overlay -->
        <div id="mobile-sidebar-overlay" class="mobile-overlay hidden"></div>

        <!-- Main Workspace -->
        <main id="main-workspace" class="workspace" role="main">
          
          <!-- Subtle Dotted Grid Backgrounds -->
          <div class="grid-mask-container" style="position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 30px, black 80px, black 100%); mask-image: linear-gradient(to right, transparent 0%, transparent 30px, black 80px, black 100%); z-index: 1;">
            <div class="workspace-bg-grid base-grid"></div>
            <div class="workspace-bg-grid hover-grid" id="hover-grid"></div>
          </div>

          <!-- Crash Recovery Banner -->
          <div id="recovery-banner" class="hidden">
            <span id="recovery-text" data-i18n="ui.recoveryText">Restored unsaved file(s) from your last session.</span>
            <button class="icon-btn" id="btn-close-recovery"><i data-lucide="x"></i></button>
          </div>

          <!-- Go To Line Input -->
          <div id="go-to-line-bar" class="hidden floating-bar">
            <input type="number" id="input-goto-line" placeholder="Go to line..." />
          </div>

          <!-- Tiptap Editor Host -->
          <div class="editor-container" id="editor-container">
            <div class="editor-inner-wrapper">
              <div class="line-numbers-gutter" id="line-numbers"></div>
              <div id="editor-root"></div>
              <div id="markdown-preview" class="hidden"></div>
            </div>
          </div>

          <!-- Persona Feedback Overlay (Bottom) -->
          <div id="persona-feedback-overlay" class="persona-overlay hidden">
            <div class="persona-glow-wrapper">
              <div class="persona-content">
                <div class="persona-header">
                  <div class="persona-pills">
                    <button class="persona-pill active" data-persona="mom">Mom</button>
                    <button class="persona-pill" data-persona="boss">Boss</button>
                    <button class="persona-pill" data-persona="hipster">Hipster</button>
                    <button class="persona-pill" data-persona="kuscher">Kuscher</button>
                  </div>
                  <button id="btn-persona-close" class="icon-btn" title="Close"><i data-lucide="x"></i></button>
                </div>
                <div id="persona-feedback-text" class="persona-feedback-text">
                  <!-- AI Feedback renders here -->
                </div>
              </div>
            </div>
          </div>

          <!-- Floating Search Bubble -->
          <div id="find-bubble-overlay" class="glass-bubble find-bubble hidden">
            <!-- Rendered by find-replace.js -->
          </div>

          <!-- Contextual AI Magic Wrapper -->
          <div id="ai-selection-bubble" class="ai-magic-container">
            <!-- Contextual AI Selection Bubble -->
            <div class="ai-glass-bubble">
              <div class="ai-bubble-header">
                <div class="ai-bubble-title">
                  <div class="ai-drag-handle" id="ai-drag-handle" title="Drag to move">
                    <i data-lucide="grip-horizontal"></i>
                  </div>
                  <i data-lucide="sparkles" class="ai-sparkle-icon"></i> 
                  <span data-i18n="ui.aiMagic">AI Magic</span>
                </div>
                <div class="ai-bubble-actions">
                  <button class="icon-btn" id="btn-tone-undo" title="Undo Tone AI" style="display:none; width: 28px; height: 28px; border-radius: 6px;"><i data-lucide="undo-2"></i></button>
                  <button class="icon-btn" id="btn-close-ai-bubble" title="Dismiss" style="width: 28px; height: 28px; border-radius: 6px;"><i data-lucide="x"></i></button>
                </div>
              </div>

              <div class="ai-bubble-content">
                <!-- Action 1: Persona Feedback -->
                <button id="btn-persona-toggle" class="ai-magic-btn">
                  <i data-lucide="message-circle" class="ai-magic-icon"></i> <span data-i18n="ui.askPersona">Ask Persona: Mom</span>
                </button>

                <!-- Action 2: Tone Slider -->
                <div id="tone-slider-container" class="tone-slider-panel">
                  <div class="tone-slider-header">
                    <span class="tone-panel-title" data-i18n="ui.adjustTone">Adjust Tone</span>
                  </div>
                  <div class="tone-slider-track-wrapper">
                    <span id="tone-placeholder" class="tone-placeholder-overlay">
                      <i data-lucide="sliders-horizontal" style="width: 14px; height: 14px;"></i> Slide to rewrite
                    </span>
                    <div class="tone-slider-interactive-area">
                      <span id="tone-label-blunt" class="tone-slider-label hidden" data-i18n="ui.toneBlunt">Blunt</span>
                      <input type="range" id="tone-slider" min="0" max="100" value="50" class="tone-slider hidden">
                      <span id="tone-label-diplomatic" class="tone-slider-label hidden" data-i18n="ui.toneDiplomatic">Diplomatic</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- AI Action Pills -->
            <div class="ai-action-pills">
              <button id="btn-ai-copy" class="ai-pill-btn"><i data-lucide="copy" style="width: 14px; height: 14px;"></i> <span data-i18n="ui.copy">Copy</span></button>
              <button id="btn-ai-cut" class="ai-pill-btn"><i data-lucide="scissors" style="width: 14px; height: 14px;"></i> <span data-i18n="ui.cut">Cut</span></button>
              <button id="btn-ai-smart" class="ai-pill-btn"><i data-lucide="sparkles" style="width: 14px; height: 14px; color: #A626A4;"></i> <span data-i18n="ui.smartCopy">Smart Copy</span></button>
            </div>
          </div>
        </main>
      </div>

      <!-- Status Bar -->
      <footer id="status-bar" class="status-bar" role="status">
        <div class="left-stats">
          <span id="stat-encoding" class="clickable">UTF-8 <i data-lucide="chevron-down" style="width:16px; margin-left:4px;"></i></span>
          <span style="opacity: 0.5;">·</span>
          <span id="stat-line-ending" class="clickable">LF</span>
          <span style="opacity: 0.5;">·</span>
          <span id="stat-cursor">Ln 1, Col 1</span>
          <span style="opacity: 0.5;">·</span>
          <span id="stat-words">0 words</span>
          <span style="opacity: 0.5;">·</span>
          <span id="stat-filetype">Plain Text</span>
        </div>
      </footer>

      <!-- Encoding Picker Dropdown -->
      <div id="encoding-picker" class="hidden picker-dropdown">
        <ul>
          <li data-enc="utf-8">UTF-8</li>
          <li data-enc="utf-16le">UTF-16 LE</li>
          <li data-enc="utf-16be">UTF-16 BE</li>
          <li data-enc="iso-8859-1">ISO-8859-1</li>
        </ul>
      </div>

      <!-- Shortcuts Overlay -->
      <div id="shortcuts-overlay" class="hidden modal-overlay">
        <div class="modal">
          <div class="modal-header">
            <h2 data-i18n="ui.keyboardShortcutsTitle">Keyboard Shortcuts</h2>
            <button class="icon-btn" id="btn-close-shortcuts"><i data-lucide="x"></i></button>
          </div>
          <div class="modal-body" id="shortcuts-container">
               <!-- Managed by shortcuts.js -->
          </div>
        </div>
      </div>
    </div>
    
    <script type="module" src="/src/main.js"></script>
  </body>
</html>