ui(footer): move "Built with hubris" byline into LeftSidebar
Pulled the hubris/Roman-year line out of the TopBar and into a new Footer component rendered below the Settings button in the left sidebar bottom panel, where it reads as a quiet attribution rather than competing with the title plate up top. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
26
frontend/src/components/layout/Footer.tsx
Normal file
26
frontend/src/components/layout/Footer.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
const ROMAN_PAIRS: [number, string][] = [
|
||||||
|
[1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
|
||||||
|
[100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
|
||||||
|
[10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
|
||||||
|
]
|
||||||
|
|
||||||
|
function toRoman(n: number): string {
|
||||||
|
let result = ''
|
||||||
|
for (const [value, symbol] of ROMAN_PAIRS) {
|
||||||
|
while (n >= value) {
|
||||||
|
result += symbol
|
||||||
|
n -= value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Slim end-of-page byline — sits below every section's content as a
|
||||||
|
* quiet attribution line. */
|
||||||
|
export function Footer() {
|
||||||
|
return (
|
||||||
|
<div className="px-2 pt-1 text-right text-[9px] font-serif italic text-text-faint">
|
||||||
|
Built with hubris · {toRoman(new Date().getFullYear())}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -27,6 +27,7 @@ import {
|
|||||||
Download as DownloadIcon,
|
Download as DownloadIcon,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { DateRangePicker } from '../filter/DateRangePicker'
|
import { DateRangePicker } from '../filter/DateRangePicker'
|
||||||
|
import { Footer } from './Footer'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { sourceFolders, photos as photosApi, downloads, type FolderTreeNode } from '../../services/api'
|
import { sourceFolders, photos as photosApi, downloads, type FolderTreeNode } from '../../services/api'
|
||||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||||
@@ -639,6 +640,7 @@ export function LeftSidebar() {
|
|||||||
const showOnFolders =
|
const showOnFolders =
|
||||||
isSectionHeader && item.id === 'folders' && scanActivity.active
|
isSectionHeader && item.id === 'folders' && scanActivity.active
|
||||||
const showOnFolderRow =
|
const showOnFolderRow =
|
||||||
|
scanActivity.isScanning &&
|
||||||
!!item.path &&
|
!!item.path &&
|
||||||
!!scanActivity.currentFolder &&
|
!!scanActivity.currentFolder &&
|
||||||
scanActivity.currentFolder.startsWith(item.path)
|
scanActivity.currentFolder.startsWith(item.path)
|
||||||
@@ -943,6 +945,8 @@ export function LeftSidebar() {
|
|||||||
Settings
|
Settings
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DeleteFolderDialog
|
<DeleteFolderDialog
|
||||||
|
|||||||
@@ -7,23 +7,6 @@ const MULIMAGO_ASCII = `▖ ▖ ▜ ▘
|
|||||||
▛▖▞▌▌▌▐ ▌▛▛▌▀▌▛▌█▌
|
▛▖▞▌▌▌▐ ▌▛▛▌▀▌▛▌█▌
|
||||||
▌▝ ▌▙▌▐▖▌▌▌▌█▌▙▌▙▖`
|
▌▝ ▌▙▌▐▖▌▌▌▌█▌▙▌▙▖`
|
||||||
|
|
||||||
const ROMAN_PAIRS: [number, string][] = [
|
|
||||||
[1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
|
|
||||||
[100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
|
|
||||||
[10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
|
|
||||||
]
|
|
||||||
|
|
||||||
function toRoman(n: number): string {
|
|
||||||
let result = ''
|
|
||||||
for (const [value, symbol] of ROMAN_PAIRS) {
|
|
||||||
while (n >= value) {
|
|
||||||
result += symbol
|
|
||||||
n -= value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Slim top bar — animated walking mule on the left over a tiled desert
|
* Slim top bar — animated walking mule on the left over a tiled desert
|
||||||
* backdrop. Sidebar toggle buttons live on the FilterBar.
|
* backdrop. Sidebar toggle buttons live on the FilterBar.
|
||||||
@@ -65,11 +48,6 @@ export function TopBar() {
|
|||||||
{MULIMAGO_ASCII}
|
{MULIMAGO_ASCII}
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-[10px] font-serif text-black/80">
|
|
||||||
Built with hubris • {toRoman(new Date().getFullYear())}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user