From 9056fb92e380342d8cf8f4e9b7502b8b618b1ecc Mon Sep 17 00:00:00 2001 From: Silberengel Date: Sat, 21 Feb 2026 17:09:43 +0100 Subject: [PATCH] get rid of tabs on repo page Nostr-Signature: d34fb23385a23f479c683e76f5676356a11d63bcd0ecf71d25f1b85dbb0cfe57 573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc 1f6454f9961b9245d1e32f4a903ee9636201670491145d0185e95e7b7d33bf1027ac5b8e370070640e103740ab19e9915baa7755c6008fd32fe41e9cb86d33b8 --- nostr/commit-signatures.jsonl | 1 + src/lib/components/RepoTabs.svelte | 81 +++++----- src/lib/components/TabsMenu.svelte | 59 ++++++++ src/lib/styles/components.css | 157 ++++++++++++++++---- src/lib/styles/repo.css | 26 ++++ src/routes/repos/[npub]/[repo]/+page.svelte | 66 ++++++-- 6 files changed, 313 insertions(+), 77 deletions(-) create mode 100644 src/lib/components/TabsMenu.svelte diff --git a/nostr/commit-signatures.jsonl b/nostr/commit-signatures.jsonl index 9c62fa2..8ba8237 100644 --- a/nostr/commit-signatures.jsonl +++ b/nostr/commit-signatures.jsonl @@ -42,3 +42,4 @@ {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771680916,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","fix profile feeds"]],"content":"Signed commit: fix profile feeds","id":"33f33d76f6c79e68fdab72c8fdfc7e1f0ecc53a879a7f5aef02481f17384a06f","sig":"8f9056eab081d66edb693eb35a2e400368aa897746b97ca40a216604dc14ee877eb7f4f16dd2eeac257025b3adfe82e23734c7c106b6cec5e8a1ca661c872cc5"} {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771681068,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","remove landing page search bar"]],"content":"Signed commit: remove landing page search bar","id":"71087b100ce14a1f2eb975be23450c62143ee11a8fd0429ec7440bfea1751741","sig":"695c704503ed1397f6871770ad55822a17a503bcfb71a0db7b3f2477cacb0e767b9f122075b0216f884e41e175c0ac9f9e3d743086a2aa34db4aa1207c900703"} {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771682804,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","repo page refactor"]],"content":"Signed commit: repo page refactor","id":"9ad7610ff7aa61d62d3772d6ae7c0589cda8ff95cd7a60b81c84ba879e0f9d8a","sig":"8918f36d426d352a6787543daaa044cf51855632e2257f29cc18bb87db31d61c877b525113e21045d3bc135376e1c0574454e28bd409d3135bcb80079bc11947"} +{"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771688902,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","refactor"]],"content":"Signed commit: refactor","id":"62b813f817173c9e35eb05088240f7ec50ecab697c8c6d4a5c19d47664ef3837","sig":"ca9c70fc7bf8b1bb1726461bb843127d1bddc4de96652cfc7497698a3f5c4dc4a8c3f5a7a240710db77afabeee2a3b7d594f75f42a0a8b28aeeef50f66b506c9"} diff --git a/src/lib/components/RepoTabs.svelte b/src/lib/components/RepoTabs.svelte index f6d5684..9a23dfb 100644 --- a/src/lib/components/RepoTabs.svelte +++ b/src/lib/components/RepoTabs.svelte @@ -11,20 +11,7 @@ diff --git a/src/lib/components/TabsMenu.svelte b/src/lib/components/TabsMenu.svelte new file mode 100644 index 0000000..aa04a6f --- /dev/null +++ b/src/lib/components/TabsMenu.svelte @@ -0,0 +1,59 @@ + + +
+
+ + {#if showTabsMenu} +
showTabsMenu = false} + onkeydown={(e) => { + if (e.key === 'Escape') { + showTabsMenu = false; + } + }} + role="button" + tabindex="0" + aria-label="Close menu" + >
+
+ {#each tabs as tab} + + {/each} +
+ {/if} +
+
diff --git a/src/lib/styles/components.css b/src/lib/styles/components.css index 3f342f9..b34134b 100644 --- a/src/lib/styles/components.css +++ b/src/lib/styles/components.css @@ -509,31 +509,48 @@ -webkit-overflow-scrolling: touch; } -.mobile-tabs-menu-button { +.mobile-tabs-menu-wrapper { display: none; - align-items: center; - justify-content: flex-start; - gap: 0.5rem; - padding: 0.75rem 1rem; - width: 100%; - background: transparent; - border: none; + position: relative; + padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color, #e0e0e0); +} + +.mobile-tabs-menu-wrapper .menu-button-wrapper { + position: relative; + display: inline-block; +} + +.mobile-tabs-menu-button { + padding: 0.5rem; + background: transparent; + border: 1px solid var(--border-color, #e0e0e0); + border-radius: 0.375rem; cursor: pointer; - font-size: 0.875rem; - color: var(--text-primary, #1a1a1a); - font-weight: 500; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; +} + +.mobile-tabs-menu-button:hover { + background: var(--bg-secondary, #f5f5f5); + border-color: var(--accent, #007bff); } .mobile-tabs-menu-button .icon { - width: 20px; - height: 20px; + width: 18px; + height: 18px; flex-shrink: 0; } -.current-tab-label { - flex: 1; - text-align: left; +.mobile-tabs-menu-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 99; } .tabs-container { @@ -657,17 +674,17 @@ .mobile-tabs-menu { position: absolute; - top: 100%; - left: 0; + top: calc(100% + 0.25rem); right: 0; background: var(--card-bg, #ffffff); - border-bottom: 1px solid var(--border-color, #e0e0e0); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - z-index: 50; + border: 1px solid var(--border-color, #e0e0e0); + border-radius: 0.375rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + z-index: 100; + min-width: 200px; + max-width: min(90vw, 300px); max-height: 70vh; overflow-y: auto; - min-width: 200px; - max-width: 100vw; } .mobile-tab-item { @@ -726,12 +743,94 @@ } } -@media (max-width: 767px) { - .tabs-container { - display: none; +.repo-tabs { + display: none !important; +} + +.tabs-menu-button-wrapper { + display: flex; + flex-shrink: 0; +} + +.tabs-menu-button-wrapper .menu-button-wrapper { + position: relative; +} + +.tabs-menu { + right: auto; + left: 0; + transform: none; + min-width: 200px; + max-width: min(calc(100vw - 1rem), 320px); + width: auto; + position: absolute; +} + +@media (max-width: 768px) { + .tabs-menu { + right: auto; + left: 0; + max-width: calc(100vw - 1rem); + min-width: 180px; } - - .mobile-tabs-menu-button { - display: flex; +} + +@media (max-width: 480px) { + .tabs-menu { + right: auto; + left: 0; + max-width: calc(100vw - 1rem); + min-width: 160px; } } + +.tabs-menu .menu-item { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.tab-icon-inline { + width: 16px; + height: 16px; + flex-shrink: 0; + filter: brightness(0) saturate(100%) invert(1); + opacity: 1; +} + +:global([data-theme="light"]) .tab-icon-inline { + filter: brightness(0) saturate(100%); + opacity: 1; +} + +:global([data-theme="dark"]) .tab-icon-inline, +:global([data-theme="black"]) .tab-icon-inline { + filter: brightness(0) saturate(100%) invert(1); + opacity: 1; +} + +.menu-item.active .tab-icon-inline { + filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(200deg) brightness(118%) contrast(119%); + opacity: 1; +} + +.menu-item.active { + background: var(--bg-secondary, #f5f5f5); + font-weight: 600; + color: var(--accent, #007bff); +} + +.tab-count-inline { + margin-left: auto; + padding: 0.125rem 0.375rem; + background: var(--bg-secondary, #f5f5f5); + border-radius: 0.75rem; + font-size: 0.75rem; + font-weight: 500; + color: var(--text-secondary, #666); +} + +.menu-item.active .tab-count-inline { + background: var(--accent, #007bff); + color: var(--accent-text, #ffffff); +} diff --git a/src/lib/styles/repo.css b/src/lib/styles/repo.css index 9031a36..19b43c9 100644 --- a/src/lib/styles/repo.css +++ b/src/lib/styles/repo.css @@ -568,6 +568,7 @@ display: flex; justify-content: space-between; align-items: center; + gap: 0.75rem; } .file-tree-header h2 { @@ -980,6 +981,7 @@ display: flex; justify-content: space-between; align-items: center; + gap: 0.75rem; } .history-header h2, .tags-header h2 { @@ -1246,6 +1248,7 @@ justify-content: space-between; align-items: center; flex-shrink: 0; + gap: 0.75rem; } @media (max-width: 767px) { @@ -1286,6 +1289,12 @@ color: var(--text-primary); } +@media (max-width: 767px) { + .discussions-header h2 { + display: none; + } +} + .discussion-item { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); @@ -1556,6 +1565,22 @@ } /* Documentation */ +.docs-header { + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--border-color); + display: flex; + justify-content: space-between; + align-items: center; + flex-shrink: 0; + gap: 0.75rem; +} + +.docs-header h2 { + margin: 0; + font-size: 1.25rem; + color: var(--text-primary); +} + .docs-content { flex: 1; display: flex; @@ -1638,6 +1663,7 @@ display: flex; justify-content: space-between; align-items: center; + gap: 0.75rem; } .issues-header h2, .prs-header h2 { diff --git a/src/routes/repos/[npub]/[repo]/+page.svelte b/src/routes/repos/[npub]/[repo]/+page.svelte index e957f5d..f48f918 100644 --- a/src/routes/repos/[npub]/[repo]/+page.svelte +++ b/src/routes/repos/[npub]/[repo]/+page.svelte @@ -7,7 +7,7 @@ import UserBadge from '$lib/components/UserBadge.svelte'; import EventCopyButton from '$lib/components/EventCopyButton.svelte'; import RepoHeaderEnhanced from '$lib/components/RepoHeaderEnhanced.svelte'; - import RepoTabs from '$lib/components/RepoTabs.svelte'; + import TabsMenu from '$lib/components/TabsMenu.svelte'; import NostrLinkRenderer from '$lib/components/NostrLinkRenderer.svelte'; import '$lib/styles/repo.css'; import { getPublicKeyWithNIP07, isNIP07Available, signEventWithNIP07 } from '$lib/services/nostr/nip07-signer.js'; @@ -67,6 +67,8 @@ let activeTab = $state<'files' | 'history' | 'tags' | 'issues' | 'prs' | 'docs' | 'discussions'>('discussions'); let showRepoMenu = $state(false); + // Tabs will be defined as derived after issues and prs are declared + // Auto-save let autoSaveInterval: ReturnType | null = null; @@ -305,6 +307,17 @@ let newPRBranchName = $state(''); let newPRLabels = $state(['']); let selectedPR = $state(null); + + // Tabs menu - defined after issues and prs + const tabs = $derived([ + { id: 'discussions', label: 'Discussions', icon: '/icons/message-circle.svg' }, + { id: 'files', label: 'Files', icon: '/icons/file-text.svg' }, + { id: 'history', label: 'History', icon: '/icons/git-commit.svg' }, + { id: 'tags', label: 'Tags', icon: '/icons/tag.svg' }, + { id: 'issues', label: 'Issues', icon: '/icons/alert-circle.svg', count: issues.length }, + { id: 'prs', label: 'Pull Requests', icon: '/icons/git-pull-request.svg', count: prs.length }, + { id: 'docs', label: 'Docs', icon: '/icons/book.svg' } + ]); // Patches let showCreatePatchDialog = $state(false); @@ -3754,25 +3767,17 @@ {/if} - activeTab = tab as typeof activeTab} - />
{#if activeTab === 'files'}