Merge pull request #132 from pacholoamit/feat/improve-settings

feat/improve settings

package.json

@@ -33,7 +33,9 @@
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.3.1",
     "react-geiger": "^1.2.0",
+    "react-github-btn": "^1.4.0",
     "react-router-dom": "^6.23.1",
+    "react-text-gradients": "^1.0.2",
     "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"
@@ -49,4 +51,4 @@
     "vite": "^5.2.11"
   },
   "packageManager": "[email protected]"
-}
+}

src-tauri/src/win/window.rs

@@ -18,21 +18,13 @@ use windows::Win32::Graphics::Dwm::DWMWA_USE_IMMERSIVE_DARK_MODE;
 use windows::Win32::UI::Controls::SetWindowThemeAttribute;
 use windows::Win32::UI::Controls::WTNCA_NODRAWCAPTION;
 
-use std::path::PathBuf;
-use tauri::Wry;
-use tauri_plugin_store::with_store;
-use tauri_plugin_store::StoreCollection;
 use winver::WindowsVersion;
 
 fn hex_color_to_colorref(color: HexColor) -> COLORREF {
     // TODO: Remove this unsafe, This operation doesn't need to be unsafe!
     unsafe { COLORREF(transmute::<[u8; 4], u32>([color.r, color.g, color.b, 0])) }
 }
 
-fn hex_color_to_string(color: HexColor) -> String {
-    format!("#{:02X}{:02X}{:02X}", color.r, color.g, color.b)
-}
-
 struct WinThemeAttribute {
     flag: u32,
     mask: u32,

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

@@ -7,6 +7,7 @@ import MemoryRadialChart from "@/features/metrics/components/memory/memory.radia
 import SwapRadialChart from "@/features/metrics/components/swap/swap.radial-chart";
 import CpusBarChart from "@/features/metrics/components/cpus/cpus.bar-chart";
 import GlobalCpuStatsRing from "@/features/metrics/components/global-cpu/global-cpu.stats-ring";
+
 import MemoryStatsRing from "@/features/metrics/components/memory/memory.stats-ring";
 import SwapStatsRing from "@/features/metrics/components/swap/swap.stats-ring";
 import DiskStatsRing from "@/features/metrics/components/disks/disk.stats-ring";

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

@@ -1,51 +1,191 @@
-import React from "react";
-import GeneralSettingsView from "@/features/settings/views/general.view";
-import AboutView from "@/features/settings/views/about.view";
+import { useEffect, useState } from "react";
+import GitHubButton from "react-github-btn";
 import PageWrapper from "@/components/page-wrapper";
 import Card from "@/components/card";
+import { Grid, Skeleton, Space, Stack, Switch, Title, Text, SegmentedControl, Group, ThemeIcon } from "@mantine/core";
+import { useTheme } from "@/hooks/useTheme";
+import { autostart } from "@/lib";
+import { THEME_OPTION } from "@/providers/theme.provider";
+import { LinearGradient } from "react-text-gradients";
 
-import { IconGitBranch, IconSettings2 } from "@tabler/icons-react";
-import { Center, Grid, NavLink } from "@mantine/core";
-import { useState } from "react";
+const GeneralSectionInfo = () => {
+  return (
+    <>
+      <Title order={4}>General</Title>
+      <Text c="dimmed" size={"sm"}>
+        Customize your application settings.
+      </Text>
+    </>
+  );
+};
+const GeneralSection = () => {
+  const [checked, setChecked] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const checkAutoStart = async () => setChecked(await autostart.isEnabled());
+  const { setTheme, currentTheme } = useTheme();
+
+  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 (
+    <>
+      <Grid gutter={"xl"}>
+        <Grid.Col span={12} style={{ fontSize: "1.2rem" }}>
+          <Text size={"sm"} color="white">
+            Theme
+          </Text>
+          <SegmentedControl
+            defaultValue={currentTheme}
+            size="xs"
+            onChange={(value) => setTheme(value as THEME_OPTION)}
+            data={[
+              { value: THEME_OPTION.SLATE, label: "Slate" },
+              { value: THEME_OPTION.MIDNIGHT, label: "Midnight" },
+              { value: THEME_OPTION.BUMBLEBEE, label: "Bumblebee" },
+            ]}
+          />
+        </Grid.Col>
+        <Grid.Col span={12} style={{ fontSize: "1.2rem" }}>
+          <Switch checked={checked} onChange={onChange} label="Start on system startup" />
+        </Grid.Col>
+      </Grid>
+    </>
+  );
+};
+
+const AboutSectionInfo = () => {
+  return (
+    <>
+      <Title order={4}>About</Title>
+      <Text c="dimmed" size={"sm"}>
+        Get information about the application.
+      </Text>
+    </>
+  );
+};
+const BuyMeACoffee = () => {
+  return (
+    <a href="https://www.buymeacoffee.com/pacholoamit" target="_blank" rel="noopener noreferrer">
+      <img
+        src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png"
+        alt="Buy Me A Coffee"
+        style={{
+          height: "26px",
+          width: "96px",
+          marginBottom: "8px",
+        }}
+      />
+    </a>
+  );
+};
+const AboutSection = () => {
+  return (
+    <Stack spacing={"lg"}>
+      <Text>Pachtop will always remain open-source and free to use. 🤗</Text>
+      <Group>
+        <BuyMeACoffee />
+        <GitHubButton
+          href="https://github.com/sponsors/pacholoamit"
+          // data-color-scheme="no-preference: dark; light: dark; dark: dark;"
+          data-icon="octicon-heart"
+          data-size="large"
+          aria-label="Sponsor @pacholoamit on GitHub"
+        >
+          Sponsor
+        </GitHubButton>
+
+        <GitHubButton
+          href="https://github.com/pacholoamit/pachtop"
+          // data-color-scheme="no-preference: dark; light: dark; dark: dark;"
+          data-icon="octicon-star"
+          data-size="large"
+          data-show-count="true"
+          aria-label="Star pacholoamit/pachtop on GitHub"
+        >
+          Star
+        </GitHubButton>
+      </Group>
+    </Stack>
+  );
+};
 
-const settings = [
-  { icon: IconSettings2, label: "General", view: <GeneralSettingsView /> },
+const SponsorsSectionInfo = () => {
+  return (
+    <>
+      <Title order={4}>Sponsors</Title>
+      <Text c="dimmed" size={"sm"}>
+        A big shoutout to these amazing people who sponsored the project. Your support means a lot to me. ❤️
+      </Text>
+    </>
+  );
+};
 
-  // TODO: FIX responsiveness
-  // {
-  //   icon: IconGitBranch,
-  //   label: "About",
-  //   view: <AboutView />,
-  // },
-];
+const SponsorsSection = () => {
+  return (
+    <Stack spacing={"lg"}>
+      <Title order={1}>
+        <LinearGradient gradient={["to left", "#17acff ,#ff68f0"]}>Coming soon...</LinearGradient>
+      </Title>
+    </Stack>
+  );
+};
 
 const SettingsPage = () => {
-  const [active, setActive] = useState(0);
-
-  const items = settings.map((item, index) => (
-    <React.Fragment key={item.label}>
-      <Grid.Col span={3}>
-        <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" height={"94vh"}>
-      <Center>
-        <Card style={{ height: "85vh" }}>
-          <Grid style={{ width: "50rem" }}>{items}</Grid>
-        </Card>
-      </Center>
+  return (
+    <PageWrapper name="Settings">
+      <Card style={{ padding: "16px", height: "80vh" }}>
+        <Stack justify="space-around" spacing={"lg"}>
+          <Grid grow>
+            <Grid.Col span={4}>
+              <GeneralSectionInfo />
+            </Grid.Col>
+            <Grid.Col span={4}>
+              <GeneralSection />
+            </Grid.Col>
+            <Grid.Col span={4} />
+            <Grid.Col span={4}>
+              <Space h={"xl"} />
+              <AboutSectionInfo />
+            </Grid.Col>
+            <Grid.Col span={4}>
+              <Space h={"xl"} />
+              <AboutSection />
+            </Grid.Col>
+            <Grid.Col span={4} />
+            <Grid.Col span={4}>
+              <Space h={"xl"} />
+              <SponsorsSectionInfo />
+            </Grid.Col>
+            <Grid.Col span={4}>
+              <Space h={"xl"} />
+              <Space h={"xl"} />
+              <SponsorsSection />
+            </Grid.Col>
+            <Grid.Col span={4} />
+          </Grid>
+        </Stack>
+      </Card>
     </PageWrapper>
   );
 };