[trying to solve git bugs]

libs/editor/src/components/settings/hooks/use-color-callback.ts

@@ -0,0 +1,17 @@
+import { CUSTOM_THEME } from '@/shared/consts'
+import { useActions, useStore } from '@/shared/hooks'
+
+import { Hex, useDebounce } from '$/client-shared'
+
+export const useColorCallback = (cb: (hex: Hex) => void) => {
+  const { theme } = useStore()
+  const actions = useActions()
+
+  return useDebounce((_: unknown, hex: Hex) => {
+    if (theme !== CUSTOM_THEME) {
+      actions.changeTheme(CUSTOM_THEME)
+    }
+
+    return cb(hex)
+  }, 300)
+}

libs/editor/src/components/settings/ui/key-buildings/key-buildings.tsx

@@ -0,0 +1,45 @@
+import { Typography } from 'antd'
+
+import { KeyBuildings as Keys } from '@/shared/consts'
+
+import { KeyBuildingStyles, SettingsText } from '../settings/settings.styles'
+
+import { WithChildren } from '$/client-shared'
+
+type KeyBuildingProps = WithChildren<{
+  keyCode: string
+  experimental?: boolean
+}>
+
+const KeyBuilding = ({ keyCode, children, experimental }: KeyBuildingProps) => {
+  return (
+    <KeyBuildingStyles>
+      <Typography.Text keyboard>
+        {experimental ? '🧪' : '✌️'} Alt + {keyCode}
+      </Typography.Text>
+      <SettingsText style={{ justifyContent: 'space-around' }}>
+        <p>{children}</p>
+      </SettingsText>
+    </KeyBuildingStyles>
+  )
+}
+
+const KeyBuildings = () => {
+  return (
+    <>
+      <KeyBuilding keyCode={Keys.O} experimental>
+        Open a file on your OS
+      </KeyBuilding>
+      <KeyBuilding keyCode={Keys.S} experimental>
+        Save a file on your OS
+      </KeyBuilding>
+      <KeyBuilding keyCode={Keys.N}>Open new tab</KeyBuilding>
+      <KeyBuilding keyCode={Keys.T}>Close current tab</KeyBuilding>
+      <KeyBuilding keyCode={Keys.P}>Open/close terminal</KeyBuilding>
+      <KeyBuilding keyCode={Keys.J}>Open/close test cases</KeyBuilding>
+      <KeyBuilding keyCode={Keys.Q}>Open/close settings</KeyBuilding>
+    </>
+  )
+}
+
+export default KeyBuildings

libs/editor/src/components/tabs/hooks/use-confirm.ts

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+
+import { AnyFunction, Nullable } from '$/client-shared'
+
+export const useConfirm = () => {
+  const [confirmKey, setConfirmKey] = useState<Nullable<string>>(null)
+
+  return {
+    protect(callback: AnyFunction) {
+      return (...args: any[]) => {
+        if (confirmKey) {
+          return
+        }
+        callback(...args)
+      }
+    },
+    off() {
+      setConfirmKey(null)
+    },
+    on(key: string) {
+      setConfirmKey(key)
+    },
+    val: confirmKey
+  }
+}

libs/editor/src/components/tabs/hooks/use-mapped-tabs.ts

@@ -0,0 +1,8 @@
+import { ContentTab } from '@/components/tabs'
+
+export const useMappedTabs = (content: ContentTab[]) => {
+  return content.map((tab) => ({
+    label: tab.getLabel(),
+    key: tab.getKeyId()
+  }))
+}

libs/editor/src/components/tabs/lib/helpers/is-max-tabs-length.ts

@@ -0,0 +1,6 @@
+import { ContentTab } from '@/components/tabs'
+import { maxTabsLength } from '@/shared/consts'
+
+export const isMaxTabsLength = (content: ContentTab[]) => {
+  return content.length >= maxTabsLength
+}

libs/editor/src/components/tabs/store/content-tab.ts

@@ -0,0 +1,107 @@
+import { makeAutoObservable } from 'mobx'
+import { v4 as generateId } from 'uuid'
+
+import { FileHandlerData } from '@/modules/editor-content/types'
+import { LanguagesValues } from '@/shared/consts'
+
+import { ContentTabInstance } from '../types'
+
+import { Nullable } from '$/client-shared'
+
+type ContentTabArgs = Partial<{
+  lastNumber: number
+  fileData: FileHandlerData
+  instance: ContentTabInstance
+}>
+
+export class ContentTab {
+  private _key = generateId()
+  private _fileHandle: Nullable<FileSystemFileHandle> = null
+  private _label = 'Untitled'
+  private _content = ''
+  public idx = 0
+  public lang: LanguagesValues = 'text'
+  public wasChanged = false
+
+  constructor({ lastNumber, fileData, instance }: ContentTabArgs) {
+    makeAutoObservable(this)
+
+    if (instance) {
+      this.initUsingInstance(instance)
+    } else if (fileData) {
+      this.initUsingFileData(fileData)
+    }
+
+    if (lastNumber) {
+      this.idx = lastNumber + 1
+    }
+  }
+
+  public setFileHandle(fileHandle: FileSystemFileHandle) {
+    this._fileHandle = fileHandle
+    this.wasChanged = false
+    this.setLabel(fileHandle.name)
+  }
+
+  public getFileHandle() {
+    return this._fileHandle
+  }
+
+  public setLabel(newLabel: string) {
+    this._label = newLabel
+  }
+
+  public getLabel() {
+    return this._label
+  }
+
+  private updateLabel() {
+    // TODO: refactor
+
+    if (this._fileHandle) {
+      if (!this.wasChanged) {
+        this.setLabel(`${this.getLabel()}  •`)
+      }
+      this.wasChanged = true
+
+      return
+    }
+    const firstLine = this._content.split('\n')[0].slice(0, 10)
+    const cropped = firstLine.replace(' ', '').replace('\n', '')
+    const newLabel = `${cropped.length > 1 ? firstLine : 'Untitled'} •`
+    this.wasChanged = true
+
+    this.setLabel(newLabel)
+  }
+
+  public setTabContent(content: string) {
+    this._content = content
+
+    this.updateLabel()
+  }
+
+  public getContent() {
+    return this._content
+  }
+
+  public getKeyId() {
+    return this._key
+  }
+
+  private initUsingFileData(fileData: FileHandlerData) {
+    this._fileHandle = fileData.fileHandle
+    this.lang = fileData.language
+    this._content = fileData.content
+    this._label = fileData.name
+  }
+
+  private initUsingInstance(instance: ContentTabInstance) {
+    this._key = instance._key
+    this._label = instance._label
+    this.idx = instance.idx
+    this._content = instance._content
+    this._fileHandle = instance._fileHandle
+    this.wasChanged = instance.wasChanged
+    this.lang = instance.lang
+  }
+}

libs/editor/src/components/terminal/hooks/use-terminal-tabs.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react'
+
+import { useModalsContext } from '@/shared/hooks'
+
+export type TerminalTabKeys = 'terminal' | 'test_cases'
+
+interface TerminalTab {
+  label: string
+  key: TerminalTabKeys
+}
+
+const terminalTabs: TerminalTab[] = [
+  { label: 'Terminal', key: 'terminal' },
+  { label: 'Test cases', key: 'test_cases' }
+]
+
+export const useTerminalTabs = () => {
+  const modalsContext = useModalsContext()
+  const activeKey = modalsContext.state.selectedTerminalTab
+
+  const setActiveKey = useCallback((key: TerminalTabKeys) => {
+    modalsContext.update({
+      selectedTerminalTab: key
+    })
+  }, [])
+
+  return {
+    key: activeKey,
+    set: setActiveKey,
+    val: terminalTabs
+  }
+}