Added ability to edit app directories

src/client/appd/appd.tsx

@@ -104,6 +104,7 @@ export class AppDPanel extends Component<AppPanelProps, AppPanelState> {
           />,
         ]}
         closeAction={() => this.props.closeAction()}
+        closeName="Cancel"
       />
     );
   }

src/client/appd/styles.module.css

@@ -2,8 +2,6 @@
     display: flex;
     flex-direction: row;
     gap: 1rem;
-    width: 60rem;
-    height: 30rem;
 }
 
 .appDApps {

src/client/config/config.tsx

@@ -3,7 +3,7 @@ import * as styles from "./styles.module.css";
 import { ClientState, Directory, getClientState } from "../state/ClientState";
 import { Popup } from "../popups/popup";
 
-const CONFIG_ITEMS = ["Directories", "Panels"];
+const CONFIG_ITEMS = ["Directories"];
 
 type AppPanelProps = {
   closeAction: () => void;
@@ -14,11 +14,82 @@ type AppPanelState = {
   item: string;
 };
 
+function updateText(url: string, text: string) {
+  const directories = getClientState().getDirectories();
+  const d = directories.find((d) => d.url == url);
+  d!!.label = text;
+  getClientState().setDirectories(directories);
+}
+
+function updateUrl(url: string, text: string) {
+  const directories = getClientState().getDirectories();
+  const d = directories.find((d) => d.url == url);
+  d!!.url = text;
+  getClientState().setDirectories(directories);
+}
+
 function toggleDirectory(d: Directory) {
   d.active = !d.active;
   getClientState().updateDirectory(d);
 }
 
+const AddButton = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <div className={styles.add} onClick={onClick}>
+      <p>Click to Add New Directory</p>
+    </div>
+  );
+};
+
+const InlineButton = ({
+  text,
+  url,
+  onClick,
+}: {
+  text: string;
+  url: string;
+  onClick: () => void;
+}) => {
+  return (
+    <img
+      src={url}
+      className={styles.actionButton}
+      title={text}
+      onClick={onClick}
+    />
+  );
+};
+
+const DirectoryItem = ({ d }: { d: Directory }) => {
+  return (
+    <div
+      key={d.url}
+      className={`${styles.directoryItem} ${d.active ? styles.directoryActive : styles.directoryInactive}`}
+    >
+      <div className={styles.directoryName}>
+        <p
+          contentEditable={true}
+          onBlur={(e) => updateText(d.url, e.currentTarget.textContent!!)}
+        >
+          {d.label}
+        </p>
+        <InlineButton
+          onClick={() => toggleDirectory(d)}
+          text="Toggle Use Of Directory"
+          url="/static/icons/control/tick.svg"
+        />
+      </div>
+      <div
+        className={styles.directoryUrl}
+        contentEditable={true}
+        onBlur={(e) => updateUrl(d.url, e.currentTarget.textContent!!)}
+      >
+        {d.url}
+      </div>
+    </div>
+  );
+};
+
 export class ConfigPanel extends Component<AppPanelProps, AppPanelState> {
   constructor(props: AppPanelProps) {
     super(props);
@@ -50,22 +121,26 @@ export class ConfigPanel extends Component<AppPanelProps, AppPanelState> {
               {this.state.item == CONFIG_ITEMS[0]
                 ? getClientState()
                     .getDirectories()
-                    .map((d) => (
-                      <div
-                        key={d.url}
-                        className={`${styles.directoryItem} ${d.active ? styles.directoryActive : styles.directoryInactive}`}
-                        onClick={() => toggleDirectory(d)}
-                      >
-                        <div className={styles.directoryName}>{d.label}</div>
-                        <div className={styles.directoryUrl}>{d.url}</div>
-                      </div>
-                    ))
+                    .map((d) => <DirectoryItem key={d.url} d={d} />)
                 : null}
+              <AddButton
+                onClick={() => {
+                  const directories = getClientState().getDirectories();
+                  directories.push({
+                    label: "New Directory",
+                    url: "",
+                    active: false,
+                  });
+                  getClientState().setDirectories(directories);
+                  this.setState(this.state);
+                }}
+              />
             </div>
           </div>
         }
         buttons={[]}
         closeAction={() => this.props.closeAction()}
+        closeName="Close"
       />
     );
   }

src/client/config/styles.module.css

@@ -2,17 +2,16 @@
     display: flex;
     flex-direction: row;
     gap: 1rem;
+    flex-grow: 1;
 }
 
 .configChoice {
-    flex-basis: 10rem;
+    flex-basis: 40rem;
     flex-grow: 1;
-    flex-shrink: 0;
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    max-height: 40rem;
-    overflow-y: scroll;
+    overflow: scroll;
 }
 
 .configItem {
@@ -48,6 +47,18 @@
 .directoryName {
     padding: .5rem;
     font-weight: bold;
+    display: flex;
+    flex-grow: 0;
+}
+
+.directoryName p {
+    flex-grow: 1;
+    margin: 0;
+}
+
+.directoryName img {
+    width: 1rem;
+    height: 1rem;
 }
 
 .directoryUrl {
@@ -61,4 +72,24 @@
 .directoryInactive {
     border-color: white;
     color: lightgrey;
+}
+
+.add {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex-basis: 2rem;
+    background-color: #fafafa;
+    border: 1px solid grey;
+    border-radius: .5rem;
+    padding: .5rem;
+    border-width: .25rem;
+}
+
+.actionButton {
+    width: 1rem;
+    height: 1rem;
+    padding: .1rem
 }

src/client/popups/popup.tsx

@@ -7,6 +7,7 @@ type PopupProps = {
   area: ReactNode;
   closeAction: () => void;
   title: string;
+  closeName: string;
 };
 
 export class Popup extends Component<PopupProps> {
@@ -30,7 +31,7 @@ export class Popup extends Component<PopupProps> {
               <PopupButton
                 key="cancel"
                 onClick={() => this.props.closeAction()}
-                text="Cancel"
+                text={this.props.closeName}
                 disabled={false}
               />
               {this.props.buttons}

src/client/popups/styles.module.css

@@ -20,10 +20,11 @@
 }
 
 .popupInner {
-    margin-top: 1rem;
-    margin: auto;
-    max-width: 50rem;
-    max-height: 80%;
+    position: fixed;
+    top: 10%;
+    bottom: 10%;
+    left: 10%;
+    right: 10%;
     background-color: white;
     border-radius: .5rem;
     padding: 1rem;
@@ -38,6 +39,7 @@
     display: flex;
     flex-direction: row;
     overflow: scroll;
+    flex-grow: 1;
 }
 
 .popupTitle {