fix: share overview

apps/start/src/components/auth/share-enter-password.tsx

@@ -12,7 +12,9 @@ export function ShareEnterPassword({ shareId }: { shareId: string }) {
   const trpc = useTRPC();
   const mutation = useMutation(
     trpc.auth.signInShare.mutationOptions({
-      onSuccess() {},
+      onSuccess() {
+        window.location.reload();
+      },
       onError() {
         toast.error('Incorrect password');
       },

apps/start/src/components/full-page-loading-state.tsx

@@ -11,14 +11,13 @@ const FullPageLoadingState = ({
     <FullPageEmptyState
       className="min-h-[calc(100vh-theme(spacing.16))]"
       title={title}
+      description={description}
       icon={
         ((props) => (
           <Loader2Icon {...props} className="animate-spin" />
         )) as LucideIcon
       }
-    >
+    />
-      {description}
-    </FullPageEmptyState>
   );
 };
 

apps/start/src/components/overview/overview-metrics.tsx

@@ -109,7 +109,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
 
   return (
     <>
-      <div className="relative -top-0.5 col-span-6 -m-4 mb-0 mt-0 md:m-0">
+      <div className="relative -top-0.5 col-span-6 mb-0 mt-0 md:m-0">
         <div className="card mb-2 grid grid-cols-4 overflow-hidden rounded-md">
           {TITLES.map((title, index) => (
             <OverviewMetricCard

apps/start/src/components/overview/overview-share.tsx

@@ -19,16 +19,9 @@ interface OverviewShareProps {
 export function OverviewShare({ projectId }: OverviewShareProps) {
   const trpc = useTRPC();
   const query = useQuery(
-    trpc.share.overview.queryOptions(
+    trpc.share.overview.queryOptions({
-      {
+      projectId,
-        projectId,
+    }),
-      },
-      {
-        retry(failureCount, error) {
-          return error.message !== 'Share not found' && failureCount < 3;
-        },
-      },
-    ),
   );
   const data = query.data;
   const mutation = useMutation(

apps/start/src/routes/share.overview.$shareId.tsx

@@ -1,4 +1,5 @@
 import { ShareEnterPassword } from '@/components/auth/share-enter-password';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
 import FullPageLoadingState from '@/components/full-page-loading-state';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { LiveCounter } from '@/components/overview/live-counter';
@@ -10,8 +11,9 @@ import OverviewTopGeo from '@/components/overview/overview-top-geo';
 import OverviewTopPages from '@/components/overview/overview-top-pages';
 import OverviewTopSources from '@/components/overview/overview-top-sources';
 import { useTRPC } from '@/integrations/trpc/react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, notFound, useSearch } from '@tanstack/react-router';
+import { EyeClosedIcon, FrownIcon } from 'lucide-react';
 import { z } from 'zod';
 
 const shareSearchSchema = z.object({
@@ -29,13 +31,20 @@ export const Route = createFileRoute('/share/overview/$shareId')({
     );
   },
   pendingComponent: FullPageLoadingState,
+  errorComponent: () => (
+    <FullPageEmptyState
+      title="Share not found"
+      description="The overview you are looking for does not exist."
+      className="min-h-[calc(100vh-theme(spacing.16))]"
+    />
+  ),
 });
 
 function RouteComponent() {
   const { shareId } = Route.useParams();
   const { header } = useSearch({ from: '/share/overview/$shareId' });
   const trpc = useTRPC();
-  const shareQuery = useQuery(
+  const shareQuery = useSuspenseQuery(
     trpc.share.overview.queryOptions({
       shareId,
     }),
@@ -69,7 +78,7 @@ function RouteComponent() {
   return (
     <div>
       {isHeaderVisible && (
-        <div className="flex items-center justify-between border-b border-border bg-background p-4">
+        <div className="mx-auto max-w-7xl justify-between row gap-4 p-4 pb-0">
           <div className="col gap-1">
             <span className="text-sm">{share.organization?.name}</span>
             <h1 className="text-xl font-medium">{share.project?.name}</h1>
@@ -77,6 +86,7 @@ function RouteComponent() {
           <a
             href="https://openpanel.dev?utm_source=openpanel.dev&utm_medium=share"
             className="col gap-1 items-end"
+            title="OpenPanel"
           >
             <span className="text-xs">POWERED BY</span>
             <span className="text-xl font-medium">openpanel.dev</span>

packages/trpc/src/routers/share.ts

@@ -6,12 +6,12 @@ import { zShareOverview } from '@openpanel/validation';
 import { hashPassword } from '@openpanel/auth';
 import { z } from 'zod';
 import { TRPCNotFoundError } from '../errors';
-import { createTRPCRouter, protectedProcedure } from '../trpc';
+import { createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
 
 const uid = new ShortUniqueId({ length: 6 });
 
 export const shareRouter = createTRPCRouter({
-  overview: protectedProcedure
+  overview: publicProcedure
     .input(
       z
         .object({