2.4.0: open source!!!

Essentials.nkplugin.jsx

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.default = void 0;
+
+const { cssThemes } = require('./cssThemes');
+const QuickCSSTab = require('./QuickCSSTab');
+const M0chaTweaksTab = require('./components/M0chaTweaksTab');
+
+
+
+/*
+
+Build the plugin:
+npm run build
+
+Build and copy to Nekocord plugins directory (macOS only, am lazy):
+npm run build -- -c
+
+Line count command:
+find . -type f -not -path "./node_modules/*" -exec cat {} + | wc -l
+
+*/
+
+
+
+class Essentials {
+  constructor(userPreferences) {
+    this.userPreferences = userPreferences;
+    this.cssThemes = cssThemes;
+    Nekocord.webpackPatcher.onInitializationFinish(() => {
+      this.WebpackModules = Nekocord.webpackModules;
+      this.MenuGroup = Nekocord.webpackModules.commonModules.MenuGroup;
+      this.MenuItem = Nekocord.webpackModules.commonModules.MenuItem;
+    });
+
+    // Add event listener for settings changes
+    window.addEventListener("essentials-settings-changed", () => {
+      this.tryToEnableTweaks();
+    });
+  }
+  info = {
+    name: "Essentials",
+    id: "cat.kitties.arcane.Essentials",
+    authors: [
+      {
+        name: "Mocha",
+        id: "808802000224518264",
+      },
+    ],
+    description: "Minor tweaks that make discord better!",
+    version: "2.4.0",
+    patches: [],
+    preferences: [],
+  };
+  onPreferencesChange(userPreferences) {
+    this.userPreferences = userPreferences;
+    this.tryToEnableTweaks();
+  }
+
+
+
+  tryToEnableTweaks() {
+    // Get the saved settings from preferences
+    const savedPrefs = NekocordNative.preferences.getForPlugin(
+      "cat.kitties.arcane.Essentials",
+      "settings",
+    );
+
+    // Get saved QuickCSS
+    const savedQuickCss = NekocordNative.preferences.getForPlugin(
+      "cat.kitties.arcane.Essentials",
+      "quickcss",
+    );
+
+    // First, get all existing essentials CSS elements
+    const existingStyles = document.querySelectorAll(
+      'style[id^="essentials-"]',
+    );
+
+    // Remove all existing essentials CSS
+    existingStyles.forEach((style) => style.remove());
+
+    // Apply QuickCSS if it exists
+    if (savedQuickCss) {
+      if (document.readyState === "complete") {
+        this.applyCss(savedQuickCss, "essentials-quickcss");
+      } else {
+        window.addEventListener("load", () =>
+          this.applyCss(savedQuickCss, "essentials-quickcss"),
+        );
+      }
+    }
+
+    // Check each setting and apply CSS only for enabled settings
+    if (savedPrefs) {
+      Object.entries(savedPrefs).forEach(([key, value]) => {
+        if (value === true && this.cssThemes[key]) {
+          if (document.readyState === "complete") {
+            this.applyCss(this.cssThemes[key], `essentials-${key}`);
+          } else {
+            window.addEventListener("load", () =>
+              this.applyCss(this.cssThemes[key], `essentials-${key}`),
+            );
+          }
+        }
+      });
+    }
+  }
+
+  applyCss(css, id) {
+    // Remove any existing style element for this specific theme
+    const existingStyle = document.getElementById(id);
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+
+    // Create and append new style element
+    const styleElement = document.createElement("style");
+    styleElement.id = id;
+    styleElement.textContent = css;
+
+    if (document.head) {
+      document.head.appendChild(styleElement);
+    }
+  }
+  settingsSections = [
+    {
+      header: "Essentials",
+      divider: true,
+      settings: ["mochatweaks", "quickcss"],
+    },
+  ];
+  settingsTabs = {
+    mochatweaks: {
+      section: "M0chaTweaks",
+      searchableTitles: ["Essentials", "Tweaks", "M0chaTweaks"],
+      label: "M0chaTweaks",
+      element: M0chaTweaksTab,
+    },
+    quickcss: {
+      section: "QuickCSS",
+      searchableTitles: ["Essentials", "CSS", "QuickCSS"],
+      label: "QuickCSS",
+      element: QuickCSSTab,
+    },
+  };
+}
+exports.default = Essentials;

PreviewModal.jsx

@@ -0,0 +1,137 @@
+const React = require("react");
+
+function PreviewModal({ previewBefore, previewAfter, onClose }) {
+  return (
+    <div
+      className="preview-modal-backdrop"
+      onClick={onClose}
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.85)",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex: 9999,
+        animation: "fadeIn 0.2s ease",
+      }}
+    >
+      <div
+        className="preview-modal-content"
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          backgroundColor: "var(--background-primary)",
+          borderRadius: "8px",
+          padding: "16px",
+          maxWidth: "90vw",
+          maxHeight: "90vh",
+          display: "flex",
+          flexDirection: "column",
+          gap: "16px",
+          animation: "scaleIn 0.2s ease",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <h2
+            className="text-md/normal_dc00ef"
+            style={{ color: "var(--header-primary)" }}
+          >
+            Preview
+          </h2>
+          <button
+            onClick={onClose}
+            style={{
+              backgroundColor: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "8px",
+              borderRadius: "4px",
+              color: "var(--interactive-normal)",
+            }}
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z"
+              />
+            </svg>
+          </button>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            gap: "16px",
+            overflow: "auto",
+            justifyContent: "center",
+          }}
+        >
+          {previewBefore && (
+            <div
+              style={{
+                flex: "0 1 auto",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+              }}
+            >
+              <div
+                style={{ marginBottom: "8px", color: "var(--header-primary)" }}
+              >
+                Before
+              </div>
+              <img
+                src={previewBefore}
+                alt="Before preview"
+                style={{
+                  maxWidth: "100%",
+                  maxHeight: "70vh",
+                  objectFit: "contain",
+                  borderRadius: "4px",
+                  border: "1px solid var(--background-modifier-accent)",
+                }}
+              />
+            </div>
+          )}
+          {previewAfter && (
+            <div
+              style={{
+                flex: "0 1 auto",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+              }}
+            >
+              <div
+                style={{ marginBottom: "8px", color: "var(--header-primary)" }}
+              >
+                After
+              </div>
+              <img
+                src={previewAfter}
+                alt="After preview"
+                style={{
+                  maxWidth: "100%",
+                  maxHeight: "70vh",
+                  objectFit: "contain",
+                  borderRadius: "4px",
+                  border: "1px solid var(--background-modifier-accent)",
+                }}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+module.exports = PreviewModal; 

QuickCSSTab.jsx

@@ -0,0 +1,77 @@
+const React = require("react");
+
+function QuickCSSTab() {
+  const [css, setCss] = React.useState("");
+
+  React.useEffect(() => {
+    // Load saved CSS from preferences
+    const savedCss = NekocordNative.preferences.getForPlugin(
+      "cat.kitties.arcane.Essentials",
+      "quickcss",
+    );
+    if (savedCss) {
+      setCss(savedCss);
+      // Apply saved CSS on startup
+      const styleElement = document.getElementById("essentials-quickcss");
+      if (styleElement) {
+        styleElement.textContent = savedCss;
+      } else {
+        const newStyle = document.createElement("style");
+        newStyle.id = "essentials-quickcss";
+        newStyle.textContent = savedCss;
+        document.head.appendChild(newStyle);
+      }
+    }
+  }, []);
+
+  const handleCssChange = (event) => {
+    const newCss = event.target.value;
+    setCss(newCss);
+
+    // Save to preferences
+    NekocordNative.preferences.setForPlugin(
+      "cat.kitties.arcane.Essentials",
+      "quickcss",
+      newCss,
+    );
+
+    // Apply CSS changes
+    const styleElement = document.getElementById("essentials-quickcss");
+    if (styleElement) {
+      styleElement.textContent = newCss;
+    } else {
+      const newStyle = document.createElement("style");
+      newStyle.id = "essentials-quickcss";
+      newStyle.textContent = newCss;
+      document.head.appendChild(newStyle);
+    }
+  };
+
+  return (
+    <div>
+      <h1 className="defaultColor_a595eb text-md/normal_dc00ef">QuickCSS</h1>
+      <div className="defaultColor_a595eb text-md/normal_dc00ef mb-8">
+        <p>Add custom CSS snippets here.</p>
+      </div>
+      <textarea
+        value={css}
+        onChange={handleCssChange}
+        className="input_d266e7"
+        style={{
+          width: "100%",
+          height: "400px",
+          backgroundColor: "var(--background-secondary)",
+          color: "var(--text-normal)",
+          padding: "8px",
+          borderRadius: "4px",
+          fontFamily: "monospace",
+          resize: "vertical",
+        }}
+        spellCheck="false"
+        placeholder="/* Add your custom CSS here */"
+      />
+    </div>
+  );
+}
+
+module.exports = QuickCSSTab;