Merge pull request #67 from pacholoamit/feat/auto-start

feat/auto start

package.json

@@ -28,13 +28,13 @@
     "react-apexcharts": "^1.4.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",
+    "tauri-plugin-autostart-api": "https://github.com/tauri-apps/tauri-plugin-autostart",
     "tauri-plugin-log-api": "https://github.com/tauri-apps/tauri-plugin-log",
     "tauri-plugin-store": "https://github.com/tauri-apps/tauri-plugin-store"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.3.0",
     "@types/lodash.sortby": "^4.7.7",
-    "@types/luxon": "^3.3.0",
     "@types/node": "^20.1.0",
     "@types/react": "^18.2.5",
     "@types/react-dom": "^18.2.4",

src-tauri/Cargo.toml

@@ -23,6 +23,7 @@ tauri = { version = "1.2.3", features = ["api-all", "system-tray", "updater"] }
 sysinfo = "0.29.0"
 tauri-plugin-log = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
+tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 log = "^0.4"
 
 

src-tauri/src/main.rs

@@ -12,6 +12,7 @@ use app::AppState;
 use std::time::Duration;
 use tauri::api::path::cache_dir;
 use tauri::{CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu};
+use tauri_plugin_autostart::MacosLauncher;
 use tauri_plugin_log::LogTarget;
 
 fn build_and_run_app(app: AppState) {
@@ -21,9 +22,15 @@ fn build_and_run_app(app: AppState) {
 
     let store_plugin = tauri_plugin_store::Builder::default().build();
 
+    let auto_start_plugin = tauri_plugin_autostart::init(MacosLauncher::LaunchAgent, Some(vec![]));
+
+    let system_tray = SystemTray::new()
+        .with_menu(SystemTrayMenu::new().add_item(CustomMenuItem::new("quit".to_string(), "Quit")));
+
     tauri::Builder::default()
         .plugin(log_plugin)
         .plugin(store_plugin)
+        .plugin(auto_start_plugin)
         .setup(|app| {
             let window = app.get_window("main").unwrap();
             let state = AppState::new();
@@ -44,9 +51,7 @@ fn build_and_run_app(app: AppState) {
 
             Ok(())
         })
-        .system_tray(SystemTray::new().with_menu(
-            SystemTrayMenu::new().add_item(CustomMenuItem::new("quit".to_string(), "Quit")),
-        ))
+        .system_tray(system_tray)
         .on_system_tray_event(|app, event| match event {
             SystemTrayEvent::MenuItemClick { id, .. } => {
                 let window = app.get_window("main").unwrap();

src/components/page-wrapper.tsx

@@ -8,7 +8,7 @@ interface PageWrapperProps {
 const PageWrapper: React.FC<PageWrapperProps> = ({ children, name }) => {
   return (
     <Stack spacing="lg">
-      <Title>{name}</Title>
+      <Title order={2}>{name}</Title>
       {children}
     </Stack>
   );

src/features/metrics/components/memory/memory.area-chart.tsx

@@ -4,10 +4,6 @@ import AreaChart, { useAreaChartState } from "@/components/area-chart";
 import useServerEventsContext from "@/hooks/useServerEventsContext";
 import { useEffect } from "react";
 
-// TODO: Remove Luxon and ChartJS
-// TODO: Make timestamp work automatically
-// TODO: fix time
-
 const MemoryAreaChart: React.FC = ({}) => {
   const { memory } = useServerEventsContext();
   const [chartOptions, setChartOptions] = useAreaChartState({

src/features/metrics/pages/disks.page.tsx

@@ -11,7 +11,6 @@ const DisksPage = () => {
       <Grid>
         {disks?.map((disk, i) => (
           <React.Fragment key={disk.id + i}>
-            {/* <Grid.Col md={6} sm={12}></Grid.Col> */}
             <Grid.Col span={12}>
               <DiskInfo key={disk.id} disk={disk} />
             </Grid.Col>

src/features/settings/pages/settings.page.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import AutoStartSettingsView from "@/features/settings/views/autostart.view";
+import PageWrapper from "@/components/page-wrapper";
+import Card from "@/components/card";
+
+import { Icon24Hours } from "@tabler/icons-react";
+import { Center, Grid, NavLink } from "@mantine/core";
+import { useState } from "react";
+
+const settings = [{ icon: Icon24Hours, label: "Auto Start", view: <AutoStartSettingsView /> }];
+
+const SettingsPage = () => {
+  const [active, setActive] = useState(0);
+  const items = settings.map((item, index) => (
+    <React.Fragment key={item.label}>
+      <Grid.Col span={4}>
+        <NavLink
+          key={item.label}
+          active={index === active}
+          label={item.label}
+          icon={<item.icon size="1rem" stroke={1.5} />}
+          onClick={() => {
+            setActive(index);
+          }}
+        />
+      </Grid.Col>
+      <Grid.Col span={8}>{index === active && item.view}</Grid.Col>
+    </React.Fragment>
+  ));
+
+  return (
+    <PageWrapper name="Settings">
+      <Center>
+        <Card>
+          <Grid style={{ width: "45rem" }}>{items}</Grid>
+        </Card>
+      </Center>
+    </PageWrapper>
+  );
+};
+
+export default SettingsPage;

src/features/settings/views/autostart.view.tsx

@@ -0,0 +1,36 @@
+import { Skeleton, Switch } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { autostart } from "@/lib";
+
+const AutoStartSettingsView = () => {
+  const [checked, setChecked] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const checkAutoStart = async () => setChecked(await autostart.isEnabled());
+
+  useEffect(() => {
+    checkAutoStart();
+    setLoading(false);
+  }, [checkAutoStart]);
+
+  const onChange = () => {
+    if (!checked) {
+      autostart.enable();
+    } else {
+      autostart.disable();
+    }
+    setChecked(!checked);
+  };
+
+  if (loading) {
+    return (
+      <>
+        <Skeleton height={8} radius="xl" />
+        <Skeleton height={8} mt={6} radius="xl" />
+        <Skeleton height={8} mt={6} width="70%" radius="xl" />
+      </>
+    );
+  }
+  return <Switch checked={checked} onChange={onChange} label="Start on system startup" />;
+};
+
+export default AutoStartSettingsView;

src/layout/components/navbar-options.tsx

@@ -1,18 +1,6 @@
 import useMediaQuery from "@/hooks/useMediaQuery";
-import {
-  IconLayoutDashboard,
-  IconServer,
-  IconArticle,
-  IconCpu,
-} from "@tabler/icons-react";
-import {
-  UnstyledButton,
-  Group,
-  ThemeIcon,
-  Text,
-  MediaQuery,
-  MantineTheme,
-} from "@mantine/core";
+import { IconLayoutDashboard, IconServer, IconArticle, IconCpu, IconSettings } from "@tabler/icons-react";
+import { UnstyledButton, Group, ThemeIcon, Text, MediaQuery, MantineTheme } from "@mantine/core";
 import { useNavigate } from "react-router-dom";
 
 interface NavbarOptionProps {
@@ -42,7 +30,7 @@ const NavbarOption: React.FC<NavbarOptionProps> = (props) => {
       <Group position={position}>
         <ThemeIcon variant="gradient">{icon}</ThemeIcon>
         <MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
-          <Text>{label}</Text>
+          <Text size={"sm"}>{label}</Text>
         </MediaQuery>
       </Group>
     </UnstyledButton>
@@ -70,15 +58,15 @@ const NavbarOptions = () => {
       },
     },
     {
-      icon: <IconArticle size={16} />,
-      label: "Logs",
-      onClick: () => {},
+      icon: <IconSettings size={16} />,
+      label: "Settings",
+      onClick: () => {
+        navigate("/settings");
+      },
     },
   ];
 
-  const navbarOptions = options.map((option) => (
-    <NavbarOption {...option} key={option.label} />
-  ));
+  const navbarOptions = options.map((option) => <NavbarOption {...option} key={option.label} />);
   return <>{navbarOptions}</>;
 };
 

src/lib/autostart.ts

@@ -0,0 +1,23 @@
+import { enable, isEnabled, disable } from "tauri-plugin-autostart-api";
+
+export const enableAutostart = async () => {
+  if (await isEnabled()) {
+    return;
+  }
+
+  await enable();
+};
+
+export const disableAutostart = async () => {
+  if (!(await isEnabled())) {
+    return;
+  }
+
+  await disable();
+};
+
+export const autostart = {
+  enable: enableAutostart,
+  disable: disableAutostart,
+  isEnabled,
+};

src/lib/index.ts

@@ -1,3 +1,4 @@
 export * from "@/lib/helpers";
 export * from "@/lib/types";
 export * from "@/lib/store";
+export * from "@/lib/autostart";

src/routes/index.tsx

@@ -3,6 +3,7 @@ import Layout from "@/layout";
 import DashboardPage from "@/features/metrics/pages/dashboard.page";
 import DisksPage from "@/features/metrics/pages/disks.page";
 import ProcessesPage from "@/features/processes/pages/processes.page";
+import SettingsPage from "@/features/settings/pages/settings.page";
 
 const AppRoutes: React.FC = () => {
   return (
@@ -12,6 +13,7 @@ const AppRoutes: React.FC = () => {
           <Route path="/" element={<DashboardPage />} />
           <Route path="/disks" element={<DisksPage />} />
           <Route path="/processes" element={<ProcessesPage />} />
+          <Route path="/settings" element={<SettingsPage />} />
         </Route>
       </Routes>
     </Router>