diff --git a/src/renderer/src/components/DeviceFrames.scss b/src/renderer/src/components/DeviceFrames.scss index 06dd0ea..9322873 100644 --- a/src/renderer/src/components/DeviceFrames.scss +++ b/src/renderer/src/components/DeviceFrames.scss @@ -64,7 +64,7 @@ } } -#frame-desktop { +#frame-tdesktop { display: flex; aspect-ratio: 0.566; max-width: 100%; @@ -79,9 +79,25 @@ } } +#frame-macos { + display: flex; + aspect-ratio: 0.621; + max-width: 100%; + height: 70%; + position: relative; + overflow: hidden; + + > div { + display: flex; + flex-grow: 1; + overflow: hidden; + } +} + #frame-iphone, #frame-android, -#frame-desktop { +#frame-tdesktop, +#frame-macos { &.placeholder { background-color: var(--device-frame-color-placeholder); border-color: var(--device-frame-border-placeholder); @@ -106,6 +122,10 @@ border-radius: 12% / 6%; } -#frame-desktop.placeholder { +#frame-tdesktop.placeholder { + border-radius: 0.625rem; +} + +#frame-macos.placeholder { border-radius: 0.625rem; } diff --git a/src/renderer/src/components/DeviceFrames.tsx b/src/renderer/src/components/DeviceFrames.tsx index dde2bf0..b1bd82f 100644 --- a/src/renderer/src/components/DeviceFrames.tsx +++ b/src/renderer/src/components/DeviceFrames.tsx @@ -2,7 +2,7 @@ import "./DeviceFrames.scss"; import type { ParentComponent } from "solid-js"; -export const IPhoneFrame: ParentComponent<{ +export const FrameIPhone: ParentComponent<{ classList?: { [k: string]: boolean | undefined; }; @@ -14,7 +14,7 @@ export const IPhoneFrame: ParentComponent<{ ); }; -export const AndroidFrame: ParentComponent<{ +export const FrameAndroid: ParentComponent<{ classList?: { [k: string]: boolean | undefined; }; @@ -26,13 +26,25 @@ export const AndroidFrame: ParentComponent<{ ); }; -export const DesktopFrame: ParentComponent<{ +export const FrameDesktop: ParentComponent<{ classList?: { [k: string]: boolean | undefined; }; }> = (props) => { return ( -
+
+
{props.children}
+
+ ); +}; + +export const FrameMacOS: ParentComponent<{ + classList?: { + [k: string]: boolean | undefined; + }; +}> = (props) => { + return ( +
{props.children}
); diff --git a/src/renderer/src/components/DialogCreateProject.tsx b/src/renderer/src/components/DialogCreateProject.tsx index 8cb000d..b1ef844 100644 --- a/src/renderer/src/components/DialogCreateProject.tsx +++ b/src/renderer/src/components/DialogCreateProject.tsx @@ -14,6 +14,7 @@ import Input from "./Input"; import { isValidURL } from "@renderer/utils/general"; import type { TelegramPlatform } from "@renderer/utils/themes"; import Alert from "./Alert"; +import { defaultProjectSettings } from "@renderer/utils/telegram"; const DialogCreateProject: Component = () => { const [form, setForm] = createStore({ @@ -50,24 +51,17 @@ const DialogCreateProject: Component = () => { token: form.token, }; - const defaultSettings: Project["settings"][TelegramPlatform] = { - expanded: false, - mode: "light", - open: true, - floating: false, - }; - setPreferences("projects", [ ...preferences.projects, { ...project, settings: { - android: defaultSettings, - ios: defaultSettings, - tdesktop: defaultSettings, - web: defaultSettings, - weba: defaultSettings, - macos: defaultSettings, + android: defaultProjectSettings, + ios: defaultProjectSettings, + tdesktop: defaultProjectSettings, + web: defaultProjectSettings, + weba: defaultProjectSettings, + macos: defaultProjectSettings, }, }, ]); diff --git a/src/renderer/src/components/FloatingProject.scss b/src/renderer/src/components/FloatingProject.scss index 6f65c49..aed3904 100644 --- a/src/renderer/src/components/FloatingProject.scss +++ b/src/renderer/src/components/FloatingProject.scss @@ -29,7 +29,8 @@ body.floating-project { #section-telegram-ios, #section-telegram-android, - #section-telegram-tdesktop { + #section-telegram-tdesktop, + #section-telegram-macos { > div { width: 100%; @@ -43,11 +44,13 @@ body.floating-project { #frame-iphone, #frame-android, - #frame-desktop { + #frame-tdesktop, + #frame-macos { width: 100% !important; } - #viewport-telegram-desktop { + #viewport-telegram-tdesktop, + #viewport-telegram-macos { > section { > header { > div { diff --git a/src/renderer/src/components/FloatingProject.tsx b/src/renderer/src/components/FloatingProject.tsx index 037aa2f..6da6daa 100644 --- a/src/renderer/src/components/FloatingProject.tsx +++ b/src/renderer/src/components/FloatingProject.tsx @@ -11,11 +11,15 @@ import { initStore } from "@renderer/utils/store"; import { preferences, setPreferences } from "@renderer/utils/preferences"; import { createStore, produce } from "solid-js/store"; import type { TMAProjectFrame } from "@renderer/pages/Project"; -import { generateProjectFrame } from "@renderer/utils/telegram"; +import { + defaultProjectSettings, + generateProjectFrame, +} from "@renderer/utils/telegram"; import { deserializeObject } from "@renderer/utils/general"; import { useSettings } from "@renderer/contexts/SettingsContext"; import { PlatformNames } from "@renderer/utils/platforms"; import { ViewportDesktop } from "@renderer/sections/ViewportDesktop"; +import { ViewportMacOS } from "@renderer/sections/ViewportMacOS"; const FloatingProject: Component = () => { const params = useParams(); @@ -40,12 +44,14 @@ const FloatingProject: Component = () => { const projectItem = store.projects.find( (item) => item.id === project.id, ); + if (projectItem) { - projectItem.settings[platform].mode = projectFrame.state.mode; - projectItem.settings[platform].expanded = projectFrame.state.expanded; - projectItem.settings[platform].open = projectFrame.state.open; - projectItem.settings[platform].floating = - projectFrame.window.floating; + projectItem.settings[platform] = { + expanded: projectFrame.state.expanded, + floating: projectFrame.window.floating, + mode: projectFrame.state.mode, + open: projectFrame.state.open, + }; } }), ); @@ -61,67 +67,50 @@ const FloatingProject: Component = () => { }); return ( - - -
-
- - +
+
+ + + -
-
- - - -
-
- + + -
-
- + - -
-
- + + - + -
-
- - + + +
+
); }; diff --git a/src/renderer/src/components/PlatformToggle.tsx b/src/renderer/src/components/PlatformToggle.tsx index a0ed5ce..d3e92d2 100644 --- a/src/renderer/src/components/PlatformToggle.tsx +++ b/src/renderer/src/components/PlatformToggle.tsx @@ -10,7 +10,7 @@ import { produce } from "solid-js/store"; export const PlatformToggle: Component = () => { return (
    - + {(platform) => { setPreferences( produce((state) => { diff --git a/src/renderer/src/pages/Preferences.tsx b/src/renderer/src/pages/Preferences.tsx index f6e41cf..92d215a 100644 --- a/src/renderer/src/pages/Preferences.tsx +++ b/src/renderer/src/pages/Preferences.tsx @@ -187,7 +187,9 @@ const PreferencesPage: Component = () => {

    Viewport Settings

      - + {(platform) => (
    • {PlatformNames[platform]} Viewport diff --git a/src/renderer/src/pages/Project.scss b/src/renderer/src/pages/Project.scss index e0c4781..f386a97 100644 --- a/src/renderer/src/pages/Project.scss +++ b/src/renderer/src/pages/Project.scss @@ -25,7 +25,8 @@ #section-telegram-ios, #section-telegram-android, -#section-telegram-tdesktop { +#section-telegram-tdesktop, +#section-telegram-macos { display: flex; flex-direction: column; flex-grow: 1; @@ -33,6 +34,7 @@ align-items: center; justify-content: center; overflow: hidden; + flex-basis: 0; > div { display: flex; diff --git a/src/renderer/src/pages/Project.tsx b/src/renderer/src/pages/Project.tsx index 3228079..149aa2c 100644 --- a/src/renderer/src/pages/Project.tsx +++ b/src/renderer/src/pages/Project.tsx @@ -1,6 +1,13 @@ import "./Project.scss"; -import { createEffect, Show, type Component } from "solid-js"; +import { + createEffect, + For, + Match, + Show, + Switch, + type Component, +} from "solid-js"; import { GridPattern } from "../components/GridPattern"; import type { Project } from "../types"; @@ -15,6 +22,7 @@ import { preferences, setPreferences } from "@renderer/utils/preferences"; import { PlatformNames } from "@renderer/utils/platforms"; import { ViewportDesktop } from "@renderer/sections/ViewportDesktop"; import { defaultProjectPlatforms } from "@renderer/utils/project"; +import { ViewportMacOS } from "@renderer/sections/ViewportMacOS"; export type TMAProjectFrame = { platform: TelegramPlatform; @@ -31,57 +39,12 @@ export type TMAProjectFrame = { }; }; -const SectionAndroid: Component<{ project: Project }> = (props) => { - const platform: TelegramPlatform = "android"; - - const [projectFrame, setProjectFrame] = createStore( - generateProjectFrame(platform, props.project), - ); - - createEffect(async () => { - // TODO: handle this in a better place - setPreferences( - produce((store) => { - const projectItem = store.projects.find( - (item) => item.id === props.project.id, - ); - if (projectItem) { - projectItem.settings[platform].mode = projectFrame.state.mode; - projectItem.settings[platform].expanded = projectFrame.state.expanded; - projectItem.settings[platform].open = projectFrame.state.open; - projectItem.settings[platform].floating = - projectFrame.window.floating; - } - }), - ); - }); - - return ( -
      -
      - - - -
      -
      - ); -}; - -const SectionIOS: Component<{ project: Project }> = (props) => { - const platform: TelegramPlatform = "ios"; - +const SectionPlatform: Component<{ + project: Project; + platform: TelegramPlatform; +}> = (props) => { const [projectFrame, setProjectFrame] = createStore( - generateProjectFrame(platform, props.project), + generateProjectFrame(props.platform, props.project), ); createEffect(async () => { @@ -91,79 +54,63 @@ const SectionIOS: Component<{ project: Project }> = (props) => { const projectItem = store.projects.find( (item) => item.id === props.project.id, ); - if (projectItem) { - projectItem.settings[platform].mode = projectFrame.state.mode; - projectItem.settings[platform].expanded = projectFrame.state.expanded; - projectItem.settings[platform].open = projectFrame.state.open; - projectItem.settings[platform].floating = - projectFrame.window.floating; - } - }), - ); - }); - - return ( -
      -
      - - - -
      -
      - ); -}; -const SectionDesktop: Component<{ project: Project }> = (props) => { - const platform: TelegramPlatform = "tdesktop"; - - const [projectFrame, setProjectFrame] = createStore( - generateProjectFrame(platform, props.project), - ); - - createEffect(async () => { - // TODO: handle this in a better place - setPreferences( - produce((store) => { - const projectItem = store.projects.find( - (item) => item.id === props.project.id, - ); if (projectItem) { - projectItem.settings[platform].mode = projectFrame.state.mode; - projectItem.settings[platform].expanded = projectFrame.state.expanded; - projectItem.settings[platform].open = projectFrame.state.open; - projectItem.settings[platform].floating = - projectFrame.window.floating; + projectItem.settings[props.platform] = { + expanded: projectFrame.state.expanded, + floating: projectFrame.window.floating, + mode: projectFrame.state.mode, + open: projectFrame.state.open, + }; } }), ); }); return ( -
      +
      - + + + + + + + + + + + + + + + + +
      ); @@ -183,27 +130,22 @@ const ProjectPage: Component<{ id: Project["id"] }> = (props) => { />
      - - - - - ( + + + )} - > - - - - - - +
      ); diff --git a/src/renderer/src/scss/_variables.scss b/src/renderer/src/scss/_variables.scss index 57567e2..9348cb9 100644 --- a/src/renderer/src/scss/_variables.scss +++ b/src/renderer/src/scss/_variables.scss @@ -23,7 +23,8 @@ rgba(208, 214, 140, 1) 100% ); --telegram-android-bg-gradient-light: var(--telegram-ios-bg-gradient-light); - --telegram-desktop-bg-gradient-light: var(--telegram-ios-bg-gradient-light); + --telegram-tdesktop-bg-gradient-light: var(--telegram-ios-bg-gradient-light); + --telegram-macos-bg-gradient-light: var(--telegram-ios-bg-gradient-light); --telegram-ios-bg-gradient-dark: linear-gradient( 135deg, diff --git a/src/renderer/src/scss/sections/_menu-more.scss b/src/renderer/src/scss/sections/_menu-more.scss index 8f41e61..82a0117 100644 --- a/src/renderer/src/scss/sections/_menu-more.scss +++ b/src/renderer/src/scss/sections/_menu-more.scss @@ -173,4 +173,48 @@ } } } + + &.macos { + > div { + border-radius: 0.5rem; + overflow: hidden; + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); + border: 1px solid; + + > ul { + > li:not(:last-child) { + border-bottom: 1px solid; + } + } + } + + &.light { + > div { + background-color: rgba(255, 255, 255, 0.75); + color: #000000; + border-color: rgba(0, 0, 0, 0.25); + + > ul { + > li { + border-color: rgba(0, 0, 0, 0.25); + } + } + } + } + + &.dark { + > div { + background-color: rgba(38, 38, 38, 0.75); + color: #ffffff; + border-color: rgba(255, 255, 255, 0.25); + + > ul { + > li { + border-color: rgba(255, 255, 255, 0.25); + } + } + } + } + } } diff --git a/src/renderer/src/scss/sections/_popup.scss b/src/renderer/src/scss/sections/_popup.scss index 2be9f69..8f1bc45 100644 --- a/src/renderer/src/scss/sections/_popup.scss +++ b/src/renderer/src/scss/sections/_popup.scss @@ -317,3 +317,113 @@ } } } + +.popup-overlay.macos { + position: absolute; + inset: 0; + z-index: 99999999; + + > div { + position: absolute; + inset: 0; + transition: all 0.25s; + background-color: rgba(0, 0, 0, 0.5); + } + + &.light { + > section { + background-color: rgba(255, 255, 255, 0.75); + color: #000000; + + > ul { + border-color: rgba(0, 0, 0, 0.2); + + > li { + color: rgba(0, 128, 255); + border-color: rgba(0, 0, 0, 0.2) !important; + + &:active { + background-color: rgba(0, 0, 0, 0.1); + } + } + } + } + } + + &.dark { + > section { + background-color: rgba(38, 38, 38, 0.75); + color: #ffffff; + + > ul { + border-color: rgba(255, 255, 255, 0.15); + + > li { + color: rgba(0, 128, 255); + border-color: rgba(255, 255, 255, 0.15) !important; + + &:active { + background-color: rgba(255, 255, 255, 0.1); + } + } + } + } + } + + > section { + position: absolute; + top: 50%; + left: 50%; + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); + transform: translateX(-50%) translateY(-50%); + border-radius: 0.75rem; + width: 70%; + overflow: hidden; + + > div { + display: flex; + flex-direction: column; + padding: 1rem; + + > b { + font-weight: bold; + font-size: 1.25rem; + text-align: center; + width: 100%; + } + + > p { + font-size: 1rem; + text-align: center; + width: 100%; + } + } + + > ul { + border-top: 1px solid; + display: flex; + align-items: center; + + > li { + display: flex; + flex-grow: 1; + flex-shrink: 0; + flex-basis: 0; + padding: 0.5rem 0; + text-align: center; + justify-content: center; + align-items: center; + cursor: pointer; + + > span.destructive { + color: rgba(255, 0, 32); + } + + &:not(:last-child) { + border-inline-end: 1px solid; + } + } + } + } +} diff --git a/src/renderer/src/scss/sections/_viewport-macos.scss b/src/renderer/src/scss/sections/_viewport-macos.scss new file mode 100644 index 0000000..d67264f --- /dev/null +++ b/src/renderer/src/scss/sections/_viewport-macos.scss @@ -0,0 +1,329 @@ +#viewport-telegram-macos { + display: flex; + width: calc(100% - 1rem); + height: calc(100% - 1rem); + margin: 0.5rem; + flex-direction: column; + position: relative; + border-radius: 0.625rem; + overflow: hidden; + box-shadow: + 0 4px 8px rgba(0, 0, 0, 0.12), + 0 2px 4px rgba(0, 0, 0, 0.08); + + > header { + display: flex; + padding: 1rem; + cursor: default; + gap: 1rem; + + * { + cursor: default; + } + + > div { + &:nth-child(2) { + display: flex; + align-items: center; + + > span { + display: flex; + align-items: center; + font-size: 0.925rem; + + > svg { + display: inline; + font-size: 1.425rem; + } + } + } + + &:nth-child(1) { + flex-grow: 1; + display: flex; + gap: 0.75rem; + + > div:first-child { + display: flex; + align-items: center; + justify-content: end; + + > span { + display: flex; + color: white; + aspect-ratio: 1/1; + border-radius: 50%; + width: 2.25rem; + align-items: center; + justify-content: center; + text-align: center; + font-weight: 500; + } + } + + > div:last-child { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + text-align: initial; + overflow: hidden; + max-width: 100%; + text-overflow: ellipsis; + + > h2 { + line-height: normal; + font-size: 1rem; + font-weight: 600; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: flex; + max-width: 12rem; + } + + > span { + line-height: normal; + font-size: 0.75rem; + opacity: 0.75; + } + } + } + } + } + + &.dark { + border-color: var(--tg-var-macos-dark-section_separator_color); + + > header { + border-color: var(--tg-var-macos-dark-section_separator_color); + } + + > div:nth-child(2) { + background: var(--tg-var-macos-dark-bg_color); + + &::before { + filter: invert(1); + } + } + + > section { + > footer { + background-color: var(--tg-var-macos-dark-bottom_bar_bg_color); + } + } + } + + > div:nth-child(2) { + display: flex; + content: ""; + flex-grow: 1; + background: var(--telegram-macos-bg-gradient-light); + position: relative; + + &::before { + background: url("/assets/patterns/pattern-3.svg") repeat; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + content: ""; + opacity: 0.125; + } + } + + &.open { + background-color: black; + + > header { + background-color: var(--tg-var-macos-light-section_bg_color) !important; + } + + &.dark { + > header { + background-color: var(--tg-var-macos-dark-section_bg_color) !important; + } + } + } + + > section { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: auto; + display: flex; + flex-direction: column; + overflow: hidden; + height: 100%; + + > header { + display: flex; + align-items: center; + gap: 1rem; + padding: 0 1rem; + cursor: default; + + > div { + &:nth-child(1) { + display: flex; + align-items: center; + + > span { + display: flex; + align-items: center; + font-size: 1.5rem; + cursor: pointer; + } + } + + &:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + text-align: initial; + overflow: hidden; + max-width: 100%; + text-overflow: ellipsis; + flex-grow: 1; + margin-inline-start: -0.325rem; + padding: 0.5rem 0; + + > div { + display: flex; + gap: 0.5rem; + align-items: center; + padding: 0.5rem 0.625rem; + border-radius: 0.425rem; + line-height: normal; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + + > span { + aspect-ratio: 1/1; + font-size: 0.75rem; + width: 1.325rem; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + line-height: normal; + color: white; + } + + > h2 { + line-height: normal; + font-size: 0.875rem; + font-weight: 500; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: flex; + max-width: 100%; + } + } + } + + &:nth-child(3), + &:nth-child(4) { + display: flex; + align-items: center; + justify-content: end; + font-size: 1.375rem; + cursor: pointer; + } + } + } + + > section { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + flex-grow: 1; + position: relative; + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; + overflow: hidden; + + > div { + position: absolute; + inset: 0; + z-index: 999999; + } + + > webview { + display: flex; + padding: 0; + margin: 0; + flex-grow: 1; + width: 100%; + height: 100%; + } + } + + > footer { + background-color: var(--tg-var-macos-light-bottom_bar_bg_color); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 1rem; + + > span { + color: var(--tg-var-macos-light-hint_color); + } + } + } + + > footer { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: auto; + display: flex; + padding: 0.75rem 1rem 1.75rem; + gap: 0.5rem; + align-items: center; + + > button { + cursor: pointer; + line-height: normal; + padding: 0 0.625rem; + border-radius: 100rem; + font-size: 0.875rem; + display: flex; + gap: 0.25rem; + align-items: center; + height: 2rem; + + > svg { + font-size: 1.125rem; + } + } + + > div { + display: flex; + flex-grow: 1; + align-items: center; + border-radius: 100rem; + padding: 0.25rem 0.75rem; + + > span { + flex-grow: 1; + } + } + + svg { + font-size: 1.325rem; + } + } + + #section-telegram-bottombar { + > ul { + padding: 1rem; + } + } +} diff --git a/src/renderer/src/scss/sections/_viewport-desktop.scss b/src/renderer/src/scss/sections/_viewport-tdesktop.scss similarity index 98% rename from src/renderer/src/scss/sections/_viewport-desktop.scss rename to src/renderer/src/scss/sections/_viewport-tdesktop.scss index 5cfaaca..8712838 100644 --- a/src/renderer/src/scss/sections/_viewport-desktop.scss +++ b/src/renderer/src/scss/sections/_viewport-tdesktop.scss @@ -1,4 +1,4 @@ -#viewport-telegram-desktop { +#viewport-telegram-tdesktop { display: flex; width: calc(100% - 1rem); height: calc(100% - 1rem); @@ -118,7 +118,7 @@ display: flex; content: ""; flex-grow: 1; - background: var(--telegram-desktop-bg-gradient-light); + background: var(--telegram-tdesktop-bg-gradient-light); position: relative; &::before { diff --git a/src/renderer/src/sections/MenuMore.tsx b/src/renderer/src/sections/MenuMore.tsx index 6d95f26..f787c74 100644 --- a/src/renderer/src/sections/MenuMore.tsx +++ b/src/renderer/src/sections/MenuMore.tsx @@ -8,6 +8,7 @@ import { FiMoreVertical, FiSettings } from "solid-icons/fi"; import type { TMAProjectFrame } from "@renderer/pages/Project"; import type { SetStoreFunction } from "solid-js/store"; import type { TMAProjectInner } from "@renderer/utils/telegram"; +import { BsThreeDots } from "solid-icons/bs"; export type MenuMoreStore = { open: boolean; @@ -67,6 +68,10 @@ export const MenuMore: Component<{ setMenuMore("open", !menuMore.open)} /> + + + setMenuMore("open", !menuMore.open)} /> +
      diff --git a/src/renderer/src/sections/ViewportAndroid.tsx b/src/renderer/src/sections/ViewportAndroid.tsx index bfa89b7..06f3b39 100644 --- a/src/renderer/src/sections/ViewportAndroid.tsx +++ b/src/renderer/src/sections/ViewportAndroid.tsx @@ -1,6 +1,6 @@ import "../scss/sections/_viewport-android.scss"; -import { AndroidFrame } from "@renderer/components/DeviceFrames"; +import { FrameAndroid } from "@renderer/components/DeviceFrames"; import type { Project } from "@renderer/types"; import { stringToColorDark, getNameInitials } from "@renderer/utils/general"; import { @@ -62,7 +62,7 @@ export const ViewportAndroid: Component<{ }); return ( -
      - + ); }; diff --git a/src/renderer/src/sections/ViewportDesktop.tsx b/src/renderer/src/sections/ViewportDesktop.tsx index b4e00b0..942c6bc 100644 --- a/src/renderer/src/sections/ViewportDesktop.tsx +++ b/src/renderer/src/sections/ViewportDesktop.tsx @@ -1,6 +1,6 @@ -import "../scss/sections/_viewport-desktop.scss"; +import "../scss/sections/_viewport-tdesktop.scss"; -import { DesktopFrame } from "@renderer/components/DeviceFrames"; +import { FrameDesktop } from "@renderer/components/DeviceFrames"; import type { Project } from "@renderer/types"; import { stringToColorDark, getNameInitials } from "@renderer/utils/general"; import { @@ -40,7 +40,7 @@ export const ViewportDesktop: Component<{ setProjectFrame("state", "expanded", true); return ( -
      -       + ); }; diff --git a/src/renderer/src/sections/ViewportIOS.tsx b/src/renderer/src/sections/ViewportIOS.tsx index 96ccc9b..625008b 100644 --- a/src/renderer/src/sections/ViewportIOS.tsx +++ b/src/renderer/src/sections/ViewportIOS.tsx @@ -1,6 +1,6 @@ import "../scss/sections/_viewport-ios.scss"; -import { IPhoneFrame } from "@renderer/components/DeviceFrames"; +import { FrameIPhone } from "@renderer/components/DeviceFrames"; import type { Project } from "@renderer/types"; import { stringToColorDark, getNameInitials } from "@renderer/utils/general"; import { @@ -54,7 +54,7 @@ export const ViewportIOS: Component<{ }); return ( -
- + ); }; diff --git a/src/renderer/src/sections/ViewportMacOS.tsx b/src/renderer/src/sections/ViewportMacOS.tsx new file mode 100644 index 0000000..68c14a9 --- /dev/null +++ b/src/renderer/src/sections/ViewportMacOS.tsx @@ -0,0 +1,273 @@ +import "../scss/sections/_viewport-macos.scss"; + +import { FrameMacOS } from "@renderer/components/DeviceFrames"; +import type { Project } from "@renderer/types"; +import { stringToColorDark, getNameInitials } from "@renderer/utils/general"; +import { + generateProjectInner, + generateProjectMenuMore, + type TMAProjectInner, +} from "@renderer/utils/telegram"; +import { TelegramThemes } from "@renderer/utils/themes"; + +import { type Component, Show } from "solid-js"; +import { BottomBar } from "./BottomBar"; +import { RiEditorAttachment2, RiSystemCloseFill } from "solid-icons/ri"; +import { TbSticker } from "solid-icons/tb"; +import { TiMicrophoneOutline } from "solid-icons/ti"; +import { BiRegularWindow } from "solid-icons/bi"; + +import { createStore, type SetStoreFunction } from "solid-js/store"; +import { MenuMore, type MenuMoreStore } from "./MenuMore"; +import { IoArrowBackOutline } from "solid-icons/io"; +import { FiMoreVertical } from "solid-icons/fi"; +import type { TMAProjectFrame } from "@renderer/pages/Project"; +import { TMAView, TMAViewOverlay } from "./TMAView"; + +export const ViewportMacOS: Component<{ + project: Project; + projectFrameStore: [TMAProjectFrame, SetStoreFunction]; + placeholder: boolean; +}> = (props) => { + const [projectFrame, setProjectFrame] = props.projectFrameStore; + const [projectInner, setProjectInner] = createStore( + generateProjectInner(projectFrame), + ); + const [menuMore, setMenuMore] = createStore( + generateProjectMenuMore(), + ); + + setProjectFrame("state", "expanded", true); + + return ( + + +
+
+
+
+ + {getNameInitials(props.project.name)} + +
+ +
+

{props.project.name}

+ + bot + +
+
+
+ + + +
+
+
+ + + + +
+ Message + +
+ + + } + > + +
+ +
+
+ + setMenuMore("closeOrBack", "clicked", true) + } + > + } + > + + + +
+
+
+ + {getNameInitials(props.project.name)} + +

{props.project.name}

+
+
+
+ +
+
+ + +
+ +
+ +
+ + + +
+ + + ); +}; diff --git a/src/renderer/src/types.ts b/src/renderer/src/types.ts index b6f43cc..63a1034 100644 --- a/src/renderer/src/types.ts +++ b/src/renderer/src/types.ts @@ -4,6 +4,7 @@ import type { TelegramPlatform, ThemeMode } from "./utils/themes"; import type { JSX } from "solid-js"; export type Project = { + [x: string]: any; id: string; name: string; url: string; diff --git a/src/renderer/src/utils/telegram.ts b/src/renderer/src/utils/telegram.ts index 63ada1a..ea7e484 100644 --- a/src/renderer/src/utils/telegram.ts +++ b/src/renderer/src/utils/telegram.ts @@ -105,6 +105,7 @@ export const tgEmitEvent = async ( code = `window.Telegram.WebView.receiveEvent('${eventType}', ${JSON.stringify(eventData)})`; break; case "tdesktop": + case "macos": code = `window.TelegramGameProxy.receiveEvent('${eventType}', ${JSON.stringify(eventData)})`; break; } @@ -508,12 +509,12 @@ export const generateProjectFrame = ( open: false, }, state: { - open: project.settings[platform].open, - expanded: project.settings[platform].expanded, - mode: project.settings[platform].mode, + open: (project.settings[platform] ?? defaultProjectSettings).open, + expanded: (project.settings[platform] ?? defaultProjectSettings).expanded, + mode: (project.settings[platform] ?? defaultProjectSettings).mode, }, window: { - floating: project.settings[platform].floating, + floating: (project.settings[platform] ?? defaultProjectSettings).floating, }, }; }; @@ -601,3 +602,10 @@ export const generateProjectMenuMore = (): MenuMoreStore => { }, }; }; + +export const defaultProjectSettings: Project["settings"][TelegramPlatform] = { + expanded: false, + mode: "light", + open: true, + floating: false, +}; diff --git a/src/renderer/src/utils/viewport.ts b/src/renderer/src/utils/viewport.ts index 19ad00b..cfc96ee 100644 --- a/src/renderer/src/utils/viewport.ts +++ b/src/renderer/src/utils/viewport.ts @@ -25,12 +25,12 @@ export const Viewport: { { name: "Zoom 125%", size: 480 }, ], web: [ - { name: "Web K", size: 480 }, // 480x640 + { name: "Default", size: 480 }, // 480x640 ], weba: [ - { name: "Web A", size: 420 }, // 420x690 + { name: "Default", size: 420 }, // 420x690 ], macos: [ - { name: "Mac OS", size: 400 }, // 400x644 + { name: "Default", size: 400 }, // 400x644 ], };