moved actions to topPanel and added scrollbar right

Author: trae-op

package.json

@@ -1,7 +1,7 @@
 {
   "name": "electron-gp",
   "private": true,
-  "version": "0.2.9",
+  "version": "0.2.10",
   "type": "module",
   "main": "dist-main/app.js",
   "author": "traeop",

src/main/app/window.ts

@@ -9,17 +9,17 @@ import { AuthService } from "../auth/service.js";
 import { ControlUpdateWindowsPlatformService } from "../updater/services/windows/control-update.js";
 import { TrayService } from "../tray/service.js";
 import { destroyWindows } from "../@core/control-window/destroy.js";
-import { ipcWebContentsSend } from "../$shared/utils.js";
+import { ipcWebContentsSend, isDev } from "../$shared/utils.js";
 import { menu } from "../config.js";
 
 @WindowManager<TWindows["main"]>({
   hash: "window:main",
   isCache: true,
   options: {
-    resizable: false,
+    resizable: isDev(),
     show: false,
-    width: 600,
-    height: 600,
+    width: 280,
+    height: 500,
   },
 })
 export class AppWindow implements TWindowManager {

src/renderer/layouts/Main.tsx

@@ -13,6 +13,8 @@ const theme = createTheme({
     MuiCssBaseline: {
       styleOverrides: {
         body: {
+          overflowY: "auto",
+          overflowX: "hidden",
           "& #root": {
             width: "100%",
           },

src/renderer/ui-business/AddResource/components/AddButton.tsx

@@ -9,7 +9,7 @@ export const AddButton = memo(({ ...other }: TPropsButtonProvider) => {
 
   return (
     <IconButton onClick={handleAdd} {...other}>
-      <AddCircleIcon fontSize="large" />
+      <AddCircleIcon fontSize="medium" />
     </IconButton>
   );
 });

src/renderer/ui-business/Resources/components/Item.tsx

@@ -20,7 +20,7 @@ export const Item = memo(
     const { isMasterKey, isDisabledActions } = useControlContext();
 
     return (
-      <Card sx={{ minWidth: 170 }}>
+      <Card sx={{ width: "100%" }}>
         <CardContent>
           <Typography gutterBottom variant="h5">
             {name}

src/renderer/ui-business/Resources/components/Items.tsx

@@ -1,42 +1,14 @@
 import { memo } from "react";
-import Stack from "@mui/material/Stack";
-import Skeleton from "@mui/material/Skeleton";
-import Typography from "@mui/material/Typography";
-import CircularProgress from "@mui/material/CircularProgress";
-import { useControlContext } from "../hooks/useControlContext";
+import { useControlContext } from "../hooks";
 import { useIpc } from "../hooks/useIpc";
 import { Item } from "./Item";
 
-const countResources = localStorage.getItem("count-of-resources");
-
 export const Items = memo(() => {
   useIpc();
   const { list } = useControlContext();
 
   if (list === undefined) {
-    return (
-      <Stack spacing={2} direction="row" sx={{ flexWrap: "wrap" }} useFlexGap>
-        {countResources !== null && Number(countResources) ? (
-          Array.from({ length: Number(countResources) }, (_, i) => i).map(
-            (_, i) => (
-              <Skeleton key={i} variant="rounded" width={170} height={110} />
-            )
-          )
-        ) : (
-          <CircularProgress size={70} />
-        )}
-      </Stack>
-    );
-  }
-
-  if (list !== undefined && list.length === 0) {
-    return (
-      <Stack spacing={2} direction="row" sx={{ flexWrap: "wrap" }} useFlexGap>
-        <Typography gutterBottom variant="h5">
-          Empty
-        </Typography>
-      </Stack>
-    );
+    return null;
   }
 
   return list.map((item) => {

src/renderer/ui-business/Resources/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./useIpc";
+export * from "./useControlContext";

src/renderer/ui-business/Resources/hooks/useIpc.ts

@@ -11,7 +11,6 @@ export const useIpc = () => {
   useEffect(() => {
     window.electron.receive.subscribeResources(({ items }) => {
       setItems(items);
-      localStorage.setItem("count-of-resources", items.length + "");
     });
   }, []);
 };

src/renderer/ui-composites/AppVersion/components/Container.tsx

@@ -1,7 +1,9 @@
 import Typography from "@mui/material/Typography";
+import Avatar from "@mui/material/Avatar";
 import { useInvoke } from "../hooks";
 import { memo } from "react";
 import type { TPropsContainer } from "./types";
+import logo from "../../../../assets/72x72.png";
 
 export const Container = memo(({ ...other }: TPropsContainer) => {
   const { version } = useInvoke();
@@ -10,5 +12,14 @@ export const Container = memo(({ ...other }: TPropsContainer) => {
     return null;
   }
 
-  return <Typography {...other}>Current v{version}</Typography>;
+  return (
+    <>
+      <Avatar
+        sx={{ width: 28, height: 28 }}
+        alt="logo of electron-gp"
+        src={logo}
+      />
+      <Typography {...other}>v{version}</Typography>
+    </>
+  );
 });

src/renderer/windows/home/components/ActionsKey.tsx

@@ -13,31 +13,15 @@ const ActionsKey = memo(({ isMasterKey }: TPropsHomeChildren) => {
 
   if (!isMasterKey) {
     return (
-      <IconButton
-        disabled={!isAuthenticated}
-        sx={{
-          position: "fixed",
-          bottom: 10,
-          right: 10,
-        }}
-        onClick={handleKey}
-      >
-        <HttpsIcon fontSize="large" />
+      <IconButton size="small" disabled={!isAuthenticated} onClick={handleKey}>
+        <HttpsIcon fontSize="medium" />
       </IconButton>
     );
   }
 
   return (
-    <IconButton
-      disabled={!isAuthenticated}
-      sx={{
-        position: "fixed",
-        bottom: 10,
-        right: 70,
-      }}
-      onClick={handleKey}
-    >
-      <NoEncryptionGmailerrorredIcon fontSize="large" />
+    <IconButton size="small" disabled={!isAuthenticated} onClick={handleKey}>
+      <NoEncryptionGmailerrorredIcon fontSize="medium" />
     </IconButton>
   );
 });