chore: update project details behavior and v2.4.2 cleanup

Author: imaginarny

src/components/Project/ProjectDetails.tsx

@@ -10,6 +10,7 @@ type ProjectDetailsProps = {
         createdAt: string;
         updatedAt: string;
         buildMode?: string;
+        version: string;
     };
 };
 
@@ -37,6 +38,17 @@ export const ProjectDetails = forwardRef<HTMLDivElement, ProjectDetailsProps>(
             [project.key],
         );
 
+        const showBuildMode = project.type == "Project" && project.buildMode;
+
+        const ProjectSize = () => (
+            <div className="flex flex-col gap-0.5 flex-1 only:contents">
+                <h3 className="flex-1 font-medium text-white">
+                    Project Size
+                </h3>
+                <div className="flex-1">{fileSize(size)}</div>
+            </div>
+        );
+
         return (
             <div
                 className="space-y-3 text-sm [&>*+*]:pt-3 [&>*+*]:border-t [&>*+*]:border-base-content/[8%]"
@@ -61,7 +73,9 @@ export const ProjectDetails = forwardRef<HTMLDivElement, ProjectDetailsProps>(
                     <div className="flex flex-col gap-0.5 flex-1">
                         <h3 className="font-medium text-white">Last Updated</h3>
                         <div>
-                            {new Date(project.updatedAt).toLocaleString()}
+                            {project.updatedAt
+                                ? new Date(project.updatedAt).toLocaleString()
+                                : "Unknown"}
                         </div>
                     </div>
 
@@ -76,23 +90,33 @@ export const ProjectDetails = forwardRef<HTMLDivElement, ProjectDetailsProps>(
                 </div>
 
                 <div className="flex flex-wrap gap-x-4 gap-y-1.5">
-                    {(project.type == "Project" && project.buildMode) && (
-                        <div className="flex flex-col gap-0.5 flex-1 only:contents">
-                            <h3 className="flex-1 font-medium text-white">
-                                Build Mode
-                            </h3>
-                            <div className="flex-1">{project.buildMode}</div>
-                        </div>
-                    )}
-
                     <div className="flex flex-col gap-0.5 flex-1 only:contents">
                         <h3 className="flex-1 font-medium text-white">
-                            Project Size
+                            KAPLAY Version
                         </h3>
-                        <div className="flex-1">{fileSize(size)}</div>
+                        <div className="flex-1">{project.version}</div>
                     </div>
+
+                    {showBuildMode
+                        ? (
+                            <div className="flex flex-col gap-0.5 flex-1 only:contents">
+                                <h3 className="flex-1 font-medium text-white">
+                                    Build Mode
+                                </h3>
+                                <div className="flex-1">
+                                    {project.buildMode}
+                                </div>
+                            </div>
+                        )
+                        : <ProjectSize />}
                 </div>
 
+                {showBuildMode && (
+                    <div className="flex flex-wrap gap-x-4 gap-y-1.5">
+                        <ProjectSize />
+                    </div>
+                )}
+
                 {tags.length > 0 && (
                     <div className="flex flex-wrap gap-x-4 gap-y-1.5">
                         <div className="flex flex-col gap-0.5 flex-1">

src/components/Toolbar/ToolbarProjectDropdown.tsx

@@ -117,6 +117,7 @@ export const ToolbarProjectDropdown: FC = () => {
 
             <ToolbarDropdownButton
                 onClick={() => openProjectDetails()}
+                disabled={projectKey == null}
             >
                 Details
             </ToolbarDropdownButton>

src/features/Projects/services/projectActions.tsx

@@ -21,9 +21,13 @@ type DeleteOptions = {
     };
 };
 
-export const openProjectDetails = (
+export function openProjectPreferences(key?: string) {
+    openDialog("project-preferences", { ...(key && { projectKey: key }) });
+}
+
+export function openProjectDetails(
     key: string | null = useProject.getState().projectKey,
-) => {
+) {
     if (!key) {
         throw new Error(
             `Project doesn't exist: ${key}`,
@@ -40,12 +44,12 @@ export const openProjectDetails = (
             confirmText: "Close",
         },
     );
-};
+}
 
-export const exportProject = (
+export function exportProject(
     key: string | null = useProject.getState().projectKey,
     options?: ToastOptions,
-) => {
+) {
     const { saveNewProject, getProjectMetadata } = useProject.getState();
 
     if (!key) {
@@ -75,9 +79,9 @@ export const exportProject = (
         ...(options?.toastContainerId
             && { containerId: options?.toastContainerId }),
     });
-};
+}
 
-export const cloneProject = (key?: string, options?: ToastOptions) => {
+export function cloneProject(key?: string, options?: ToastOptions) {
     const clonedOk = useProject.getState().cloneProject(key);
 
     toast(
@@ -90,7 +94,7 @@ export const cloneProject = (key?: string, options?: ToastOptions) => {
                 && { containerId: options?.toastContainerId }),
         },
     );
-};
+}
 
 export async function confirmAndDeleteProject(
     key: string | null = useProject.getState().projectKey,
@@ -201,7 +205,3 @@ export async function confirmAndDeleteProject(
 
     return true;
 }
-
-export function openProjectPreferences(key?: string) {
-    openDialog("project-preferences", { ...(key && { projectKey: key }) });
-}

src/features/Projects/stores/slices/project.ts

@@ -141,7 +141,7 @@ export interface ProjectSlice {
      */
     unserializeProject(id: string): Project;
     /**
-     * Remove project from localStorage, current if not specified
+     * Clone any stored project, current if not specified
      *
      * @param id - Optional roject id
      * @returns If cloned project successfully