From a87c35972db5ebbd3591478e0109a655f0e10195 Mon Sep 17 00:00:00 2001 From: 0xzio Date: Wed, 14 May 2025 21:26:55 +0800 Subject: [PATCH] feat: add fallback --- package.json | 11 ++-- packages/components/Fallback/Fallback.tsx | 12 +++++ packages/components/Fallback/ReloadAppBtn.tsx | 9 ++++ .../src/DashboardLayout/PanelLayout.tsx | 44 +++++++--------- .../src/area-widgets/AllCreationCard.tsx | 51 +++++++++++++++++++ .../src/area-widgets/WidgetItem.tsx | 12 ++++- pnpm-lock.yaml | 13 +++++ 7 files changed, 121 insertions(+), 31 deletions(-) create mode 100644 packages/components/Fallback/Fallback.tsx create mode 100644 packages/components/Fallback/ReloadAppBtn.tsx create mode 100644 packages/components/src/area-widgets/AllCreationCard.tsx diff --git a/package.json b/package.json index 70a894dd..952cd781 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,8 @@ "@floating-ui/react": "^0.25.4", "@glideapps/glide-data-grid": "^6.0.3", "@hookform/resolvers": "^3.10.0", + "@ionic/react": "^8.5.7", + "@ionic/react-router": "^8.5.7", "@lingui/core": "5.3.1", "@lingui/macro": "^5.3.1", "@lingui/react": "5.3.1", @@ -73,12 +75,12 @@ "@radix-ui/react-toolbar": "^1.1.2", "@radix-ui/react-tooltip": "^1.1.8", "@tanstack/react-query": "^5.74.3", - "@tauri-apps/plugin-http": "^2.2.0", - "@tauri-apps/plugin-fs": "2.2.1", "@tauri-apps/api": "2.5.0", + "@tauri-apps/plugin-dialog": "2.2.1", + "@tauri-apps/plugin-fs": "2.2.1", + "@tauri-apps/plugin-http": "^2.2.0", "@tauri-apps/plugin-opener": "^2", "@tauri-apps/plugin-process": "^2.2.1", - "@tauri-apps/plugin-dialog": "2.2.1", "@tauri-apps/plugin-updater": "^2.7.1", "@trpc/client": "11.1.2", "@trpc/next": "11.1.2", @@ -135,8 +137,6 @@ "@uiw/react-color": "^2.4.5", "@uploadthing/react": "7.1.0", "@vercel/functions": "^2.0.0", - "@ionic/react": "^8.5.7", - "@ionic/react-router": "^8.5.7", "ai": "^4.1.24", "array-move": "^4.0.0", "axios": "^1.7.9", @@ -228,6 +228,7 @@ "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-dom": "^19.0.0", + "react-error-boundary": "^6.0.0", "react-fast-compare": "^3.2.2", "react-grid-layout": "^1.5.1", "react-hook-form": "^7.54.2", diff --git a/packages/components/Fallback/Fallback.tsx b/packages/components/Fallback/Fallback.tsx new file mode 100644 index 00000000..e18736f6 --- /dev/null +++ b/packages/components/Fallback/Fallback.tsx @@ -0,0 +1,12 @@ +import { ReloadAppBtn } from './ReloadAppBtn' + +export const Fallback = () => { + return ( +
+
+ ⚠️Something went wrong +
+ +
+ ) +} diff --git a/packages/components/Fallback/ReloadAppBtn.tsx b/packages/components/Fallback/ReloadAppBtn.tsx new file mode 100644 index 00000000..c4ddab6e --- /dev/null +++ b/packages/components/Fallback/ReloadAppBtn.tsx @@ -0,0 +1,9 @@ +import { Button } from '@penx/uikit/ui/button' + +export const ReloadAppBtn = () => { + async function reloadApp() { + window.location.reload() + } + + return +} diff --git a/packages/components/src/DashboardLayout/PanelLayout.tsx b/packages/components/src/DashboardLayout/PanelLayout.tsx index d35d94e2..581abd53 100644 --- a/packages/components/src/DashboardLayout/PanelLayout.tsx +++ b/packages/components/src/DashboardLayout/PanelLayout.tsx @@ -1,41 +1,35 @@ 'use client' import { ReactNode, useEffect, useRef } from 'react' -import { nextTick } from 'process' -import { Shape, ShapeStream } from '@electric-sql/client' -import { useQuery } from '@tanstack/react-query' -import { editorDefaultValue } from '@penx/constants' -import { useCreations } from '@penx/hooks/useCreations' -import { useSiteTags } from '@penx/hooks/useSiteTags' -import { useSession } from '@penx/session' -import { Button } from '@penx/uikit/button' +import { ErrorBoundary } from 'react-error-boundary' import { SidebarInset, SidebarProvider, SidebarTrigger, } from '@penx/uikit/sidebar' -import { uniqueId } from '@penx/unique-id' +import { Fallback } from '../../Fallback/Fallback' import { AppSidebar } from '../Sidebar/app-sidebar' import { PanelList } from './PanelList' export function PanelLayout({ children }: { children: ReactNode }) { - // useSiteTags() return ( - - - - - + }> + + + + + -
- +
+ + ) } diff --git a/packages/components/src/area-widgets/AllCreationCard.tsx b/packages/components/src/area-widgets/AllCreationCard.tsx new file mode 100644 index 00000000..db9dba51 --- /dev/null +++ b/packages/components/src/area-widgets/AllCreationCard.tsx @@ -0,0 +1,51 @@ +'use client' + +import React, { ReactNode } from 'react' +import { XIcon } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' +import { Widget } from '@penx/types' +import { Button } from '@penx/uikit/button' +import { IsAllProvider } from './IsAllContext' +import { WidgetRender } from './WidgetRender' + +interface Props { + name: ReactNode + visible: boolean + setVisible: any + widget: Widget +} + +export function AllCreationCard({ name, visible, setVisible, widget }: Props) { + return ( + + {visible && ( + +
+
{name}
+ +
+ +
+ + + +
+ + )} + + ) +} diff --git a/packages/components/src/area-widgets/WidgetItem.tsx b/packages/components/src/area-widgets/WidgetItem.tsx index 5c81bdc3..c82e0d21 100644 --- a/packages/components/src/area-widgets/WidgetItem.tsx +++ b/packages/components/src/area-widgets/WidgetItem.tsx @@ -18,6 +18,7 @@ import { WidgetIcon } from '@penx/widgets/WidgetIcon' import { WidgetName } from '@penx/widgets/WidgetName' import { QuickInput } from '../QuickInput' import { AddCreationButton } from './AddCreationButton' +import { AllCreationCard } from './AllCreationCard' import { IsAllProvider } from './IsAllContext' import { TitleContextMenu } from './TitleContextMenu' import { ToggleButton } from './ToggleButton' @@ -95,7 +96,7 @@ export const WidgetItem = forwardRef( return } - store.panels.openWidgetPanel(widget) + // store.panels.openWidgetPanel(widget) setVisible(!visible) }} > @@ -163,6 +164,15 @@ export const WidgetItem = forwardRef( + {!isMobileApp && ( + } + visible={visible} + setVisible={setVisible} + widget={widget} + /> + )} + {isMobileApp && ( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 108c3eda..1382a071 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -653,6 +653,9 @@ importers: react-dom: specifier: ^19.0.0 version: 19.0.0(react@19.0.0) + react-error-boundary: + specifier: ^6.0.0 + version: 6.0.0(react@19.0.0) react-fast-compare: specifier: ^3.2.2 version: 3.2.2 @@ -12114,6 +12117,11 @@ packages: resolution: {integrity: sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==} engines: {node: '>= 6'} + react-error-boundary@6.0.0: + resolution: {integrity: sha512-gdlJjD7NWr0IfkPlaREN2d9uUZUlksrfOx7SX62VRerwXbMY6ftGCIZua1VG1aXFNOimhISsTq+Owp725b9SiA==} + peerDependencies: + react: '>=16.13.1' + react-fast-compare@3.2.2: resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} @@ -25545,6 +25553,11 @@ snapshots: dependencies: prop-types: 15.8.1 + react-error-boundary@6.0.0(react@19.0.0): + dependencies: + '@babel/runtime': 7.27.1 + react: 19.0.0 + react-fast-compare@3.2.2: {} react-from-dom@0.7.5(react@19.0.0):