feat: init

twake/frontend/src/utils/browser-detect/common.ts

@@ -0,0 +1,19 @@
+import { detect } from 'detect-browser';
+import { BrowserInformation } from './types';
+
+/**
+ * Detects the current browser and operating system.
+ *
+ * @returns {BrowserInformation | null} the browser information or null if it could not be detected
+ */
+export const getBrowserInformation = (): BrowserInformation | null => {
+  const browser = detect();
+
+  if (!browser) return null;
+
+  return {
+    name: browser.name,
+    version: browser.version,
+    os: browser.os,
+  };
+};

twake/frontend/src/utils/browser-detect/detect.ts

@@ -0,0 +1,18 @@
+import customProtocolCheck from 'custom-protocol-check';
+
+/**
+ * checks if the twake app is installed in the system using the browser
+ *
+ * @returns {boolean} true if the twake app is installed
+ */
+export const detect = async (path: string): Promise<boolean> => {
+  return new Promise(resolve => {
+    customProtocolCheck(
+      path,
+      () => resolve(false),
+      () => resolve(true),
+      undefined,
+      () => resolve(false),
+    );
+  });
+};

twake/frontend/src/utils/browser-detect/index.ts

@@ -0,0 +1,38 @@
+import Electron from 'app/features/global/framework/electron-service';
+import { getDevice } from 'app/features/global/utils/device';
+import { getBrowserInformation } from './common';
+import { detect } from './detect';
+
+/**
+ * Checks if the twake desktop app is installed in the system.
+ *
+ * @returns {Promise<boolean>} true if the twake app is installed
+ */
+export async function detectDesktopAppPresence(
+  path?: string,
+  options?: { returnFalseIfOnDesktopApp: false },
+): Promise<boolean> {
+  const targetBrowser = getBrowserInformation();
+
+  //If we are already on the desktop app
+  if (Electron.isElectron()) {
+    return options?.returnFalseIfOnDesktopApp ? false : true;
+  }
+
+  //Do not run this on mobile
+  if (['ios', 'android'].includes(getDevice())) {
+    return false;
+  }
+
+  // Chrome on linux is not supported
+  if (targetBrowser?.name === 'chrome' && targetBrowser?.os === 'Linux') {
+    console.debug('Desktop app detection: Chrome on Linux is not supported');
+    return false;
+  }
+
+  console.debug(
+    `Desktop app detection: target browser: ${targetBrowser?.name} on ${targetBrowser?.os}`,
+  );
+
+  return await detect(path || 'twake://check');
+}

twake/frontend/src/utils/browser-detect/types.ts

@@ -0,0 +1,5 @@
+export type BrowserInformation = {
+  name: string;
+  version: string | null;
+  os: string | null;
+};

twake/frontend/src/utils/messages/index.ts

@@ -0,0 +1,21 @@
+import { NodeMessage } from 'app/features/messages/types/message';
+import routerService from 'app/features/router/services/router-service';
+
+/**
+ * Go to a specific message.
+ * 
+ * @param {NodeMessage} message - The message to scroll to
+ * @param {String} companyId - The company id
+ * @param {String} channelId - The channel id
+ * @param {String} workspaceId - The workspace id
+ */
+export const gotoMessage = (message: NodeMessage, companyId: string, channelId: string, workspaceId: string): void => {
+  routerService.push(
+    routerService.generateRouteFromState({
+      companyId,
+      channelId,
+      workspaceId,
+      threadId: message.thread_id,
+    }),
+  );
+};

twake/frontend/src/utils/transitions.ts

@@ -0,0 +1,35 @@
+export const fadeZoomTransition = {
+  enter: 'transform transition duration-[300ms]',
+  enterFrom: 'opacity-0 scale-50',
+  enterTo: 'opacity-100 scale-100',
+  leave: 'transform duration-[300ms] transition ease-in-out',
+  leaveFrom: 'opacity-100 scale-100 ',
+  leaveTo: 'opacity-0 scale-95 ',
+};
+
+export const fadeTransition = {
+  enter: 'transform transition duration-[300ms]',
+  enterFrom: 'opacity-0',
+  enterTo: 'opacity-100',
+  leave: 'transform duration-[50ms] transition ease-in-out',
+  leaveFrom: 'opacity-100 ',
+  leaveTo: 'opacity-0 ',
+};
+
+export const slideXTransition = {
+  enter: 'transform transition duration-[300ms]',
+  enterFrom: 'opacity-0 translate-x-full',
+  enterTo: 'opacity-100',
+  leave: 'transform duration-[300ms] transition ease-in-out',
+  leaveFrom: 'opacity-100 ',
+  leaveTo: 'opacity-0 -translate-x-full',
+};
+
+export const slideXTransitionReverted = {
+  enter: 'transform transition duration-[300ms]',
+  enterFrom: 'opacity-0 -translate-x-full',
+  enterTo: 'opacity-100',
+  leave: 'transform duration-[300ms] transition ease-in-out',
+  leaveFrom: 'opacity-100 ',
+  leaveTo: 'opacity-0 translate-x-full',
+};