opened tabs widget

packages/web/src/appobj/openedTabAppObject.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import _ from 'lodash';
+import { getIconImage } from '../icons';
+
+const openedTabAppObject = () => ({ tabid, props, selected, icon, title }, { setOpenedTabs }) => {
+  const key = tabid;
+  const Icon = (props) => getIconImage(icon, props);
+  const isBold = !!selected;
+
+  const onClick = () => {
+    setOpenedTabs((files) =>
+      files.map((x) => ({
+        ...x,
+        selected: x.tabid == tabid,
+      }))
+    );
+  };
+
+  return { title, key, Icon, isBold, onClick };
+};
+
+export default openedTabAppObject;

packages/web/src/widgets/DatabaseWidget.js

@@ -1,49 +1,14 @@
 import React from 'react';
-import styled from 'styled-components';
 import _ from 'lodash';
 
 import { AppObjectList } from '../appobj/AppObjectList';
 import connectionAppObject from '../appobj/connectionAppObject';
 import databaseAppObject from '../appobj/databaseAppObject';
 import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalState';
-import theme from '../theme';
 import InlineButton from './InlineButton';
 import databaseObjectAppObject from '../appobj/databaseObjectAppObject';
 import { useSqlObjectList, useDatabaseList, useConnectionList } from '../utility/metadataLoaders';
-
+import { SearchBoxWrapper, InnerContainer, Input, MainContainer, OuterContainer, WidgetTitle } from './WidgetStyles';
-const SearchBoxWrapper = styled.div`
-  display: flex;
-  margin-bottom: 5px;
-`;
-
-const MainContainer = styled.div`
-  position: relative;
-  display: flex;
-  flex-flow: column wrap;
-  flex: 1;
-  flex-direction: column;
-  user-select: none;
-`;
-
-const OuterContainer = styled.div`
-  flex: 1 1 0;
-  overflow: hidden;
-  width: ${theme.leftPanel.width}px;
-  position: relative;
-  flex-direction: column;
-  display: flex;
-`;
-
-const InnerContainer = styled.div`
-  flex: 1 1;
-  overflow: scroll;
-  width: ${theme.leftPanel.width}px;
-`;
-
-const Input = styled.input`
-  flex: 1;
-  min-width: 90px;
-`;
 
 function SubDatabaseList({ data }) {
   const setDb = useSetCurrentDatabase();
@@ -70,6 +35,7 @@ function ConnectionList() {
   const [filter, setFilter] = React.useState('');
   return (
     <>
+      <WidgetTitle>Connections</WidgetTitle>
       <SearchBoxWrapper>
         <Input type="text" placeholder="Search connection" value={filter} onChange={(e) => setFilter(e.target.value)} />
         <InlineButton>Refresh</InlineButton>
@@ -98,6 +64,7 @@ function SqlObjectList({ conid, database }) {
   );
   return (
     <>
+      <WidgetTitle>Tables, views, functions</WidgetTitle>
       <SearchBoxWrapper>
         <Input
           type="text"

packages/web/src/widgets/FilesWidget.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+import _ from 'lodash';
+
+import { AppObjectList } from '../appobj/AppObjectList';
+import { useOpenedTabs } from '../utility/globalState';
+import openedTabAppObject from '../appobj/openedTabAppObject';
+import { SearchBoxWrapper, InnerContainer, Input, MainContainer, OuterContainer, WidgetTitle } from './WidgetStyles';
+
+function OpenedTabsList() {
+  const tabs = useOpenedTabs();
+  console.log('TABS', tabs);
+
+  return (
+    <>
+      <WidgetTitle>Opened tabs</WidgetTitle>
+      <InnerContainer>
+        <AppObjectList list={tabs} makeAppObj={openedTabAppObject()} />
+      </InnerContainer>
+    </>
+  );
+}
+
+export default function FilesWidget() {
+  return (
+    <MainContainer>
+      <OuterContainer>
+        <OpenedTabsList />
+      </OuterContainer>
+      <OuterContainer></OuterContainer>
+    </MainContainer>
+  );
+}

packages/web/src/widgets/WidgetContainer.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useCurrentWidget } from '../utility/globalState';
 import DatabaseWidget from './DatabaseWidget';
+import FilesWidget from './FilesWidget';
 
 export default function WidgetContainer() {
   const currentWidget = useCurrentWidget();
   if (currentWidget === 'database') return <DatabaseWidget />;
+  if (currentWidget === 'file') return <FilesWidget />;
   return null;
 }

packages/web/src/widgets/WidgetIconPanel.js

@@ -24,18 +24,18 @@ export default function WidgetIconPanel() {
       icon: 'fa-database',
       name: 'database',
     },
-    {
+    // {
-      icon: 'fa-table',
+    //   icon: 'fa-table',
-      name: 'table',
+    //   name: 'table',
-    },
+    // },
     {
       icon: 'fa-file-alt',
       name: 'file',
     },
-    {
+    // {
-      icon: 'fa-cog',
+    //   icon: 'fa-cog',
-      name: 'settings',
+    //   name: 'settings',
-    },
+    // },
     // {
     //   icon: 'fa-check',
     //   name: 'settings',

packages/web/src/widgets/WidgetStyles.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import theme from '../theme';
+
+export const SearchBoxWrapper = styled.div`
+  display: flex;
+  margin-bottom: 5px;
+`;
+
+export const MainContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-flow: column wrap;
+  flex: 1;
+  flex-direction: column;
+  user-select: none;
+`;
+
+export const OuterContainer = styled.div`
+  flex: 1 1 0;
+  overflow: hidden;
+  width: ${theme.leftPanel.width}px;
+  position: relative;
+  flex-direction: column;
+  display: flex;
+`;
+
+export const InnerContainer = styled.div`
+  flex: 1 1;
+  overflow: scroll;
+  width: ${theme.leftPanel.width}px;
+`;
+
+export const Input = styled.input`
+  flex: 1;
+  min-width: 90px;
+`;
+
+export const WidgetTitle = styled.div`
+  padding: 5px;
+  font-weight: bold;
+  text-transform: uppercase;
+  background-color: gray;
+  // background-color: #CEC;
+`;