feat: hide explorer arrows customization (#79)

README.md

@@ -61,6 +61,25 @@ Open the Command Palette and select "Extensions: Install from VSIX...", then ope
 > [!NOTE]
 > We also have a [Catppuccin Theme](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc)!
 
+### Settings
+
+We provide some options to further customize your catppuccin experience:
+
+```jsonc
+{
+  // hides arrows next to folders in explorer
+  "catppuccin-icons.hidesExplorerArrows": false
+}
+```
+
+To see all available options, open your settings UI and look for `Extensions > Catppuccin Icons`.
+
+### Commands
+
+We provide a set of commands to interact with the extension and icons if needed, they are prefixed with `Catppuccin Icons:`:
+
+- `Factory reset settings`: removes all customization and resets the theme to its factory defaults.
+
 ## Requesting icons and features
 
 To request a new icon or a specific feature, [open an issue](https://github.com/catppuccin/vscode-icons/issues/new/choose) documenting everything needed, the more info the faster your request will be processed.

package.json

@@ -26,7 +26,7 @@
   "categories": [
     "Themes"
   ],
-  "main": "dist/index.cjs",
+  "main": "dist/main.cjs",
   "browser": "dist/browser.cjs",
   "icon": "assets/icon.png",
   "extensionKind": [
@@ -41,6 +41,22 @@
     "onStartupFinished"
   ],
   "contributes": {
+    "configuration": {
+      "title": "Catppuccin Icons",
+      "properties": {
+        "catppuccin-icons.hidesExplorerArrows": {
+          "type": "boolean",
+          "default": false,
+          "description": "Hides arrows next to folders in the explorer."
+        }
+      }
+    },
+    "commands": [
+      {
+        "command": "catppuccin-icons.reset",
+        "title": "Catppuccin Icons: Factory reset settings"
+      }
+    ],
     "iconThemes": [
       {
         "id": "catppuccin-mocha",

scripts/build.ts

@@ -4,7 +4,7 @@ import { flavorEntries } from '@catppuccin/palette'
 import { build } from 'tsup'
 import { rimraf } from 'rimraf'
 import { defaults } from '~/defaults'
-import { createVscTheme } from '~/hooks/generateThemes'
+import { createVscTheme } from '~/hooks/generateTheme'
 
 const DIST = 'dist'
 const flavors = flavorEntries.map(([f]) => f)
@@ -41,7 +41,7 @@ await Promise.all(flavors.map(async (f) => {
 
 // BUILD EXTENSION RUNTIME
 await build({
-  entry: ['src/index.ts', 'src/browser.ts'],
+  entry: ['src/main.ts', 'src/browser.ts'],
   format: ['cjs'],
   external: ['vscode'],
   minify: true,

scripts/generate.ts

@@ -6,7 +6,7 @@
 import { readFileSync, readdirSync, writeFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { SVG, parseColors } from '@iconify/tools'
-import { palettes } from '../src/palettes'
+import { palettes } from '~/utils/palettes'
 
 const flavors = Object.keys(palettes) as Array<keyof typeof palettes>
 

src/hooks/mergeTheme.ts

@@ -0,0 +1,9 @@
+import { defu } from 'defu'
+import type { Theme } from '~/types'
+import { defaults } from '~/defaults'
+
+export function mergeTheme(configTheme: Partial<Theme>): Theme {
+  const theme = defu(configTheme, defaults)
+
+  return theme
+}

src/hooks/updateThemes.ts

@@ -0,0 +1,22 @@
+import { window } from 'vscode'
+import { flavorEntries } from '@catppuccin/palette'
+import type { IconDefinitions, Theme, ThemePaths } from '~/types'
+import { createVscTheme } from '~/hooks/generateTheme'
+import { promptToReload, writeFile } from '~/utils/vscode'
+
+export async function updateThemes(theme: Theme, paths: ThemePaths, iconDefinitions: IconDefinitions) {
+  const flavors = flavorEntries.map(([f]) => f)
+
+  return Promise.all(flavors.map(async flavor =>
+    writeFile(
+      paths[flavor].theme,
+      createVscTheme(theme, iconDefinitions),
+    ),
+  )).then(async () => {
+    await promptToReload()
+  }).catch((error: Error) => {
+    window.showErrorMessage(
+      `Failed to save re-compiled theme: \n${error.message}`,
+    )
+  })
+}

src/main.ts

@@ -0,0 +1,43 @@
+import { ConfigurationTarget, type ExtensionContext, commands, workspace } from 'vscode'
+import { iconDefinitionsPath, themePaths } from './utils/paths'
+import type { IconDefinitions } from './types'
+import { getConfiguration } from './utils/vscode'
+import { updateThemes } from './hooks/updateThemes'
+import { mergeTheme } from './hooks/mergeTheme'
+
+export async function activate(context: ExtensionContext) {
+  const paths = themePaths(context)
+
+  context.subscriptions.push(
+    // TODO centralize commands and factorize reset
+    commands.registerCommand('catppuccin-icons.reset', async () => {
+      const iconDefinitions = await workspace.fs
+        .readFile(iconDefinitionsPath(context))
+        .then(b => JSON.parse(b.toString()) as IconDefinitions)
+
+      await updateThemes(mergeTheme({}), paths, iconDefinitions)
+
+      const config = workspace.getConfiguration('catppuccin-icons')
+      await config.update('hidesExplorerArrows', undefined, ConfigurationTarget.Global)
+    }),
+  )
+
+  context.subscriptions.push(
+    workspace.onDidChangeConfiguration(async (event) => {
+      if (event.affectsConfiguration('catppuccin-icons')) {
+        const iconDefinitions = await workspace.fs
+          .readFile(iconDefinitionsPath(context))
+          .then(b => JSON.parse(b.toString()) as IconDefinitions)
+
+        const configuration = getConfiguration()
+        const theme = mergeTheme(configuration)
+
+        await updateThemes(theme, paths, iconDefinitions)
+      }
+    }),
+  )
+}
+
+export function deactivate() {
+
+}

src/types.ts → src/types/index.ts

@@ -1,3 +1,6 @@
+import type { FlavorName } from '@catppuccin/palette'
+import type { Uri } from 'vscode'
+
 export interface Options {
   hidesExplorerArrows: boolean
 }
@@ -45,3 +48,12 @@ export type VscTheme = Options & BaseIcons & {
 
   iconDefinitions: IconDefinitions
 }
+
+export type Flavor = FlavorName
+
+export type ThemePaths = Record<Flavor, {
+  theme: Uri
+  icons: Uri
+}>
+
+export type Config = Pick<Theme, 'hidesExplorerArrows'>

src/palettes.ts → src/utils/palettes.ts

@@ -1,3 +1,6 @@
+/**
+ * Things related to the catppuccin palette
+ */
 import type { AccentName, FlavorName, MonochromaticName } from '@catppuccin/palette'
 import { flavorEntries, flavors } from '@catppuccin/palette'
 

src/utils/paths.ts

@@ -0,0 +1,32 @@
+/**
+ * Paths from extension context/runtime
+ */
+import type { ExtensionContext } from 'vscode'
+import { Uri } from 'vscode'
+import type { Flavor, ThemePaths } from '~/types'
+
+function flavorThemePath(root: Uri, flavor: Flavor) {
+  return {
+    theme: Uri.joinPath(root, flavor, 'theme.json'),
+    icons: Uri.joinPath(root, flavor, 'icons'),
+  }
+}
+
+function rootPath(context: ExtensionContext) {
+  return Uri.joinPath(context.extensionUri, 'dist')
+}
+
+export function themePaths(context: ExtensionContext): ThemePaths {
+  const root = rootPath(context)
+  return {
+    frappe: flavorThemePath(root, 'frappe'),
+    latte: flavorThemePath(root, 'latte'),
+    macchiato: flavorThemePath(root, 'macchiato'),
+    mocha: flavorThemePath(root, 'mocha'),
+  }
+}
+
+export function iconDefinitionsPath(context: ExtensionContext) {
+  const root = rootPath(context)
+  return Uri.joinPath(root, 'iconDefinitions.json')
+}

src/utils/vscode.ts

@@ -0,0 +1,35 @@
+/**
+ * Functions to interact with VSCode window/workspace
+ */
+import { Buffer } from 'node:buffer'
+import type { Uri } from 'vscode'
+import { commands, window, workspace } from 'vscode'
+import type { Config } from '~/types'
+
+export async function writeFile(uri: Uri, content: unknown) {
+  return workspace.fs
+    .writeFile(uri, Buffer.from(JSON.stringify(content, null, 2)))
+    .then(
+      () => {},
+      (error: Error) => {
+        window.showErrorMessage(error.message)
+      },
+    )
+}
+
+export async function promptToReload() {
+  const message = `Catppuccin Icons: Theme changed - Reload required.`
+  const action = 'Reload window'
+  await window.showInformationMessage(message, action).then(async (selectedAction) => {
+    if (selectedAction === action)
+      commands.executeCommand('workbench.action.reloadWindow')
+  })
+};
+
+export function getConfiguration(): Config {
+  const config = workspace.getConfiguration('catppuccin-icons')
+
+  return {
+    hidesExplorerArrows: config.get('hidesExplorerArrows', false),
+  }
+}