tidal-hifi/src/pages/settings/theming.ts

import fs from "fs";
import { Logger } from "../../features/logger";

const cssFilter = (file: string) => file.endsWith(".css");
const sort = (a: string, b: string) => a.toLowerCase().localeCompare(b.toLowerCase());

/**
 * Create an "options header" (disabled option) based on a bit of text
 * @param text of the header
 * @returns
 */
export const getOptionsHeader = (text: string): HTMLOptionElement => {
  const opt = new Option(text, undefined, false, false);
  opt.disabled = true;
  return opt;
};

/**
 * Maps a list of filenames to a list of HTMLOptionElements
 * Will strip ".css" from the name but keeps it in the value
 * @param array array of filenames
 * @returns
 */
export const getOptions = (array: string[]) => {
  return array.map((name) => {
    return new Option(name.replace(".css", ""), name);
  });
};

/**
 * Read .css files from a directory and return them in a sorted array.
 * @param directory to read from. Will be created if it doesn't exist
 * @returns
 */
export const getThemeListFromDirectory = (directory: string): string[] => {
  try {
    makeUserThemesDirectory(directory);
    return fs.readdirSync(directory).filter(cssFilter).sort(sort);
  } catch (err) {
    Logger.log(`Failed to get files from ${directory}`, err);
    return [];
  }
};

/**
 * Create the directory to store user themes in
 * @param directory directory to create
 */
export const makeUserThemesDirectory = (directory: string) => {
  try {
    fs.mkdirSync(directory, { recursive: true });
  } catch (err) {
    Logger.log(`Failed to make user theme directory: ${directory}`, err);
  }
};