<!DOCTYPE html>
<html lang="en" dir="auto" data-theme="{{ theme }}" data-theme-default="{{ theme }}">
<head>
{% include "theme-boot.html" %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Directory Listing - markon</title>
<meta name="enable-search" content="{{ enable_search }}">
<meta name="enable-live" content="{{ enable_live }}">
<meta name="enable-chat" content="{{ enable_chat }}">
<meta name="default-chat-mode" content="{{ default_chat_mode }}">
<meta name="workspace-id" content="{{ workspace_id }}">
<link id="markon-github-markdown-light" rel="stylesheet" href="/_/css/github-markdown-light.css" media="not all">
<link id="markon-github-markdown-dark" rel="stylesheet" href="/_/css/github-markdown-dark.css" media="not all">
<script>window.MarkonTheme && window.MarkonTheme.applyStylesheetMedia();</script>
<link rel="stylesheet" href="/_/css/tokens.css">
<link rel="stylesheet" href="/_/css/shortcuts.css">
<link rel="stylesheet" href="/_/css/editor.css">
<link rel="stylesheet" href="/_/css/collaboration.css">
<link rel="stylesheet" href="/_/css/chat.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
line-height: 1.5;
}
* {
box-sizing: border-box;
}
body {
background-color: var(--markon-bg-default);
color: var(--markon-fg-default);
}
a,
a:visited {
color: var(--markon-accent) !important;
}
li {
border-bottom: 1px solid var(--markon-border-default);
}
h1 {
color: var(--markon-fg-default);
border-bottom: 2px solid var(--markon-border-default);
}
h1 {
padding-bottom: 10px;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 8px 0;
}
.dir-icon {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: -3px;
margin-right: 8px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.75;
}
.dir-icon-folder {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586069' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>");
}
[aria-expanded="true"] .dir-icon-folder {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586069' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 14l1.5-4h13.2a1 1 0 0 1 .95 1.32l-2.25 6A2.5 2.5 0 0 1 17.06 19H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v2'/></svg>");
}
.dir-icon-file {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23586069'><path d='M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6h-2.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086a1.75 1.75 0 011.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z'/></svg>");
}
html[data-theme="dark"] .dir-icon-folder {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>");
}
html[data-theme="dark"] [aria-expanded="true"] .dir-icon-folder {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 14l1.5-4h13.2a1 1 0 0 1 .95 1.32l-2.25 6A2.5 2.5 0 0 1 17.06 19H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v2'/></svg>");
}
html[data-theme="dark"] .dir-icon-file {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238b949e'><path d='M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6h-2.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086a1.75 1.75 0 011.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z'/></svg>");
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.workspace-muted,
.workspace-meta {
color: var(--markon-fg-muted);
font-size: 13px;
}
.workspace-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.workspace-mono {
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 12px;
color: var(--markon-fg-muted);
}
.workspace-status-pill {
display: inline-flex;
align-items: center;
gap: 4px;
border: 0;
border-radius: 0;
padding: 0;
line-height: 1.4;
background: transparent;
color: var(--markon-fg-muted);
}
.workspace-status-pill.is-ok {
color: var(--markon-success);
}
.workspace-status-pill.is-warn {
color: var(--markon-warning);
}
.workspace-feature-list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-top: 10px;
}
.workspace-feature-switch {
display: inline-flex;
align-items: center;
gap: 8px;
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
color: var(--markon-fg-muted);
font-size: 12px;
line-height: 1.35;
cursor: pointer;
user-select: none;
}
.workspace-feature-switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.workspace-feature-switch.is-on {
color: var(--markon-fg-default);
}
.workspace-feature-switch.is-disabled,
.workspace-feature-switch.is-pending {
cursor: default;
}
.workspace-feature-switch.is-disabled {
opacity: 0.55;
}
.workspace-feature-toggle {
position: relative;
width: 26px;
height: 14px;
border-radius: 999px;
background: var(--markon-border-default);
flex: 0 0 auto;
transition: background-color 120ms ease;
}
.workspace-feature-toggle::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--markon-bg-default);
box-shadow: 0 0 0 1px var(--markon-border-default);
transition: transform 120ms ease;
}
.workspace-feature-switch.is-on .workspace-feature-toggle {
background: var(--markon-accent);
}
.workspace-feature-switch.is-on .workspace-feature-toggle::after {
transform: translateX(12px);
}
.file-filter-switch {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.file-filter-switch button {
min-height: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--markon-fg-muted);
font: 12px/1.2 var(--markon-ui-font);
padding: 0;
cursor: pointer;
white-space: nowrap;
}
.file-filter-switch button:hover {
color: var(--markon-fg-default);
text-decoration: underline;
}
.file-filter-switch button.is-active {
background: transparent;
color: var(--markon-accent);
font-weight: 650;
}
.dir-list[data-file-filter="markdown"] li[data-filter-visible-markdown="false"] {
display: none;
}
.workspace-shell {
min-height: 100vh;
display: block;
overflow: visible;
background: var(--markon-bg-default);
color: var(--markon-fg-default);
}
.workspace-pane-kicker {
color: var(--markon-fg-muted);
font-size: 12px;
line-height: 1.2;
}
.workspace-title {
margin: 3px 0 10px;
padding: 0;
border: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
}
.workspace-sidebar,
.workspace-main,
.workspace-detail {
min-width: 0;
min-height: 0;
overflow: hidden;
}
.workspace-sidebar {
display: flex;
flex-direction: column;
border-right: 1px solid var(--markon-border-default);
background: var(--markon-bg-muted);
}
.workspace-pane-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 48px;
padding: 12px 14px;
border-bottom: 1px solid var(--markon-border-default);
}
.workspace-pane-title {
margin: 0;
font-size: 13px;
line-height: 1.3;
color: var(--markon-fg-default);
}
.workspace-file-list {
flex: 1;
min-height: 0;
overflow: auto;
padding: 8px;
}
.workspace-file-list .dir-list {
margin: 0;
}
.workspace-file-list .dir-list li {
display: flex;
align-items: center;
min-width: 0;
padding: 6px 7px;
border-bottom: 0;
border-radius: var(--markon-radius-sm);
}
.workspace-file-list .dir-list li:hover {
background: var(--markon-bg-elevated);
}
.workspace-file-list .dir-list a {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--markon-fg-default) !important;
}
.workspace-footlinks {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
padding: 10px 14px;
border-top: 1px solid var(--markon-border-default);
color: var(--markon-fg-muted);
font-size: 12px;
}
.workspace-footlinks a,
.workspace-footlinks a:visited {
color: var(--markon-fg-muted) !important;
}
.workspace-main {
display: flex;
flex-direction: column;
min-height: 100vh;
margin-right: 380px;
overflow: visible;
padding: 28px 30px 34px;
background: var(--markon-bg-default);
}
.workspace-shell--full .workspace-main {
margin-right: 0;
}
.workspace-meta-panel {
padding-bottom: 22px;
border-bottom: 1px solid var(--markon-border-default);
}
.workspace-shell--no-git .workspace-meta-panel {
border-bottom: 0;
}
.workspace-files-panel {
container-type: inline-size;
padding-top: 15px;
}
.workspace-shell--no-git .workspace-files-panel {
margin-top: -50px;
padding-top: 0;
}
.workspace-repo-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
.workspace-repo-toolbar--plain {
margin-bottom: 5px;
padding-bottom: 12px;
border-bottom: 1px solid var(--markon-border-default);
}
.workspace-repo-toolbar-left,
.workspace-repo-toolbar-right {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.workspace-repo-toolbar-right {
justify-content: flex-end;
}
.workspace-repo-toolbar .workspace-spotlight-trigger {
width: auto;
min-width: 0;
border-radius: var(--markon-radius-sm);
}
.workspace-menu-secondary-links {
display: none;
}
.workspace-ref-menu,
.workspace-dropdown {
position: relative;
display: inline-flex;
min-width: 0;
}
.workspace-ref-menu {
flex: 0 0 auto;
max-width: 180px;
}
.workspace-tool-button,
.workspace-ref-link,
.workspace-green-button {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
max-width: 100%;
border: 1px solid var(--markon-border-default);
border-radius: var(--markon-radius-sm);
padding: 5px 10px;
background: var(--markon-bg-muted);
color: var(--markon-fg-default) !important;
font: 600 13px/1.2 var(--markon-ui-font);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.workspace-ref-link {
border-color: transparent;
background: transparent;
color: var(--markon-fg-muted) !important;
font-weight: 600;
}
.workspace-tool-button:hover,
.workspace-ref-link:hover {
background: var(--markon-bg-elevated);
text-decoration: none;
}
.workspace-tool-button[disabled] {
color: var(--markon-fg-muted) !important;
cursor: default;
}
.workspace-tool-button[disabled]:hover {
background: var(--markon-bg-muted);
}
.workspace-green-button {
border-color: color-mix(in srgb, var(--markon-success) 68%, var(--markon-border-default));
background: var(--markon-success);
color: var(--markon-bg-default) !important;
}
.workspace-green-button:hover {
filter: brightness(1.04);
text-decoration: none;
}
.workspace-tool-button svg,
.workspace-ref-link svg,
.workspace-green-button svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.workspace-tool-button .workspace-tool-caret {
width: 12px;
height: 12px;
margin-left: -2px;
color: var(--markon-fg-muted);
}
.workspace-tool-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.workspace-ref-menu > .workspace-tool-button {
width: auto;
max-width: 100%;
}
.workspace-dropdown-menu {
position: absolute;
z-index: var(--markon-z-modal-inline);
top: calc(100% + 6px);
right: 0;
display: none;
min-width: 250px;
max-width: min(420px, calc(100vw - 32px));
padding: 8px;
border: 1px solid var(--markon-border-default);
border-radius: var(--markon-radius-lg);
background: var(--markon-bg-overlay);
box-shadow: var(--markon-shadow-pop);
}
.workspace-ref-menu .workspace-dropdown-menu {
left: 0;
right: auto;
}
.workspace-dropdown.is-open .workspace-dropdown-menu,
.workspace-ref-menu.is-open .workspace-dropdown-menu {
display: block;
}
.workspace-menu-title {
padding: 5px 7px 8px;
color: var(--markon-fg-muted);
font-size: 12px;
font-weight: 650;
}
.workspace-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-height: 32px;
border: 0;
border-radius: var(--markon-radius-sm);
padding: 6px 7px;
background: transparent;
color: var(--markon-fg-default);
font: 13px/1.25 var(--markon-ui-font);
text-align: left;
cursor: pointer;
}
.workspace-menu-item:hover {
background: var(--markon-bg-muted);
}
.workspace-menu-item[disabled] {
color: var(--markon-fg-muted);
cursor: default;
}
.workspace-menu-item[disabled]:hover {
background: transparent;
}
.workspace-menu-label {
padding: 2px 7px 4px;
color: var(--markon-fg-muted);
font: 11px/1.2 var(--markon-ui-font);
}
.workspace-menu-git-links {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 6px 7px;
font: 600 13px/1.25 var(--markon-ui-font);
}
.workspace-menu-git-links a,
.workspace-menu-git-links a:visited {
color: var(--markon-accent) !important;
text-decoration: none;
}
.workspace-menu-git-links a:hover {
text-decoration: underline;
}
.workspace-menu-git-divider {
color: var(--markon-fg-muted);
font-weight: 400;
}
.workspace-menu-separator {
height: 1px;
margin: 6px 4px;
background: var(--markon-border-default);
}
.file-filter-switch-menu {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.file-filter-switch-menu button {
justify-content: flex-start;
text-align: left;
width: 100%;
min-height: 32px;
border-radius: var(--markon-radius-sm);
padding: 6px 7px;
font: 13px/1.25 var(--markon-ui-font);
color: var(--markon-fg-default);
}
.file-filter-switch-menu button:hover {
background: var(--markon-bg-muted);
color: var(--markon-fg-default);
text-decoration: none;
}
.file-filter-switch-menu button.is-active {
color: var(--markon-accent);
font-weight: 650;
}
.workspace-branch-panel {
width: 320px;
min-width: 320px;
max-width: min(360px, calc(100vw - 32px));
padding: 0;
overflow: hidden;
}
.branch-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 8px 8px 12px;
border-bottom: 1px solid var(--markon-border-default);
}
.branch-panel-title {
color: var(--markon-fg-default);
font: 600 13px/1.2 var(--markon-ui-font);
}
.branch-panel-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 0;
border-radius: var(--markon-radius-sm);
background: transparent;
color: var(--markon-fg-muted);
cursor: pointer;
}
.branch-panel-close:hover {
background: var(--markon-bg-muted);
color: var(--markon-fg-default);
}
.branch-panel-close svg {
width: 14px;
height: 14px;
}
.branch-panel-tabs {
display: flex;
gap: 4px;
padding: 6px 8px 0;
border-bottom: 1px solid var(--markon-border-default);
}
.branch-panel-tab {
border: 0;
border-bottom: 2px solid transparent;
padding: 6px 8px 8px;
background: transparent;
color: var(--markon-fg-muted);
font: 600 12px/1.2 var(--markon-ui-font);
cursor: pointer;
}
.branch-panel-tab:hover {
color: var(--markon-fg-default);
}
.branch-panel-tab.is-active {
color: var(--markon-fg-default);
border-bottom-color: var(--markon-accent);
}
.branch-panel-search {
padding: 8px;
border-bottom: 1px solid var(--markon-border-default);
}
.branch-panel-search input {
width: 100%;
height: 30px;
border: 1px solid var(--markon-border-default);
border-radius: 6px;
padding: 0 8px;
background: var(--markon-bg-default);
color: var(--markon-fg-default);
font: 13px/1.2 var(--markon-ui-font);
outline: none;
}
.branch-panel-search input:focus {
border-color: var(--markon-accent);
}
.branch-panel-list {
margin: 0;
padding: 4px;
list-style: none;
max-height: 40vh;
overflow-y: auto;
}
.branch-panel-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 32px;
border: 0;
border-radius: var(--markon-radius-sm);
padding: 4px 8px;
background: transparent;
color: var(--markon-fg-default);
font: 13px/1.2 var(--markon-ui-font);
text-align: left;
cursor: pointer;
}
.branch-panel-item:hover:not([disabled]) {
background: var(--markon-bg-muted);
}
.branch-panel-item[disabled] {
cursor: default;
}
.branch-panel-check {
flex: 0 0 16px;
width: 16px;
color: var(--markon-success);
text-align: center;
}
.branch-panel-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.branch-panel-badge {
flex: 0 0 auto;
padding: 0 7px;
border: 1px solid var(--markon-border-default);
border-radius: 999px;
color: var(--markon-fg-muted);
font-size: 11px;
line-height: 18px;
}
.branch-panel-empty,
.branch-panel-note {
padding: 8px 12px;
color: var(--markon-fg-muted);
font-size: 12px;
}
.branch-panel-tags-link,
.branch-panel-foot {
display: block;
padding: 10px 12px;
color: var(--markon-accent) !important;
font-size: 13px;
text-decoration: none;
}
.branch-panel-tags-link:hover,
.branch-panel-foot:hover {
background: var(--markon-bg-muted);
text-decoration: none;
}
.refs-current {
color: var(--markon-success);
font-size: 12px;
font-weight: 650;
}
.workspace-modal {
position: fixed;
inset: 0;
display: none;
place-items: start center;
padding: 12vh 18px 24px;
}
.workspace-modal.is-open {
display: grid;
}
.workspace-modal-panel {
--markon-modal-surface-border: var(--markon-modal-border-success);
position: relative;
width: min(680px, 100%);
max-height: 72vh;
display: flex;
flex-direction: column;
}
.workspace-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--markon-border-default);
}
.workspace-modal-title {
margin: 0;
font-size: 14px;
font-weight: 650;
user-select: none;
}
.workspace-modal-close {
border: 0;
background: transparent;
color: var(--markon-fg-muted);
cursor: pointer;
font-size: 18px;
}
.workspace-modal-body {
padding: 12px;
overflow: auto;
}
.workspace-modal-input,
.workspace-add-file-textarea {
width: 100%;
border: 1px solid var(--markon-border-default);
border-radius: var(--markon-radius-sm);
background: var(--markon-bg-default);
color: var(--markon-fg-default);
font: 13px/1.4 var(--markon-ui-font);
}
.workspace-modal-input {
height: 38px;
padding: 7px 9px;
}
.workspace-add-file-textarea {
min-height: 130px;
resize: vertical;
margin-top: 10px;
padding: 9px;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
}
.workspace-modal-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-top: 12px;
}
.workspace-modal-status {
flex: 1;
min-width: 0;
color: var(--markon-fg-muted);
font-size: 12px;
}
.workspace-file-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 0 10px;
border-bottom: 1px solid var(--markon-border-default);
background: transparent;
}
.workspace-file-toolbar-main {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.workspace-commit-header {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
align-items: center;
gap: 14px;
min-width: 0;
padding: 12px 0;
border-bottom: 1px solid var(--markon-border-default);
}
.workspace-commit-main,
.workspace-commit-meta {
display: flex;
align-items: center;
min-width: 0;
gap: 8px;
}
.workspace-commit-avatar {
width: 22px;
height: 22px;
flex: 0 0 auto;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
line-height: 1;
color: #fff;
background: var(--markon-bg-muted);
user-select: none;
}
.workspace-commit-author {
flex: 0 0 auto;
color: var(--markon-fg-default);
font-weight: 650;
}
.workspace-commit-subject,
.workspace-entry-commit {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--markon-fg-muted);
font-size: 14px;
text-align: left;
}
.workspace-commit-subject {
flex: 1 1 auto;
}
.workspace-commit-ok {
flex: 0 0 auto;
color: var(--markon-success);
}
.workspace-commit-meta,
.workspace-entry-time {
color: var(--markon-fg-muted);
font-size: 14px;
white-space: nowrap;
}
.workspace-entry-time {
text-align: right;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.workspace-commits-link,
.workspace-commits-link:visited {
color: var(--markon-fg-default) !important;
font-weight: 650;
}
@container (max-width: 760px) {
.workspace-secondary-link {
display: none;
}
.workspace-menu-secondary-links {
display: block;
}
}
@container (max-width: 560px) {
.workspace-ref-menu {
max-width: 160px;
}
.workspace-dropdown {
flex: 0 0 auto;
}
}
@container (max-width: 440px) {
.workspace-ref-menu {
max-width: 140px;
}
.workspace-repo-toolbar {
gap: 8px;
}
.workspace-repo-toolbar-left,
.workspace-repo-toolbar-right {
gap: 8px;
}
.workspace-commit-subject {
display: none;
}
}
.workspace-repo-file-list {
margin: 0;
padding-bottom: 24px;
}
.workspace-file-list-wrap {
position: relative;
--ws-col-name: 320px;
--ws-col-commit: 420px;
--ws-row-left-inset: 5px;
--ws-row-right-inset: 5px;
}
.workspace-repo-file-list li {
display: grid;
grid-template-columns: minmax(0, 1fr) fit-content(52ch) max-content;
align-items: center;
column-gap: 18px;
min-width: 0;
padding: 10px var(--ws-row-right-inset) 10px 0;
border-bottom: 0;
}
.ws-col-handle {
position: absolute;
top: 0;
bottom: 0;
width: 9px;
margin-left: -4px;
cursor: col-resize;
z-index: 3;
touch-action: none;
user-select: none;
}
.ws-col-handle::before {
content: "";
position: absolute;
left: 4px;
top: 6px;
bottom: 6px;
width: 2px;
border-radius: 2px;
background: transparent;
transition: background 0.12s ease;
}
.ws-col-handle:hover::before,
.ws-col-handle.is-dragging::before {
background: var(--markon-accent, #0969da);
}
.workspace-entry-name {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding-left: var(--ws-row-left-inset);
}
.workspace-entry-name > .dir-icon {
margin-right: 0;
flex: 0 0 auto;
}
.workspace-repo-file-list li:hover {
background: transparent;
}
.workspace-entry-name a {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--markon-fg-default) !important;
font-size: 14px;
font-weight: 400;
}
.workspace-entry-name a:hover {
color: var(--markon-accent) !important;
text-decoration: underline;
}
.workspace-entry-name strong {
font-weight: 400;
}
.workspace-entry-toggle {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
color: var(--markon-fg-default);
}
.workspace-entry-toggle .dir-icon {
margin-right: 0;
flex: 0 0 auto;
}
.workspace-entry-toggle strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-weight: 400;
color: var(--markon-fg-default);
}
.workspace-entry-toggle:hover strong {
color: var(--markon-accent);
text-decoration: underline;
}
.workspace-repo-file-list li.workspace-entry-children {
display: block;
grid-column: 1 / -1;
padding: 0;
}
.workspace-repo-file-list li.workspace-entry-children.is-collapsed {
display: none;
}
.workspace-repo-file-list .workspace-tree {
list-style: none;
margin: 0;
padding: 0;
}
.workspace-repo-file-list .workspace-tree.is-collapsed {
display: none;
}
.workspace-repo-file-list .workspace-tree > li {
display: block;
padding: 0;
}
.workspace-repo-file-list > li.is-workspace-target:not(.workspace-entry-children),
.workspace-tree-item.is-workspace-target > .workspace-tree-row {
border-radius: 6px;
background: var(--markon-accent-muted);
}
.dir-list[data-file-filter="markdown"] .workspace-tree-item[data-filter-visible-markdown="false"] {
display: none;
}
.workspace-tree-row {
display: grid;
grid-template-columns: minmax(0, 1fr) fit-content(52ch) max-content;
align-items: center;
column-gap: 18px;
min-width: 0;
padding: 8px var(--ws-row-right-inset) 8px 0;
border-radius: 4px;
}
.workspace-tree-row[role="button"] {
cursor: pointer;
}
.workspace-tree-row:hover {
background: var(--markon-bg-subtle, rgba(110, 118, 129, 0.08));
}
.workspace-tree-name {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.workspace-tree-name .dir-icon {
margin-right: 0;
flex: 0 0 auto;
}
.workspace-tree-name a,
.workspace-tree-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-weight: 400;
color: var(--markon-fg-default) !important;
}
.workspace-tree-name a:hover,
.workspace-tree-row[role="button"]:hover .workspace-tree-label {
color: var(--markon-accent) !important;
text-decoration: underline;
}
.workspace-tree-empty {
padding: 6px 0;
color: var(--markon-fg-muted, #6e7781);
font-size: 13px;
}
.workspace-detail {
position: fixed;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 0;
width: 380px;
height: auto;
padding: 28px 26px 34px;
overflow: hidden;
border-left: 1px solid var(--markon-border-default);
background: var(--markon-bg-default);
}
.workspace-side-section {
padding: 0 0 22px;
border-bottom: 1px solid var(--markon-border-default);
}
.workspace-side-section + .workspace-side-section {
padding-top: 22px;
}
.workspace-side-section:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.workspace-side-footer {
padding-top: 22px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.workspace-side-footer a {
color: var(--markon-fg-muted);
font-size: 12px;
text-decoration: none;
}
.workspace-side-footer a:hover {
color: var(--markon-accent);
text-decoration: underline;
}
.workspace-section-body {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.workspace-action-links {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
margin-top: 12px;
color: var(--markon-fg-muted);
font-size: 13px;
}
.workspace-action-links a,
.workspace-action-links a:visited {
color: var(--markon-accent) !important;
}
.workspace-action-disabled {
color: var(--markon-fg-muted);
}
.workspace-section-main {
min-width: 0;
}
.workspace-section-main--features {
display: flex;
align-items: center;
gap: 6px;
}
.workspace-section-info {
position: relative;
display: inline-flex;
align-items: center;
flex: none;
color: var(--markon-fg-muted);
cursor: default;
border-radius: 50%;
}
.workspace-section-info:hover,
.workspace-section-info:focus-visible {
color: var(--markon-fg-default);
outline: none;
}
.workspace-section-tip {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 30;
width: max-content;
max-width: 230px;
padding: 6px 9px;
border-radius: 6px;
background: var(--markon-fg-default);
color: var(--markon-bg-default);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
font-size: 12px;
font-weight: 400;
line-height: 1.45;
white-space: normal;
text-align: left;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.12s ease, visibility 0.12s ease;
transition-delay: 0.22s;
}
.workspace-section-info:hover .workspace-section-tip,
.workspace-section-info:focus-visible .workspace-section-tip {
opacity: 1;
visibility: visible;
}
.workspace-section-title,
.workspace-change-title {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--markon-fg-default);
font-size: 14px;
font-weight: 650;
line-height: 1.3;
}
.workspace-section-desc,
.workspace-change-meta,
.workspace-diff-meta,
.workspace-empty {
color: var(--markon-fg-muted);
font-size: 12px;
}
.workspace-meta-list {
display: flex;
flex-direction: column;
gap: 7px;
margin: 0;
padding: 0;
}
.workspace-meta-row {
display: flex;
align-items: baseline;
min-width: 0;
gap: 8px;
}
.workspace-meta-row dt {
margin: 0;
flex: 0 0 auto;
color: var(--markon-fg-muted);
font-size: 12px;
}
.workspace-meta-row dd {
min-width: 0;
margin: 0;
color: var(--markon-fg-default);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workspace-meta-empty { color: var(--markon-fg-muted); }
.workspace-path-dd {
display: flex;
align-items: center;
gap: 8px;
overflow: visible;
}
.workspace-name-pill {
flex: none;
padding: 2px 10px;
border-radius: 999px;
background: var(--markon-bg-muted);
color: var(--markon-fg-default);
font-size: 11px;
line-height: 1.55;
white-space: nowrap;
}
.workspace-path-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workspace-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
min-width: 0;
gap: 2px;
font-size: 13px;
}
.workspace-breadcrumb-link,
.workspace-breadcrumb-link:visited {
color: var(--markon-accent);
text-decoration: none;
}
.workspace-breadcrumb-link:hover {
text-decoration: underline;
}
.workspace-breadcrumb-sep {
color: var(--markon-fg-muted);
padding: 0 2px;
}
.workspace-breadcrumb-current {
color: var(--markon-fg-default);
font-weight: 600;
}
.workspace-copy-row {
align-items: center;
}
.workspace-copy-button {
border: 0;
padding: 0;
background: transparent;
color: var(--markon-accent);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.workspace-copy-button:hover {
text-decoration: underline;
}
.workspace-change-primary {
min-width: 0;
padding: 0;
background: transparent;
}
.workspace-change-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workspace-change-counts {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.workspace-diff-virtual-spacer {
position: relative;
width: 100%;
}
.workspace-diff-row {
position: absolute;
left: 0;
top: 0;
width: 100%;
contain: layout paint;
}
.workspace-diff-row-file {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 44px;
padding: 9px 11px;
border-top: 1px solid var(--markon-border-default);
border-bottom: 1px solid var(--markon-border-default);
background: var(--markon-bg-muted);
}
.workspace-diff-row-file-title {
min-width: 0;
overflow-wrap: anywhere;
font-size: 13px;
font-weight: 650;
}
.workspace-diff-row-file-meta,
.workspace-diff-counts {
color: var(--markon-fg-muted);
font-size: 12px;
}
.workspace-diff-counts {
flex: 0 0 auto;
}
.workspace-diff-empty {
padding: 16px;
border: 1px solid var(--markon-border-default);
border-radius: var(--markon-radius-lg);
background: var(--markon-bg-muted);
color: var(--markon-fg-muted);
font-size: 13px;
}
.workspace-diff-empty.is-error {
border-color: color-mix(in srgb, var(--markon-danger) 36%, var(--markon-border-default));
color: var(--markon-danger);
}
.workspace-diff-file {
border: 1px solid var(--markon-border-default);
border-radius: var(--markon-radius-lg);
overflow: hidden;
background: var(--markon-bg-default);
}
.workspace-diff-file + .workspace-diff-file {
margin-top: 12px;
}
.workspace-diff-file-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 11px;
border-bottom: 1px solid var(--markon-border-default);
background: var(--markon-bg-muted);
}
.workspace-diff-file-title {
min-width: 0;
overflow-wrap: anywhere;
font-size: 13px;
font-weight: 650;
}
.workspace-diff-counts {
flex: 0 0 auto;
color: var(--markon-fg-muted);
font-size: 12px;
}
.git-diff {
margin: 0;
overflow: auto;
background: var(--markon-bg-default);
color: var(--markon-fg-default);
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 12px;
line-height: 1.5;
}
.workspace-diff-row-line {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
margin: 0;
overflow: visible;
background: var(--markon-bg-default);
color: var(--markon-fg-default);
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 12px;
line-height: 1.45;
}
.git-diff-line {
min-height: 22px;
}
.workspace-diff-split-cell {
min-width: 0;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
}
.workspace-diff-split-cell + .workspace-diff-split-cell {
border-left: 1px solid var(--markon-border-default);
}
.workspace-diff-line-no {
padding: 2px 7px;
border-right: 1px solid var(--markon-border-default);
color: var(--markon-fg-muted);
text-align: right;
user-select: none;
}
.workspace-diff-code {
min-width: 0;
padding: 2px 9px;
color: inherit;
font: inherit;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.git-diff-meta {
color: var(--markon-fg-muted);
background: var(--markon-bg-muted);
}
.git-diff-empty-side {
background: color-mix(in srgb, var(--markon-bg-muted) 74%, transparent);
}
.git-diff-add {
background: color-mix(in srgb, var(--markon-success) 16%, transparent);
}
.git-diff-del {
background: color-mix(in srgb, var(--markon-danger) 14%, transparent);
}
.git-diff-word-add,
.git-diff-word-del {
border-radius: var(--markon-radius-sm);
padding: 0 1px;
}
.git-diff-word-add {
background: color-mix(in srgb, var(--markon-success) 30%, transparent);
}
.git-diff-word-del {
background: color-mix(in srgb, var(--markon-danger) 28%, transparent);
}
@media (max-width: 850px) {
.workspace-shell--no-git {
display: block;
height: auto;
min-height: 100vh;
overflow: visible;
}
.workspace-shell--no-git .workspace-main {
min-height: 0;
margin-right: 0;
padding: 12px;
}
.workspace-shell--no-git .workspace-detail {
position: static;
width: auto;
height: auto;
overflow: visible;
border-left: 0;
border-top: 1px solid var(--markon-border-default);
padding: 12px;
}
.workspace-shell--no-git .workspace-file-toolbar {
align-items: flex-start;
flex-direction: column;
}
.workspace-shell--no-git .file-filter-switch {
width: 100%;
}
.workspace-shell--no-git .file-filter-switch button {
flex: 1;
}
.workspace-shell--no-git .workspace-repo-file-list li,
.workspace-shell--no-git .workspace-repo-file-list .workspace-tree-row {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 12px;
row-gap: 0;
align-items: center;
padding: 8px var(--ws-row-right-inset) 8px 0;
}
.workspace-shell--no-git .workspace-entry-commit {
display: none;
}
.workspace-shell--no-git .workspace-entry-time {
white-space: nowrap;
text-align: right;
}
.workspace-shell--no-git .ws-col-handle {
display: none;
}
}
@media (max-width: 720px) {
.workspace-shell {
display: block;
height: auto;
min-height: 100vh;
overflow: visible;
}
.workspace-main {
min-height: 0;
margin-right: 0;
padding: 12px;
}
.workspace-detail {
position: static;
width: auto;
height: auto;
overflow: visible;
border-left: 0;
border-top: 1px solid var(--markon-border-default);
padding: 12px;
}
.workspace-file-toolbar {
align-items: flex-start;
flex-direction: column;
}
.file-filter-switch {
width: 100%;
}
.file-filter-switch button {
flex: 1;
}
.workspace-repo-file-list li,
.workspace-repo-file-list .workspace-tree-row {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 12px;
row-gap: 0;
align-items: center;
padding: 8px var(--ws-row-right-inset) 8px 0;
}
.workspace-entry-commit {
display: none;
}
.workspace-entry-time {
white-space: nowrap;
text-align: right;
}
.ws-col-handle {
display: none;
}
}
</style>
{% if styles_css %}<style>{{ styles_css | safe }}</style>{% endif %}
{% if shortcuts_json %}<script>window.__MARKON_SHORTCUTS__ = {{ shortcuts_json | safe }};</script>{% endif %}
{% include "i18n-boot.html" %}
</head>
<body>
<main class="workspace-shell{% if not is_workspace_root %} workspace-shell--full{% endif %}{% if not git.available %} workspace-shell--no-git{% endif %}"
data-workspace-workbench
data-workspace-id="{{ workspace_id }}"
data-checkout-url="{{ checkout_url }}">
<section class="workspace-main">
<header class="workspace-meta-panel" aria-labelledby="dir-heading">
<h1 id="dir-heading" class="workspace-title" data-i18n="web.ws.heading" data-title-key="web.ws.title">Workspace</h1>
<dl class="workspace-meta-list">
{% if is_workspace_root %}
<div class="workspace-meta-row workspace-copy-row">
<dd class="workspace-path-dd" title="{{ current_dir }}"><span class="workspace-name-pill">{% if workspace_alias %}{{ workspace_alias }}{% else %}{{ workspace_name }}{% endif %}</span><span class="workspace-path-text">{{ current_dir }}</span></dd>
<button class="workspace-copy-button" type="button" data-copy-text="{{ current_dir }}" data-i18n="web.ws.meta.copy_path">Copy path</button>
</div>
<div class="workspace-meta-row workspace-copy-row">
<dt data-i18n="web.ws.meta.id">Workspace ID</dt>
<dd class="workspace-mono">{{ workspace_id }}</dd>
<button class="workspace-copy-button" type="button" data-copy-text="{{ workspace_id }}" data-i18n="web.ws.meta.copy_id">Copy ID</button>
</div>
{% else %}
<div class="workspace-meta-row workspace-copy-row">
<dd class="workspace-path-dd" title="{{ current_dir }}">
<nav class="workspace-breadcrumb" aria-label="Breadcrumb">
{% for seg in breadcrumb %}{% if seg.is_current %}<span class="workspace-breadcrumb-current">{{ seg.name }}</span>{% else %}<a class="workspace-breadcrumb-link" href="{{ seg.link }}">{{ seg.name }}</a><span class="workspace-breadcrumb-sep" aria-hidden="true">/</span>{% endif %}{% endfor %}
</nav>
</dd>
<button class="workspace-copy-button" type="button" data-copy-text="{{ current_dir }}" data-i18n="web.ws.meta.copy_path">Copy path</button>
</div>
{% endif %}
</dl>
</header>
<section class="workspace-files-panel" aria-labelledby="dir-heading">
<div class="workspace-repo-toolbar{% if not git.available %} workspace-repo-toolbar--plain{% endif %}">
<div class="workspace-repo-toolbar-left">
{% if git.available %}
<div class="workspace-ref-menu" data-workspace-dropdown>
<button class="workspace-tool-button" type="button">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3a2 2 0 1 1-2-2 2 2 0 0 1 2 2Zm0 10a2 2 0 1 1-2-2 2 2 0 0 1 2 2Zm8-10a2 2 0 1 1-2-2 2 2 0 0 1 2 2Z"/><path d="M3 5v6m2-8h2.5A3.5 3.5 0 0 1 11 6.5V11"/></svg>
<span class="workspace-tool-label">{% if git.branch %}{{ git.branch }}{% else %}<span data-i18n="web.ws.git.detached">Detached HEAD</span>{% endif %}</span>
<svg class="workspace-tool-caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg>
</button>
<div class="workspace-dropdown-menu workspace-branch-panel" data-branch-panel>
<div class="branch-panel-head">
<span class="branch-panel-title" data-i18n="web.ws.git.switch_branches_tags">Switch branches/tags</span>
<button class="branch-panel-close" type="button" data-branch-panel-close aria-label="Close" data-i18n-aria="web.ws.git.close">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M3 3l10 10M13 3L3 13"/></svg>
</button>
</div>
<div class="branch-panel-tabs" role="tablist">
<button class="branch-panel-tab is-active" type="button" role="tab" data-branch-tab="branches" data-i18n="web.ws.git.branches">Branches</button>
<button class="branch-panel-tab" type="button" role="tab" data-branch-tab="tags" data-i18n="web.ws.git.tags">Tags</button>
</div>
<div class="branch-panel-search" data-branch-panel-search>
<input type="search" data-branch-filter placeholder="Find a branch…" data-i18n-placeholder="web.ws.git.find_branch" autocomplete="off" spellcheck="false" aria-label="Find a branch">
</div>
<div class="branch-panel-pane" data-branch-pane="branches">
<ul class="branch-panel-list">
{% for branch in git_branches %}
<li data-branch-item data-branch-name-lower="{{ branch.name | lower }}">
<button class="branch-panel-item" type="button" data-checkout-branch="{{ branch.name }}" {% if branch.current or not can_manage %}disabled{% endif %}>
<span class="branch-panel-check" aria-hidden="true">{% if branch.current %}✓{% endif %}</span>
<span class="branch-panel-name">{{ branch.name }}</span>
{% if branch.is_default %}<span class="branch-panel-badge" data-i18n="web.ws.git.default">default</span>{% endif %}
</button>
</li>
{% endfor %}
</ul>
<div class="branch-panel-empty" data-branch-empty hidden data-i18n="web.ws.git.no_branches">No branches found.</div>
{% if not can_manage %}
<div class="branch-panel-note" data-i18n="web.ws.git.admin_required">Administrator session required</div>
{% endif %}
<a class="branch-panel-foot" href="{{ branches_url }}"><span data-i18n="web.ws.git.view_all_branches">View all branches</span> →</a>
</div>
<div class="branch-panel-pane" data-branch-pane="tags" hidden>
<a class="branch-panel-tags-link" href="{{ tags_url }}"><span data-i18n="web.ws.git.view_all_tags">View all tags</span> →</a>
</div>
</div>
</div>
<a class="workspace-ref-link workspace-secondary-link" href="{{ branches_url }}">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3a2 2 0 1 1-2-2 2 2 0 0 1 2 2Zm0 10a2 2 0 1 1-2-2 2 2 0 0 1 2 2Zm8-10a2 2 0 1 1-2-2 2 2 0 0 1 2 2Z"/><path d="M3 5v6m2-8h2.5A3.5 3.5 0 0 1 11 6.5V11"/></svg>
<span data-i18n="web.ws.git.branch">Branch</span>
</a>
<a class="workspace-ref-link workspace-secondary-link" href="{{ tags_url }}">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 2h5l7 7-5 5-7-7V2Z"/><path d="M5 5h.01"/></svg>
<span data-i18n="web.ws.git.tags">Tags</span>
</a>
{% endif %}
</div>
<div class="workspace-repo-toolbar-right">
<button type="button" class="workspace-spotlight-trigger workspace-spotlight-trigger--toolbar" data-workspace-spotlight-trigger aria-label="Open Workspace Spotlight" title="Open Workspace Spotlight">
<svg class="workspace-spotlight-trigger-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.35 6.35" aria-hidden="true" focusable="false">
<path d="M2.894.511a2.384 2.384 0 0 0-2.38 2.38 2.386 2.386 0 0 0 2.38 2.384c.56 0 1.076-.197 1.484-.523l.991.991a.265.265 0 0 0 .375-.374l-.991-.992a2.37 2.37 0 0 0 .523-1.485C5.276 1.58 4.206.51 2.894.51zm0 .53c1.026 0 1.852.825 1.852 1.85S3.92 4.746 2.894 4.746s-1.851-.827-1.851-1.853.825-1.852 1.851-1.852z" fill="currentColor"></path>
</svg>
<span class="workspace-spotlight-trigger-label" data-i18n="web.wsnav.trigger">Search</span>
<span class="workspace-spotlight-trigger-kbd" aria-hidden="true">/</span>
</button>
<div class="workspace-dropdown" data-workspace-dropdown>
<button class="workspace-tool-button workspace-tool-icon" type="button" aria-label="More" title="More">
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="3" cy="8" r="1.35"/><circle cx="8" cy="8" r="1.35"/><circle cx="13" cy="8" r="1.35"/></svg>
</button>
<div class="workspace-dropdown-menu">
{% if can_add_file %}
<button class="workspace-menu-item" type="button" data-open-add-folder><span data-i18n="web.ws.new_folder">New folder</span></button>
<button class="workspace-menu-item" type="button" data-open-add-file><span data-i18n="web.ws.new_markdown_file">New Markdown file</span></button>
<div class="workspace-menu-separator"></div>
{% endif %}
{% if git.available %}
<div class="workspace-menu-secondary-links">
<div class="workspace-menu-label" data-i18n="web.ws.git">Git</div>
<div class="workspace-menu-git-links">
<a href="{{ branches_url }}" data-i18n="web.ws.git.branch">Branch</a>
<span class="workspace-menu-git-divider" aria-hidden="true">|</span>
<a href="{{ tags_url }}" data-i18n="web.ws.git.tags">Tags</a>
</div>
<div class="workspace-menu-separator"></div>
</div>
{% endif %}
<button class="workspace-menu-item" type="button" data-copy-current-url><span data-i18n="web.ws.copy_url">Copy workspace URL</span></button>
<button class="workspace-menu-item" type="button" data-copy-text="{{ current_dir }}"><span data-i18n="web.ws.copy_path">Copy Workspace path</span></button>
{% if git.available and work_diff_url %}<a class="workspace-menu-item" href="{{ work_diff_url }}" data-i18n="web.ws.git.working_diff">Working diff</a>{% endif %}
<div class="workspace-menu-separator"></div>
<div class="workspace-menu-label" data-i18n="web.ws.files">Files</div>
<div class="file-filter-switch file-filter-switch-menu" role="group" data-file-filter-switch>
<button type="button" data-file-filter-value="all" data-i18n="web.dir.filter.all">Show all files</button>
<button class="is-active" type="button" data-file-filter-value="markdown" aria-pressed="true" data-i18n="web.dir.filter.markdown">Show markdown only</button>
</div>
</div>
</div>
</div>
</div>
{% if git.available and latest_commit %}
<div class="workspace-commit-header">
<div class="workspace-commit-main">
<span class="workspace-commit-avatar" data-avatar="{{ latest_commit.author }}" aria-hidden="true">{{ latest_commit.author | truncate(length=1, end="") | upper }}</span>
<span class="workspace-commit-author">{{ latest_commit.author }}</span>
<span class="workspace-commit-subject" title="{{ latest_commit.subject }}">{{ latest_commit.subject }}</span>
<span class="workspace-commit-ok" aria-hidden="true">✓</span>
</div>
<div class="workspace-commit-meta">
<span class="workspace-mono">{{ latest_commit.short_hash }}</span>
<span aria-hidden="true">·</span>
<span>{{ latest_commit.relative_time }}</span>
<a class="workspace-commits-link" href="{{ history_url }}">{{ git_commit_count }} Commits</a>
</div>
</div>
{% endif %}
<div class="workspace-file-list-wrap" data-col-resize data-ws-id="{{ workspace_id }}">
<ul class="dir-list workspace-repo-file-list" data-file-filter="markdown" data-dir-data-url="{{ files_dir_url }}">
{% if show_parent %}
<li class="workspace-entry-parent" data-entry-kind="dir">
<div class="workspace-entry-name">
<span class="dir-icon dir-icon-folder" aria-hidden="true"></span><a href="{{ parent_link }}"><strong>..</strong></a>
</div>
<div class="workspace-entry-commit"></div>
<div class="workspace-entry-time"></div>
</li>
{% endif %}
{% for entry in entries %}
<li data-entry-kind="{% if entry.is_dir %}dir{% else %}file{% endif %}"
data-entry-path="{{ entry.rel_git_path }}"
data-entry-markdown="{{ entry.is_markdown }}"
data-entry-hidden="{{ entry.is_hidden }}"
data-filter-visible-markdown="{{ entry.show_in_markdown }}">
<div class="workspace-entry-name">
{% if entry.is_dir %}
<button type="button" class="workspace-entry-toggle" data-dir-toggle data-dir-path="{{ entry.rel_git_path }}" data-dir-link="{{ entry.link }}" aria-expanded="false" data-i18n-aria="web.ws.tree.toggle" aria-label="Expand folder"><span class="dir-icon dir-icon-folder" aria-hidden="true"></span><strong>{{ entry.name }}/</strong></button>
{% else %}
<span class="dir-icon dir-icon-file" aria-hidden="true"></span><a href="{{ entry.link }}">{{ entry.name }}</a>
{% endif %}
</div>
<div class="workspace-entry-commit" title="{% if entry.last_commit_subject %}{{ entry.last_commit_subject }}{% endif %}">{% if entry.last_commit_subject %}{{ entry.last_commit_subject }}{% endif %}</div>
<div class="workspace-entry-time">{% if entry.last_commit_time %}{{ entry.last_commit_time }}{% endif %}</div>
</li>
{% endfor %}
</ul>
<div class="ws-col-handle" data-col-handle="0" role="separator" aria-orientation="vertical" aria-hidden="true" hidden></div>
<div class="ws-col-handle" data-col-handle="1" role="separator" aria-orientation="vertical" aria-hidden="true" hidden></div>
</div>
</section>
</section>
{% if is_workspace_root %}
<aside class="workspace-detail">
<section class="workspace-side-section">
<div class="workspace-section-main workspace-section-main--features">
<h2 class="workspace-section-title" data-i18n="web.ws.features">Features</h2>
{% if not can_manage %}
<span class="workspace-section-info" tabindex="0"
data-i18n-aria="web.ws.features.admin_required">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="16" x2="12" y2="12"/>
<line x1="12" y1="8" x2="12.01" y2="8"/>
</svg>
<span class="workspace-section-tip" role="tooltip" data-i18n="web.ws.features.admin_required">Editable only with an administrator session. Collaborators see these read-only.</span>
</span>
{% endif %}
</div>
<div class="workspace-section-body">
<div class="workspace-feature-list"
data-workspace-feature-form
data-update-url="{{ settings_features_url }}"
data-can-edit="{{ can_manage }}">
{% for feature in feature_statuses %}
<label class="workspace-feature-switch {% if feature.enabled %}is-on{% endif %}{% if not can_manage %} is-disabled{% endif %}">
<input type="checkbox"
data-feature-key="{{ feature.key }}"
{% if feature.enabled %}checked{% endif %}
{% if not can_manage %}disabled{% endif %}>
<span class="workspace-feature-toggle" aria-hidden="true"></span>
<span data-i18n="{{ feature.label_key }}">{{ feature.label }}</span>
</label>
{% endfor %}
</div>
</div>
</section>
{% if git.available %}
<section class="workspace-side-section">
<div class="workspace-section-main">
<div class="workspace-pane-kicker" data-i18n="web.ws.git">Git</div>
<h2 class="workspace-section-title" data-i18n="web.ws.changes">Workspace changes</h2>
<div class="workspace-section-desc">
<span class="workspace-status-pill {% if git.dirty %}is-warn{% else %}is-ok{% endif %}" data-i18n="{% if git.dirty %}web.ws.git.dirty{% else %}web.ws.git.clean{% endif %}">{% if git.dirty %}Dirty{% else %}Clean{% endif %}</span>
</div>
</div>
<div class="workspace-section-body">
{% if latest_commit %}
<article class="workspace-change-primary">
<div class="workspace-pane-kicker" data-i18n="web.ws.git.head_vs_parent">HEAD vs previous commit</div>
<div class="workspace-change-title">{{ latest_commit.subject }}</div>
<div class="workspace-change-meta"><span class="workspace-mono">{{ latest_commit.short_hash }}</span> · {{ latest_commit.author }} · {{ latest_commit.date }}</div>
</article>
{% else %}
<div class="workspace-empty" data-i18n="web.ws.git.no_commits">No commits in this workspace yet.</div>
{% endif %}
<div class="workspace-change-counts">
<span class="workspace-status-pill">{{ git_changed_count }} <span data-i18n="web.ws.git.changed_files">changed files</span></span>
{% if git.added > 0 %}<span class="workspace-status-pill">+{{ git.added }} <span data-i18n="web.ws.git.added">Added</span></span>{% endif %}
{% if git.modified > 0 %}<span class="workspace-status-pill">{{ git.modified }} <span data-i18n="web.ws.git.modified">Modified</span></span>{% endif %}
</div>
</div>
<div class="workspace-action-links">
{% if latest_commit_diff_url %}
<a href="{{ latest_commit_diff_url }}" data-i18n="web.ws.git.latest_commit_diff">Latest commit diff</a>
{% else %}
<span class="workspace-action-disabled" data-i18n="web.ws.git.latest_commit_diff">Latest commit diff</span>
{% endif %}
{% if work_diff_url %}
<a href="{{ work_diff_url }}" data-i18n="web.ws.git.working_diff">Working diff</a>
{% else %}
<span class="workspace-action-disabled" data-i18n="web.ws.git.working_diff">Working diff</span>
{% endif %}
<a href="{{ history_url }}" data-i18n="web.ws.git.history">Git history</a>
</div>
</section>
{% endif %}
<section class="workspace-side-section workspace-side-footer">
<a id="dir-footer" href="https://kookyleo.github.io/markon/">Powered by markon</a>
<a id="dir-feedback-link" href="https://github.com/kookyleo/markon/issues/new?title=%5BFeedback%5D%20&body=One-line%20summary%3A%0A%0A%23%23%20Environment%0A-%20markon%20version%3A%0A-%20OS%3A%0A-%20Browser%3A%0A%0A%23%23%20Steps%20to%20reproduce%0A1.%0A%0A%23%23%20Expected%0A%0A%23%23%20Actual%0A" target="_blank" rel="noopener noreferrer">Feedback</a>
<a id="dir-kbd-link" href="#" onclick="window.shortcutsManager.showHelp(); return false;">Features & Shortcuts (?)</a>
<a id="theme-link-text" href="#">Theme: Auto</a>
<a id="footer-version" href="https://github.com/kookyleo/markon/releases" target="_blank" rel="noopener noreferrer" title="markon version">v{{ version }}</a>
</section>
</aside>
{% endif %}
{% if can_add_file %}
<div class="workspace-modal markon-modal-backdrop markon-modal-layer" data-add-file-modal data-create-file-url="{{ create_file_url }}" aria-hidden="true">
<div class="workspace-modal-panel markon-modal-frame" role="dialog" aria-modal="true" aria-labelledby="add-file-title">
<div class="workspace-modal-header">
<h2 id="add-file-title" class="workspace-modal-title" data-i18n="web.ws.new_markdown_file">New Markdown file</h2>
<button class="workspace-modal-close" type="button" data-close-workspace-modal aria-label="Close">×</button>
</div>
<form class="workspace-modal-body" data-add-file-form>
<input class="workspace-modal-input" type="text" data-add-file-path placeholder="docs/new-note.md" autocomplete="off" spellcheck="false">
<textarea class="workspace-add-file-textarea" data-add-file-content spellcheck="true"># Untitled
</textarea>
<div class="workspace-modal-actions">
<div class="workspace-modal-status" data-add-file-status></div>
<button class="workspace-tool-button" type="button" data-close-workspace-modal data-i18n="web.ws.cancel">Cancel</button>
<button class="workspace-green-button" type="submit" data-i18n="web.ws.create_file">Create file</button>
</div>
</form>
</div>
</div>
<div class="workspace-modal markon-modal-backdrop markon-modal-layer" data-add-folder-modal data-create-folder-url="{{ create_folder_url }}" aria-hidden="true">
<div class="workspace-modal-panel markon-modal-frame" role="dialog" aria-modal="true" aria-labelledby="add-folder-title">
<div class="workspace-modal-header">
<h2 id="add-folder-title" class="workspace-modal-title" data-i18n="web.ws.new_folder">New folder</h2>
<button class="workspace-modal-close" type="button" data-close-workspace-modal aria-label="Close">×</button>
</div>
<form class="workspace-modal-body" data-add-folder-form>
<input class="workspace-modal-input" type="text" data-add-folder-path placeholder="docs/new-section" autocomplete="off" spellcheck="false">
<div class="workspace-modal-actions">
<div class="workspace-modal-status" data-add-folder-status></div>
<button class="workspace-tool-button" type="button" data-close-workspace-modal data-i18n="web.ws.cancel">Cancel</button>
<button class="workspace-green-button" type="submit" data-i18n="web.ws.create_folder">Create folder</button>
</div>
</form>
</div>
</div>
{% endif %}
</main>
<script>
(function () {
document.querySelectorAll('.workspace-commit-avatar[data-avatar]').forEach(function (el) {
var name = el.getAttribute('data-avatar') || '';
if (!name) return;
var h = 0;
for (var i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
el.style.background = 'hsl(' + (h % 360) + ' 46% 42%)';
});
})();
</script>
<script src="/_/js/directory.js"></script>
<script type="module" src="/_/js/workspace-diff.js"></script>
<script type="module" src="/_/js/main.js"></script>
</body>
</html>