Skip to content

Commit 3acea4d

Browse files
dreamguxiangdreamguxiang
committed
refactor(frontend): clean up lip package and instance state handling
1 parent e08f036 commit 3acea4d

33 files changed

Lines changed: 788 additions & 525 deletions

‎frontend/index.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
4-
<head>
3+
<head>
54
<meta charset="UTF-8" />
65
<meta
76
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -13,11 +12,10 @@
1312
window._wails = window._wails || {};
1413
window._wails.flags = window._wails.flags || {};
1514
</script>
16-
</head>
15+
</head>
1716

18-
<body>
17+
<body>
1918
<div id="root"></div>
2019
<script src="./src/main.jsx" type="module"></script>
21-
</body>
22-
20+
</body>
2321
</html>

‎frontend/src/App.tsx‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,7 @@ const InstanceSelectPage = lazy(() =>
5151
default: m.InstanceSelectPage,
5252
})),
5353
);
54-
const InstanceSettingsPage = lazy(() =>
55-
import("@/pages/InstanceSettingsPage"),
56-
);
54+
const InstanceSettingsPage = lazy(() => import("@/pages/InstanceSettingsPage"));
5755
const ModsPage = lazy(() => import("@/pages/ModsPage"));
5856
const UpdatingPage = lazy(() => import("@/pages/UpdatingPage"));
5957
const ContentPage = lazy(() => import("@/pages/ContentPage"));
@@ -326,7 +324,10 @@ function App() {
326324
<Route
327325
path={ROUTES.home}
328326
element={
329-
<LauncherPage refresh={refresh} count={count} />
327+
<LauncherPage
328+
refresh={refresh}
329+
count={count}
330+
/>
330331
}
331332
/>
332333
<Route
@@ -337,14 +338,19 @@ function App() {
337338
path={ROUTES.downloadTasks}
338339
element={<DownloadManagerPage />}
339340
/>
340-
<Route path="/install" element={<InstallPage />} />
341+
<Route
342+
path="/install"
343+
element={<InstallPage />}
344+
/>
341345
<Route
342346
path={ROUTES.settings}
343347
element={<SettingsPage />}
344348
/>
345349
<Route
346350
path={ROUTES.instances}
347-
element={<InstanceSelectPage refresh={refresh} />}
351+
element={
352+
<InstanceSelectPage refresh={refresh} />
353+
}
348354
/>
349355
<Route
350356
path={ROUTES.instanceSettings}
@@ -372,7 +378,10 @@ function App() {
372378
path={ROUTES.onboarding}
373379
element={<OnboardingPage />}
374380
/>
375-
<Route path="/content" element={<ContentPage />} />
381+
<Route
382+
path="/content"
383+
element={<ContentPage />}
384+
/>
376385
<Route
377386
path="/content/worlds"
378387
element={<WorldsListPage />}
@@ -401,7 +410,10 @@ function App() {
401410
path="/content/servers"
402411
element={<ServersPage />}
403412
/>
404-
<Route path={ROUTES.about} element={<AboutPage />} />
413+
<Route
414+
path={ROUTES.about}
415+
element={<AboutPage />}
416+
/>
405417
</Routes>
406418
</Suspense>
407419
</div>

‎frontend/src/components/GlobalNavbar.tsx‎

Lines changed: 113 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ export const GlobalNavbar: React.FC<GlobalNavbarProps> = ({
8888

8989
const extraItems = navItems.filter((item) => item.menuClass);
9090

91-
const activeExtraItem = extraItems.find(
92-
(item) => isRouteActive(location.pathname, item.path),
91+
const activeExtraItem = extraItems.find((item) =>
92+
isRouteActive(location.pathname, item.path),
9393
);
9494

9595
const moreButtonClass = React.useMemo(() => {
@@ -117,128 +117,126 @@ export const GlobalNavbar: React.FC<GlobalNavbarProps> = ({
117117
<div
118118
className={`pointer-events-auto w-full ${LAYOUT.NAVBAR_BG} border-b border-default-200/50 dark:border-zinc-800/50 shadow-sm dark:shadow-zinc-950/20 px-4 py-2 flex items-center gap-4`}
119119
>
120-
<div className="flex items-center gap-3 shrink-0">
121-
<Button
122-
isIconOnly
123-
variant="light"
124-
size="sm"
125-
radius="lg"
126-
onPress={() => tryNavigate(-1)}
127-
isDisabled={navLocked}
128-
className="wails-no-drag text-default-500 dark:text-zinc-400"
129-
>
130-
<IoArrowBack size={20} />
131-
</Button>
132-
<div className="p-1">
133-
<LeviIcon width={28} height={28} />
134-
</div>
135-
<div className="hidden sm:flex flex-col leading-none gap-0.5">
136-
<p className="font-bold text-[16px] tracking-tight bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent">
137-
LeviLauncher
138-
</p>
139-
{isBeta && (
140-
<span className="text-[10px] font-bold text-amber-500 uppercase tracking-wider">
141-
Beta
142-
</span>
143-
)}
144-
</div>
120+
<div className="flex items-center gap-3 shrink-0">
121+
<Button
122+
isIconOnly
123+
variant="light"
124+
size="sm"
125+
radius="lg"
126+
onPress={() => tryNavigate(-1)}
127+
isDisabled={navLocked}
128+
className="wails-no-drag text-default-500 dark:text-zinc-400"
129+
>
130+
<IoArrowBack size={20} />
131+
</Button>
132+
<div className="p-1">
133+
<LeviIcon width={28} height={28} />
145134
</div>
135+
<div className="hidden sm:flex flex-col leading-none gap-0.5">
136+
<p className="font-bold text-[16px] tracking-tight bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent">
137+
LeviLauncher
138+
</p>
139+
{isBeta && (
140+
<span className="text-[10px] font-bold text-amber-500 uppercase tracking-wider">
141+
Beta
142+
</span>
143+
)}
144+
</div>
145+
</div>
146146

147-
<div className="flex-1 flex items-center justify-center gap-1 sm:gap-2 whitespace-nowrap overflow-x-auto px-2 scrollbar-hide">
148-
{navItems.map((item) => {
149-
const isActive = isRouteActive(location.pathname, item.path);
150-
return (
151-
<Tooltip
152-
key={item.key}
153-
content={item.label}
154-
delay={500}
155-
closeDelay={0}
147+
<div className="flex-1 flex items-center justify-center gap-1 sm:gap-2 whitespace-nowrap overflow-x-auto px-2 scrollbar-hide">
148+
{navItems.map((item) => {
149+
const isActive = isRouteActive(location.pathname, item.path);
150+
return (
151+
<Tooltip
152+
key={item.key}
153+
content={item.label}
154+
delay={500}
155+
closeDelay={0}
156+
>
157+
<Button
158+
variant={isActive ? "flat" : "light"}
159+
color="default"
160+
aria-label={item.label}
161+
isDisabled={navLocked}
162+
onPress={(e) => {
163+
tryNavigate(item.path);
164+
(e.target as HTMLElement).blur();
165+
}}
166+
className={`min-w-0 px-3 h-10 rounded-xl transition-all duration-200 outline-none data-[focus-visible=true]:outline-none ${item.navbarClass} ${
167+
isActive
168+
? "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 font-medium"
169+
: "text-zinc-700 hover:text-black dark:text-zinc-300 dark:hover:text-white font-medium"
170+
}`}
171+
startContent={
172+
<span
173+
className={
174+
isActive ? "text-zinc-900 dark:text-zinc-100" : ""
175+
}
176+
>
177+
{item.icon}
178+
</span>
179+
}
156180
>
157-
<Button
158-
variant={isActive ? "flat" : "light"}
159-
color="default"
160-
aria-label={item.label}
161-
isDisabled={navLocked}
162-
onPress={(e) => {
163-
tryNavigate(item.path);
164-
(e.target as HTMLElement).blur();
165-
}}
166-
className={`min-w-0 px-3 h-10 rounded-xl transition-all duration-200 outline-none data-[focus-visible=true]:outline-none ${item.navbarClass} ${
167-
isActive
168-
? "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 font-medium"
169-
: "text-zinc-700 hover:text-black dark:text-zinc-300 dark:hover:text-white font-medium"
170-
}`}
171-
startContent={
172-
<span
173-
className={
174-
isActive ? "text-zinc-900 dark:text-zinc-100" : ""
175-
}
176-
>
177-
{item.icon}
178-
</span>
179-
}
180-
>
181-
<span className="hidden md:inline">{item.label}</span>
182-
</Button>
183-
</Tooltip>
184-
);
185-
})}
181+
<span className="hidden md:inline">{item.label}</span>
182+
</Button>
183+
</Tooltip>
184+
);
185+
})}
186186

187-
<div className="lg:hidden">
188-
<Dropdown classNames={COMPONENT_STYLES.dropdown}>
189-
<DropdownTrigger>
190-
<Button
191-
variant="light"
192-
aria-label="More Menu"
193-
isDisabled={navLocked}
194-
className={moreButtonClass}
195-
startContent={<FaEllipsisH size={18} />}
196-
>
197-
<span className="hidden md:inline">{t("nav.more")}</span>
198-
</Button>
199-
</DropdownTrigger>
200-
<DropdownMenu
201-
aria-label="more-menu"
202-
onAction={(key) => {
203-
const item = extraItems.find((i) => i.key === key);
204-
if (item) tryNavigate(item.path);
205-
}}
187+
<div className="lg:hidden">
188+
<Dropdown classNames={COMPONENT_STYLES.dropdown}>
189+
<DropdownTrigger>
190+
<Button
191+
variant="light"
192+
aria-label="More Menu"
193+
isDisabled={navLocked}
194+
className={moreButtonClass}
195+
startContent={<FaEllipsisH size={18} />}
206196
>
207-
{extraItems.map((item) => (
208-
<DropdownItem
209-
key={item.key}
210-
startContent={React.cloneElement(item.icon as any, {
211-
size: 14,
212-
})}
213-
className={item.menuClass}
214-
>
215-
{item.label}
216-
</DropdownItem>
217-
))}
218-
</DropdownMenu>
219-
</Dropdown>
220-
</div>
197+
<span className="hidden md:inline">{t("nav.more")}</span>
198+
</Button>
199+
</DropdownTrigger>
200+
<DropdownMenu
201+
aria-label="more-menu"
202+
onAction={(key) => {
203+
const item = extraItems.find((i) => i.key === key);
204+
if (item) tryNavigate(item.path);
205+
}}
206+
>
207+
{extraItems.map((item) => (
208+
<DropdownItem
209+
key={item.key}
210+
startContent={React.cloneElement(item.icon as any, {
211+
size: 14,
212+
})}
213+
className={item.menuClass}
214+
>
215+
{item.label}
216+
</DropdownItem>
217+
))}
218+
</DropdownMenu>
219+
</Dropdown>
221220
</div>
221+
</div>
222222

223-
<div className="flex items-center gap-3 shrink-0 justify-end">
224-
<div className="h-8 w-px bg-default-200 dark:bg-zinc-700 mx-1 hidden sm:block" />
223+
<div className="flex items-center gap-3 shrink-0 justify-end">
224+
<div className="h-8 w-px bg-default-200 dark:bg-zinc-700 mx-1 hidden sm:block" />
225225

226-
{themeMode !== "auto" &&
227-
themeMode !== "schedule" &&
228-
themeMode !== "system" && (
229-
<ThemeSwitcher isDisabled={navLocked} />
230-
)}
231-
<div
232-
className={`hidden sm:block ${navLocked ? "pointer-events-none opacity-50" : ""}`}
233-
>
234-
<UserAvatar />
235-
</div>
236-
237-
<WindowControls
238-
navLocked={navLocked}
239-
isOnboardingMode={isOnboardingMode}
240-
/>
226+
{themeMode !== "auto" &&
227+
themeMode !== "schedule" &&
228+
themeMode !== "system" && <ThemeSwitcher isDisabled={navLocked} />}
229+
<div
230+
className={`hidden sm:block ${navLocked ? "pointer-events-none opacity-50" : ""}`}
231+
>
232+
<UserAvatar />
241233
</div>
234+
235+
<WindowControls
236+
navLocked={navLocked}
237+
isOnboardingMode={isOnboardingMode}
238+
/>
239+
</div>
242240
</div>
243241
</div>
244242
);

‎frontend/src/components/LipUpdateModal.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ export const LipUpdateModal: React.FC<LipUpdateModalProps> = ({
2525
onOpenSettings,
2626
}) => {
2727
const { t } = useTranslation();
28-
const warningConfirmButtonProps = getUnifiedModalConfirmButtonProps("warning");
28+
const warningConfirmButtonProps =
29+
getUnifiedModalConfirmButtonProps("warning");
2930

3031
return (
3132
<UnifiedModal
@@ -64,8 +65,14 @@ export const LipUpdateModal: React.FC<LipUpdateModalProps> = ({
6465
})}
6566
</p>
6667
<div className="rounded-2xl border border-default-200 dark:border-zinc-700 bg-default-100/60 dark:bg-zinc-800/60 px-4 py-3 text-small text-default-600 dark:text-zinc-300">
67-
<div>{t("settings.lip.startup_prompt.current_version", { currentVersion })}</div>
68-
<div>{t("settings.lip.startup_prompt.latest_version", { latestVersion })}</div>
68+
<div>
69+
{t("settings.lip.startup_prompt.current_version", {
70+
currentVersion,
71+
})}
72+
</div>
73+
<div>
74+
{t("settings.lip.startup_prompt.latest_version", { latestVersion })}
75+
</div>
6976
</div>
7077
</div>
7178
</UnifiedModal>

‎frontend/src/components/ModdedCard.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,7 @@ export const ModCard = (args: {
2626
useModIntelligence();
2727
const currentVersionName = String(args.currentVersion || "").trim();
2828
const snapshot = React.useMemo(
29-
() =>
30-
currentVersionName ? getInstanceSnapshot(currentVersionName) : null,
29+
() => (currentVersionName ? getInstanceSnapshot(currentVersionName) : null),
3130
[currentVersionName, getInstanceSnapshot, snapshotRevision],
3231
);
3332
const modsInfo = React.useMemo<Array<types.ModInfo>>(() => {

0 commit comments

Comments
 (0)