@youtyan/code-viewer 0.1.25 → 0.1.27

package/web/index.html

@@ -21,7 +21,7 @@
   <header id="global-header">
     <a class="brand" href="/" aria-label="Repository home">
       <img class="brand-icon" src="/favicon.png" alt="" width="20" height="20" />
-      <span class="title">code viewer</span>
+      <span class="title" id="project-title">repository</span>
     </a>
     <nav class="app-menu" aria-label="Views">
       <a class="app-menu-item active" data-route="repo" href="/">Repository</a>
@@ -32,6 +32,7 @@
       <button id="theme" title="toggle theme">🌗</button>
       <span id="status" class="status"></span>
       <a class="global-help-link" data-route="help" href="/help">Help</a>
+      <span class="product-label" aria-hidden="true">code viewer</span>
     </div>
   </header>
   <header id="topbar">
@@ -124,7 +125,9 @@
     <div class="scope-settings-section">
       <strong class="scope-settings-section-title">Excluded directories</strong>
       <label for="scope-omit-dirs">Skip these directory names while browsing and searching</label>
-      <textarea id="scope-omit-dirs" rows="9" spellcheck="false"></textarea>
+      <textarea id="scope-omit-dirs" rows="6" spellcheck="false"></textarea>
+      <label for="scope-exclude-names">Hide these file or directory names completely</label>
+      <textarea id="scope-exclude-names" rows="4" spellcheck="false"></textarea>
       <p id="scope-omit-source"></p>
       <div class="scope-settings-actions">
         <button id="scope-omit-reset" type="button">Reset</button>

package/web/style.css

@@ -101,6 +101,7 @@ html, body {
   margin: 0; padding: 0;
   background: var(--bg); color: var(--fg);
   --code-font-size: 12px;
+  --markdown-font-size: calc(var(--code-font-size) + 2px);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
                Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   font-size: 14px;
@@ -282,9 +283,11 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
 .brand {
   display: flex; align-items: center; gap: 9px;
   font-weight: 600;
-  font-size: 14px;
+  font-size: 15px;
   color: var(--fg);
-  flex-shrink: 0;
+  min-width: 0;
+  max-width: min(34vw, 420px);
+  flex: 0 1 auto;
   text-decoration: none;
 }
 .brand:hover { color: var(--fg); text-decoration: none; }
@@ -294,7 +297,12 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   display: block;
   border-radius: 5px;
 }
-.brand .title { letter-spacing: -0.005em; }
+.brand .title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .app-menu {
   display: flex;
@@ -366,6 +374,13 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   gap: 8px;
   flex: 0 0 auto;
 }
+.product-label {
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
 .global-actions #theme,
 .global-icon-action {
   display: inline-flex;
@@ -1171,10 +1186,11 @@ body.gdp-resizing * { user-select: none !important; }
   font: inherit;
   font-size: 12.5px;
 }
-#scope-omit-dirs {
+#scope-omit-dirs,
+#scope-exclude-names {
   box-sizing: border-box;
   width: 100%;
-  min-height: 210px;
+  min-height: 110px;
   resize: vertical;
   border: 1px solid var(--border-muted);
   border-radius: 6px;
@@ -2297,6 +2313,12 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
 .gdp-upload-panel.failed {
   border-color: var(--danger);
 }
+.gdp-upload-error {
+  min-height: 18px;
+  color: var(--danger);
+  font-size: 12px;
+  line-height: 18px;
+}
 .gdp-upload-copy {
   min-width: 0;
   color: var(--fg-muted);
@@ -2541,6 +2563,7 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   display: flex;
   align-items: center;
   min-width: 0;
+  flex: 0 1 auto;
   gap: 4px;
   padding-top: 2px;
   overflow: hidden;
@@ -2590,6 +2613,13 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   flex-shrink: 0;
   color: var(--fg-muted);
 }
+.gdp-file-detail-header .gdp-trash-path {
+  flex-shrink: 0;
+  color: var(--danger);
+}
+.gdp-file-detail-header .gdp-create-dir {
+  flex-shrink: 0;
+}
 .gdp-file-detail-meta {
   display: flex;
   align-items: center;
@@ -2629,7 +2659,7 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   padding: 24px 32px 40px;
   color: var(--fg);
   overflow-wrap: break-word;
-  font-size: 16px;
+  font-size: var(--markdown-font-size);
   line-height: 1.75;
 }
 .gdp-html-preview {
@@ -2692,7 +2722,7 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   margin: 0;
 }
 .gdp-markdown-toc a {
-  display: -webkit-box;
+  display: block;
   min-height: 28px;
   padding: 5px 10px 5px 12px;
   border-left: 3px solid transparent;
@@ -2701,8 +2731,6 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   overflow: hidden;
   overflow-wrap: anywhere;
   text-decoration: none;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
   transition:
     background-color 0.06s ease,
     border-color 0.06s ease,
@@ -2736,6 +2764,14 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   font-weight: 600;
 }
 .gdp-markdown-preview h1,
+.gdp-markdown-preview h2,
+.gdp-markdown-preview h3,
+.gdp-markdown-preview h4,
+.gdp-markdown-preview h5,
+.gdp-markdown-preview h6 {
+  scroll-margin-top: calc(var(--global-header-h) + 120px);
+}
+.gdp-markdown-preview h1,
 .gdp-markdown-preview h2 {
   padding-bottom: 0.3em;
   border-bottom: 1px solid var(--border-muted);
@@ -3136,9 +3172,6 @@ body.gdp-file-detail-page #empty {
   padding-left: 0;
   padding-right: 0;
 }
-.gdp-repo-breadcrumb {
-  flex: 1;
-}
 .gdp-repo-breadcrumb button {
   max-width: 260px;
   border: 0;
@@ -3257,6 +3290,105 @@ body.gdp-file-detail-page #empty {
   font-size: 12px;
   white-space: nowrap;
 }
+.gdp-context-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 180px;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.18);
+}
+.gdp-context-menu button {
+  width: 100%;
+  min-height: 30px;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--fg);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.gdp-context-menu button:hover {
+  background: var(--bg-soft);
+}
+.gdp-context-menu .danger {
+  color: var(--danger);
+}
+.gdp-trash-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: min(14vh, 120px);
+  background: rgba(31, 35, 40, 0.18);
+}
+[data-theme="dark"] .gdp-trash-dialog-backdrop {
+  background: rgba(1, 4, 9, 0.45);
+}
+.gdp-trash-dialog {
+  width: min(420px, calc(100vw - 32px));
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  box-shadow: 0 16px 48px rgba(31, 35, 40, 0.28);
+}
+.gdp-trash-dialog-title {
+  padding: 14px 16px 0;
+  color: var(--fg);
+  font-size: 15px;
+  font-weight: 600;
+}
+.gdp-trash-dialog-body {
+  padding: 8px 16px 14px;
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+.gdp-create-dir-input {
+  display: block;
+  width: 100%;
+  height: 32px;
+  margin-top: 10px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+}
+.gdp-create-dir-input:focus {
+  outline: 2px solid var(--accent-subtle);
+  border-color: var(--accent);
+}
+.gdp-create-dir-error {
+  min-height: 18px;
+  margin-top: 6px;
+  color: var(--danger);
+  font-size: 12px;
+  line-height: 18px;
+}
+.gdp-trash-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-muted);
+}
+.gdp-trash-dialog-danger {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+.gdp-trash-dialog-danger:hover {
+  background: var(--diff-del-bg);
+}
 .gdp-repo-empty {
   padding: 32px;
   color: var(--fg-muted);