refactor(ui): make UI labels and descriptions more concise

This commit is contained in:
Richard Roberson 2025-11-22 15:27:04 -07:00
parent e86782bf38
commit a755a0b3f9
3 changed files with 8 additions and 8 deletions

View file

@ -11,7 +11,7 @@ export default function Home() {
<div className="max-w-5xl mx-auto"> <div className="max-w-5xl mx-auto">
<h1 className="text-2xl md:text-3xl font-bold tracking-tight mb-2 text-foreground">OpenReader WebUI</h1> <h1 className="text-2xl md:text-3xl font-bold tracking-tight mb-2 text-foreground">OpenReader WebUI</h1>
<p className="text-sm leading-relaxed max-w-[77ch] text-foreground"> <p className="text-sm leading-relaxed max-w-[77ch] text-foreground">
Open source document reader web app {isDev ? 'self-hosted server' : 'demo'}. Open source document reader {isDev ? 'self-hosted server' : 'demo app'}.
<span className="block font-medium">Read & listen to PDF, EPUB, MD, and TXT documents with high quality text to speech voices.</span> <span className="block font-medium">Read & listen to PDF, EPUB, MD, and TXT documents with high quality text to speech voices.</span>
</p> </p>
</div> </div>

View file

@ -599,7 +599,7 @@ export function SettingsModal() {
<TabPanel className="space-y-4"> <TabPanel className="space-y-4">
{isDev && <div className="space-y-1"> {isDev && <div className="space-y-1">
<label className="block text-sm font-medium text-foreground">Document Sync</label> <label className="block text-sm font-medium text-foreground">Server Document Sync</label>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
onClick={handleLoad} onClick={handleLoad}
@ -610,7 +610,7 @@ export function SettingsModal() {
transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent
disabled:opacity-50" disabled:opacity-50"
> >
{isLoading ? `Loading... ${Math.round(progress)}%` : 'Load docs from Server'} {isLoading ? `Loading... ${Math.round(progress)}%` : 'Load'}
</Button> </Button>
<Button <Button
onClick={handleSync} onClick={handleSync}
@ -621,13 +621,13 @@ export function SettingsModal() {
transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent
disabled:opacity-50" disabled:opacity-50"
> >
{isSyncing ? `Saving... ${Math.round(progress)}%` : 'Save local to Server'} {isSyncing ? `Saving... ${Math.round(progress)}%` : 'Save to server'}
</Button> </Button>
</div> </div>
</div>} </div>}
<div className="space-y-1 pb-3"> <div className="space-y-1 pb-3">
<label className="block text-sm font-medium text-foreground">Bulk Delete</label> <label className="block text-sm font-medium text-foreground">Delete All</label>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
onClick={() => setShowClearLocalConfirm(true)} onClick={() => setShowClearLocalConfirm(true)}
@ -636,7 +636,7 @@ export function SettingsModal() {
focus-visible:ring-2 focus-visible:bg-red-500 focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:bg-red-500 focus-visible:ring-offset-2
transform transition-transform duration-200 ease-in-out hover:scale-[1.04]" transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
> >
Delete local docs Delete local
</Button> </Button>
{isDev && <Button {isDev && <Button
onClick={() => setShowClearServerConfirm(true)} onClick={() => setShowClearServerConfirm(true)}
@ -645,7 +645,7 @@ export function SettingsModal() {
focus-visible:ring-2 focus-visible:bg-red-500 focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:bg-red-500 focus-visible:ring-offset-2
transform transition-transform duration-200 ease-in-out hover:scale-[1.04]" transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
> >
Delete server docs Delete server
</Button>} </Button>}
</div> </div>
</div> </div>

View file

@ -199,7 +199,7 @@ export async function openSettingsDocumentsTab(page: Page) {
// Delete all local documents through Settings and close dialogs // Delete all local documents through Settings and close dialogs
export async function deleteAllLocalDocuments(page: Page) { export async function deleteAllLocalDocuments(page: Page) {
await openSettingsDocumentsTab(page); await openSettingsDocumentsTab(page);
await page.getByRole('button', { name: 'Delete local docs' }).click(); await page.getByRole('button', { name: 'Delete local' }).click();
const heading = page.getByRole('heading', { name: 'Delete Local Documents' }); const heading = page.getByRole('heading', { name: 'Delete Local Documents' });
await expect(heading).toBeVisible({ timeout: 10000 }); await expect(heading).toBeVisible({ timeout: 10000 });