Everything's pretty much done but url.zoo.dev has been broken and we need to think about how to test reliably

src/components/ProjectSidebarMenu.tsx

@@ -99,7 +99,7 @@ function ProjectMenuPopover({
   const location = useLocation()
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()
-  const { settings } = useSettingsAuthContext()
+  const { settings, auth } = useSettingsAuthContext()
   const { commandBarState, commandBarSend } = useCommandsContext()
   const { onProjectClose } = useLspContext()
   const exportCommandInfo = { name: 'Export', groupId: 'modeling' }
@@ -188,12 +188,14 @@ function ProjectMenuPopover({
           Element: 'button',
           children: 'Share link to file',
           onClick: async () => {
-            const shareUrl = createFileLink({
+            const shareUrl = await createFileLink(auth.context.token, {
               code: codeManager.code,
               name: file?.name || '',
               units: settings.context.modeling.defaultUnit.current,
             })
 
+            console.log(shareUrl)
+
             await globalThis.navigator.clipboard.writeText(shareUrl)
             toast.success(
               'Link copied to clipboard. Anyone who clicks this link will get a copy of this file. Share carefully!',

src/components/ProtocolHandler.tsx

@@ -3,6 +3,7 @@ import { ZOO_STUDIO_PROTOCOL } from 'lib/link'
 import { useState } from 'react'
 import { useCreateFileLinkQuery, CreateFileSchemaMethodOptional } from 'hooks/useCreateFileLinkQueryWatcher'
 import { isDesktop } from 'lib/isDesktop'
+import { Spinner } from './Spinner'
 
 export const ProtocolHandler = (props: { children: ReactNode } ) => {
   const [hasCustomProtocolScheme, setHasCustomProtocolScheme] = useState(false)
@@ -34,7 +35,12 @@ export const ProtocolHandler = (props: { children: ReactNode } ) => {
     ></div>
     <div className="flex items-center justify-center h-full" style={{ zIndex: 10 }}>
       <div className="p-4 mx-auto border rounded rounded-tl-none shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70">
-        <span>Loading model into Zoo Design Studio,&nbsp;</span><a className="cursor-pointer" onClick={continueToWebApp}>or continue to the web app</a>
+        <div className="gap-4 flex flex-col items-center">
+          <div>Launching</div>
+          <img src={pathLogomarkSvg} style={{ filter: `brightness(${getSystemTheme() === 'light' ? 10 : 0}%)`, }} />
+          <Spinner />
+          <button onClick={continueToWebApp}>Continue to web app</button>
+        </div>
       </div>
     </div>
   </div> : props.children

src/lib/createFileLink.ts

@@ -1,6 +1,9 @@
 import { UnitLength_type } from '@kittycad/lib/dist/types/src/models'
+import { postUserShortlink } from 'lib/desktop'
 import { CREATE_FILE_URL_PARAM } from './constants'
 import { stringToBase64 } from './base64'
+import withBaseURL from 'lib/withBaseURL'
+import { isDesktop } from 'lib/isDesktop'
 
 export interface FileLinkParams {
   code: string
@@ -11,31 +14,34 @@ export interface FileLinkParams {
 /**
  * Given a file's code, name, and units, creates shareable link
  */
-export async function createFileLink({ code, name, units }: FileLinkParams) {
+export async function createFileLink(token: string, { code, name, units }: FileLinkParams) {
-  const token = await getAndSyncStoredToken(input)
+  let urlUserShortlinks = withBaseURL('/users/shortlinks')
-  const urlUserShortlinks = withBaseURL('/user/shortlinks')
 
-  const origin = globalThis.window.location.origin
+  // During development, the "handler" needs to first be the web app version,
+  // which exists on localhost:3000 typically.
+  let origin = 'http://localhost:3000'
 
-  if (!token && isDesktop()) return Promise.reject(new Error('No token found'))
+  let urlFileToShare = new URL(
-
-  let headers = {
-    'Content-Type': 'application/json',
-  }
-  if (token) headers['Authorization'] = `Bearer ${token}`
-
-  const urlFileToShare = new URL(
     `/?${CREATE_FILE_URL_PARAM}&name=${encodeURIComponent(
       name
     )}&units=${units}&code=${encodeURIComponent(stringToBase64(code))}`,
-    origin
+    origin,
   ).toString()
 
-  const resp = await fetch(urlUserShortlinks, {
+  // Remove this monkey patching
-    headers,
+  function fixTheBrokenShitUntilItsFixedOnDev() {
-    body: JSON.stringify({ url: urlFileToShare }),
+    urlUserShortlinks = urlUserShortlinks.replace('https://api.dev.zoo.dev', 'https://api.zoo.dev')
-  })
+    console.log(urlUserShortlinks)
-  const shortlink = await resp.json()
+  }
 
-  return shortlink.url
+  fixTheBrokenShitUntilItsFixedOnDev()
+
+  return await fetch(urlUserShortlinks, {
+    method: 'POST',
+    headers: {
+      'Content-type': 'application/json',
+      'Authorization': `Bearer ${token}`,
+    },
+    body: JSON.stringify({ url: urlFileToShare })
+  }).then((resp) => resp.json())
 }

src/main.ts

@@ -9,6 +9,7 @@ import {
   dialog,
   shell,
   nativeTheme,
+  session,
 } from 'electron'
 import path, { join } from 'path'
 import fs from 'fs'
@@ -87,6 +88,22 @@ const createWindow = (filePath?: string): BrowserWindow => {
     backgroundColor: nativeTheme.shouldUseDarkColors ? '#1C1C1C' : '#FCFCFC',
   })
 
+  const filter = {
+    urls: ['*://api.zoo.dev/*', '*://api.dev.zoo.dev/*']
+  }
+
+  session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => {
+    console.log(details)
+    details.requestHeaders['Origin'] = 'https://app.zoo.dev'
+    details.requestHeaders['Access-Control-Allow-Origin'] = ['*']
+    console.log(details)
+    callback({
+      requestHeaders: {
+        'Origin': 'https://app.zoo.dev'
+      }
+    })
+  })
+
   // and load the index.html of the app.
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
     newWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL).catch(reportRejection)