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,
|
||||
} from 'lucide-react'
|
||||
import { DateRangePicker } from '../filter/DateRangePicker'
|
||||
import { Footer } from './Footer'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { sourceFolders, photos as photosApi, downloads, type FolderTreeNode } from '../../services/api'
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
@@ -639,6 +640,7 @@ export function LeftSidebar() {
|
||||
const showOnFolders =
|
||||
isSectionHeader && item.id === 'folders' && scanActivity.active
|
||||
const showOnFolderRow =
|
||||
scanActivity.isScanning &&
|
||||
!!item.path &&
|
||||
!!scanActivity.currentFolder &&
|
||||
scanActivity.currentFolder.startsWith(item.path)
|
||||
@@ -943,6 +945,8 @@ export function LeftSidebar() {
|
||||
Settings
|
||||
</button>
|
||||
)}
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<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
|
||||
* backdrop. Sidebar toggle buttons live on the FilterBar.
|
||||
@@ -65,11 +48,6 @@ export function TopBar() {
|
||||
{MULIMAGO_ASCII}
|
||||
</pre>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user