about tab

packages/repl/package.json

@@ -31,6 +31,7 @@
     "nanoid": "^5.0.9",
     "nanostores": "^0.11.3",
     "onigasm": "^2.2.5",
+    "semver": "^7.6.3",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.9.4",
     "solid-sonner": "^0.2.8",

packages/repl/src/components/Updater.tsx

@@ -2,6 +2,7 @@ import { filesize } from 'filesize'
 import { workerInvoke, workerOn } from 'mtcute-repl-worker/client'
 import { createSignal, onMount } from 'solid-js'
 import { Spinner } from '../lib/components/ui/spinner.tsx'
+import { $versions } from '../store/versions.ts'
 
 export interface UpdaterProps {
   onComplete: () => void
@@ -14,7 +15,8 @@ export function Updater(props: UpdaterProps) {
 
   async function runUpdater() {
     setStep('Checking for updates...')
-    const updates = await workerInvoke('vfs', 'checkForUpdates')
+    const { updates, latestVersions } = await workerInvoke('vfs', 'checkForUpdates')
+    $versions.set(latestVersions)
 
     if (Object.keys(updates).length === 0) {
       props.onComplete()

packages/repl/src/components/settings/AboutTab.tsx

@@ -0,0 +1,60 @@
+import compare from 'semver/functions/compare'
+import { SiGithub } from 'solid-icons/si'
+import { Button } from '../../lib/components/ui/button.tsx'
+import { $versions } from '../../store/versions.ts'
+
+export function AboutTab() {
+  const maxVersion = () => {
+    let maxVersion = '0.0.0'
+    for (const [pkg, version] of Object.entries($versions.get())) {
+      if (pkg === '@mtcute/tl') continue
+      if (compare(version, maxVersion) > 0) {
+        maxVersion = version
+      }
+    }
+
+    return maxVersion
+  }
+
+  return (
+    <div class="flex h-full flex-col items-center gap-4 px-3 py-16">
+      <img
+        class="size-24"
+        src="https://mtcute.dev/mtcute-logo.svg"
+        alt="mtcute logo"
+      />
+      <div class="flex flex-col items-center gap-1">
+        <h1 class="text-xl font-bold">
+          mtcute playground
+        </h1>
+        <p class="text-xs text-muted-foreground">
+          (running mtcute v
+          {maxVersion()}
+          ,
+          layer
+          {' '}
+          {$versions.get()['@mtcute/tl'].split('.')[0]}
+          )
+        </p>
+      </div>
+      <div class="max-w-96 text-center text-sm text-muted-foreground">
+        An interactive playground and REPL for mtcute
+        <br />
+        (a Telegram client library), right in your browser!
+      </div>
+      <p class="text-sm text-muted-foreground">
+        <Button
+          variant="ghost"
+          size="sm"
+          as="a"
+          href="https://github.com/mtcute/repl"
+          target="_blank"
+          class="flex flex-row items-center gap-1 text-muted-foreground"
+        >
+          <SiGithub class="mr-2 size-4" />
+          Source code
+        </Button>
+      </p>
+    </div>
+  )
+}

packages/repl/src/components/settings/Settings.tsx

@@ -7,6 +7,7 @@ import {
   DialogContent,
 } from '../../lib/components/ui/dialog.tsx'
 import { cn } from '../../lib/utils.ts'
+import { AboutTab } from './AboutTab.tsx'
 import { AccountsTab } from './AccountsTab.tsx'
 
 export type SettingsTab =
@@ -31,13 +32,13 @@ const tabs: Array<TabDefinition> = [
     id: 'libraries',
     title: 'Libraries',
     icon: LucideLibrary,
-    content: () => <div>asd</div>,
+    content: () => <div class="p-3">Not implemented yet...</div>,
   },
   {
     id: 'about',
     title: 'About',
     icon: LucideCode,
-    content: () => <div>asd</div>,
+    content: AboutTab,
   },
 ]
 

packages/repl/src/store/versions.ts

@@ -0,0 +1,3 @@
+import { atom } from 'nanostores'
+
+export const $versions = atom<Record<string, string>>({})

packages/worker/src/worker/vfs.ts

@@ -13,11 +13,14 @@ async function getVfs() {
 }
 
 export class ReplWorkerVfs {
-  async checkForUpdates(): Promise<Record<string, string>> {
+  async checkForUpdates() {
     const latestVersions = await getLatestVersions()
     const versions = await getPackagesToDownload(latestVersions, await getVfs())
 
-    return versions
+    return {
+      updates: versions,
+      latestVersions,
+    }
   }
 
   async downloadPackages(packages: Record<string, string>) {

pnpm-lock.yaml

@@ -119,6 +119,9 @@ importers:
       onigasm:
         specifier: ^2.2.5
         version: 2.2.5
+      semver:
+        specifier: ^7.6.3
+        version: 7.6.3
       solid-icons:
         specifier: ^1.1.0
         version: 1.1.0(solid-js@1.9.4)