@netless/telebox-insider 0.3.0-beta.5 → 0.3.0-beta.7

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;
+    private hasMinimizedBox;
+    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">;
@@ -804,8 +812,9 @@ interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     getBoxesStatus?: () => Map<string, TeleBoxState>;
 }
 declare class MaxTitleBar extends DefaultTitleBar {
-    getBoxesStatus?: MaxTitleBarConfig["getBoxesStatus"];
+    getBoxesStatus?: () => Map<string, TeleBoxState>;
     constructor(config: MaxTitleBarConfig);
+    get boxesStatus(): Map<string, TeleBoxState> | undefined;
     hasMaximizedBoxInStatus(): boolean;
     get MaximizedBoxes(): MaxTitleBarTeleBox[];
     /**
@@ -831,6 +840,37 @@ 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;
+    readonly container: HTMLDivElement;
+    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;
+    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>;
@@ -846,9 +886,11 @@ interface TeleBoxManager extends ValEnhancedResult<ValConfig> {
 declare class TeleBoxManager {
     private boxesStatus$;
     private lastNotMinimizedBoxesStatus$;
-    private effectBoxStatusTimer?;
+    private appMenu;
+    private useBoxesStatus;
+    private effectBoxesStatusTimer?;
     private effectLastNotMinimizedBoxStatusTimer?;
-    constructor({ root, prefersColorScheme, minimized, maximized, fence, containerRect, collector, namespace, readonly, }?: TeleBoxManagerConfig);
+    constructor({ root, prefersColorScheme, minimized, maximized, fence, containerRect, collector, namespace, readonly, useBoxesStatus, }?: TeleBoxManagerConfig);
     get boxes(): ReadonlyArray<TeleBox>;
     get topBox(): TeleBox | undefined;
     readonly events: TeleBoxManagerEvents;
@@ -857,6 +899,7 @@ 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;
@@ -864,24 +907,40 @@ declare class TeleBoxManager {
     setState(state: TeleBoxState, skipUpdate?: boolean): this;
     setBoxStatus(boxId: string, boxStatus?: TeleBoxState, skipUpdate?: boolean): void;
     getBoxStatus(boxId: string): TeleBoxState | undefined;
-    getLastNotMinimizedBoxStatus(boxId: string): NotMinimizedBoxState | undefined;
     get boxesStatus(): ReadonlyMap<string, TeleBoxState>;
     get lastNotMinimizedBoxesStatus(): ReadonlyMap<string, NotMinimizedBoxState>;
     setBoxesStatus(boxesStatus: Map<string, TeleBoxState>, skipUpdate?: boolean): void;
-    private effectBoxStatusTimerFunc;
+    getBoxesStatus(): Map<string, TeleBoxState>;
     private effectBoxStatusChange;
+    private effectBoxesStatusTimerFunc;
+    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;
     setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus: Map<string, NotMinimizedBoxState>, skipUpdate?: boolean): void;
     private effectLastNotMinimizedBoxStatusChange;
-    private getAllMinimizedBoxes;
+    private effectLastNotMinimizedBoxStatusFunc;
+    private getUnabledBoxesStatusZIndex;
+    /** 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;
@@ -897,11 +956,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;
+    private getMaximizedTopBox;
     protected makeMaximizedTopBoxFocus(): void;
-    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;
 }