149 lines
4.1 KiB
TypeScript
149 lines
4.1 KiB
TypeScript
/**
|
|
* Sync profile component for PodTUI
|
|
* Displays user profile information and sync status
|
|
*/
|
|
|
|
import { createSignal } from "solid-js"
|
|
import { useAuthStore } from "../stores/auth"
|
|
import { format } from "date-fns"
|
|
|
|
interface SyncProfileProps {
|
|
focused?: boolean
|
|
onLogout?: () => void
|
|
onManageSync?: () => void
|
|
}
|
|
|
|
type FocusField = "sync" | "export" | "logout"
|
|
|
|
export function SyncProfile(props: SyncProfileProps) {
|
|
const auth = useAuthStore()
|
|
const [focusField, setFocusField] = createSignal<FocusField>("sync")
|
|
const [lastSyncTime] = createSignal<Date | null>(new Date())
|
|
|
|
const fields: FocusField[] = ["sync", "export", "logout"]
|
|
|
|
const handleKeyPress = (key: { name: string; shift?: boolean }) => {
|
|
if (key.name === "tab") {
|
|
const currentIndex = fields.indexOf(focusField())
|
|
const nextIndex = key.shift
|
|
? (currentIndex - 1 + fields.length) % fields.length
|
|
: (currentIndex + 1) % fields.length
|
|
setFocusField(fields[nextIndex])
|
|
} else if (key.name === "return" || key.name === "enter") {
|
|
if (focusField() === "sync" && props.onManageSync) {
|
|
props.onManageSync()
|
|
} else if (focusField() === "logout" && props.onLogout) {
|
|
handleLogout()
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleLogout = () => {
|
|
auth.logout()
|
|
if (props.onLogout) {
|
|
props.onLogout()
|
|
}
|
|
}
|
|
|
|
const formatDate = (date: Date | null | undefined): string => {
|
|
if (!date) return "Never"
|
|
return format(date, "MMM d, yyyy HH:mm")
|
|
}
|
|
|
|
const user = () => auth.state().user
|
|
|
|
// Get user initials for avatar
|
|
const userInitials = () => {
|
|
const name = user()?.name || "?"
|
|
return name.slice(0, 2).toUpperCase()
|
|
}
|
|
|
|
return (
|
|
<box flexDirection="column" border padding={2} gap={1}>
|
|
<text>
|
|
<strong>User Profile</strong>
|
|
</text>
|
|
|
|
<box height={1} />
|
|
|
|
{/* User avatar and info */}
|
|
<box flexDirection="row" gap={2}>
|
|
{/* ASCII avatar */}
|
|
<box border padding={1} width={8} height={4} justifyContent="center" alignItems="center">
|
|
<text fg="cyan">{userInitials()}</text>
|
|
</box>
|
|
|
|
{/* User details */}
|
|
<box flexDirection="column" gap={0}>
|
|
<text fg="white">{user()?.name || "Guest User"}</text>
|
|
<text fg="gray">{user()?.email || "No email"}</text>
|
|
<text fg="gray">Joined: {formatDate(user()?.createdAt)}</text>
|
|
</box>
|
|
</box>
|
|
|
|
<box height={1} />
|
|
|
|
{/* Sync status section */}
|
|
<box border padding={1} flexDirection="column" gap={0}>
|
|
<text fg="cyan">Sync Status</text>
|
|
|
|
<box flexDirection="row" gap={1}>
|
|
<text fg="gray">Status:</text>
|
|
<text fg={user()?.syncEnabled ? "green" : "yellow"}>
|
|
{user()?.syncEnabled ? "Enabled" : "Disabled"}
|
|
</text>
|
|
</box>
|
|
|
|
<box flexDirection="row" gap={1}>
|
|
<text fg="gray">Last Sync:</text>
|
|
<text fg="white">{formatDate(lastSyncTime())}</text>
|
|
</box>
|
|
|
|
<box flexDirection="row" gap={1}>
|
|
<text fg="gray">Method:</text>
|
|
<text fg="white">File-based (JSON/XML)</text>
|
|
</box>
|
|
</box>
|
|
|
|
<box height={1} />
|
|
|
|
{/* Action buttons */}
|
|
<box flexDirection="row" gap={2}>
|
|
<box
|
|
border
|
|
padding={1}
|
|
backgroundColor={focusField() === "sync" ? "#333" : undefined}
|
|
>
|
|
<text fg={focusField() === "sync" ? "cyan" : undefined}>
|
|
[S] Manage Sync
|
|
</text>
|
|
</box>
|
|
|
|
<box
|
|
border
|
|
padding={1}
|
|
backgroundColor={focusField() === "export" ? "#333" : undefined}
|
|
>
|
|
<text fg={focusField() === "export" ? "cyan" : undefined}>
|
|
[E] Export Data
|
|
</text>
|
|
</box>
|
|
|
|
<box
|
|
border
|
|
padding={1}
|
|
backgroundColor={focusField() === "logout" ? "#333" : undefined}
|
|
>
|
|
<text fg={focusField() === "logout" ? "red" : "gray"}>
|
|
[L] Logout
|
|
</text>
|
|
</box>
|
|
</box>
|
|
|
|
<box height={1} />
|
|
|
|
<text fg="gray">Tab to navigate, Enter to select</text>
|
|
</box>
|
|
)
|
|
}
|