style: Remove dead code + more descriptive variable names

console/src/layout/Content.tsx

@@ -28,10 +28,10 @@ export interface ContentProps {
  */
 export const Content = memo(
   ({ layoutKey, forceHidden }: ContentProps): ReactElement | null => {
-    const p = useSelect(layoutKey);
+    const layout = useSelect(layoutKey);
     const [, focused] = useSelectFocused();
     const handleClose = useRemover(layoutKey);
-    const type = p?.type ?? "";
+    const type = layout?.type ?? "";
     const Renderer = useOptionalRenderer(type);
     if (Renderer == null) throw new Error(`layout renderer ${type} not found`);
     const isFocused = focused === layoutKey;

console/src/layout/Menu.tsx

@@ -1,9 +1,18 @@
+// Copyright 2024 Synnax Labs, Inc.
+//
+// Use of this software is governed by the Business Source License included in the file
+// licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with the Business Source
+// License, use of this software will be governed by the Apache License, Version 2.0,
+// included in the file licenses/APL.txt.
+
 import { MAIN_WINDOW } from "@synnaxlabs/drift";
 import { useSelectWindowKey } from "@synnaxlabs/drift/react";
 import { Icon } from "@synnaxlabs/media";
 import { Menu, Mosaic, Text } from "@synnaxlabs/pluto";
 import { direction } from "@synnaxlabs/x";
-import { FC, ReactElement } from "react";
+import { type FC, type ReactElement } from "react";
 import { useDispatch, useStore } from "react-redux";
 
 import { usePlacer, useRemover } from "@/layout/hooks";
@@ -20,13 +29,13 @@ export interface FocusMenuItemProps {
 }
 
 export const FocusMenuItem = ({ layoutKey }: FocusMenuItemProps): ReactElement => {
-  const d = useDispatch();
+  const dispatch = useDispatch();
   const windowKey = useSelectWindowKey() as string;
   return (
     <Menu.Item
       itemKey="focus"
       startIcon={<Icon.Focus />}
-      onClick={() => d(setFocus({ windowKey: windowKey, key: layoutKey }))}
+      onClick={() => dispatch(setFocus({ windowKey: windowKey, key: layoutKey }))}
       trigger={["Control", "F"]}
     >
       Focus
@@ -35,11 +44,11 @@ export const FocusMenuItem = ({ layoutKey }: FocusMenuItemProps): ReactElement =
 };
 
 export const useOpenInNewWindow = () => {
-  const d = useDispatch();
+  const dispatch = useDispatch();
   const placer = usePlacer();
   return (layoutKey: string) => {
     const { key } = placer(createMosaicWindow({}));
-    d(
+    dispatch(
       moveMosaicTab({
         windowKey: key,
         key: 1,
@@ -51,9 +60,9 @@ export const useOpenInNewWindow = () => {
 };
 
 export const useMoveIntoMainWindow = () => {
-  const s = useStore();
+  const store = useStore();
   return (layoutKey: string) => {
-    s.dispatch(
+    store.dispatch(
       moveMosaicTab({
         windowKey: MAIN_WINDOW,
         tabKey: layoutKey,
@@ -112,18 +121,16 @@ export const CloseMenuItem = ({ layoutKey }: FocusMenuItemProps): ReactElement =
   );
 };
 
-export const RenameMenuItem = ({ layoutKey }: FocusMenuItemProps): ReactElement => {
-  return (
-    <Menu.Item
-      itemKey="rename"
-      startIcon={<Icon.Rename />}
-      onClick={() => Text.edit(`pluto-tab-${layoutKey}`)}
-      trigger={["Control", "R"]}
-    >
-      Rename
-    </Menu.Item>
-  );
-};
+export const RenameMenuItem = ({ layoutKey }: FocusMenuItemProps): ReactElement => (
+  <Menu.Item
+    itemKey="rename"
+    startIcon={<Icon.Rename />}
+    onClick={() => Text.edit(`pluto-tab-${layoutKey}`)}
+    trigger={["Control", "R"]}
+  >
+    Rename
+  </Menu.Item>
+);
 
 const splitMenuItemFactory = (
   direction: direction.Direction,
@@ -132,7 +139,7 @@ const splitMenuItemFactory = (
     layoutKey,
     children,
   }: FocusMenuItemProps & { children?: ReactElement }) => {
-    const d = useDispatch();
+    const dispatch = useDispatch();
     const [windowKey, mosaic] = useSelectMosaic();
     const canSplit = Mosaic.canSplit(mosaic, layoutKey);
     if (!canSplit) return null;
@@ -143,7 +150,7 @@ const splitMenuItemFactory = (
           itemKey={`split${direction}`}
           startIcon={direction === "x" ? <Icon.SplitX /> : <Icon.SplitY />}
           onClick={() =>
-            d(splitMosaicNode({ windowKey, tabKey: layoutKey, direction }))
+            dispatch(splitMosaicNode({ windowKey, tabKey: layoutKey, direction }))
           }
         >
           Split {direction === "x" ? "Horizontally" : "Vertically"}
@@ -161,19 +168,17 @@ export interface MenuItems {
   layoutKey: string;
 }
 
-export const MenuItems = ({ layoutKey }: MenuItems): ReactElement => {
-  return (
-    <>
-      <RenameMenuItem layoutKey={layoutKey} />
-      <CloseMenuItem layoutKey={layoutKey} />
+export const MenuItems = ({ layoutKey }: MenuItems): ReactElement => (
+  <>
+    <RenameMenuItem layoutKey={layoutKey} />
+    <CloseMenuItem layoutKey={layoutKey} />
+    <Menu.Divider />
+    <FocusMenuItem layoutKey={layoutKey} />
+    <OpenInNewWindowMenuItem layoutKey={layoutKey} />
+    <MoveToMainWindowMenuItem layoutKey={layoutKey} />
+    <SplitXMenuItem layoutKey={layoutKey}>
       <Menu.Divider />
-      <FocusMenuItem layoutKey={layoutKey} />
-      <OpenInNewWindowMenuItem layoutKey={layoutKey} />
-      <MoveToMainWindowMenuItem layoutKey={layoutKey} />
-      <SplitXMenuItem layoutKey={layoutKey}>
-        <Menu.Divider />
-      </SplitXMenuItem>
-      <SplitYMenuItem layoutKey={layoutKey} />
-    </>
-  );
-};
+    </SplitXMenuItem>
+    <SplitYMenuItem layoutKey={layoutKey} />
+  </>
+);

console/src/layout/context.tsx

@@ -9,7 +9,7 @@
 
 import { createContext, useContext } from "react";
 
-import { ContextMenuRenderer, type Renderer } from "@/layout/slice";
+import { type ContextMenuRenderer, type Renderer } from "@/layout/slice";
 
 export type Renderers = Record<string, Renderer>;
 
@@ -32,6 +32,5 @@ const ContextMenuContext = createContext<ContextMenus>({});
 
 export const ContextMenuProvider = ContextMenuContext.Provider;
 
-export const useContextMenuRenderer = (type: string): ContextMenuRenderer | null => {
-  return useContext(ContextMenuContext)[type] ?? null;
-};
+export const useContextMenuRenderer = (type: string): ContextMenuRenderer | null =>
+  useContext(ContextMenuContext)[type] ?? null;

console/src/layout/selectors.ts

@@ -96,9 +96,9 @@ export const selectFocused = (
   state: StoreState & Drift.StoreState,
   windowKey?: string,
 ): [string, string | null] => {
-  const win = selectWindow(state, windowKey);
-  if (win == null) throw new Error(`Window ${windowKey ?? ""} not found`);
-  return [win.key, selectSliceState(state).mosaics[win.key]?.focused ?? null];
+  const window = selectWindow(state, windowKey);
+  if (window == null) throw new Error(`Window ${windowKey ?? ""} not found`);
+  return [window.key, selectSliceState(state).mosaics[window.key]?.focused ?? null];
 };
 
 export const useSelectFocused = (): [string, string | null] =>

console/src/layouts/Mosaic.tsx

@@ -379,9 +379,9 @@ export const NavTop = (): ReactElement | null => {
 export const MosaicWindow = memo(
   ({ layoutKey }: Layout.RendererProps): ReactElement => {
     const { menuItems, onSelect } = Layout.useNavDrawer("bottom", NAV_DRAWERS);
-    const d = useDispatch();
+    const dispatch = useDispatch();
     useLayoutEffect(() => {
-      d(
+      dispatch(
         setNavDrawer({
           windowKey: layoutKey,
           location: "bottom",

pluto/src/breadcrumb/Breadcrumb.tsx

@@ -8,8 +8,8 @@
 // included in the file licenses/APL.txt.
 
 import { Icon } from "@synnaxlabs/media";
-import { caseconv, deep, Optional, toArray } from "@synnaxlabs/x";
-import { FC, ReactElement } from "react";
+import { caseconv, type Optional, toArray } from "@synnaxlabs/x";
+import { type ReactElement } from "react";
 
 import { Align } from "@/align";
 import { CSS } from "@/css";
@@ -83,14 +83,6 @@ export const Breadcrumb = <
   ...props
 }: BreadcrumbProps<E, L>): ReactElement => {
   if (url != null) children = url;
-  let iconC: ReactElement | undefined = undefined;
-  if (icon) {
-    if (isValidElement(icon)) iconC = icon;
-    else {
-      const IconC = deep.get<FC, typeof Icon>(Icon, icon);
-      iconC = <IconC />;
-    }
-  }
   const content = getContent(children, separator, shade);
   if (hideFirst) content.shift();
   return (

pluto/src/icon/Icon.tsx

@@ -13,10 +13,10 @@ import { Icon as MediaIcon } from "@synnaxlabs/media";
 import { deep, location } from "@synnaxlabs/x";
 import {
   cloneElement,
-  ComponentPropsWithoutRef,
-  FC,
-  ReactElement,
-  SVGProps,
+  type ComponentPropsWithoutRef,
+  type FC,
+  type ReactElement,
+  type SVGProps,
 } from "react";
 
 import { CSS } from "@/css";

pluto/src/mosaic/Mosaic.tsx

@@ -336,7 +336,7 @@ export const usePortal = ({
     }),
   )
     .flat()
-    .filter((v) => v != null) as ReactElement[];
+    .filter((v) => v != null);
   ref.current.forEach((_, key) => !existing.has(key) && ref.current.delete(key));
   return [ref, portaledNodes];
 };

pluto/src/tabs/Tabs.tsx

@@ -22,8 +22,8 @@ import { Align } from "@/align";
 import { CSS } from "@/css";
 import { useSyncedRef } from "@/hooks";
 import { state } from "@/state";
-import { Selector, SelectorProps } from "@/tabs/Selector";
-import { RenderProp, type Spec, Tab } from "@/tabs/types";
+import { Selector, type SelectorProps } from "@/tabs/Selector";
+import { type RenderProp, type Spec, Tab } from "@/tabs/types";
 import { type ComponentSize } from "@/util/component";
 
 /**

pluto/src/text/WithIcon.tsx

@@ -10,7 +10,7 @@
 import "@/text/WithIcon.css";
 
 import { toArray } from "@synnaxlabs/x";
-import { Children, Key, type ReactElement, type ReactNode } from "react";
+import { Children, type Key, type ReactElement, type ReactNode } from "react";
 
 import { Align } from "@/align";
 import { CSS } from "@/css";