hyprcrd/public/plugins/gitea/gitea.html

<!-- Gitea Plugin: full-screen issue browser overlay -->
<div class="overlay fixed inset-0" id="gitea-overlay" style="z-index:75;">
    <div class="gitea-modal bg-t-bg border border-t-border shadow-2xl flex flex-col" style="position:absolute;inset:24px;border-radius:4px;">

        <!-- Header -->
        <div class="flex items-center gap-3 px-4 py-2 border-b border-t-border shrink-0 bg-t-surface">
            <i class="ph ph-git-pull-request text-t-accent text-base"></i>
            <h2 class="font-pixel text-xs text-t-accent">gitea</h2>
            <select id="gitea-account-select" class="bg-t-bg border border-t-border text-t-bright text-xs font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer min-w-32"></select>
            <span id="gitea-status" class="text-[10px] text-t-dim font-pixel"></span>
            <div class="flex-1"></div>
            <button id="gitea-show-settings" class="flex items-center gap-1.5 px-2 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-tip="Manage accounts in settings"><i class="ph ph-gear text-sm"></i><span class="font-pixel text-[10px]">Accounts</span></button>
            <button id="gitea-close" class="flex items-center gap-1.5 px-2 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">Close</span></button>
        </div>

        <!-- ── Welcome view (shown when no accounts) ── -->
        <div id="gitea-view-welcome" class="hidden flex-1 min-h-0 overflow-y-auto">
            <div class="flex items-center justify-center h-full px-6 py-12">
                <div class="text-center max-w-md">
                    <i class="ph ph-git-pull-request text-t-accent text-6xl block mb-4"></i>
                    <h3 class="font-pixel text-base text-t-accent tracking-wider mb-2">welcome to gitea</h3>
                    <p class="text-xs text-t-muted leading-relaxed mb-6">
                        Read issues from one or more Gitea instances inside hyprcrd. Issues stay
                        on the server — only the ones you explicitly extract become cards.
                        To get started, add at least one account in settings.
                    </p>
                    <button id="gitea-welcome-configure" class="inline-flex items-center gap-2 px-4 py-2 text-xs bg-t-accent text-t-bg border border-t-accent hover:brightness-110 transition-all">
                        <i class="ph ph-gear text-sm"></i>
                        <span class="font-pixel text-[11px]">Configure accounts</span>
                    </button>
                    <p class="text-[10px] text-t-dim mt-4 font-pixel">settings → gitea</p>
                </div>
            </div>
        </div>

        <!-- ── Issues reader ── -->
        <div id="gitea-view-issues" class="hidden flex-1 min-h-0 overflow-hidden">
            <!-- Issue list -->
            <div id="gitea-list-pane" class="overflow-y-auto border-r border-t-border bg-t-bg shrink-0 relative" style="width:42%;">
                <div class="sticky top-0 z-20 bg-t-bg border-b border-t-border">
                    <!-- Filters bar -->
                    <div class="flex items-center gap-2 px-3 py-1.5">
                        <select id="gitea-filter-state" class="bg-t-bg border border-t-border text-t-bright text-[10px] font-pixel px-1.5 py-0.5 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer" data-tip="Issue state">
                            <option value="open">open</option>
                            <option value="closed">closed</option>
                            <option value="all">all</option>
                        </select>
                        <select id="gitea-filter-scope" class="bg-t-bg border border-t-border text-t-bright text-[10px] font-pixel px-1.5 py-0.5 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer" data-tip="Filter by your involvement">
                            <option value="all">everyone</option>
                            <option value="assigned">assigned to me</option>
                            <option value="created">created by me</option>
                            <option value="mentioned">mentioning me</option>
                        </select>
                        <input id="gitea-filter-q" type="text" placeholder="search..." autocomplete="off" class="flex-1 min-w-0 bg-t-bg border border-t-border text-t-text px-2 py-0.5 text-[11px] focus:border-t-accent focus:outline-none font-mono">
                        <button id="gitea-new-issue" class="toolbar-btn" data-tip="New issue"><i class="ph ph-plus-square text-sm text-t-accent"></i></button>
                        <button id="gitea-refresh" class="toolbar-btn" data-tip="Refresh"><i class="ph ph-arrows-clockwise text-sm"></i></button>
                    </div>
                    <!-- Pagination toolbar -->
                    <div class="flex items-center gap-2 px-3 py-1 border-t border-t-border">
                        <button id="gitea-page-prev" class="toolbar-btn" data-tip="Previous page"><i class="ph ph-caret-left text-sm"></i></button>
                        <button id="gitea-page-next" class="toolbar-btn" data-tip="Next page"><i class="ph ph-caret-right text-sm"></i></button>
                        <span id="gitea-page-info" class="font-pixel text-[9px] text-t-dim">—</span>
                    </div>
                </div>
                <div id="gitea-issue-list" class="divide-y divide-t-border"></div>
            </div>
            <!-- Resizer -->
            <div id="gitea-divider" class="shrink-0" style="width:5px;cursor:col-resize;background:transparent;position:relative;">
                <div style="position:absolute;left:2px;top:0;bottom:0;width:1px;background:var(--t-border);"></div>
            </div>
            <!-- Issue detail -->
            <div id="gitea-detail-pane" class="flex-1 min-w-0 min-h-0 flex flex-col bg-t-bg">
                <div id="gitea-detail-empty" class="flex items-center justify-center flex-1 text-t-dim text-xs font-pixel">
                    <div class="text-center">
                        <i class="ph ph-list-bullets text-3xl mb-2 block"></i>
                        <span class="cursor-blink">select an issue</span>
                    </div>
                </div>
                <!-- ── Create issue form ── -->
                <div id="gitea-create-form" class="hidden flex-col flex-1 min-h-0">
                    <div class="shrink-0 border-b border-t-border px-5 pt-5 pb-3">
                        <div class="flex items-center gap-2 mb-3">
                            <i class="ph ph-plus-square text-t-accent text-lg"></i>
                            <h3 class="text-t-bright text-base font-bold">new issue</h3>
                            <div class="flex-1"></div>
                            <button id="gitea-create-cancel" class="toolbar-btn" data-tip="Cancel"><i class="ph ph-x text-sm"></i></button>
                        </div>
                        <div class="space-y-2">
                            <label class="block relative">
                                <span class="font-pixel text-[9px] text-t-dim uppercase">repository <span id="gitea-create-repo-hint" class="normal-case text-t-muted text-[8px]"></span></span>
                                <input id="gitea-create-repo" type="text" placeholder="owner/repo" autocomplete="off" class="w-full bg-t-bg border border-t-border text-t-bright px-2 py-1.5 text-xs focus:border-t-accent focus:outline-none font-mono">
                                <div id="gitea-create-repo-dropdown" class="hidden absolute left-0 right-0 top-full z-30 mt-0.5 max-h-56 overflow-y-auto bg-t-surface border border-t-accent shadow-lg"></div>
                            </label>
                            <div id="gitea-create-repo-error" class="hidden px-2 py-1.5 text-[10px] font-mono break-words border border-amber-500 text-amber-400 bg-t-bg"></div>
                            <label class="block">
                                <span class="font-pixel text-[9px] text-t-dim uppercase">title</span>
                                <input id="gitea-create-title" type="text" placeholder="short summary" class="w-full bg-t-bg border border-t-border text-t-bright px-2 py-1.5 text-sm focus:border-t-accent focus:outline-none font-mono">
                            </label>
                        </div>
                    </div>
                    <div class="flex-1 min-h-0 overflow-y-auto px-5 py-4">
                        <label class="block">
                            <span class="font-pixel text-[9px] text-t-dim uppercase">body (markdown)</span>
                            <textarea id="gitea-create-body" rows="14" placeholder="describe the issue..." class="w-full bg-t-bg border border-t-border text-t-text px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono leading-relaxed"></textarea>
                        </label>
                        <div id="gitea-create-labels-warning" class="hidden mt-3 px-2 py-1.5 text-[10px] font-mono break-words border border-amber-500 text-amber-400 bg-t-bg"></div>
                        <div class="mt-3 grid grid-cols-2 gap-3">
                            <div>
                                <span class="font-pixel text-[9px] text-t-dim uppercase block mb-1">labels (optional)</span>
                                <div id="gitea-create-labels" class="border border-t-border bg-t-surface p-2 max-h-40 overflow-y-auto">
                                    <div class="text-[10px] text-t-dim italic">pick a repo first</div>
                                </div>
                            </div>
                            <div>
                                <span class="font-pixel text-[9px] text-t-dim uppercase block mb-1">assignees (optional)</span>
                                <div id="gitea-create-assignees" class="border border-t-border bg-t-surface p-2 max-h-40 overflow-y-auto">
                                    <div class="text-[10px] text-t-dim italic">pick a repo first</div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <span class="font-pixel text-[9px] text-t-dim uppercase block mb-1">milestone (optional)</span>
                            <select id="gitea-create-milestone" class="w-full bg-t-bg border border-t-border text-t-bright px-2 py-1.5 text-xs focus:border-t-accent focus:outline-none font-mono">
                                <option value="">— no milestone —</option>
                            </select>
                            <p class="text-[9px] text-t-dim mt-1 italic">project: not supported by gitea api on issue create — set it manually on gitea after creation</p>
                        </div>
                        <div class="mt-4 flex items-center gap-2">
                            <button id="gitea-create-submit" class="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-t-accent text-t-bg border border-t-accent hover:brightness-110 transition-all"><i class="ph ph-paper-plane-tilt text-sm"></i><span class="font-pixel text-[10px]">Create issue</span></button>
                            <button id="gitea-create-cancel-2" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">Cancel</span></button>
                        </div>
                        <div id="gitea-create-status" class="hidden mt-2 px-3 py-2 text-[10px] font-mono break-words border border-t-border bg-t-bg"></div>
                    </div>
                </div>
                <div id="gitea-detail" class="hidden flex flex-col flex-1 min-h-0">
                    <!-- Detail header -->
                    <div class="shrink-0 border-b border-t-border px-5 pt-5 pb-3">
                        <div class="flex items-start gap-3 mb-2">
                            <span id="gitea-detail-state" class="gitea-state-badge mt-1">open</span>
                            <div class="flex-1 min-w-0">
                                <div id="gitea-title-display" class="flex items-center gap-2">
                                    <h3 id="gitea-detail-title" class="text-t-bright text-base font-bold flex-1 break-words"></h3>
                                    <button id="gitea-title-edit-btn" class="toolbar-btn shrink-0" data-tip="Edit title"><i class="ph ph-pencil-simple text-sm"></i></button>
                                </div>
                                <div id="gitea-title-edit" class="hidden flex items-center gap-2">
                                    <input id="gitea-title-input" type="text" class="flex-1 bg-t-bg border border-t-accent text-t-bright px-2 py-1 text-sm focus:outline-none font-mono">
                                    <button id="gitea-title-save" class="toolbar-btn" data-tip="Save"><i class="ph ph-check text-sm text-t-accent"></i></button>
                                    <button id="gitea-title-cancel" class="toolbar-btn" data-tip="Cancel"><i class="ph ph-x text-sm text-t-danger"></i></button>
                                </div>
                            </div>
                            <span id="gitea-detail-number" class="font-pixel text-[10px] text-t-dim mt-1"></span>
                        </div>
                        <div class="text-[10px] font-pixel text-t-dim mb-2">
                            <span id="gitea-detail-repo"></span>
                            ·
                            <span class="text-t-muted">opened by</span> <span id="gitea-detail-author" class="text-t-text"></span>
                            <span id="gitea-detail-date-wrap"> · <span id="gitea-detail-date" class="text-t-text"></span></span>
                        </div>
                        <div class="flex items-start gap-2 mb-2">
                            <div id="gitea-detail-labels" class="flex flex-wrap gap-1 flex-1"></div>
                            <button id="gitea-labels-edit-btn" class="toolbar-btn shrink-0" data-tip="Edit labels"><i class="ph ph-tag text-sm"></i></button>
                        </div>
                        <div id="gitea-labels-editor" class="hidden border border-t-border bg-t-surface p-2 mb-2">
                            <div id="gitea-labels-warning" class="hidden mb-2 px-2 py-1 text-[10px] font-mono break-words border border-amber-500 text-amber-400 bg-t-bg"></div>
                            <div id="gitea-labels-checkboxes" class="space-y-1 max-h-48 overflow-y-auto"></div>
                            <div class="flex items-center gap-2 mt-2 pt-2 border-t border-t-border">
                                <button id="gitea-labels-save" class="flex items-center gap-1.5 px-2 py-0.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">Save</span></button>
                                <button id="gitea-labels-cancel" class="flex items-center gap-1.5 px-2 py-0.5 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">Cancel</span></button>
                            </div>
                        </div>
                        <!-- Metadata row: assignees + milestone + due date with inline editor -->
                        <div class="flex items-center gap-2 mb-2">
                            <div id="gitea-detail-meta" class="flex flex-wrap gap-x-3 gap-y-1 flex-1 text-[10px] font-pixel text-t-dim"></div>
                            <button id="gitea-meta-edit-btn" class="toolbar-btn shrink-0" data-tip="Edit assignees, milestone, due date"><i class="ph ph-sliders-horizontal text-sm"></i></button>
                        </div>
                        <div id="gitea-meta-editor" class="hidden border border-t-border bg-t-surface p-3 mb-2">
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <span class="font-pixel text-[9px] text-t-dim uppercase block mb-1"><i class="ph ph-users text-xs"></i> assignees</span>
                                    <div id="gitea-meta-assignees" class="border border-t-border bg-t-bg p-2 max-h-40 overflow-y-auto">
                                        <div class="text-[10px] text-t-dim italic">loading...</div>
                                    </div>
                                </div>
                                <div class="space-y-3">
                                    <div>
                                        <span class="font-pixel text-[9px] text-t-dim uppercase block mb-1"><i class="ph ph-flag text-xs"></i> milestone</span>
                                        <select id="gitea-meta-milestone" class="w-full bg-t-bg border border-t-border text-t-bright px-2 py-1.5 text-xs focus:border-t-accent focus:outline-none font-mono">
                                            <option value="">— no milestone —</option>
                                        </select>
                                    </div>
                                    <div>
                                        <span class="font-pixel text-[9px] text-t-dim uppercase block mb-1"><i class="ph ph-calendar text-xs"></i> due date</span>
                                        <div class="flex items-center gap-1">
                                            <input id="gitea-meta-due" type="date" class="flex-1 bg-t-bg border border-t-border text-t-bright px-2 py-1.5 text-xs focus:border-t-accent focus:outline-none font-mono">
                                            <button id="gitea-meta-due-clear" class="toolbar-btn" data-tip="Clear due date"><i class="ph ph-x text-sm"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2 mt-3 pt-2 border-t border-t-border">
                                <button id="gitea-meta-save" class="flex items-center gap-1.5 px-2 py-0.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">Save</span></button>
                                <button id="gitea-meta-cancel" class="flex items-center gap-1.5 px-2 py-0.5 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">Cancel</span></button>
                            </div>
                        </div>
                        <div class="mt-3 flex items-center gap-2 flex-wrap">
                            <button id="gitea-extract-btn" class="flex items-center gap-1.5 px-3 py-1 text-xs bg-t-accent text-t-bg border border-t-accent hover:brightness-110 transition-all"><i class="ph ph-scissors text-sm"></i><span class="font-pixel text-[10px]">Extract as card</span></button>
                            <button id="gitea-state-toggle" class="flex items-center gap-1.5 px-3 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-check-circle text-sm"></i><span class="font-pixel text-[10px]">Close</span></button>
                            <a id="gitea-open-link" href="#" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 px-3 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-arrow-square-out text-sm"></i><span class="font-pixel text-[10px]">Open on gitea</span></a>
                        </div>
                        <div id="gitea-extract-status" class="hidden mt-2 px-3 py-2 text-[10px] font-mono break-words border border-t-border bg-t-bg"></div>
                    </div>
                    <!-- Body + comments scrollable -->
                    <div class="flex-1 min-h-0 overflow-y-auto px-5 py-4">
                        <div id="gitea-body-display" class="flex items-start gap-2">
                            <div id="gitea-detail-body" class="prose text-sm text-t-text flex-1 min-w-0"></div>
                            <button id="gitea-body-edit-btn" class="toolbar-btn shrink-0" data-tip="Edit body"><i class="ph ph-pencil-simple text-sm"></i></button>
                        </div>
                        <div id="gitea-body-edit" class="hidden">
                            <textarea id="gitea-body-input" class="w-full bg-t-bg border border-t-accent text-t-text px-3 py-2 text-xs focus:outline-none font-mono leading-relaxed" rows="10"></textarea>
                            <div class="flex items-center gap-2 mt-2">
                                <button id="gitea-body-save" class="flex items-center gap-1.5 px-3 py-1 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">Save</span></button>
                                <button id="gitea-body-cancel" class="flex items-center gap-1.5 px-3 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">Cancel</span></button>
                            </div>
                        </div>
                        <div id="gitea-detail-comments-section" class="mt-6 hidden">
                            <div class="font-pixel text-[10px] uppercase tracking-wider text-t-dim border-b border-t-border pb-1 mb-3"><i class="ph ph-chat-circle text-xs"></i> comments (<span id="gitea-detail-comments-count">0</span>)</div>
                            <div id="gitea-detail-comments" class="space-y-3"></div>
                        </div>
                        <!-- Comment composer (always visible when an issue is open) -->
                        <div class="mt-6 border-t border-t-border pt-4">
                            <div class="font-pixel text-[10px] uppercase tracking-wider text-t-dim mb-2"><i class="ph ph-chat-text text-xs"></i> add comment</div>
                            <textarea id="gitea-comment-input" rows="3" placeholder="markdown supported..." class="w-full bg-t-bg border border-t-border text-t-text px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono leading-relaxed"></textarea>
                            <div class="flex items-center gap-2 mt-2">
                                <button id="gitea-comment-post" class="flex items-center gap-1.5 px-3 py-1 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-paper-plane-tilt text-sm"></i><span class="font-pixel text-[10px]">Post</span></button>
                                <span id="gitea-comment-status" class="font-pixel text-[9px] text-t-dim"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>