YuzuZensai/VRC-Circle
1
0
Fork 0
mirror of https://github.com/YuzuZensai/VRC-Circle.git synced 2026-09-13 10:58:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ refactor: dedupe utils, lift CardGrid/IconLabel primitives

Browse Source
This commit is contained in:
yuzu
2026-06-29 05:56:49 +07:00
parent 1a91ffbe92
commit a18d9612ee
15 changed files with 106 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/cache/cache.ts
Vendored
+3 -5
View File
@@ -1,6 +1,7 @@
import { readFileSync } from "node:fs";
import { writeFileAtomic, writeFileAtomicSync } from "../lib/atomicFile";
import type { CacheEntryInfo, CacheStats } from "../../shared/types/debug";
import { httpStatusOf } from "../vrchat/errors";
interface Entry<T> {
value: T;
@@ -31,14 +32,11 @@ function byteSize(value: unknown): number {
}
function retryAfterMs(err: unknown): number | null {
if (httpStatusOf(err) !== 429) return null;
const e = (err ?? {}) as {
status?: number;
statusCode?: number;
response?: { status?: number; headers?: Record<string, string> };
response?: { headers?: Record<string, string> };
headers?: Record<string, string>;
};
const status = e.status ?? e.statusCode ?? e.response?.status;
if (status !== 429) return null;
const raw = e.response?.headers?.["retry-after"] ?? e.headers?.["retry-after"];
const secs = raw != null ? Number(raw) : NaN;
return Number.isFinite(secs) ? secs * 1000 : 8000;
src/main/vrchat/mappers.ts
+3 -3
View File
@@ -92,10 +92,10 @@ function normalizeStatus(status?: string): UserStatus {
}
}
function toIso(v?: string | Date | null): string | undefined {
export function toIso(v?: string | Date | null): string | undefined {
if (!v) return undefined;
const s = v instanceof Date ? v.toISOString() : v;
return s === "" ? undefined : s;
const date = v instanceof Date ? v : new Date(v);
return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
}
export function toUserProfile(raw: RawUser, selfId: string): UserProfile {
src/main/vrchat/settingsService.ts
+1 -6
View File
@@ -8,6 +8,7 @@ import type {
import type { TwoFactorMethod } from "../../shared/types/auth";
import type { UserStatus } from "../../shared/types/user";
import { requireActiveClient } from "./client";
import { toIso } from "./mappers";
import { userCache } from "./userService";
import { cacheKeys } from "../cache/policies";
import { entityStore } from "../store/entityStore";
@@ -20,12 +21,6 @@ const CONTENT_FILTER_KEYS: ContentFilterKey[] = [
"content_horror",
];
function toIso(d?: Date | string | null): string | undefined {
if (!d) return undefined;
const date = typeof d === "string" ? new Date(d) : d;
return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
}
function toSettings(u: CurrentUser): AccountSettings {
const filters = (u.contentFilters ?? []).filter((t): t is ContentFilterKey =>
(CONTENT_FILTER_KEYS as string[]).includes(t),
src/main/vrchat/userService.ts
+4 -1
View File
@@ -49,10 +49,13 @@ export async function getUser(userId: string): Promise<UserProfile> {
export async function getUserByName(username: string): Promise<UserProfile> {
const vrc = requireActiveClient();
const self = await selfId();
return userCache.get(cacheKeys.userByName(username), policies.user, async () => {
const key = cacheKeys.userByName(username);
const profile = await userCache.get(key, policies.user, async () => {
const { data } = await vrc.getUserByName({ path: { username }, throwOnError: true });
return toUserProfile(data, self);
});
refreshStore(profile, key);
return profile;
}
export async function searchUsers(query: string): Promise<UserProfile[]> {
src/renderer/src/components/ui/CardGrid.tsx
+9
View File
@@ -0,0 +1,9 @@
export function CardGrid({
children,
className = "",
}: {
children: React.ReactNode;
className?: string;
}) {
return <div className={`grid grid-cols-2 gap-3 sm:grid-cols-3 ${className}`}>{children}</div>;
}
src/renderer/src/components/ui/IconLabel.tsx
+22
View File
@@ -0,0 +1,22 @@
export function IconLabel({
icon,
children,
gap = "gap-1",
title,
className = "",
style,
}: {
icon: React.ReactNode;
children: React.ReactNode;
gap?: string;
title?: string;
className?: string;
style?: React.CSSProperties;
}) {
return (
<span className={`inline-flex items-center ${gap} ${className}`} title={title} style={style}>
{icon}
{children}
</span>
);
}
src/renderer/src/components/ui/index.ts
+2
View File
@@ -17,6 +17,8 @@ export { Toggle } from "./Toggle";
export { Section, Fact } from "./Section";
export { StatTile } from "./StatTile";
export { SkeletonGrid } from "./SkeletonGrid";
export { CardGrid } from "./CardGrid";
export { IconLabel } from "./IconLabel";
export { Skeleton } from "./Skeleton";
export { LinkPill } from "./LinkPill";
export { CodeBlock } from "./CodeBlock";
src/renderer/src/features/debug/ui.tsx
+2 -6
View File
@@ -1,6 +1,8 @@
import { X } from "lucide-react";
import type { CacheEntryInfo, CacheStatus } from "../../../../shared/types/debug";
export { formatBytes } from "../../lib/format";
export const statusTone = {
fresh: "success",
stale: "warn",
@@ -44,12 +46,6 @@ export function cacheStatus(e: CacheEntryInfo, now: number): CacheStatus {
return now < e.expiresAt ? "fresh" : now < e.hardExpiresAt ? "stale" : "expired";
}
export function formatBytes(n: number): string {
if (n < 1024) return `${n} B`;
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
return `${(n / (1024 * 1024)).toFixed(1)} MB`;
}
export function formatDuration(s: number): string {
if (s < 60) return `${s}s`;
if (s < 3600) return `${Math.floor(s / 60)}m ${s % 60}s`;
src/renderer/src/features/gallery/format.ts
+1 -11
View File
@@ -1,14 +1,4 @@
export function formatBytes(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
const units = ["KB", "MB", "GB"];
let n = bytes / 1024;
let i = 0;
while (n >= 1024 && i < units.length - 1) {
n /= 1024;
i++;
}
return `${n.toFixed(n < 10 ? 1 : 0)} ${units[i]}`;
}
export { formatBytes } from "../../lib/format";
export function formatBucket(bucket: string, locale?: string): string {
const m = /^(\d{4})-(\d{2})$/.exec(bucket);
src/renderer/src/features/profile/LocationSection.tsx
+21 -23
View File
@@ -1,6 +1,6 @@
import { ChevronRight, Globe, Hash, MapPin, Users } from "lucide-react";
import { parseLocation, type Location } from "../../../../shared/types/user";
import { HoverImage } from "../../components/ui";
import { HoverImage, IconLabel } from "../../components/ui";
import { useWorld } from "../../store/worlds";
import { useNav } from "../navigation/NavContext";
import { api } from "../../lib/api";
@@ -54,36 +54,34 @@ export function LocationSection({ location }: { location?: Location }) {
<span className="truncate">
{t("profile:location.by", { author: world.authorName })}
</span>
<span
className="inline-flex items-center gap-1"
title={t("profile:location.instance")}
>
<Hash size={11} />
<IconLabel icon={<Hash size={11} />} title={t("profile:location.instance")}>
{parsed.instanceId}
</span>
</IconLabel>
{region ? (
<span className="inline-flex items-center gap-1">
{flag ? (
<span className="text-[13px] leading-none">{flag}</span>
) : (
<Globe size={11} />
)}{" "}
<IconLabel
icon={
flag ? (
<span className="text-[13px] leading-none">{flag}</span>
) : (
<Globe size={11} />
)
}
>
{" "}
{region}
</span>
</IconLabel>
) : null}
{inInstance ? (
<span
className="inline-flex items-center gap-1"
style={{ color: "var(--status-active)" }}
>
<Users size={11} />{" "}
<IconLabel icon={<Users size={11} />} style={{ color: "var(--status-active)" }}>
{" "}
{t("profile:location.inInstance", { n: inInstance.userCount })}
</span>
</IconLabel>
) : null}
{world.occupants > 0 ? (
<span className="inline-flex items-center gap-1">
<Users size={11} /> {t("profile:location.inWorld", { n: world.occupants })}
</span>
<IconLabel icon={<Users size={11} />}>
{" "}
{t("profile:location.inWorld", { n: world.occupants })}
</IconLabel>
) : null}
</div>
</div>
src/renderer/src/features/profile/WorldsSection.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import { useMemo, useState } from "react";
import type { World } from "../../../../shared/types/world";
import { CollapsibleCard, Field, SkeletonGrid } from "../../components/ui";
import { CardGrid, CollapsibleCard, Field, SkeletonGrid } from "../../components/ui";
import { useT } from "../../lib/i18n";
import { WorldCard } from "../world/WorldCard";
import { useUserWorlds } from "./useUserWorlds";
@@ -73,11 +73,11 @@ export function FavoriteWorldsSection({
<div className="flex flex-col gap-5">
{shown.map((folder) => (
<CollapsibleCard key={folder.name} title={folder.displayName} count={folder.worlds.length}>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
<CardGrid>
{folder.worlds.map((w) => (
<WorldCard key={w.id} world={w} />
))}
</div>
</CardGrid>
</CollapsibleCard>
))}
{loading ? <SkeletonGrid count={3} /> : null}
@@ -99,11 +99,11 @@ function WorldGrid({
if (worlds.length) {
return (
<CollapsibleCard title={title} count={worlds.length}>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
<CardGrid>
{worlds.map((w) => (
<WorldCard key={w.id} world={w} />
))}
</div>
</CardGrid>
</CollapsibleCard>
);
}
src/renderer/src/features/search/SearchView.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import { Search as SearchIcon } from "lucide-react";
import type { UserProfile } from "../../../../shared/types/user";
import type { World } from "../../../../shared/types/world";
import { api } from "../../lib/api";
import { Avatar, Button, ContextMenu, Field, Tabs, Tag } from "../../components/ui";
import { Avatar, Button, CardGrid, ContextMenu, Field, Tabs, Tag } from "../../components/ui";
import { useT } from "../../lib/i18n";
import { useNav } from "../navigation/NavContext";
import { useUserMenu } from "../friends/useUserMenu";
@@ -106,11 +106,11 @@ export function SearchView() {
))}
</div>
) : (
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
<CardGrid>
{(results as World[]).map((w) => (
<WorldCard key={w.id} world={w} showAuthor onOpen={() => openWorld(w.id)} />
))}
</div>
</CardGrid>
)}
</div>
src/renderer/src/features/world/WorldCard.tsx
+14 -11
View File
@@ -1,6 +1,6 @@
import { Circle, Star, Users } from "lucide-react";
import type { World } from "../../../../shared/types/world";
import { Card, HoverImage, Tag } from "../../components/ui";
import { Card, HoverImage, IconLabel, Tag } from "../../components/ui";
import { compactNumber } from "../../lib/format";
import { useT } from "../../lib/i18n";
import { useNav } from "../navigation/NavContext";
@@ -37,26 +37,29 @@ export function WorldCard({
</div>
) : null}
<div className="mt-1 flex flex-wrap items-center gap-3 text-[11px] tabular-nums text-faint">
<span className="inline-flex items-center gap-1" title={t("profile:worlds.tip.favorites")}>
<Star size={12} /> {compactNumber(world.favorites)}
</span>
<IconLabel icon={<Star size={12} />} title={t("profile:worlds.tip.favorites")}>
{" "}
{compactNumber(world.favorites)}
</IconLabel>
{world.occupants > 0 ? (
<span
className="inline-flex items-center gap-1"
<IconLabel
icon={<Circle size={9} fill="currentColor" />}
title={t("profile:worlds.tip.online")}
style={{ color: "var(--status-active)" }}
>
<Circle size={9} fill="currentColor" /> {compactNumber(world.occupants)}
</span>
{" "}
{compactNumber(world.occupants)}
</IconLabel>
) : null}
{world.visits > 0 ? (
<span title={t("profile:worlds.tip.visits")}>
{t("profile:worlds.visitsCount", { formattedCount: compactNumber(world.visits) })}
</span>
) : null}
<span className="inline-flex items-center gap-1" title={t("profile:worlds.tip.capacity")}>
<Users size={12} /> {world.capacity}
</span>
<IconLabel icon={<Users size={12} />} title={t("profile:worlds.tip.capacity")}>
{" "}
{world.capacity}
</IconLabel>
</div>
</div>
</Card>
src/renderer/src/lib/format.ts
+12
View File
@@ -1,3 +1,15 @@
export function formatBytes(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
const units = ["KB", "MB", "GB"];
let n = bytes / 1024;
let i = 0;
while (n >= 1024 && i < units.length - 1) {
n /= 1024;
i++;
}
return `${n.toFixed(n < 10 ? 1 : 0)} ${units[i]}`;
}
export function compactNumber(n: number): string {
if (n < 1000) return `${n}`;
if (n < 1_000_000) return `${(n / 1000).toFixed(n < 10_000 ? 1 : 0)}k`;
src/shared/types/auth.ts
+4 -7
View File
@@ -5,19 +5,16 @@ export type AuthStatus =
| { state: "awaiting2fa"; methods: TwoFactorMethod[] }
| { state: "authenticated"; user: CurrentUserSummary };
export interface CurrentUserSummary {
id: string;
displayName: string;
userIcon: string;
currentAvatarThumbnailImageUrl: string;
}
export interface Account {
id: string;
displayName: string;
userIcon: string;
}
export interface CurrentUserSummary extends Account {
currentAvatarThumbnailImageUrl: string;
}
export interface AccountsState {
accounts: Account[];
activeId: string | null;