From cf7b1f000a7b33df48ce3883b4c837c4a87768cc Mon Sep 17 00:00:00 2001
From: Seb <144435+rmtsrc@users.noreply.github.com>
Date: Sun, 18 Jun 2023 09:59:22 +0100
Subject: [PATCH 1/2] feat(enhancement): use system dark mode (#458)

* Use prefers-color-scheme

* Remove theme store
---
 src/components/NavbarButtons.vue | 11 +----------
 src/stores/style.store.ts        |  6 ++++--
 src/ui/theme/theme.models.ts     |  6 +++---
 src/ui/theme/theme.store.ts      | 20 --------------------
 4 files changed, 8 insertions(+), 35 deletions(-)
 delete mode 100644 src/ui/theme/theme.store.ts

diff --git a/src/components/NavbarButtons.vue b/src/components/NavbarButtons.vue
index 81661d9f..5b1a3a4e 100644
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -1,18 +1,9 @@
 <script setup lang="ts">
 import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
 import { useStyleStore } from '@/stores/style.store';
-import { useThemeStore } from '@/ui/theme/theme.store';
 
 const styleStore = useStyleStore();
 const { isDarkTheme } = toRefs(styleStore);
-
-const themeStore = useThemeStore();
-
-function toggleDarkTheme() {
-  isDarkTheme.value = !isDarkTheme.value;
-
-  themeStore.toggleTheme();
-}
 </script>
 
 <template>
@@ -58,7 +49,7 @@ function toggleDarkTheme() {
   </n-tooltip>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="toggleDarkTheme">
+      <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="() => styleStore.toggleDark()">
         <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
         <n-icon v-else size="25" :component="Moon" />
       </c-button>
diff --git a/src/stores/style.store.ts b/src/stores/style.store.ts
index d70bd768..8342a880 100644
--- a/src/stores/style.store.ts
+++ b/src/stores/style.store.ts
@@ -1,10 +1,11 @@
-import { useMediaQuery, useStorage } from '@vueuse/core';
+import { useDark, useMediaQuery, useStorage, useToggle } from '@vueuse/core';
 import { defineStore } from 'pinia';
 import { type Ref, watch } from 'vue';
 
 export const useStyleStore = defineStore('style', {
   state: () => {
-    const isDarkTheme = useStorage('isDarkTheme', true) as Ref<boolean>;
+    const isDarkTheme = useDark();
+    const toggleDark = useToggle(isDarkTheme);
     const isSmallScreen = useMediaQuery('(max-width: 700px)');
     const isMenuCollapsed = useStorage('isMenuCollapsed', isSmallScreen.value) as Ref<boolean>;
 
@@ -12,6 +13,7 @@ export const useStyleStore = defineStore('style', {
 
     return {
       isDarkTheme,
+      toggleDark,
       isMenuCollapsed,
       isSmallScreen,
     };
diff --git a/src/ui/theme/theme.models.ts b/src/ui/theme/theme.models.ts
index 850afe95..5ab78d79 100644
--- a/src/ui/theme/theme.models.ts
+++ b/src/ui/theme/theme.models.ts
@@ -1,4 +1,4 @@
-import { useThemeStore } from './theme.store';
+import { useStyleStore } from '@/stores/style.store';
 
 export { defineThemes };
 
@@ -6,8 +6,8 @@ function defineThemes<Theme>(themes: { light: Theme; dark: Theme }) {
   return {
     themes,
     useTheme() {
-      const themeStore = useThemeStore();
-      return computed(() => themes[themeStore.themeType]);
+      const styleStore = useStyleStore();
+      return computed(() => themes[styleStore.isDarkTheme ? 'dark' : 'light']);
     },
   };
 }
diff --git a/src/ui/theme/theme.store.ts b/src/ui/theme/theme.store.ts
deleted file mode 100644
index e2457fca..00000000
--- a/src/ui/theme/theme.store.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useThemeStore = defineStore('ui-theme', {
-  state: () => ({
-    themeType: useStorage<'dark' | 'light'>('ui-store:theme-type', 'dark') as Ref<'dark' | 'light'>,
-  }),
-  getters: {
-    isDarkTheme(): boolean {
-      return this.themeType === 'dark';
-    },
-    isLightTheme(): boolean {
-      return this.themeType === 'light';
-    },
-  },
-  actions: {
-    toggleTheme() {
-      this.themeType = this.isDarkTheme ? 'light' : 'dark';
-    },
-  },
-});

From f771e7a99f962463401cdd8addd455782605675f Mon Sep 17 00:00:00 2001
From: myztillx <33730898+myztillx@users.noreply.github.com>
Date: Sun, 18 Jun 2023 05:01:54 -0400
Subject: [PATCH 2/2] feat(chmod-calculator): added symbolic representation
 (#455)

---
 .../chmod-calculator.service.test.ts          | 64 ++++++++++++++++++-
 .../chmod-calculator.service.ts               | 15 ++++-
 .../chmod-calculator/chmod-calculator.vue     |  6 +-
 3 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/src/tools/chmod-calculator/chmod-calculator.service.test.ts b/src/tools/chmod-calculator/chmod-calculator.service.test.ts
index ff09fa6b..426c4a56 100644
--- a/src/tools/chmod-calculator/chmod-calculator.service.test.ts
+++ b/src/tools/chmod-calculator/chmod-calculator.service.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { computeChmodOctalRepresentation } from './chmod-calculator.service';
+import { computeChmodOctalRepresentation, computeChmodSymbolicRepresentation } from './chmod-calculator.service';
 
 describe('chmod-calculator', () => {
   describe('computeChmodOctalRepresentation', () => {
@@ -64,5 +64,67 @@ describe('chmod-calculator', () => {
         }),
       ).to.eql('222');
     });
+
+    it('get the symbolic representation from permissions', () => {
+      expect(
+        computeChmodSymbolicRepresentation({
+          permissions: {
+            owner: { read: true, write: true, execute: true },
+            group: { read: true, write: true, execute: true },
+            public: { read: true, write: true, execute: true },
+          },
+        }),
+      ).to.eql('rwxrwxrwx');
+
+      expect(
+        computeChmodSymbolicRepresentation({
+          permissions: {
+            owner: { read: false, write: false, execute: false },
+            group: { read: false, write: false, execute: false },
+            public: { read: false, write: false, execute: false },
+          },
+        }),
+      ).to.eql('---------');
+
+      expect(
+        computeChmodSymbolicRepresentation({
+          permissions: {
+            owner: { read: false, write: true, execute: false },
+            group: { read: false, write: true, execute: true },
+            public: { read: true, write: false, execute: true },
+          },
+        }),
+      ).to.eql('-w--wxr-x');
+
+      expect(
+        computeChmodSymbolicRepresentation({
+          permissions: {
+            owner: { read: true, write: false, execute: false },
+            group: { read: false, write: true, execute: false },
+            public: { read: false, write: false, execute: true },
+          },
+        }),
+      ).to.eql('r---w---x');
+
+      expect(
+        computeChmodSymbolicRepresentation({
+          permissions: {
+            owner: { read: false, write: false, execute: true },
+            group: { read: false, write: true, execute: false },
+            public: { read: true, write: false, execute: false },
+          },
+        }),
+      ).to.eql('--x-w-r--');
+
+      expect(
+        computeChmodSymbolicRepresentation({
+          permissions: {
+            owner: { read: false, write: true, execute: false },
+            group: { read: false, write: true, execute: false },
+            public: { read: false, write: true, execute: false },
+          },
+        }),
+      ).to.eql('-w--w--w-');
+    });
   });
 });
diff --git a/src/tools/chmod-calculator/chmod-calculator.service.ts b/src/tools/chmod-calculator/chmod-calculator.service.ts
index 89535519..e0046717 100644
--- a/src/tools/chmod-calculator/chmod-calculator.service.ts
+++ b/src/tools/chmod-calculator/chmod-calculator.service.ts
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import type { GroupPermissions, Permissions } from './chmod-calculator.types';
 
-export { computeChmodOctalRepresentation };
+export { computeChmodOctalRepresentation, computeChmodSymbolicRepresentation };
 
 function computeChmodOctalRepresentation({ permissions }: { permissions: Permissions }): string {
   const permissionValue = { read: 4, write: 2, execute: 1 };
@@ -15,3 +15,16 @@ function computeChmodOctalRepresentation({ permissions }: { permissions: Permiss
     getGroupPermissionValue(permissions.public),
   ].join('');
 }
+
+function computeChmodSymbolicRepresentation({ permissions }: { permissions: Permissions }): string {
+  const permissionValue = { read: 'r', write: 'w', execute: 'x' };
+
+  const getGroupPermissionValue = (permission: GroupPermissions) =>
+    _.reduce(permission, (acc, isPermSet, key) => acc + (isPermSet ? _.get(permissionValue, key, '') : '-'), '');
+
+  return [
+    getGroupPermissionValue(permissions.owner),
+    getGroupPermissionValue(permissions.group),
+    getGroupPermissionValue(permissions.public),
+  ].join('');
+}
diff --git a/src/tools/chmod-calculator/chmod-calculator.vue b/src/tools/chmod-calculator/chmod-calculator.vue
index 2673333c..ba6f4498 100644
--- a/src/tools/chmod-calculator/chmod-calculator.vue
+++ b/src/tools/chmod-calculator/chmod-calculator.vue
@@ -2,7 +2,7 @@
 import { useThemeVars } from 'naive-ui';
 
 import InputCopyable from '../../components/InputCopyable.vue';
-import { computeChmodOctalRepresentation } from './chmod-calculator.service';
+import { computeChmodOctalRepresentation, computeChmodSymbolicRepresentation } from './chmod-calculator.service';
 
 import type { Group, Scope } from './chmod-calculator.types';
 
@@ -22,6 +22,7 @@ const permissions = ref({
 });
 
 const octal = computed(() => computeChmodOctalRepresentation({ permissions: permissions.value }));
+const symbolic = computed(() => computeChmodSymbolicRepresentation({ permissions: permissions.value }));
 </script>
 
 <template>
@@ -57,6 +58,9 @@ const octal = computed(() => computeChmodOctalRepresentation({ permissions: perm
     <div class="octal-result">
       {{ octal }}
     </div>
+    <div class="octal-result">
+      {{ symbolic }}
+    </div>
 
     <InputCopyable :value="`chmod ${octal} path`" readonly />
   </div>