flowdeck/app/templates/gitea_workspace.html

{% extends "base.html" %}
{% block page_title %}Gitea Workspace{% endblock %}
{% block page_icon %}🔗{% endblock %}

{% block topbar %}
<header class="topbar">
  <button class="hamburger-btn" @click="mobileSidebarOpen = true; sidebarCollapsed = false;" title="Menu">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
  </button>
  <div class="topbar-left">
    <a href="/workspaces" class="breadcrumb" style="color:rgba(255,255,255,.5);text-decoration:none;">Home</a>
    <span class="page-title-topbar" x-text="owner + '/' + repo"></span>
  </div>
  <div class="topbar-right">
    <button class="page-action-btn" @click="refreshTree()" title="Refresh">🔄</button>
    <button class="page-action-btn" onclick="window.location='/accounts/settings'" title="Settings">⚙</button>
  </div>
</header>
{% endblock %}

{% block content %}
<style>
.gw-main{display:flex;flex-direction:column;height:calc(100vh - 48px);overflow:hidden;}
.gw-content{padding:24px;overflow-y:auto;flex:1;}
.gw-content h3{font-size:16px;margin-bottom:12px;color:var(--text-dim);}
.gw-content pre{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;padding:16px;overflow-x:auto;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:70vh;overflow-y:auto;}
.gw-content .empty-state{text-align:center;padding:60px 20px;color:var(--text-dim);}
.gw-content .empty-state h2{font-size:18px;margin-bottom:8px;color:var(--text);}
.gw-content textarea{width:100%;min-height:50vh;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;padding:12px;font-family:monospace;resize:vertical;outline:none;}
.gw-content textarea:focus{border-color:var(--accent);}
.gw-file-toolbar{display:flex;align-items:center;gap:8px;padding:8px 24px;background:var(--bg-secondary);border-bottom:1px solid var(--border);font-size:13px;color:var(--text-dim);}
.gw-file-toolbar strong{color:var(--text);margin-right:12px;}
.gw-commit-bar{display:flex;align-items:center;gap:8px;padding:12px 24px;background:var(--bg-secondary);border-top:1px solid var(--border);flex-wrap:wrap;}
.gw-commit-bar input{flex:1;min-width:180px;padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;outline:none;}
.gw-commit-bar input:focus{border-color:var(--accent);}
.btn-primary{padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;border:none;font-weight:500;background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-hover);}
.btn-danger{background:rgba(255,80,80,.15);color:var(--danger);border:none;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:500;}
.btn-danger:hover{background:rgba(255,80,80,.25);}
.btn{border:none;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:500;border:1px solid var(--border);background:transparent;color:var(--text-dim);}
.btn:hover{background:var(--bg-tertiary);color:var(--text);}
</style>

<div class="gw-main" x-data="giteaWorkspace()">
  <!-- File view -->
  <template x-if="showFile && !showEditor">
    <div>
      <div class="gw-file-toolbar">
        <strong x-text="filePath || ''"></strong>
        <span x-text="formatSize(fileSize)"></span>
        <span style="flex:1;"></span>
        <button class="btn" @click="openEditor()">✏️ Edit</button>
        <button class="btn btn-danger" @click="deleteCurrentFile()">🗑 Delete</button>
      </div>
      <div class="gw-content">
        <pre x-text="fileContent"></pre>
      </div>
    </div>
  </template>

  <!-- Editor view -->
  <template x-if="showEditor">
    <div>
      <div class="gw-file-toolbar">
        <strong>Editing: <span x-text="filePath || 'new file'"></span></strong>
        <span style="flex:1;"></span>
        <button class="btn" @click="showEditor=false">Cancel</button>
      </div>
      <div class="gw-content">
        <textarea x-model="editContent"></textarea>
      </div>
      <div class="gw-commit-bar">
        <input type="text" x-model="commitMessage" placeholder="Commit message" list="commit-history">
        <datalist id="commit-history">
          <template x-for="msg in commitHistory" :key="msg">
            <option :value="msg">
          </template>
        </datalist>
        <button class="btn-primary" @click="saveFile()">💾 Commit</button>
      </div>
    </div>
  </template>

  <!-- Empty state -->
  <template x-if="!showFile && !showEditor && !showPrivate">
    <div class="gw-content">
      <div class="empty-state">
        <h2>📁 <span x-text="owner + '/' + repo"></span></h2>
        <p>Select a file from the sidebar to view it, or browse private pages.</p>
      </div>
    </div>
  </template>

  <!-- Private pages view -->
  <template x-if="showPrivate && !editingPrivate">
    <div class="gw-content">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
        <h3>🔒 Private Pages</h3>
        <button class="btn btn-primary" @click="newPrivate()">+ New Page</button>
      </div>
      <template x-if="privatePages.length === 0">
        <div class="empty-state" style="padding:40px 20px;">
          <p>No private pages yet. Create one to store notes linked to this project.</p>
        </div>
      </template>
      <template x-for="pp in privatePages" :key="pp.id">
        <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;"
             @click="openPrivate(pp.id)">
          <div>
            <div style="font-weight:500;" x-text="pp.title"></div>
            <div style="font-size:12px;color:var(--text-dim);" x-text="pp.updated_at ? new Date(pp.updated_at+'Z').toLocaleString() : ''"></div>
          </div>
          <button class="btn btn-danger" style="padding:4px 8px;font-size:11px;" @click.stop="deletePrivate(pp.id)">🗑</button>
        </div>
      </template>
    </div>
  </template>

  <!-- Private page editor -->
  <template x-if="editingPrivate">
    <div>
      <div class="gw-file-toolbar">
        <strong>Editing: <span x-text="editingPrivateTitle || 'Untitled'"></span></strong>
        <span style="flex:1;"></span>
        <button class="btn" @click="savePrivate()">💾 Save</button>
        <button class="btn" @click="editingPrivate=null;editingPrivateTitle='';editingPrivateContent='';">Cancel</button>
      </div>
      <div class="gw-content">
        <input x-model="editingPrivateTitle" placeholder="Page title" style="width:100%;padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:16px;margin-bottom:12px;outline:none;">
        <textarea x-model="editingPrivateContent" placeholder="Start writing…" style="min-height:60vh;"></textarea>
      </div>
    </div>
  </template>
</div>

<script>
function giteaWorkspace() {
  const params = new URLSearchParams(window.location.search);
  const owner = params.get('owner') || '';
  const repo = params.get('repo') || '';

  return {
    owner, repo,
    showFile: false,
    showEditor: false,
    showPrivate: false,
    privatePages: [],
    editingPrivate: null,
    editingPrivateTitle: '',
    editingPrivateContent: '',
    filePath: '',
    fileContent: '',
    fileSize: 0,
    fileSha: '',
    editContent: '',
    commitMessage: 'Update via FlowDeck',
    commitHistory: JSON.parse(localStorage.getItem('fd_commit_msgs') || '[]'),

    init() {
      // Set cookie for sidebar
      document.cookie = 'flowdeck_workspace=gitea:' + this.owner + ':' + this.repo + ';path=/;SameSite=Lax';
      // Load root tree into sidebar
      this.loadSidebarTree();
      // Listen for sidebar clicks on Gitea items
      this.setupSidebarClicks();
    },

    async loadSidebarTree() {
      try {
        var r = await fetch('/api/gitea/projects/' + this.owner + '/' + this.repo + '/tree');
        if (!r.ok) return;
        var d = await r.json();
        var items = d.tree || [];
        var container = document.getElementById('sidebar-workspace-items');
        if (!container) return;
        container.innerHTML = '';
        var self = this;
        items.forEach(function(item) {
          var icon = item.type === 'folder' ? '📁' : '📄';
          var li = document.createElement('li');
          li.className = 'sidebar-item';
          li.setAttribute('data-gitea-path', item.path);
          li.setAttribute('data-gitea-type', item.type === 'folder' ? 'folder' : 'file');
          li.setAttribute('data-gitea-sha', item.sha || '');
          li.style.cssText = 'padding-left:12px;cursor:pointer;';
          li.innerHTML = '<span class="page-icon">' + icon + '</span><span class="page-name">' + item.name + '</span>';
          container.appendChild(li);
        });
        // Add Private Pages link
        var sep = document.createElement('li');
        sep.style.cssText = 'border-top:1px solid var(--border);margin:8px 0;';
        container.appendChild(sep);
        var pli = document.createElement('li');
        pli.className = 'sidebar-item';
        pli.style.cssText = 'padding-left:12px;cursor:pointer;';
        pli.innerHTML = '<span class="page-icon">🔒</span><span class="page-name">Private Pages</span>';
        pli.addEventListener('click', function(e) {
          e.preventDefault(); e.stopPropagation();
          var gw = document.querySelector('[x-data]').__x.$data;
          gw.showPrivate = true; gw.showFile = false; gw.showEditor = false;
          gw.loadPrivatePages();
        });
        container.appendChild(pli);
      } catch(e) { console.error('Sidebar tree load failed:', e); }
    },

    setupSidebarClicks() {
      var self = this;
      document.addEventListener('click', function(e) {
        var el = e.target.closest('.sidebar-item[data-gitea-path]');
        if (!el) return;
        e.preventDefault();
        e.stopPropagation();
        var path = el.getAttribute('data-gitea-path');
        var type = el.getAttribute('data-gitea-type');
        if (type === 'folder') {
          self.loadSubdir(path, el);
        } else {
          self.openFile(path, el.getAttribute('data-gitea-sha'));
        }
      });
    },

    async loadSubdir(path, el) {
      // Check if already loaded
      var ul = el.querySelector('ul');
      if (ul) {
        ul.style.display = ul.style.display === 'none' ? '' : 'none';
        return;
      }
      try {
        var r = await fetch('/api/gitea/projects/' + this.owner + '/' + this.repo + '/tree?path=' + encodeURIComponent(path));
        if (!r.ok) return;
        var d = await r.json();
        var children = d.tree || [];
        ul = document.createElement('ul');
        ul.className = 'sidebar-items';
        ul.style.paddingLeft = '20px';
        children.forEach(function(child) {
          var icon = child.type === 'folder' ? '📁' : '📄';
          var li = document.createElement('li');
          li.className = 'sidebar-item';
          li.setAttribute('data-gitea-path', child.path);
          li.setAttribute('data-gitea-type', child.type === 'folder' ? 'folder' : 'file');
          li.setAttribute('data-gitea-sha', child.sha || '');
          li.style.cursor = 'pointer';
          li.innerHTML = '<span class="sidebar-icon">' + icon + '</span> ' + child.name;
          ul.appendChild(li);
        });
        el.appendChild(ul);
      } catch(e) {}
    },

    async openFile(path, sha) {
      this.filePath = path;
      this.fileSha = sha || '';
      this.showEditor = false;
      this.showFile = true;
      try {
        var r = await fetch('/api/gitea/projects/' + this.owner + '/' + this.repo + '/file?path=' + encodeURIComponent(path));
        if (r.ok) {
          var d = await r.json();
          this.fileContent = d.content || '';
          this.fileSize = d.content ? d.content.length : 0;
        } else {
          this.fileContent = '[Error loading file]';
        }
      } catch(e) {
        this.fileContent = '[Error loading file]';
      }
    },

    openEditor() {
      this.editContent = this.fileContent;
      this.showEditor = true;
    },

    async saveFile() {
      if (!this.filePath) return;
      try {
        var r = await fetch('/api/gitea/projects/' + this.owner + '/' + this.repo + '/file', {
          method: 'PUT',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            path: this.filePath, content: this.editContent,
            message: this.commitMessage, sha: this.fileSha,
          })
        });
        if (r.ok) {
          this.fileContent = this.editContent;
          this.showEditor = false;
          if (!this.commitHistory.includes(this.commitMessage)) {
            this.commitHistory.unshift(this.commitMessage);
            if (this.commitHistory.length > 10) this.commitHistory.pop();
            localStorage.setItem('fd_commit_msgs', JSON.stringify(this.commitHistory));
          }
        } else {
          var d = await r.json();
          alert('Failed to save: ' + (d.error || 'Unknown error'));
        }
      } catch(e) { alert('Network error'); }
    },

    async deleteCurrentFile() {
      if (!this.filePath) return;
      if (!confirm('Delete ' + this.filePath + ' from ' + this.owner + '/' + this.repo + '?')) return;
      try {
        var r = await fetch('/api/gitea/projects/' + this.owner + '/' + this.repo + '/file?path=' + encodeURIComponent(this.filePath) + '&sha=' + encodeURIComponent(this.fileSha) + '&message=' + encodeURIComponent('Delete via FlowDeck'), {
          method: 'DELETE',
        });
        if (r.ok) {
          this.showFile = false;
          this.filePath = '';
          await this.refreshTree();
        }
      } catch(e) {}
    },

    async refreshTree() {
      // Reload page to refresh sidebar tree
      window.location.reload();
    },

    formatSize(bytes) {
      if (!bytes) return '';
      if (bytes < 1024) return bytes + ' B';
      if (bytes < 1048576) return (bytes/1024).toFixed(1) + ' KB';
      return (bytes/1048576).toFixed(1) + ' MB';
    },

    // ── Private Pages ──

    async loadPrivatePages() {
      try {
        var r = await fetch('/api/gitea/projects/' + this.owner + '/' + this.repo + '/private-pages');
        if (r.ok) { var d = await r.json(); this.privatePages = d.pages || []; }
      } catch(e) {}
    },

    newPrivate() {
      this.editingPrivate = 'new';
      this.editingPrivateTitle = '';
      this.editingPrivateContent = '';
    },

    async openPrivate(id) {
      try {
        var r = await fetch('/api/gitea/projects/' + this.owner + '/' + this.repo + '/private-pages/' + id);
        if (r.ok) {
          var d = await r.json();
          this.editingPrivate = id;
          this.editingPrivateTitle = d.page.title;
          this.editingPrivateContent = d.page.content;
        }
      } catch(e) {}
    },

    async savePrivate() {
      var url = '/api/gitea/projects/' + this.owner + '/' + this.repo + '/private-pages';
      var method = 'POST';
      if (this.editingPrivate !== 'new') {
        url += '/' + this.editingPrivate;
        method = 'PUT';
      }
      try {
        var r = await fetch(url, {
          method, headers: {'Content-Type':'application/json','X-CSRF-Token': this.getCsrfToken ? this.getCsrfToken() : ''},
          body: JSON.stringify({title: this.editingPrivateTitle, content: this.editingPrivateContent})
        });
        if (r.ok) {
          this.editingPrivate = null;
          this.editingPrivateTitle = '';
          this.editingPrivateContent = '';
          await this.loadPrivatePages();
        }
      } catch(e) {}
    },

    async deletePrivate(id) {
      if (!confirm('Delete this private page?')) return;
      try {
        var r = await fetch('/api/gitea/projects/' + this.owner + '/' + this.repo + '/private-pages/' + id, {
          method: 'DELETE', headers: {'X-CSRF-Token': this.getCsrfToken ? this.getCsrfToken() : ''}
        });
        if (r.ok) await this.loadPrivatePages();
      } catch(e) {}
    },

    getCsrfToken() {
      return document.cookie.split('; ').find(function(c) { return c.startsWith('csrf_token='); })?.split('=')[1] || '';
    },
  };
}
</script>
{% endblock %}