chore: Remove settings

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

excalidraw-app/components/AppMainMenu.tsx

@@ -37,7 +37,6 @@ export const AppMainMenu: React.FC<{
       )}
       <MainMenu.DefaultItems.CommandPalette className="highlighted" />
       <MainMenu.DefaultItems.SearchMenu />
-      <MainMenu.DefaultItems.SettingsMenu />
       <MainMenu.DefaultItems.Help />
       <MainMenu.DefaultItems.ClearCanvas />
       <MainMenu.Separator />

packages/element/src/binding.ts

@@ -1,8 +1,6 @@
 import {
   KEYS,
   arrayToMap,
-  debugDrawLine,
-  debugDrawPoint,
   getFeatureFlag,
   invariant,
   isTransparent,

packages/excalidraw/components/LayerUI.tsx

@@ -63,7 +63,6 @@ import { ImageExportDialog } from "./ImageExportDialog";
 import { Island } from "./Island";
 import { JSONExportDialog } from "./JSONExportDialog";
 import { LaserPointerButton } from "./LaserPointerButton";
-import { Settings } from "./Settings";
 
 import "./LayerUI.scss";
 import "./Toolbar.scss";
@@ -555,7 +554,6 @@ const LayerUI = ({
         />
       )}
       <ActiveConfirmDialog />
-      <Settings />
       {appState.openDialog?.name === "elementLinkSelector" && (
         <ElementLinkDialog
           sourceElementId={appState.openDialog.sourceElementId}

packages/excalidraw/components/Settings/Settings.scss

@@ -1,59 +0,0 @@
-.settings-dialog {
-  .Dialog__close {
-    margin-top: 30px;
-    margin-right: 20px;
-  }
-
-  .settings-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    padding: 0.5rem 0;
-  }
-
-  .settings-category {
-    display: flex;
-    flex-direction: column;
-    padding: 1rem 0;
-  }
-
-  .settings-category-title {
-    font-size: 1rem;
-    font-weight: 600;
-    margin-bottom: 6px;
-    display: flex;
-    align-items: center;
-  }
-
-  .settings-category-items {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .settings-item {
-    padding: 0.5rem 0 0.5rem 1rem;
-    color: var(--popup-text-color);
-    height: 2.5rem;
-    box-sizing: border-box;
-    border-radius: var(--border-radius-lg);
-
-    .Checkbox {
-      flex-direction: row-reverse;
-      justify-content: space-between;
-      margin-right: 0;
-
-      .Checkbox-box {
-        margin-right: 0;
-      }
-    }
-
-    label {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      cursor: pointer;
-    }
-  }
-}

packages/excalidraw/components/Settings/Settings.tsx

@@ -1,141 +0,0 @@
-import { useState } from "react";
-
-import { getFeatureFlag, setFeatureFlag } from "@excalidraw/common";
-import * as Sentry from "@sentry/browser";
-
-import { CheckboxItem } from "../CheckboxItem";
-import { Dialog } from "../Dialog";
-import { CloseIcon } from "../icons";
-import { useExcalidrawSetAppState } from "../App";
-import { useUIAppState } from "../../context/ui-appState";
-import { t } from "../../i18n";
-
-import "./Settings.scss";
-
-export const DEFAULT_SETTINGS_CATEGORIES = {
-  experimental: t("settings.experimental"),
-};
-
-const getCategoryOrder = (category: string) => {
-  switch (category) {
-    case DEFAULT_SETTINGS_CATEGORIES.experimental:
-      return 1;
-    default:
-      return 10;
-  }
-};
-
-type SettingItem = {
-  label: string;
-  category: string;
-  flagKey: "COMPLEX_BINDINGS";
-  getValue: () => boolean;
-  setValue: (value: boolean) => void;
-};
-
-export const Settings = () => {
-  const uiAppState = useUIAppState();
-  const setAppState = useExcalidrawSetAppState();
-
-  const settings: SettingItem[] = [
-    {
-      label: t("settings.binding"),
-      category: DEFAULT_SETTINGS_CATEGORIES.experimental,
-      flagKey: "COMPLEX_BINDINGS",
-      getValue: () => getFeatureFlag("COMPLEX_BINDINGS"),
-      setValue: (value: boolean) => {
-        const flagsIntegration =
-          Sentry.getClient()?.getIntegrationByName<Sentry.FeatureFlagsIntegration>(
-            "FeatureFlags",
-          );
-        if (flagsIntegration) {
-          flagsIntegration.addFeatureFlag("COMPLEX_BINDINGS", value);
-        }
-
-        setFeatureFlag("COMPLEX_BINDINGS", value);
-      },
-    },
-  ];
-
-  const [settingStates, setSettingStates] = useState<Record<string, boolean>>(
-    () => {
-      const initialStates: Record<string, boolean> = {};
-      settings.forEach((setting) => {
-        initialStates[setting.flagKey] = setting.getValue();
-      });
-      return initialStates;
-    },
-  );
-
-  if (uiAppState.openDialog?.name !== "settings") {
-    return null;
-  }
-
-  const closeSettings = () => {
-    setAppState({
-      openDialog: null,
-    });
-  };
-
-  const handleToggle = (setting: SettingItem, checked: boolean) => {
-    setting.setValue(checked);
-    setSettingStates((prev) => ({
-      ...prev,
-      [setting.flagKey]: checked,
-    }));
-  };
-
-  const settingsByCategory = settings
-    .sort(
-      (a, b) =>
-        getCategoryOrder(a.category) - getCategoryOrder(b.category) ||
-        a.label.localeCompare(b.label),
-    )
-    .reduce((acc, setting) => {
-      if (!acc[setting.category]) {
-        acc[setting.category] = [];
-      }
-      acc[setting.category].push(setting);
-      return acc;
-    }, {} as Record<string, SettingItem[]>);
-
-  return (
-    <Dialog
-      onCloseRequest={closeSettings}
-      closeOnClickOutside
-      title={t("settings.title")}
-      size={720}
-      autofocus
-      className="settings-dialog"
-    >
-      <button
-        className="Dialog__close"
-        onClick={closeSettings}
-        title={t("buttons.close")}
-        aria-label={t("buttons.close")}
-        type="button"
-      >
-        {CloseIcon}
-      </button>
-      <div className="settings-content">
-        {Object.entries(settingsByCategory).map(([category, items]) => (
-          <div key={category} className="settings-category">
-            <div className="settings-category-title">{category}</div>
-            <div className="settings-category-items">
-              {items.map((setting) => (
-                <div key={setting.flagKey} className="settings-item">
-                  <CheckboxItem
-                    checked={settingStates[setting.flagKey] ?? false}
-                    onChange={(checked) => handleToggle(setting, checked)}
-                  >
-                    {setting.label}
-                  </CheckboxItem>
-                </div>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </Dialog>
-  );
-};

packages/excalidraw/components/Settings/index.tsx

@@ -1 +0,0 @@
-export { Settings } from "./Settings";

packages/excalidraw/components/icons.tsx

@@ -522,16 +522,6 @@ export const ExportIcon = createIcon(
   modifiedTablerIconProps,
 );
 
-// tabler-icons: settings
-export const settingsIcon = createIcon(
-  <g strokeWidth="1.5">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
-    <circle cx="12" cy="12" r="3" />
-  </g>,
-  tablerIconProps,
-);
-
 export const HelpIcon = createIcon(
   <g strokeWidth="1.5">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>

packages/excalidraw/components/main-menu/DefaultItems.tsx

@@ -40,7 +40,6 @@ import {
   MoonIcon,
   save,
   searchIcon,
-  settingsIcon,
   SunIcon,
   TrashIcon,
   usersIcon,
@@ -171,26 +170,6 @@ export const SearchMenu = (opts?: { className?: string }) => {
 };
 SearchMenu.displayName = "SearchMenu";
 
-export const SettingsMenu = (opts?: { className?: string }) => {
-  const { t } = useI18n();
-  const setAppState = useExcalidrawSetAppState();
-
-  return (
-    <DropdownMenuItem
-      icon={settingsIcon}
-      data-testid="settings-menu-button"
-      onSelect={() => {
-        setAppState({ openDialog: { name: "settings" } });
-      }}
-      aria-label={t("settings.title")}
-      className={opts?.className}
-    >
-      {t("settings.title")}
-    </DropdownMenuItem>
-  );
-};
-SettingsMenu.displayName = "SettingsMenu";
-
 export const Help = () => {
   const { t } = useI18n();
 

packages/excalidraw/locales/en.json

@@ -198,11 +198,6 @@
     "frames": "Frames",
     "texts": "Texts"
   },
-  "settings": {
-    "title": "Settings",
-    "experimental": "Experimental",
-    "binding": "Complex bindings"
-  },
   "buttons": {
     "clearReset": "Reset the canvas",
     "exportJSON": "Export to file",