From 1587d093ea6457dc2c42b3ebf6f2e8d3ed50060f Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Tue, 3 Dec 2024 15:21:42 +0200
Subject: [PATCH] added input for qortallinks

---
 src/components/Apps/AppsHomeDesktop.tsx | 80 ++++++++++++++++++++++++-
 1 file changed, 78 insertions(+), 2 deletions(-)

diff --git a/src/components/Apps/AppsHomeDesktop.tsx b/src/components/Apps/AppsHomeDesktop.tsx
index 6481871..ebae36a 100644
--- a/src/components/Apps/AppsHomeDesktop.tsx
+++ b/src/components/Apps/AppsHomeDesktop.tsx
@@ -7,20 +7,37 @@ import {
   AppsContainer,
   AppsParent,
 } from "./Apps-styles";
-import { Avatar, ButtonBase } from "@mui/material";
+import { Avatar, Box, ButtonBase, Input } from "@mui/material";
 import { Add } from "@mui/icons-material";
 import { getBaseApiReact, isMobile } from "../../App";
 import LogoSelected from "../../assets/svgs/LogoSelected.svg";
 import { executeEvent } from "../../utils/events";
 import { Spacer } from "../../common/Spacer";
 import { SortablePinnedApps } from "./SortablePinnedApps";
-
+import { extractComponents } from "../Chat/MessageDisplay";
+import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
 export const AppsHomeDesktop = ({
   setMode,
   myApp,
   myWebsite,
   availableQapps,
 }) => {
+  const [qortalUrl, setQortalUrl] = useState('')
+
+  const openQortalUrl = ()=> {
+    try {
+      if(!qortalUrl) return
+      const res = extractComponents(qortalUrl);
+      if (res) {
+        const { service, name, identifier, path } = res;
+        executeEvent("addTab", { data: { service, name, identifier, path } });
+        executeEvent("open-apps-mode", { });
+        setQortalUrl('qortal://')
+      }
+    } catch (error) {
+      
+    }
+  }
   return (
     <>
      <AppsContainer
@@ -37,6 +54,65 @@ export const AppsHomeDesktop = ({
         Apps Dashboard
       </AppLibrarySubTitle>
       </AppsContainer>
+      <Spacer height="20px" />
+      <AppsContainer
+        sx={{
+        
+          justifyContent: "flex-start",
+          
+        }}
+      >
+        <Box sx={{
+          display: 'flex',
+          gap: '20px',
+          alignItems: 'center',
+          backgroundColor: '#1f2023',
+          padding: '7px',
+          borderRadius: '20px',
+          width: '100%',
+          maxWidth: '500px'
+        }}>
+      <Input
+              id="standard-adornment-name"
+              value={qortalUrl}
+              onChange={(e) => {
+                setQortalUrl(e.target.value)
+              }}
+              disableUnderline
+              autoComplete='off'
+              autoCorrect='off'
+              placeholder="qortal://"
+              sx={{
+                width: '100%',
+                color: 'white',
+                '& .MuiInput-input::placeholder': {
+                  color: 'rgba(84, 84, 84, 0.70) !important',
+                  fontSize: '20px',
+                  fontStyle: 'normal',
+                  fontWeight: 400,
+                  lineHeight: '120%', // 24px
+                  letterSpacing: '0.15px',
+                  opacity: 1
+                },
+                '&:focus': {
+                  outline: 'none',
+                },
+                // Add any additional styles for the input here
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && qortalUrl) {
+                  console.log('hello')
+                  openQortalUrl();
+                }
+              }}
+            />
+            <ButtonBase onClick={()=> openQortalUrl()}>
+              <ArrowOutwardIcon sx={{
+                color: qortalUrl ? 'white' : 'rgba(84, 84, 84, 0.70)'
+              }} />
+            </ButtonBase>
+            </Box>
+            </AppsContainer>
       <Spacer height="45px" />
       <AppsContainer
         sx={{