feat: allow to jump to problem on ProblemInfoMenu

src/components/ProblemInfoMenu.tsx

@@ -44,7 +44,11 @@ export default function ProblemInfoMenu(props: ProblemInfoMenuProps) {
             <Tbody>
                 <Tr>
                     <Td>Title</Td>
-                    <Td>{props.data?.problem.title || "..."}</Td>
+                    <Td>
+                        <Link as={ReactRouterLink} color="blue.500" to={`/problem/${props.data?.problem.meta.ID || 0}`}>
+                            {props.data?.problem.title || "..."}
+                        </Link>
+                    </Td>
                 </Tr>
                 <Tr>
                     <Td>Author</Td>

src/components/SubmissionTable.tsx

@@ -93,7 +93,11 @@ export default function SubmissionTable(props: SubmissionTableProps) {
         pageIndex: 0,
         pageSize: 10,
     });
-    const { data: info, isFetching } = useListQuery({
+    const {
+        data: info,
+        isFetching,
+        refetch,
+    } = useListQuery({
         pid: props.pid || 0,
         uid: props.uid || 0,
         offset: paging.pageIndex * paging.pageSize,
@@ -110,6 +114,7 @@ export default function SubmissionTable(props: SubmissionTableProps) {
                 paging={paging}
                 setPaging={setPaging}
                 isLoading={isFetching}
+                refetch={refetch}
             />
         </>
     );

src/components/Table.tsx

@@ -18,7 +18,13 @@ import {
 } from "@chakra-ui/react";
 import type { ColumnDef, PaginationState } from "@tanstack/react-table";
 import { flexRender, getCoreRowModel, getFilteredRowModel, useReactTable } from "@tanstack/react-table";
-import { HiChevronDoubleLeft, HiChevronDoubleRight, HiChevronLeft, HiChevronRight } from "react-icons/hi";
+import {
+    HiChevronDoubleLeft,
+    HiChevronDoubleRight,
+    HiChevronLeft,
+    HiChevronRight,
+    HiOutlineRefresh,
+} from "react-icons/hi";
 
 interface TableProps<T> {
     header?: React.ReactNode;
@@ -28,6 +34,7 @@ interface TableProps<T> {
     paging: PaginationState;
     setPaging: (state: PaginationState | ((old: PaginationState) => PaginationState)) => void;
     isLoading: boolean;
+    refetch?: () => unknown;
 }
 
 export default function Table<T>(props: TableProps<T>) {
@@ -117,13 +124,28 @@ export default function Table<T>(props: TableProps<T>) {
                             <Text mr={4}>
                                 Page {pageIndex + 1} of {pageCount}
                             </Text>
-                            <Select w={28} value={pageSize} onChange={(e) => table.setPageSize(Number(e.target.value))}>
+                            <Select
+                                w={28}
+                                mr={4}
+                                value={pageSize}
+                                onChange={(e) => table.setPageSize(Number(e.target.value))}
+                            >
                                 {[5, 10, 15, 20].map((pageSize) => (
                                     <option key={pageSize} value={pageSize}>
                                         Show {pageSize}
                                     </option>
                                 ))}
                             </Select>
+                            {props.refetch && (
+                                <IconButton
+                                    aria-label="Refresh"
+                                    size="sm"
+                                    isRound={true}
+                                    variant="outline"
+                                    icon={<HiOutlineRefresh size={18} />}
+                                    onClick={props.refetch}
+                                />
+                            )}
                         </Flex>
                         <Flex flexDirection="row">
                             <IconButton

src/pages/ProblemDetailPage.tsx

@@ -44,7 +44,7 @@ export default function ProblemDetailPage() {
                 <Box w="100%">
                     <Markdown markdown={details?.body.problem.statement || ""} />
                 </Box>
-                <Box maxW="480px">
+                <Box minW="280px">
                     <ProblemInfoMenu data={details?.body} action={actionBtn} />
                 </Box>
             </Stack>

src/pages/ProfilePage.tsx

@@ -45,7 +45,7 @@ export default function ProfilePage() {
                 <Box w="100%">
                     <SubmissionTable uid={uid} />
                 </Box>
-                <Box maxW="480px">{userInfoMenu}</Box>
+                <Box minW="280px">{userInfoMenu}</Box>
             </Stack>
         </>
     );

src/pages/StatusPage.tsx

@@ -141,7 +141,7 @@ export default function StatusPage() {
                         </TabPanels>
                     </Tabs>
                 </Box>
-                <Box maxW="480px">
+                <Box minW="280px">
                     <ProblemInfoMenu data={problem?.body} />
                 </Box>
             </Stack>

src/pages/SubmissionListPage.tsx

@@ -18,7 +18,7 @@ export default function SubmissionListPage() {
                 <Box w="100%">
                     <SubmissionTable pid={pid} />
                 </Box>
-                <Box maxW="480px">
+                <Box minW="280px">
                     <ProblemInfoMenu data={details?.body} />
                 </Box>
             </Stack>

src/pages/SubmitPage.tsx

@@ -56,7 +56,7 @@ export default function SubmitPage() {
                 <Box w="100%">
                     <Editor mode={LanguageMap[lang].mode} onChange={setCode} />
                 </Box>
-                <Box maxW="480px">
+                <Box minW="280px">
                     <ProblemInfoMenu data={details?.body} onLanguageSelect={setLang} action={actionBtn} />
                 </Box>
             </Stack>