New welcome page (#93)

* New welcome page

* Fix lint

* Fix tests

* Fix diff issues

* More fixes and improvements

* star

Author: modmuss50

src/logic/Decompiler.ts

@@ -45,6 +45,10 @@ export function decompileResultPipeline(jar: Observable<MinecraftJar>): Observab
         distinctUntilChanged(),
         throttleTime(250),
         switchMap(([className, jar, bytecode]) => {
+            if (!className) {
+                return of();
+            }
+
             if (bytecode) {
                 return from(getClassBytecode(className, jar.jar));
             }

src/logic/Permalink.ts

@@ -5,7 +5,7 @@ import { diffView, selectedFile, selectedLines, selectedMinecraftVersion } from
 export interface State {
     version: number; // Allows us to change the permalink structure in the future
     minecraftVersion: string;
-    file: string;
+    file: string | undefined;
     selectedLines: {
         line: number;
         lineEnd?: number;
@@ -15,7 +15,7 @@ export interface State {
 const DEFAULT_STATE: State = {
     version: 0,
     minecraftVersion: "",
-    file: "net/minecraft/ChatFormatting.class",
+    file: undefined,
     selectedLines: null
 };
 
@@ -100,6 +100,13 @@ if (typeof window !== "undefined") {
             supported,
             diffView
         ]) => {
+            if (!file) {
+                document.title = "mcsrc.dev";
+                window.location.hash = '';
+                window.history.replaceState({}, '', '/');
+                return;
+            }
+
             const className = file.split('/').pop()?.replace('.class', '') || file;
             document.title = className;
 

src/logic/State.ts

@@ -1,5 +1,5 @@
 import { BehaviorSubject } from "rxjs";
-import { pairwise } from "rxjs/operators";
+import { filter, pairwise } from "rxjs/operators";
 import { Tab } from "./Tabs";
 import { getInitialState } from "./Permalink";
 
@@ -10,9 +10,9 @@ const initialState = getInitialState();
 export const selectedMinecraftVersion = new BehaviorSubject<string | null>(initialState.minecraftVersion);
 
 export const mobileDrawerOpen = new BehaviorSubject(false);
-export const selectedFile = new BehaviorSubject<string>(initialState.file);
-export const openTabs = new BehaviorSubject<Tab[]>([new Tab(initialState.file)]);
-export const tabHistory = new BehaviorSubject<string[]>([initialState.file]);
+export const selectedFile = new BehaviorSubject<string | undefined>(initialState.file);
+export const openTabs = new BehaviorSubject<Tab[]>(initialState.file ? [new Tab(initialState.file)] : []);
+export const tabHistory = new BehaviorSubject<string[]>(initialState.file ? [initialState.file] : []);
 export const searchQuery = new BehaviorSubject("");
 export const referencesQuery = new BehaviorSubject("");
 

src/logic/Tabs.ts

@@ -62,6 +62,8 @@ export const openTab = (key: string) => {
             selectedFile.next(key);
             currentTab.invalidateCachedView();
             openTabs.next([new Tab(key)]);
+        } else if (!currentTab) {
+            openTabs.next([new Tab(key)]);
         }
 
         return;
@@ -89,8 +91,6 @@ export const openTab = (key: string) => {
 };
 
 export const closeTab = (key: string) => {
-    if (openTabs.value.length <= 1) return;
-
     const tab = openTabs.value.find(o => o.key === key);
 
     tab?.invalidateCachedView();
@@ -102,15 +102,20 @@ export const closeTab = (key: string) => {
         let newKey = history.pop();
         tabHistory.next(history);
 
-        if (!newKey) {
+        if (!newKey && modifiedOpenTabs.length > 0) {
             // If undefined, open tab left of it
             let i = openTabs.value.findIndex(tab => tab.key === key) - 1;
             i = Math.max(i, 0);
             i = Math.min(i, modifiedOpenTabs.length - 1);
             newKey = modifiedOpenTabs[i].key;
         }
 
-        openTab(newKey);
+        if (newKey) {
+            openTab(newKey);
+        } else {
+            // No tabs left, clear selectedFile
+            selectedFile.next("");
+        }
     }
 
     openTabs.next(modifiedOpenTabs);

src/ui/AboutModal.tsx

@@ -1,20 +1,11 @@
-import { Button, Checkbox, Modal } from "antd";
+import { Checkbox, Modal } from "antd";
 import { useState } from "react";
 import { agreedEula } from "../logic/Settings";
-import { InfoCircleOutlined } from '@ant-design/icons';
 import { useObservable } from "../utils/UseObservable";
 import { BehaviorSubject } from "rxjs";
 
 export const aboutModalOpen = new BehaviorSubject<boolean>(false);
 
-export const AboutModalButton = () => {
-    return (
-        <Button type="default" onClick={() => aboutModalOpen.next(true)}>
-            <InfoCircleOutlined />
-        </Button>
-    );
-};
-
 const AboutModal = () => {
     const accepted = useObservable(agreedEula.observable);
     const isModalOpen = useObservable(aboutModalOpen);
@@ -43,10 +34,6 @@ const AboutModal = () => {
             footer={null}
         >
             <p>NOTE! This website is not redistributing any Minecraft code or compiled bytecode. The minecraft jar is downloaded directly from Mojang's servers to your device when you use this tool. Check your browser's network requests!</p>
-            <p>The <a href="https://github.com/Vineflower/vineflower">Vineflower</a> decompiler is used after being compiled to wasm as part of the <a href="https://www.npmjs.com/package/@run-slicer/vf">@run-slicer/vf</a> project.</p>
-
-            <p><a href="https://github.com/FabricMC/mcsrc">GitHub</a></p>
-
             <Eula onAccept={() => aboutModalOpen.next(false)} />
         </Modal>
     );

src/ui/App.tsx

@@ -1,16 +1,17 @@
 import { Button, ConfigProvider, Drawer, Flex, Splitter, theme } from 'antd';
 import Code from "./Code.tsx";
 import SideBar from './SideBar.tsx';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useObservable } from '../utils/UseObservable.ts';
 import { isThin } from '../logic/Browser.ts';
-import { diffView, mobileDrawerOpen } from '../logic/State';
+import { diffView, mobileDrawerOpen, openTabs, selectedFile } from '../logic/State';
 import DiffView from './diff/DiffView.tsx';
 import { FilepathHeader } from './FilepathHeader.tsx';
 import { enableTabs } from '../logic/Settings.ts';
 import { MenuFoldOutlined } from '@ant-design/icons';
 import { TabsComponent } from './TabsComponent.tsx';
 import Modals from './Modals.tsx';
+import { EmptyState } from './EmptyState.tsx';
 
 const App = () => {
     const isSmall = useObservable(isThin);
@@ -36,6 +37,11 @@ const App = () => {
     );
 };
 
+const CodeOrEmpty = () => {
+    const tabs = useObservable(openTabs);
+    return tabs && tabs.length > 0 ? <Code /> : <EmptyState />;
+};
+
 const LargeApp = () => {
     const [sizes, setSizes] = useState<(number | string)[]>(['25%', '75%']);
     const tabsEnabled = useObservable(enableTabs.observable);
@@ -49,7 +55,9 @@ const LargeApp = () => {
                 <Flex vertical style={{ height: "100%" }}>
                     {tabsEnabled && <TabsComponent />}
                     <FilepathHeader />
-                    <div style={{ flexGrow: 1 }}><Code /></div>
+                    <div style={{ flexGrow: 1 }}>
+                        <CodeOrEmpty />
+                    </div>
                 </Flex>
             </Splitter.Panel>
         </Splitter>
@@ -59,6 +67,7 @@ const LargeApp = () => {
 const MobileApp = () => {
     const open = useObservable(mobileDrawerOpen);
     const tabsEnabled = useObservable(enableTabs.observable);
+    const currentFile = useObservable(selectedFile);
 
     const showDrawer = () => {
         mobileDrawerOpen.next(true);
@@ -68,6 +77,10 @@ const MobileApp = () => {
         mobileDrawerOpen.next(false);
     };
 
+    useEffect(() => {
+        mobileDrawerOpen.next(false);
+    }, [currentFile]);
+
     return (
         <Flex vertical style={{ height: "100%" }}>
             <Drawer
@@ -95,7 +108,9 @@ const MobileApp = () => {
                 }
             </Flex>
             <FilepathHeader />
-            <div style={{ flexGrow: 1 }}><Code /></div>
+            <div style={{ flexGrow: 1, overflow: "auto" }}>
+                <CodeOrEmpty />
+            </div>
         </Flex>
     );
 };