From 984db5b4dd2637f14878e647d59827496394d7f1 Mon Sep 17 00:00:00 2001 From: Jason Date: Sun, 12 Jul 2026 09:45:33 -0500 Subject: [PATCH] Refine rail and book tab layout --- package-lock.json | 4 +-- package.json | 2 +- src-tauri/Cargo.lock | 2 +- src-tauri/Cargo.toml | 2 +- src-tauri/tauri.conf.json | 2 +- src/App.css | 60 +++++++++++++++++++++++++------ src/App.tsx | 74 +++++++++++++++++++-------------------- 7 files changed, 91 insertions(+), 55 deletions(-) diff --git a/package-lock.json b/package-lock.json index 03af4a8..7fe9439 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "libre-study", - "version": "0.1.9", + "version": "0.1.10", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "libre-study", - "version": "0.1.9", + "version": "0.1.10", "dependencies": { "@tauri-apps/api": "^2.11.1", "react": "^19.2.7", diff --git a/package.json b/package.json index 2b3fa14..1042c12 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "libre-study", "private": true, - "version": "0.1.9", + "version": "0.1.10", "type": "module", "scripts": { "dev": "vite --host 127.0.0.1", diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 5c4f06d..32eff1c 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -77,7 +77,7 @@ checksum = "2a4385e2e34eb35d6b3efe798b9eb88096925d87726c0798709bf56d9ed84af3" [[package]] name = "app" -version = "0.1.9" +version = "0.1.10" dependencies = [ "log", "rusqlite", diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index ce568a8..b52b589 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "app" -version = "0.1.9" +version = "0.1.10" description = "A Tauri App" authors = ["you"] license = "" diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index e3d3758..ff5817b 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "../node_modules/@tauri-apps/cli/config.schema.json", "productName": "Libre Study", - "version": "0.1.9", + "version": "0.1.10", "identifier": "org.librestudy.desktop", "build": { "frontendDist": "../dist", diff --git a/src/App.css b/src/App.css index cfc609d..d362e5e 100644 --- a/src/App.css +++ b/src/App.css @@ -7,7 +7,7 @@ } .app-shell.menu-open .reader { - filter: brightness(0.72); + filter: blur(1.5px) brightness(0.62) saturate(0.72); } .tool-rail { @@ -35,6 +35,7 @@ .brand-mark { display: grid; + flex: 0 0 auto; place-items: center; width: 42px; height: 42px; @@ -67,6 +68,7 @@ .menu-button { flex: 0 0 auto; justify-content: center; + align-self: center; } .menu-button span { @@ -82,6 +84,19 @@ gap: 4px; } +.tool-rail:hover .menu-button, +.tool-rail:focus-within .menu-button { + width: 42px; + padding: 0; +} + +.app-identity { + display: flex; + gap: 12px; + align-items: center; + min-height: 42px; +} + .rail-icon { display: grid; flex: 0 0 18px; @@ -116,6 +131,23 @@ margin-top: auto; } +.rail-description { + display: none; + margin: 0; + padding: 12px; + border: 1px solid #3c4239; + border-radius: 6px; + background: #252b25; + color: #d9ddd4; + font-size: 13px; + line-height: 1.45; +} + +.tool-rail:hover .rail-description, +.tool-rail:focus-within .rail-description { + display: block; +} + .reader { display: grid; grid-template-rows: auto minmax(0, 1fr); @@ -266,13 +298,13 @@ textarea:focus-visible { .bible-page { display: grid; - grid-template-rows: auto minmax(0, 1fr) auto; + grid-template-rows: auto minmax(0, 1fr); min-height: 0; padding: 26px 30px; } .bible-page header, -.bible-page footer { +.page-turner { display: flex; justify-content: space-between; gap: 16px; @@ -283,13 +315,15 @@ textarea:focus-visible { text-transform: uppercase; } -.bible-page footer { - padding-top: 16px; +.page-turner { + grid-column: 1 / -1; + padding: 14px 30px; border-top: 1px solid #e8e2d4; + background: #fffef8; text-transform: none; } -.bible-page footer span { +.page-turner span { color: #6b675d; font-size: 13px; font-weight: 700; @@ -687,26 +721,30 @@ textarea:focus-visible { } .book-tabs { - display: flex; + display: grid; grid-column: 1 / -1; + grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: flex-start; padding: 0 16px 10px; - overflow-x: auto; + overflow: hidden; background: #ece9df; } .book-tabs button { - min-width: 44px; + min-width: 0; height: 30px; - padding: 4px 7px; + padding: 4px 3px; border-color: #c8bea9; border-top: 0; border-radius: 0 0 7px 7px; background: #efe4c9; color: #4c422f; - font-size: 11px; + font-size: 10px; font-weight: 800; + line-height: 1.05; + white-space: normal; + overflow-wrap: anywhere; box-shadow: 0 5px 10px rgba(44, 48, 42, 0.08); } diff --git a/src/App.tsx b/src/App.tsx index 0f08da3..c6b826a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -387,6 +387,16 @@ function App() { () => Array.from(new Set(libraryVerses.map((verse) => verse.book))), [libraryVerses], ) + const visibleBookTabs = useMemo(() => { + if (!selectedVerse || !books.length) return [] + const visibleCount = 24 + const selectedIndex = Math.max(0, books.indexOf(selectedVerse.book)) + const halfWindow = Math.floor(visibleCount / 2) + const maxStart = Math.max(0, books.length - visibleCount) + const start = Math.min(Math.max(0, selectedIndex - halfWindow), maxStart) + + return books.slice(start, start + visibleCount) + }, [books, selectedVerse]) const chapters = useMemo(() => { if (!selectedVerse) return [] return Array.from( @@ -512,17 +522,6 @@ function App() { ) } - function setWorkspaceView(nextViewMode: ViewMode) { - setViewMode(nextViewMode) - recordTimeline( - { - type: 'view', - label: `View: ${nextViewMode}`, - }, - { viewMode: nextViewMode }, - ) - } - function setStrongDisplayMode(nextStrongDisplay: StrongDisplayMode) { setStrongDisplay(nextStrongDisplay) recordTimeline( @@ -707,19 +706,24 @@ function App() {

))} - ) } + function renderPageTurner() { + return ( + + ) + } + function renderStudyMargin() { if (!selectedVerse) return null return ( @@ -814,7 +818,7 @@ function App() { return (