Merge pull request #28 from webxdc/resizable_windws

Resizable windows

Author: Septias

README.md

@@ -17,7 +17,7 @@ This allows you to simulate multiple users using the same application.
 
 You can install the tool globally. This works with any webxdc project:
 
-```shell
+```
 npm install -g webxdc-dev
 ```
 
@@ -41,7 +41,10 @@ to see full information. You can also filter messages. There is also a "chat"
 tab which you can use to see `info` contained in updates as well as any
 `summary` text contained in an update.
 
-You can collapse and expand the sidebar with the arrow.
+The sidebar can be closed with `Close Messages` button within the sidebar and 
+expanded by clicking on `Open Messages` within the devices tab.
+The sidebars width can also be adjusted by moving the separating line between
+devices and sidebar.
 
 Each instance header also contains additional information: the port number on
 which the instance was opened, the amount of updates this instance sent and

frontend/App.tsx

@@ -1,6 +1,6 @@
 import type { Component } from "solid-js";
 import { JSX, createSignal, createEffect } from "solid-js";
-import { Box, Tabs, TabList, Tab, TabPanel } from "@hope-ui/solid";
+import { Box, Tabs, TabList, Tab, TabPanel, Flex } from "@hope-ui/solid";
 import { Route, Routes, useNavigate, useLocation } from "solid-app-router";
 
 import Main from "./Main";
@@ -48,21 +48,21 @@ const App: Component = () => {
   };
 
   return (
-    <Tabs index={tabIndex()} onChange={handleTabsChange}>
-      <TabList>
-        <Tab>Main</Tab>
-        <Tab>Info</Tab>
-      </TabList>
-      <TabPanel>
-        <Panel>
+    <Tabs h="$screenH" index={tabIndex()} onChange={handleTabsChange}>
+      <Flex direction={"column"} h="$full" maxH="100vh">
+        <TabList>
+          <Tab>Main</Tab>
+          <Tab>Info</Tab>
+        </TabList>
+        <TabPanel flexGrow="1" display="flex" justifyContent="center" maxHeight="calc(100vh - 40px)">
           <AppRoutes />
-        </Panel>
-      </TabPanel>
-      <TabPanel>
-        <Panel>
-          <AppRoutes />
-        </Panel>
-      </TabPanel>
+        </TabPanel>
+        <TabPanel>
+          <Panel>
+            <AppRoutes />
+          </Panel>
+        </TabPanel>
+      </Flex>
     </Tabs>
   );
 };

frontend/Chat.tsx

@@ -35,7 +35,7 @@ const Chat: Component<{
       <Show when={summary()}>
         {(summary) => <Badge>Summary: {summary}</Badge>}
       </Show>
-      <Box width="53vw" maxHeight="36vh" overflow="scroll">
+      <Box>
         <Table id="chat" dense css={{ "table-layout": "fixed" }}>
           <Thead>
             <Th width="10%" minWidth="7em">

frontend/Filter.tsx

@@ -26,12 +26,12 @@ const Filter: Component<{
 }> = (props) => {
   return (
     <Select size="xs" value={props.value} onChange={props.onChange}>
-      <SelectTrigger width="$64">
+      <SelectTrigger>
         <SelectPlaceholder>{props.label}</SelectPlaceholder>
         <SelectValue />
         <SelectIcon />
       </SelectTrigger>
-      <SelectContent width="$64">
+      <SelectContent>
         <SelectListbox>
           <For each={props.entries}>
             {(entry) => (

frontend/Filters.tsx

@@ -15,7 +15,7 @@ const Filters: Component<{
   onChange: (search: Search) => void;
 }> = (props) => {
   return (
-    <Flex justifyContent="flex-start" gap="$5">
+    <Flex justifyContent="flex-start" gap="$5" mb="$1">
       <Filter
         label="instanceId"
         entries={instanceIdEntries()}

frontend/InstancesButtons.tsx

@@ -1,4 +1,4 @@
-import type { Component } from "solid-js";
+import { Component, Show } from "solid-js";
 import { Button, notificationService, Flex, Tooltip } from "@hope-ui/solid";
 
 import type { Instance } from "../types/instance";
@@ -10,6 +10,8 @@ This wipes out any localStorage and sessionStorage on each client, and reloads t
 
 const InstancesButtons: Component<{
   onAfterAdd?: (instanceId: string) => void;
+  show_messages_button: boolean;
+  onOpenMessages: () => void;
 }> = (props) => {
   const handleAddInstance = async () => {
     const instanceData: Instance = await (
@@ -40,10 +42,13 @@ const InstancesButtons: Component<{
 
   return (
     <Flex direction="row" justifyContent="flex-start" gap="$3">
-      <Button onClick={handleAddInstance}>Add Instance</Button>
+      <Button colorScheme="neutral" size="xs" onClick={handleAddInstance}>Add Instance</Button>
       <Tooltip label={CLEAR_INFO}>
-        <Button onClick={handleClear}>Reset</Button>
+        <Button colorScheme="neutral" size="xs" onClick={handleClear}>Reset</Button>
       </Tooltip>
+      <Show when={props.show_messages_button} >
+        <Button colorScheme="neutral" size="xs" onClick={props.onOpenMessages}>Open Messages</Button>
+      </Show>
     </Flex>
   );
 };

frontend/Main.tsx

@@ -1,19 +1,19 @@
-import { Component, For, createSignal, Show, Setter, JSX } from "solid-js";
+import { Component, For, createSignal, Setter, Show } from "solid-js";
 import {
   Flex,
   Box,
-  Tooltip,
-  IconButton,
   createDisclosure,
+  Heading,
+  Button,
 } from "@hope-ui/solid";
-import { IoCaretBackOutline, IoCaretForwardOutline } from "solid-icons/io";
 
 import { instances } from "./store";
 import InstancesButtons from "./InstancesButtons";
 import { scrollToInstance } from "./Instance";
 import Sidebar, { Search } from "./Sidebar";
 import Instance from "./Instance";
 import type { Instance as InstanceData } from "../types/instance";
+import SplitView from "./SplitView";
 
 const Main: Component = () => {
   const [search, setSearch] = createSignal<Search>({
@@ -24,78 +24,69 @@ const Main: Component = () => {
     onOpen();
     return setSearch(value);
   };
-
   const { isOpen, onOpen, onClose } = createDisclosure({ defaultIsOpen: true });
 
   return (
     <>
-      <Flex justifyContent="space-between">
-        <Flex flexDirection="column">
-          <Box m="$8" ml="$1">
-            <Flex flexWrap="wrap" gap="$5" overflow="scroll" maxHeight="77vh">
-              <For each={instances()}>
-                {(instance: InstanceData) => (
-                  <Instance instance={instance} setSearch={setSearchAndOpen} />
-                )}
-              </For>
+      {
+        <Show when={isOpen()} fallback={
+          <Flex>
+            <Flex flexDirection="column">
+                <Flex mb="$1" justifyContent="space-between">
+                  <Heading level="1">Devices</Heading>
+                  <InstancesButtons
+                    onAfterAdd={(instanceId) => {
+                      scrollToInstance(instanceId);
+                    }}
+                    show_messages_button={true}
+                    onOpenMessages={onOpen}
+                  />
+                </Flex>
+                <Box overflow="auto" >
+                  <Flex flexWrap="wrap" gap="$5" justifyContent="center">
+                    <For each={instances()}>
+                      {(instance: InstanceData) => (
+                        <Instance instance={instance} setSearch={setSearchAndOpen} />
+                      )}
+                    </For>
+                  </Flex>
+                </Box>
+              </Flex>
+            </Flex>
+          }>
+          <SplitView>
+            <Flex flexDirection="column">
+              <Flex mb="$1" justifyContent="space-between">
+                <Heading level="1">Devices</Heading>
+                <InstancesButtons
+                  onAfterAdd={(instanceId) => {
+                    scrollToInstance(instanceId);
+                  }}
+                  show_messages_button={false}
+                  onOpenMessages={() => {}}
+                />
+              </Flex>
+              <Box overflow="auto" >
+                <Flex flexWrap="wrap" gap="$5" justifyContent="center">
+                  <For each={instances()}>
+                    {(instance: InstanceData) => (
+                      <Instance instance={instance} setSearch={setSearchAndOpen} />
+                    )}
+                  </For>
+                </Flex>
+              </Box>
             </Flex>
-          </Box>
-          <InstancesButtons
-            onAfterAdd={(instanceId) => {
-              scrollToInstance(instanceId);
-            }}
-          />
-        </Flex>
-        <Box height="100wh">
-          <Show
-            when={isOpen()}
-            fallback={
-              <SidebarButton
-                label="Open messages"
-                onClick={onOpen}
-                top="2rem"
-                right="-2rem"
-                icon={<IoCaretBackOutline size={22} color="#000000" />}
-              />
-            }
-          >
-            <SidebarButton
-              label="Close messages"
-              onClick={onClose}
-              top="2rem"
-              right="2rem"
-              icon={<IoCaretForwardOutline size={22} color="#000000" />}
-            />
-            <Sidebar search={search} setSearch={setSearchAndOpen} />
-          </Show>
-        </Box>
-      </Flex>
+            <Flex direction="column">
+              <Flex justifyContent="space-between" marginBottom="$1">
+                <Heading display="inline-block" level="1" mb="1">Messages</Heading>
+                <Button colorScheme="neutral" size="xs" onClick={onClose}> Close Messages </Button>
+              </Flex>
+              <Sidebar search={search} setSearch={setSearchAndOpen} />
+            </Flex>
+          </SplitView>
+        </Show>
+      }
     </>
   );
 };
-
-const SidebarButton: Component<{
-  label: string;
-  onClick: () => void;
-  icon: JSX.Element;
-  top: string;
-  right: string;
-}> = (props) => {
-  return (
-    <Tooltip label={props.label}>
-      <IconButton
-        variant="ghost"
-        size="sm"
-        position="relative"
-        top={props.top}
-        right={props.right}
-        onClick={props.onClick}
-        aria-label={props.label}
-        backgroundColor="white"
-        icon={props.icon}
-      />
-    </Tooltip>
-  );
-};
-
 export default Main;

frontend/Messages.tsx

@@ -24,37 +24,33 @@ const Messages: Component<{
   });
 
   return (
-    <Box width="53vw" maxHeight="36vh" overflow="scroll">
-      <Table id="messages" dense css={{ "table-layout": "fixed" }}>
-        <Thead>
-          <Th width="10%" minWidth="7em">
-            Id
-          </Th>
-          <Th width="10%">Type</Th>
-          <Th width="20%">Descr</Th>
-          <Th minWidth="60%">Payload</Th>
-        </Thead>
-        <Tbody>
-          <For
-            each={getMessages({
-              instanceId: props.search().instanceId,
-              type: props.search().type,
-            })}
-          >
-            {(message, index) => (
-              <MessageRow
-                isSelected={messageIndex() === index()}
-                message={message}
-                onSelect={(message) => {
-                  setMessageIndex(index());
-                  props.onSelectMessage(message);
-                }}
-              />
-            )}
-          </For>
-        </Tbody>
-      </Table>
-    </Box>
+    <Table id="messages" dense css={{ "table-layout": "fixed" }}>
+      <Thead>
+        <Th maxW="70px"> Id </Th>
+        <Th maxW="70px">Type</Th>
+        <Th maxW="70px">Descr</Th>
+        <Th>Payload</Th>
+      </Thead>
+      <Tbody>
+        <For
+          each={getMessages({
+            instanceId: props.search().instanceId,
+            type: props.search().type,
+          })}
+        >
+          {(message, index) => (
+            <MessageRow
+              isSelected={messageIndex() === index()}
+              message={message}
+              onSelect={(message) => {
+                setMessageIndex(index());
+                props.onSelectMessage(message);
+              }}
+            />
+          )}
+        </For>
+      </Tbody>
+    </Table>
   );
 };