fix: a lot of minor improvements for dashboard

apps/start/src/components/report/ReportSaveButton.tsx

@@ -6,7 +6,11 @@ import { SaveIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
 import { useTRPC } from '@/integrations/trpc/react';
-import { useIsFetching, useMutation } from '@tanstack/react-query';
+import {
+  useIsFetching,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query';
 
 import { useParams } from '@tanstack/react-router';
 import { resetDirty } from './reportSlice';
@@ -22,13 +26,20 @@ export function ReportSaveButton({ className }: ReportSaveButtonProps) {
   ];
   const { reportId } = useParams({ strict: false });
   const dispatch = useDispatch();
+  const queryClient = useQueryClient();
   const update = useMutation(
     trpc.report.update.mutationOptions({
-      onSuccess() {
+      onSuccess(res) {
         dispatch(resetDirty());
         toast('Success', {
           description: 'Report updated.',
         });
+        queryClient.invalidateQueries(
+          trpc.report.list.queryFilter({
+            dashboardId: res.dashboardId,
+            projectId: res.projectId,
+          }),
+        );
       },
       onError: handleError,
     }),

apps/start/src/components/report/edit-report-name.tsx

@@ -1,31 +1,35 @@
+import { useDispatch, useSelector } from '@/redux';
 import { PencilIcon } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
+import { Input } from '../ui/input';
+import { setName } from './reportSlice';
 
 type Props = {
   name?: string;
 };
 
 const EditReportName = ({ name }: Props) => {
+  const reportName = useSelector((state) => state.report.name);
+  const dispatch = useDispatch();
   const [isEditing, setIsEditing] = useState(false);
-  const [newName, setNewName] = useState(name);
+  const [newName, setNewName] = useState(reportName);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    setNewName(reportName);
+  }, [reportName]);
+
   const onSubmit = () => {
     if (newName === name) {
       return setIsEditing(false);
     }
 
-    if (newName === '') {
-      setNewName(name);
+    if (!newName) {
+      setNewName(reportName);
     }
 
-    window.dispatchEvent(
-      new CustomEvent('report-name-change', {
-        detail: newName === '' ? name : newName,
-      }),
-    );
-
     setIsEditing(false);
+    dispatch(setName(newName));
   };
 
   useEffect(() => {
@@ -36,11 +40,10 @@ const EditReportName = ({ name }: Props) => {
 
   if (isEditing) {
     return (
-      <div className="flex">
-        <input
+      <div className="flex h-8">
+        <Input
           ref={inputRef}
           type="text"
-          className="w-full rounded-md border border-input p-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
           value={newName}
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
@@ -59,11 +62,14 @@ const EditReportName = ({ name }: Props) => {
   return (
     <button
       type="button"
-      className="flex cursor-pointer select-none items-center gap-2"
+      className="flex cursor-pointer select-none items-center gap-2 text-xl font-medium h-8 group"
       onClick={() => setIsEditing(true)}
     >
       {newName ?? 'Unnamed Report'}
-      <PencilIcon size={16} />
+      <PencilIcon
+        size={16}
+        className="opacity-0 group-hover:opacity-100 transition-opacity"
+      />
     </button>
   );
 };