{message.files!.length === 1 ? message.files![0].name : `${message.files!.length} files`}
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\tYou can only attach {MAX_ATTACHMENTS} files at once.\n\t\t\t\t\t
\n\t\t\t\t),\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\t\tsetAttachments((prev) => [...prev, ...files]);\n\t};\n\n\treturn (\n\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClient Version: \n\t\t\t\t\t\n\t\t\t\t\t\t{GIT_REVISION.substring(0, 7)}\n\t\t\t\t\t\n\t\t\t\t\t{` `}\n\t\t\t\t\t\n\t\t\t\t\t\t({GIT_BRANCH})\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\tLogoutPage
;\n}\n\nexport default LogoutPage;\n"],"names":["LogoutPage","app","useAppStore","React","jsx"],"mappings":"mGAGA,SAASA,GAAa,CACrB,MAAMC,EAAMC,IAEZ,OAAAC,EAAM,UAAU,IAAM,CACrBF,EAAI,OAAO,CACZ,EAAG,CAAE,CAAA,EAEEG,EAAA,IAAC,OAAI,SAAU,YAAA,CAAA,CACvB"}
\ No newline at end of file
diff --git a/asset/9ace4fe40084f77fc0e8.js b/asset/9ace4fe40084f77fc0e8.js
new file mode 100644
index 00000000..a8dfbfb6
--- /dev/null
+++ b/asset/9ace4fe40084f77fc0e8.js
@@ -0,0 +1,2 @@
+import{L as s}from"./d6412a3f250e04630bab.js";import{D as r}from"./0399c41d50c97b584bfb.js";const e=new s("Globals"),o={load:()=>{e.info("Initializing Globals");const t=localStorage.getItem("routeSettings");t&&(o.routeSettings=JSON.parse(t),e.info("Loaded route settings from storage"))},save:()=>{localStorage.setItem("routeSettings",JSON.stringify(o.routeSettings))},routeSettings:r};export{o as G};
+//# sourceMappingURL=9ace4fe40084f77fc0e8.js.map
diff --git a/asset/9ace4fe40084f77fc0e8.js.map b/asset/9ace4fe40084f77fc0e8.js.map
new file mode 100644
index 00000000..41931a03
--- /dev/null
+++ b/asset/9ace4fe40084f77fc0e8.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"9ace4fe40084f77fc0e8.js","sources":["../../src/utils/Globals.ts"],"sourcesContent":["import Logger from \"./Logger\";\nimport { DefaultRouteSettings, RouteSettings } from \"./constants\";\n\nconst logger = new Logger(\"Globals\");\n\nexport const Globals: {\n\tload: () => void;\n\tsave: () => void;\n\trouteSettings: RouteSettings;\n} = {\n\tload: () => {\n\t\tlogger.info(\"Initializing Globals\");\n\t\tconst settings = localStorage.getItem(\"routeSettings\");\n\n\t\tif (!settings) {\n\t\t\treturn;\n\t\t}\n\n\t\tGlobals.routeSettings = JSON.parse(settings);\n\t\tlogger.info(\"Loaded route settings from storage\");\n\t},\n\tsave: () => {\n\t\tlocalStorage.setItem(\"routeSettings\", JSON.stringify(Globals.routeSettings));\n\t},\n\trouteSettings: DefaultRouteSettings,\n};\n"],"names":["logger","Logger","Globals","settings","DefaultRouteSettings"],"mappings":"4FAGA,MAAMA,EAAS,IAAIC,EAAO,SAAS,EAEtBC,EAIT,CACH,KAAM,IAAM,CACXF,EAAO,KAAK,sBAAsB,EAC5B,MAAAG,EAAW,aAAa,QAAQ,eAAe,EAEhDA,IAIGD,EAAA,cAAgB,KAAK,MAAMC,CAAQ,EAC3CH,EAAO,KAAK,oCAAoC,EACjD,EACA,KAAM,IAAM,CACX,aAAa,QAAQ,gBAAiB,KAAK,UAAUE,EAAQ,aAAa,CAAC,CAC5E,EACA,cAAeE,CAChB"}
\ No newline at end of file
diff --git a/asset/9fdb12ceee3a402d3a54.woff2 b/asset/9fdb12ceee3a402d3a54.woff2
new file mode 100644
index 00000000..1d173f2a
Binary files /dev/null and b/asset/9fdb12ceee3a402d3a54.woff2 differ
diff --git a/asset/a30c5a3a6dd12984b7d7.css b/asset/a30c5a3a6dd12984b7d7.css
new file mode 100644
index 00000000..0e223341
--- /dev/null
+++ b/asset/a30c5a3a6dd12984b7d7.css
@@ -0,0 +1 @@
+.select-search-container{position:relative;z-index:1}.select-search-input{position:relative;display:block;padding:10px;background:var(--background-secondary-alt);border:none;color:var(--text);outline:none;font-size:16px;text-align:left;border-radius:12px}.select-search-is-multiple .select-search-input{margin-bottom:-2px}.select-search-is-multiple .select-search-input{border-radius:3px 3px 0 0}.select-search-input[readonly]{cursor:pointer}.select-search-is-disabled .select-search-input{cursor:not-allowed}.select-search-select{border:none;overflow:auto;max-height:230px;position:relative;bottom:4vh}.select-search-container:not(.select-search-is-multiple) .select-search-select{position:absolute;right:0;left:0;border-radius:3px;display:none}.select-search-container:not(.select-search-is-multiple).select-search-has-focus .select-search-select{display:block}.select-search-options{list-style:none;padding:0;margin:0}.select-search-option,.select-search-not-found{display:block;height:42px;width:100%;padding:0 16px;background:var(--background-primary);border:none;outline:none;color:var(--text);font-size:16px;text-align:left;cursor:pointer;margin:0}.select-search-option:disabled{opacity:.5;cursor:not-allowed;background:transparent!important}.select-search-is-highlighted,.select-search-option:not(.select-search-is-selected):hover{background:var(--background-primary-highlight)}.select-search-is-selected{font-weight:700;color:var(--text);background-color:var(--background-primary-alt)}.select-search-row:not(:first-child) .select-search-group-header{margin-top:10px}.select-search-row:not(:last-child) .select-search-group-header{margin-bottom:10px}
diff --git a/asset/a3fdddf32d9541ecf4f9.js b/asset/a3fdddf32d9541ecf4f9.js
new file mode 100644
index 00000000..2d368c5b
--- /dev/null
+++ b/asset/a3fdddf32d9541ecf4f9.js
@@ -0,0 +1,11 @@
+import{s as o,o as s,j as r}from"./b158cce54cd5888cf57f.js";import{C as t}from"./c82cb5af1dc39d0319b0.js";import{C as i,E as m}from"./f4e8de8f81a0b97a0829.js";import{C as p}from"./2952fb58654fadf615eb.js";import{U as x}from"./7f36555e7afdba9235c7.js";const l=o(p)`
+ display: flex;
+ flex-direction: column;
+ flex: 0 0 240px;
+ background-color: var(--background-secondary);
+
+ @media (max-width: 810px) {
+ display: none;
+ }
+`;function d({guild:n,channelId:a,guildId:e}){return r.jsxs(l,{children:[r.jsx(t,{guild:n,guildId:e}),n?r.jsx(i,{channelId:a,guild:n}):r.jsx(m,{}),r.jsx(x,{})]})}const b=s(d);export{b as C};
+//# sourceMappingURL=a3fdddf32d9541ecf4f9.js.map
diff --git a/asset/a3fdddf32d9541ecf4f9.js.map b/asset/a3fdddf32d9541ecf4f9.js.map
new file mode 100644
index 00000000..88a6acc8
--- /dev/null
+++ b/asset/a3fdddf32d9541ecf4f9.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"a3fdddf32d9541ecf4f9.js","sources":["../../src/components/ChannelSidebar.tsx"],"sourcesContent":["import { observer } from \"mobx-react-lite\";\nimport styled from \"styled-components\";\nimport Channel from \"../stores/objects/Channel\";\nimport Guild from \"../stores/objects/Guild\";\nimport ChannelHeader from \"./ChannelHeader\";\nimport ChannelList, { EmptyChannelList } from \"./ChannelList\";\nimport Container from \"./Container\";\nimport UserPanel from \"./UserPanel\";\n\nconst Wrapper = styled(Container)`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 0 0 240px;\n\tbackground-color: var(--background-secondary);\n\n\t@media (max-width: 810px) {\n\t\tdisplay: none;\n\t}\n`;\n\ninterface Props {\n\tchannel?: Channel;\n\tguild?: Guild;\n\tguildId?: string;\n\tchannelId?: string;\n}\n\nfunction ChannelSidebar({ guild, channelId, guildId }: Props) {\n\treturn (\n\t\t\n * \n *
\n * );\n * }\n * ```\n */\nfunction useController(props) {\n const methods = useFormContext();\n const { name, disabled, control = methods.control, shouldUnregister } = props;\n const isArrayField = isNameInFieldArray(control._names.array, name);\n const value = useWatch({\n control,\n name,\n defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),\n exact: true,\n });\n const formState = useFormState({\n control,\n name,\n });\n const _registerProps = React.useRef(control.register(name, {\n ...props.rules,\n value,\n }));\n _registerProps.current = control.register(name, props.rules);\n React.useEffect(() => {\n const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;\n const updateMounted = (name, value) => {\n const field = get(control._fields, name);\n if (field) {\n field._f.mount = value;\n }\n };\n updateMounted(name, true);\n if (_shouldUnregisterField) {\n const value = cloneObject(get(control._options.defaultValues, name));\n set(control._defaultValues, name, value);\n if (isUndefined(get(control._formValues, name))) {\n set(control._formValues, name, value);\n }\n }\n return () => {\n (isArrayField\n ? _shouldUnregisterField && !control._state.action\n : _shouldUnregisterField)\n ? control.unregister(name)\n : updateMounted(name, false);\n };\n }, [name, control, isArrayField, shouldUnregister]);\n React.useEffect(() => {\n control._updateDisabledField({\n disabled,\n fields: control._fields,\n name,\n });\n }, [disabled, name, control]);\n return {\n field: {\n name,\n value,\n disabled,\n onChange: React.useCallback((event) => _registerProps.current.onChange({\n target: {\n value: getEventValue(event),\n name: name,\n },\n type: EVENTS.CHANGE,\n }), [name]),\n onBlur: React.useCallback(() => _registerProps.current.onBlur({\n target: {\n value: get(control._formValues, name),\n name: name,\n },\n type: EVENTS.BLUR,\n }), [name, control]),\n ref: (elm) => {\n const field = get(control._fields, name);\n if (field && elm) {\n field._f.ref = {\n focus: () => elm.focus(),\n select: () => elm.select(),\n setCustomValidity: (message) => elm.setCustomValidity(message),\n reportValidity: () => elm.reportValidity(),\n };\n }\n },\n },\n formState,\n fieldState: Object.defineProperties({}, {\n invalid: {\n enumerable: true,\n get: () => !!get(formState.errors, name),\n },\n isDirty: {\n enumerable: true,\n get: () => !!get(formState.dirtyFields, name),\n },\n isTouched: {\n enumerable: true,\n get: () => !!get(formState.touchedFields, name),\n },\n error: {\n enumerable: true,\n get: () => get(formState.errors, name),\n },\n }),\n };\n}\n\n/**\n * Component based on `useController` hook to work with controlled component.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)\n *\n * @param props - the path name to the form field value, and validation rules.\n *\n * @returns provide field handler functions, field and form state.\n *\n * @example\n * ```tsx\n * function App() {\n * const { control } = useForm{fieldState.isTouched && \"Touched\"}
\n *{formState.isSubmitted ? \"submitted\" : \"\"}
\n *\n * I'm a fade Transition!\n *
\n * )}\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \n\t\t\t\t\t\t
\n\t\t\t\t);\n\t\t}\n\t}, [message, isSending, isFailed]);\n\n\treturn (\n\t\t\n\t\t\t\t\t\t\tMessageType({MessageType[message.type]})\n\t\t\t\t\t\t
\n\t\t\t\t\t\t{message.content}\n\t\t\t\t\t- \n\t\t\t
\n\t\t\t\t{app.guilds.getAll().map((guild) => renderGuildItem(guild, guild.id === guildId))}\n\t\t\t
\n\n\t\t\tFailed to load video
\n\t\t\t\t- {guild.channels.mapped.map((channel) => renderChannelListItem(channel))}
\n\t\t\t\t\tMax file size is {bytesToSize(MAX_UPLOAD_SIZE)}.\n\t\t\t\t
\n\t\t\t),\n\t\t});\n\t\treturn;\n\t};\n\n\tconst onClick = () => {\n\t\tfileUpload(append, fileTooLarge);\n\t};\n\n\tReact.useEffect(() => {\n\t\tfunction paste(e: ClipboardEvent) {\n\t\t\tconst items = e.clipboardData?.items;\n\t\t\tif (typeof items === \"undefined\") return;\n\n\t\t\tconst files = [];\n\t\t\tfor (const item of items) {\n\t\t\t\tif (!item.type.startsWith(\"text/\")) {\n\t\t\t\t\tconst blob = item.getAsFile();\n\t\t\t\t\tif (blob) {\n\t\t\t\t\t\tif (blob.size > MAX_UPLOAD_SIZE) {\n\t\t\t\t\t\t\tfileTooLarge();\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tfiles.push(blob);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tappend(files);\n\t\t}\n\n\t\tfunction dragover(e: DragEvent) {\n\t\t\te.stopPropagation();\n\t\t\te.preventDefault();\n\t\t\tif (e.dataTransfer) e.dataTransfer.dropEffect = \"copy\";\n\t\t}\n\n\t\tfunction drop(e: DragEvent) {\n\t\t\te.preventDefault();\n\n\t\t\tconst dropped = e.dataTransfer?.files;\n\t\t\tif (dropped) {\n\t\t\t\tconst files = [];\n\t\t\t\tfor (const item of dropped) {\n\t\t\t\t\tif (item.size > MAX_UPLOAD_SIZE) {\n\t\t\t\t\t\tfileTooLarge();\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tfiles.push(item);\n\t\t\t\t}\n\n\t\t\t\tappend(files);\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener(\"paste\", paste);\n\t\tdocument.addEventListener(\"dragover\", dragover);\n\t\tdocument.addEventListener(\"drop\", drop);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"paste\", paste);\n\t\t\tdocument.removeEventListener(\"dragover\", dragover);\n\t\t\tdocument.removeEventListener(\"drop\", drop);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\tWelcome to #{channel.name}!
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tThis is the start of the #{channel.name} channel.\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t- {guild.channels.mapped.map((channel) => renderChannelListItem(channel))}
- {item.label}
-
- {item.iconProps && (
- -
-
- {app.guilds.getAll().map((guild) => renderGuildItem(guild, guild.id === guildId))}
-
-
- Failed to load video
-
-
- );
- }
- }, [message, isSending, isFailed]);
-
- return (
-
- MessageType({MessageType[message.type]})
-
- {message.content}
-
- You can only attach {MAX_ATTACHMENTS} files at once.
-
- ),
- });
- return;
- }
- setAttachments((prev) => [...prev, ...files]);
- };
-
- return (
- Welcome to #{channel.name}!
-- This is the start of the #{channel.name} channel. -
-
- You do not have permission to read the history of this channel.
-
- )}
-
- Max file size is {bytesToSize(MAX_UPLOAD_SIZE)}.
-
- ),
- });
- return;
- };
-
- const onClick = () => {
- fileUpload(append, fileTooLarge);
- };
-
- React.useEffect(() => {
- function paste(e: ClipboardEvent) {
- const items = e.clipboardData?.items;
- if (typeof items === "undefined") return;
-
- const files = [];
- for (const item of items) {
- if (!item.type.startsWith("text/")) {
- const blob = item.getAsFile();
- if (blob) {
- if (blob.size > MAX_UPLOAD_SIZE) {
- fileTooLarge();
- continue;
- }
-
- files.push(blob);
- }
- }
- }
-
- append(files);
- }
-
- function dragover(e: DragEvent) {
- e.stopPropagation();
- e.preventDefault();
- if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
- }
-
- function drop(e: DragEvent) {
- e.preventDefault();
-
- const dropped = e.dataTransfer?.files;
- if (dropped) {
- const files = [];
- for (const item of dropped) {
- if (item.size > MAX_UPLOAD_SIZE) {
- fileTooLarge();
- continue;
- }
-
- files.push(item);
- }
-
- append(files);
- }
- }
-
- document.addEventListener("paste", paste);
- document.addEventListener("dragover", dragover);
- document.addEventListener("drop", drop);
-
- return () => {
- document.removeEventListener("paste", paste);
- document.removeEventListener("dragover", dragover);
- document.removeEventListener("drop", drop);
- };
- }, []);
-
- return (
-
-
- {attachments.map((file, index) => (
-
- remove(index)} />
-
- ))}
-
-
-
- );
-}
-
-export default observer(AttachmentUploadList);
diff --git a/src/components/messaging/attachments/AttachmentUploadProgress.tsx b/src/components/messaging/attachments/AttachmentUploadProgress.tsx
deleted file mode 100644
index c537930f..00000000
--- a/src/components/messaging/attachments/AttachmentUploadProgress.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { observer } from "mobx-react-lite";
-import styled from "styled-components";
-import { useAppStore } from "../../../stores/AppStore";
-import QueuedMessage from "../../../stores/objects/QueuedMessage";
-import Icon from "../../Icon";
-import IconButton from "../../IconButton";
-
-const Container = styled.div`
- max-width: 25%;
- width: 100%;
- border: 1px solid transparent;
- padding: 10px;
- border-radius: 4px;
- background-color: var(--background-secondary);
- border-color: var(--background-secondary-alt);
- flex-direction: row;
- align-items: center;
- display: flex;
-`;
-
-const Wrapper = styled.div`
- flex: 1;
- white-space: nowrap;
- overflow: hidden;
-`;
-
-const Progress = styled.progress`
- height: 6px;
- width: 100%;
-`;
-
-const CustomIcon = styled(Icon)`
- color: var(--text-secondary);
-
- &:hover {
- color: var(--text);
- }
-`;
-
-interface Props {
- message: QueuedMessage;
-}
-
-function AttachmentUploadProgress({ message }: Props) {
- const app = useAppStore();
-
- return (
- {message.files!.length === 1 ? message.files![0].name : `${message.files!.length} files`}
-
-