Mike/PodTui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more theme color integration

Browse Source
This commit is contained in:
Michael Freno
2026-02-10 15:10:07 -05:00
parent a405474f11
commit f707594d0c
18 changed files with 247 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/Settings/OAuthPlaceholder.tsx
View File

@@ -5,6 +5,7 @@
import { createSignal } from "solid-js";
import { OAUTH_PROVIDERS, OAUTH_LIMITATION_MESSAGE } from "@/config/auth";
import { useTheme } from "@/context/ThemeContext";
interface OAuthPlaceholderProps {
focused?: boolean;
@@ -15,6 +16,7 @@ interface OAuthPlaceholderProps {
type FocusField = "code" | "back";
export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
const { theme } = useTheme();
const [focusField, setFocusField] = createSignal<FocusField>("code");
const fields: FocusField[] = ["code", "back"];
@@ -38,23 +40,23 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
};
return (
<box flexDirection="column" border padding={2} gap={1}>
<text>
<box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
<text fg={theme.text}>
<strong>OAuth Authentication</strong>
</text>
<box height={1} />
{/* OAuth providers list */}
<text fg="cyan">Available OAuth Providers:</text>
<text fg={theme.primary}>Available OAuth Providers:</text>
<box flexDirection="column" gap={0} paddingLeft={2}>
{OAUTH_PROVIDERS.map((provider) => (
<box flexDirection="row" gap={1}>
<text fg={provider.enabled ? "green" : "gray"}>
<text fg={provider.enabled ? theme.success : theme.textMuted}>
{provider.enabled ? "[+]" : "[-]"} {provider.name}
</text>
<text fg="gray">- {provider.description}</text>
<text fg={theme.textMuted}>- {provider.description}</text>
</box>
))}
</box>
@@ -62,33 +64,29 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
<box height={1} />
{/* Limitation message */}
<box border padding={1} borderColor="yellow">
<text fg="yellow">Terminal Limitations</text>
<box border padding={1} borderColor={theme.warning}>
<text fg={theme.warning}>Terminal Limitations</text>
</box>
<box paddingLeft={1}>
{OAUTH_LIMITATION_MESSAGE.split("\n").map((line) => (
<text fg="gray">{line}</text>
<text fg={theme.textMuted}>{line}</text>
))}
</box>
<box height={1} />
{/* Alternative options */}
<text fg="cyan">Recommended Alternatives:</text>
<text fg={theme.primary}>Recommended Alternatives:</text>
<box flexDirection="column" gap={0} paddingLeft={2}>
<box flexDirection="row" gap={1}>
<text fg="green">[1]</text>
<text fg="white">Use a sync code from the web portal</text>
</box>
<box flexDirection="row" gap={1}>
<text fg="green">[2]</text>
<text fg="white">Use email/password authentication</text>
</box>
<box flexDirection="row" gap={1}>
<text fg="green">[3]</text>
<text fg="white">Use file-based sync (no account needed)</text>
<text fg={theme.success}>[1]</text>
<text fg={theme.text}>Use a sync code from the web portal</text>
<text fg={theme.success}>[2]</text>
<text fg={theme.text}>Use email/password authentication</text>
<text fg={theme.success}>[3]</text>
<text fg={theme.text}>Use file-based sync (no account needed)</text>
</box>
</box>
@@ -99,9 +97,9 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
<box
border
padding={1}
backgroundColor={focusField() === "code" ? "#333" : undefined}
backgroundColor={focusField() === "code" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "code" ? "cyan" : undefined}>
<text fg={focusField() === "code" ? theme.primary : undefined}>
[C] Enter Sync Code
</text>
</box>
@@ -109,9 +107,9 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
<box
border
padding={1}
backgroundColor={focusField() === "back" ? "#333" : undefined}
backgroundColor={focusField() === "back" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "back" ? "yellow" : "gray"}>
<text fg={focusField() === "back" ? theme.warning : theme.textMuted}>
[Esc] Back to Login
</text>
</box>
@@ -119,7 +117,7 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
<box height={1} />
<text fg="gray">Tab to navigate, Enter to select, Esc to go back</text>
<text fg={theme.textMuted}>Tab to navigate, Enter to select, Esc to go back</text>
</box>
);
}

48
src/pages/Settings/SyncProfile.tsx
View File

@@ -6,6 +6,7 @@
import { createSignal } from "solid-js";
import { useAuthStore } from "@/stores/auth";
import { format } from "date-fns";
import { useTheme } from "@/context/ThemeContext";
interface SyncProfileProps {
focused?: boolean;
@@ -17,6 +18,7 @@ type FocusField = "sync" | "export" | "logout";
export function SyncProfile(props: SyncProfileProps) {
const auth = useAuthStore();
const { theme } = useTheme();
const [focusField, setFocusField] = createSignal<FocusField>("sync");
const [lastSyncTime] = createSignal<Date | null>(new Date());
@@ -59,8 +61,8 @@ export function SyncProfile(props: SyncProfileProps) {
};
return (
<box flexDirection="column" border padding={2} gap={1}>
<text>
<box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
<text fg={theme.text}>
<strong>User Profile</strong>
</text>
@@ -77,38 +79,38 @@ export function SyncProfile(props: SyncProfileProps) {
justifyContent="center"
alignItems="center"
>
<text fg="cyan">{userInitials()}</text>
<text fg={theme.primary}>{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>
<text fg={theme.text}>{user()?.name || "Guest User"}</text>
<text fg={theme.textMuted}>{user()?.email || "No email"}</text>
<text fg={theme.textMuted}>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 border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
<text fg={theme.primary}>Sync Status</text>
<box flexDirection="row" gap={1}>
<text fg="gray">Status:</text>
<text fg={user()?.syncEnabled ? "green" : "yellow"}>
{user()?.syncEnabled ? "Enabled" : "Disabled"}
</text>
<text fg={theme.textMuted}>Status:</text>
<text fg={user()?.syncEnabled ? theme.success : theme.warning}>
{user()?.syncEnabled ? "Enabled" : "Disabled"}
</text>
</box>
<box flexDirection="row" gap={1}>
<text fg="gray">Last Sync:</text>
<text fg="white">{formatDate(lastSyncTime())}</text>
<text fg={theme.textMuted}>Last Sync:</text>
<text fg={theme.text}>{formatDate(lastSyncTime())}</text>
</box>
<box flexDirection="row" gap={1}>
<text fg="gray">Method:</text>
<text fg="white">File-based (JSON/XML)</text>
<text fg={theme.textMuted}>Method:</text>
<text fg={theme.text}>File-based (JSON/XML)</text>
</box>
</box>
@@ -119,9 +121,9 @@ export function SyncProfile(props: SyncProfileProps) {
<box
border
padding={1}
backgroundColor={focusField() === "sync" ? "#333" : undefined}
backgroundColor={focusField() === "sync" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "sync" ? "cyan" : undefined}>
<text fg={focusField() === "sync" ? theme.primary : undefined}>
[S] Manage Sync
</text>
</box>
@@ -129,9 +131,9 @@ export function SyncProfile(props: SyncProfileProps) {
<box
border
padding={1}
backgroundColor={focusField() === "export" ? "#333" : undefined}
backgroundColor={focusField() === "export" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "export" ? "cyan" : undefined}>
<text fg={focusField() === "export" ? theme.primary : undefined}>
[E] Export Data
</text>
</box>
@@ -139,9 +141,9 @@ export function SyncProfile(props: SyncProfileProps) {
<box
border
padding={1}
backgroundColor={focusField() === "logout" ? "#333" : undefined}
backgroundColor={focusField() === "logout" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "logout" ? "red" : "gray"}>
<text fg={focusField() === "logout" ? theme.error : theme.textMuted}>
[L] Logout
</text>
</box>
@@ -149,7 +151,7 @@ export function SyncProfile(props: SyncProfileProps) {
<box height={1} />
<text fg="gray">Tab to navigate, Enter to select</text>
<text fg={theme.textMuted}>Tab to navigate, Enter to select</text>
</box>
);
}