@netless/telebox-insider 0.3.0-beta.1 → 0.3.0-beta.11

package/dist/index.d.ts

@@ -700,9 +700,12 @@ interface TeleBoxCollectorConfig {
     namespace?: string;
     styles?: TeleStyles;
     onClick?: () => void;
+    getBoxesStatus?: () => Map<string, TeleBoxState>;
 }
 declare class TeleBoxCollector {
-    constructor({ visible, readonly, darkMode, namespace, styles, onClick, }?: TeleBoxCollectorConfig);
+    getBoxesStatus?: () => Map<string, TeleBoxState>;
+    constructor({ visible, readonly, darkMode, namespace, styles, onClick, getBoxesStatus }: TeleBoxCollectorConfig);
+    get boxesStatus(): Map<string, TeleBoxState> | undefined;
     readonly styles: TeleStyles;
     readonly namespace: string;
     get visible(): boolean;
@@ -710,6 +713,7 @@ declare class TeleBoxCollector {
     get darkMode(): boolean;
     onClick: (() => void) | undefined;
     $collector: HTMLElement | undefined;
+    $appMenuContainer: HTMLDivElement;
     /**
      * Mount collector to a root element.
      */
@@ -718,6 +722,8 @@ declare class TeleBoxCollector {
      * Unmount collector from the root element.
      */
     unmount(): this;
+    protected hasMinimizedBox(): boolean;
+    updateBoxesStatus(): void;
     setVisible(visible: boolean): this;
     setReadonly(readonly: boolean): this;
     setDarkMode(darkMode: boolean): this;
@@ -756,6 +762,8 @@ interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "prefersColorScheme"
     root?: HTMLElement;
     /** Where the minimized boxes go. */
     collector?: TeleBoxCollector;
+    /** Whether to use boxes status. */
+    useBoxesStatus?: boolean;
 }
 type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "fixRatio" | "zIndex" | "boxStatus" | "lastNotMinimizedBoxStatus";
 type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus">;
@@ -801,11 +809,12 @@ interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     boxes: MaxTitleBarTeleBox[];
     containerRect: TeleBoxRect;
     focusedBox?: MaxTitleBarTeleBox;
-    boxesStatus?: Map<string, TeleBoxState>;
+    getBoxesStatus?: () => Map<string, TeleBoxState>;
 }
 declare class MaxTitleBar extends DefaultTitleBar {
-    boxesStatus?: Map<string, TeleBoxState>;
+    getBoxesStatus?: () => Map<string, TeleBoxState>;
     constructor(config: MaxTitleBarConfig);
+    get boxesStatus(): Map<string, TeleBoxState> | undefined;
     hasMaximizedBoxInStatus(): boolean;
     get MaximizedBoxes(): MaxTitleBarTeleBox[];
     /**
@@ -815,7 +824,7 @@ declare class MaxTitleBar extends DefaultTitleBar {
      */
     focusBox(box?: MaxTitleBarTeleBox): void;
     setContainerRect(rect: TeleBoxRect): void;
-    setBoxesStatus(boxesStatus: Map<string, TeleBoxState>): void;
+    updateBoxesStatus(): void;
     setBoxes(boxes: MaxTitleBarTeleBox[]): void;
     setState(state: TeleBoxState): void;
     setReadonly(readonly: boolean): void;
@@ -831,6 +840,38 @@ declare class MaxTitleBar extends DefaultTitleBar {
     protected containerRect: TeleBoxRect;
 }
 
+type AppId = string;
+interface AppMenuProps {
+    manager: TeleBoxManager;
+    container: HTMLDivElement;
+    theme: TeleBoxColorScheme;
+    getBoxesStatus?: () => Map<string, TeleBoxState>;
+}
+declare class AppMenu {
+    private readonly namespace;
+    private container;
+    private readonly badge;
+    private readonly menuView;
+    private readonly manager;
+    private theme;
+    private getBoxesStatus?;
+    constructor(props: AppMenuProps);
+    get boxesStatus(): Map<string, TeleBoxState>;
+    get minimizedBoxesStatus(): TeleBoxState[];
+    private c;
+    containerClickHandler: () => void;
+    private menuViewClickHandler;
+    setContainer(container: HTMLDivElement): void;
+    private createDefaultAppMenu;
+    private init;
+    updatePrefersColorSchemeHandler: () => void;
+    appMenuChange: () => void;
+    private createMinimizedItem;
+    private renderMenuView;
+    render(minimizedBoxesStatus: Map<AppId, TELE_BOX_STATE.Minimized>): void;
+    destroy(): void;
+}
+
 type ValConfig = {
     prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
     containerRect: Val<TeleBoxRect, boolean>;
@@ -844,9 +885,21 @@ type ValConfig = {
 interface TeleBoxManager extends ValEnhancedResult<ValConfig> {
 }
 declare class TeleBoxManager {
-    private boxesStatus$;
-    private lastNotMinimizedBoxesStatus$;
-    constructor({ root, prefersColorScheme, minimized, maximized, fence, containerRect, collector, namespace, readonly, }?: TeleBoxManagerConfig);
+    protected boxesStatus$: Map<string, TeleBoxState>;
+    protected lastNotMinimizedBoxesStatus$: Map<string, NotMinimizedBoxState>;
+    protected appMenu: AppMenu | undefined;
+    protected useBoxesStatus: boolean;
+    protected effectBoxesStatusTimer?: {
+        skipUpdate: boolean;
+        timer: number | undefined;
+        resolve?: (skipUpdate: boolean) => void;
+    };
+    protected effectLastNotMinimizedBoxStatusTimer?: {
+        skipUpdate: boolean;
+        timer: number | undefined;
+        resolve?: (skipUpdate: boolean) => void;
+    };
+    constructor({ root, prefersColorScheme, minimized, maximized, fence, containerRect, collector, namespace, readonly, useBoxesStatus, }?: TeleBoxManagerConfig);
     get boxes(): ReadonlyArray<TeleBox>;
     get topBox(): TeleBox | undefined;
     readonly events: TeleBoxManagerEvents;
@@ -855,24 +908,48 @@ declare class TeleBoxManager {
     readonly namespace: string;
     _darkMode$: Val<boolean, boolean>;
     _calcCollectorRect: () => TeleBoxRect | undefined;
+    _setCollectorRect: (collectorRect: TeleBoxRect | undefined) => void;
     get darkMode(): boolean;
     _state$: Val<TeleBoxState, boolean>;
     get state(): TeleBoxState;
     /** @deprecated use setMaximized and setMinimized instead */
     setState(state: TeleBoxState, skipUpdate?: boolean): this;
     setBoxStatus(boxId: string, boxStatus?: TeleBoxState, skipUpdate?: boolean): void;
-    private setBoxesStatus;
+    getBoxStatus(boxId: string): TeleBoxState | undefined;
+    get boxesStatus(): ReadonlyMap<string, TeleBoxState>;
+    get lastNotMinimizedBoxesStatus(): ReadonlyMap<string, NotMinimizedBoxState>;
+    setBoxesStatus(boxesStatus: Map<string, TeleBoxState>, skipUpdate?: boolean): void;
+    getBoxesStatus(): Map<string, TeleBoxState>;
+    protected effectBoxStatusChange(): void;
+    protected effectBoxesStatusTimerFunc(skipUpdate: boolean): void;
+    effectBoxesStatusChange(skipUpdate?: boolean): Promise<void>;
     hasBoxesStatus(): boolean;
     hasMinimizedBox(): boolean;
+    getMinimizedBoxesStatus(): Map<string, TELE_BOX_STATE.Minimized>;
+    getNotMinimizedBoxesStatus(): Map<string, NotMinimizedBoxState>;
+    getAllMaximizedBoxesStatus(): Map<string, TELE_BOX_STATE.Maximized>;
+    getAllNormalBoxesStatus(): Map<string, TELE_BOX_STATE.Normal>;
+    getLastNotMinimizedBoxStatus(boxId: string): NotMinimizedBoxState | undefined;
     setLastNotMinimizedBoxStatus(boxId: string, lastNotMinimizedBoxStatus?: NotMinimizedBoxState, skipUpdate?: boolean): void;
-    private setLastNotMinimizedBoxesStatus;
-    private getAllMinimizedBoxes;
+    setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus: Map<string, NotMinimizedBoxState>, skipUpdate?: boolean): void;
+    protected effectLastNotMinimizedBoxStatusChange(skipUpdate?: boolean): Promise<void>;
+    protected effectLastNotMinimizedBoxStatusFunc(skipUpdate?: boolean): void;
+    protected getUnabledBoxesStatusZIndex(): number;
+    /** Maximized box zIndex range: 100-299 */
+    getMaxMaximizedBoxZIndex(): number;
+    /** normal box zIndex range: 300-499 */
+    getMaxNormalBoxZIndex(): number;
     create(config?: TeleBoxManagerCreateConfig, smartPosition?: boolean): ReadonlyTeleBox;
     query(config?: TeleBoxManagerQueryConfig): ReadonlyTeleBox[];
     queryOne(config?: TeleBoxManagerQueryConfig): ReadonlyTeleBox | undefined;
     update(boxID: string, config: TeleBoxManagerUpdateConfig, skipUpdate?: boolean): void;
     updateAll(config: TeleBoxManagerUpdateConfig, skipUpdate?: boolean): void;
-    remove(boxOrID: string | TeleBox, skipUpdate?: boolean): ReadonlyTeleBox | undefined;
+    setBox(boxOrID: string | TeleBox, options: {
+        status?: TeleBoxState;
+        lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
+        zIndex?: number;
+    }, skipUpdate?: boolean, effectFunc?: () => void): void;
+    remove(boxOrID: string | TeleBox, skipUpdate?: boolean, effectFunc?: () => void): ReadonlyTeleBox | undefined;
     removeTopBox(): ReadonlyTeleBox | undefined;
     removeAll(skipUpdate?: boolean): ReadonlyTeleBox[];
     destroy(skipUpdate?: boolean): void;
@@ -888,12 +965,12 @@ declare class TeleBoxManager {
     protected updateBox(box: TeleBox, config: TeleBoxManagerUpdateConfig, skipUpdate?: boolean): void;
     protected smartPosition(config?: TeleBoxConfig): TeleBoxConfig;
     protected makeBoxTop(box: TeleBox, skipUpdate?: boolean): void;
+    protected getMaximizedTopBox(): MaxTitleBarTeleBox | undefined;
     protected makeMaximizedTopBoxFocus(): void;
-    private makeTopBoxEffect;
-    protected makeMaximizedBoxFocus(maximizedBox: MaxTitleBarTeleBox, skipUpdate?: boolean): void;
-    protected makeMaximizedBoxBlur(): void;
     protected getBoxIndex(boxOrID: TeleBox | string): number;
-    protected getBox(boxOrID: TeleBox | string): TeleBox | undefined;
+    getBox(boxOrID: TeleBox | string): TeleBox | undefined;
+    createMinimizedAppMenu(): AppMenu | undefined;
 }
 
-export { DefaultTitleBar, type DefaultTitleBarButton, type DefaultTitleBarConfig, type NotMinimizedBoxState, type ReadonlyTeleBox, TELE_BOX_COLOR_SCHEME, TELE_BOX_DELEGATE_EVENT, TELE_BOX_EVENT, TELE_BOX_MANAGER_EVENT, TELE_BOX_RESIZE_HANDLE, TELE_BOX_STATE, TeleBox, TeleBoxCollector, type TeleBoxCollectorConfig, type TeleBoxColorScheme, type TeleBoxConfig, type TeleBoxCoord, type TeleBoxDelegateEvent, type TeleBoxDelegateEventConfig, type TeleBoxDelegateEvents, TeleBoxDragHandleType, type TeleBoxEvent, type TeleBoxEventConfig, type TeleBoxEvents, type TeleBoxHandleType, TeleBoxManager, type TeleBoxManagerConfig, type TeleBoxManagerCreateConfig, type TeleBoxManagerEvent, type TeleBoxManagerEventConfig, type TeleBoxManagerEvents, type TeleBoxManagerQueryConfig, type TeleBoxManagerUpdateConfig, type TeleBoxRect, type TeleBoxSize, type TeleBoxState, type TeleTitleBar, type TeleTitleBarConfig, type TeleTitleBarEvent };
+export { DefaultTitleBar, TELE_BOX_COLOR_SCHEME, TELE_BOX_DELEGATE_EVENT, TELE_BOX_EVENT, TELE_BOX_MANAGER_EVENT, TELE_BOX_RESIZE_HANDLE, TELE_BOX_STATE, TeleBox, TeleBoxCollector, TeleBoxDragHandleType, TeleBoxManager };
+export type { DefaultTitleBarButton, DefaultTitleBarConfig, NotMinimizedBoxState, ReadonlyTeleBox, TeleBoxCollectorConfig, TeleBoxColorScheme, TeleBoxConfig, TeleBoxCoord, TeleBoxDelegateEvent, TeleBoxDelegateEventConfig, TeleBoxDelegateEvents, TeleBoxEvent, TeleBoxEventConfig, TeleBoxEvents, TeleBoxHandleType, TeleBoxManagerConfig, TeleBoxManagerCreateConfig, TeleBoxManagerEvent, TeleBoxManagerEventConfig, TeleBoxManagerEvents, TeleBoxManagerQueryConfig, TeleBoxManagerUpdateConfig, TeleBoxRect, TeleBoxSize, TeleBoxState, TeleTitleBar, TeleTitleBarConfig, TeleTitleBarEvent };

package/dist/style.css

@@ -81,7 +81,6 @@
   display: flex;
   flex-direction: column;
 }
-
 .telebox-footer-wrap::before {
   content: "";
   display: block;
@@ -236,7 +235,6 @@
 .telebox-color-scheme-dark {
   color-scheme: dark;
 }
-
 .telebox-color-scheme-dark .telebox-box-main {
   color: #e9e9e9;
   background: #212126;
@@ -313,7 +311,6 @@
   background: transparent;
   cursor: pointer;
 }
-
 .telebox-titlebar-btn ~ .telebox-titlebar-btn {
   margin-left: 10px;
 }
@@ -334,7 +331,6 @@
 .telebox-titlebar-icon-maximize {
   background: center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");
 }
-
 .telebox-titlebar-icon-maximize.is-active {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K");
 }
@@ -346,11 +342,9 @@
 .telebox-color-scheme-dark {
   color-scheme: dark;
 }
-
 .telebox-color-scheme-dark .telebox-title {
   color: #e9e9e9;
 }
-
 .telebox-color-scheme-dark .telebox-titlebar {
   color: #e9e9e9;
   background: #43434d;
@@ -362,7 +356,7 @@
   visibility: hidden;
   display: block;
   position: absolute;
-  z-index: 200;
+  z-index: 1000;
   width: 40px;
   height: 40px;
   margin: 0;
@@ -394,9 +388,18 @@
 .telebox-color-scheme-dark {
   color-scheme: dark;
 }
-
 .telebox-color-scheme-dark.telebox-collector {
   background-color: #43434d;
+}
+
+.telebox-collector-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: none;
 }.telebox-max-titlebar {
   user-select: none;
   -webkit-touch-callout: none;
@@ -405,7 +408,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 50000;
+  z-index: 1000;
 }
 .telebox-max-titlebar .telebox-title {
   display: none;
@@ -416,9 +419,11 @@
 .telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title {
   display: block;
 }
+
 .telebox-max-titlebar-maximized {
   display: flex;
 }
+
 .telebox-titles {
   height: 100%;
   margin: 0;
@@ -446,10 +451,10 @@
   background-color: rgba(238, 238, 247, 0.8);
 }
 .telebox-titles::-webkit-scrollbar-thumb:hover {
-  background-color: #eeeef7;
+  background-color: rgb(238, 238, 247);
 }
 .telebox-titles::-webkit-scrollbar-thumb:active {
-  background-color: #eeeef7;
+  background-color: rgb(238, 238, 247);
 }
 .telebox-titles::-webkit-scrollbar-thumb:vertical {
   min-height: 50px;
@@ -457,6 +462,7 @@
 .telebox-titles::-webkit-scrollbar-thumb:horizontal {
   min-width: 50px;
 }
+
 .telebox-titles-content {
   height: 100%;
   display: flex;
@@ -464,6 +470,7 @@
   align-items: center;
   padding: 0;
 }
+
 .telebox-titles-tab {
   height: 100%;
   overflow: hidden;
@@ -484,12 +491,15 @@
   cursor: pointer;
   user-select: none;
 }
+
 .telebox-titles-tab-focus {
   color: #357bf6;
 }
+
 .telebox-readonly .telebox-titles-tab {
   cursor: not-allowed;
 }
+
 .telebox-color-scheme-dark {
   color-scheme: dark;
 }
@@ -503,4 +513,87 @@
 }
 .telebox-color-scheme-dark .telebox-title {
   color: #e9e9e9;
+}.telebox-app-menu-app-menu-badge {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  width: auto;
+  height: 12px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+  background-color: red;
+  border-radius: 6px;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 12px;
+  text-align: center;
+  transform: scale(0.7);
+}
+
+.telebox-app-menu-app-menu-tooltip {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  transform: translateY(-50px);
+  width: 100px;
+  height: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  box-shadow: 0 2px 6px rgba(47, 65, 146, 0.1490196078);
+  border-radius: 4px;
+  padding: 3px 0;
+  background-color: #fff;
+  pointer-events: none;
+}
+
+.telebox-app-menu-app-menu-item {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 5px 0 15px;
+  box-sizing: border-box;
+  width: 100%;
+  pointer-events: auto;
+  color: #999;
+}
+.telebox-app-menu-app-menu-item:hover {
+  background-color: #f0f0f0;
+}
+.telebox-app-menu-app-menu-item.show-all, .telebox-app-menu-app-menu-item.hidden-all {
+  padding-left: 20px;
+  pointer-events: none;
+  background-size: 15%;
+  background-position-y: center;
+  background-position-x: 2px;
+  background-repeat: no-repeat;
+}
+.telebox-app-menu-app-menu-item.active {
+  color: #333;
+  pointer-events: auto;
+}
+.telebox-app-menu-app-menu-item.hidden-all {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K);
+}
+.telebox-app-menu-app-menu-item.show-all {
+  border-top: 1px solid #ccc;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==);
+}
+
+.telebox-app-menu-app-menu-item-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: left;
+  height: 20px;
+  pointer-events: none;
 }