Option to open links in the same tab. Api upload icon. Render image icon instead of MDI. Dockerfile client dependencies fix.

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=1.4.2
+REACT_APP_VERSION=1.4.3

client/src/components/Apps/AppCard/AppCard.module.css

@@ -39,4 +39,12 @@
   .AppCard:hover {
     background-color: rgba(0,0,0,0.2);
   }
+}
+
+.CustomIcon {
+  width: 90%;
+  height: 90%;
+  margin-top: 2px;
+  margin-left: 2px;
+  object-fit: contain;
 }

client/src/components/Apps/AppCard/AppCard.tsx

@@ -3,6 +3,7 @@ import Icon from '../../UI/Icons/Icon/Icon';
 import { iconParser, urlParser } from '../../../utility';
 
 import { App } from '../../../interfaces';
+import { searchConfig } from '../../../utility';
 
 interface ComponentProps {
   app: App;
@@ -15,12 +16,19 @@ const AppCard = (props: ComponentProps): JSX.Element => {
   return (
     <a
       href={redirectUrl}
-      target='_blank'
+      target={searchConfig('openSameTab', false) ? '' : '_blank'}
       rel='noreferrer'
       className={classes.AppCard}
     >
       <div className={classes.AppCardIcon}>
-        <Icon icon={iconParser(props.app.icon)} />
+        {(/.(jpeg|jpg|png)$/).test(props.app.icon)
+          ? <img
+              src={`/uploads/${props.app.icon}`}
+              alt={`${props.app.name} icon`}
+              className={classes.CustomIcon}
+            />
+          : <Icon icon={iconParser(props.app.icon)} />
+        }
       </div>
       <div className={classes.AppCardDetails}>
         <h5>{props.app.name}</h5>

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -2,7 +2,7 @@ import { Bookmark, Category } from '../../../interfaces';
 import classes from './BookmarkCard.module.css';
 
 import Icon from '../../UI/Icons/Icon/Icon';
-import { iconParser, urlParser } from '../../../utility';
+import { iconParser, urlParser, searchConfig } from '../../../utility';
 
 interface ComponentProps {
   category: Category;
@@ -19,7 +19,7 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
           return (
             <a
               href={redirectUrl}
-              target='_blank'
+              target={searchConfig('openSameTab', false) ? '' : '_blank'}
               rel='noreferrer'
               key={`bookmark-${bookmark.id}`}>
               {bookmark.icon && (

client/src/components/Settings/OtherSettings/OtherSettings.tsx

@@ -29,7 +29,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
     pinAppsByDefault: 1,
     pinCategoriesByDefault: 1,
     hideHeader: 0,
-    useOrdering: 'createdAt'
+    useOrdering: 'createdAt',
+    openSameTab: 0
   })
 
   // Get config
@@ -39,7 +40,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
       pinAppsByDefault: searchConfig('pinAppsByDefault', 1),
       pinCategoriesByDefault: searchConfig('pinCategoriesByDefault', 1),
       hideHeader: searchConfig('hideHeader', 0),
-      useOrdering: searchConfig('useOrdering', 'createdAt')
+      useOrdering: searchConfig('useOrdering', 'createdAt'),
+      openSameTab: searchConfig('openSameTab', 0)
     })
   }, [props.loading]);
 
@@ -134,6 +136,18 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value='orderId'>Custom order</option>
         </select>
       </InputGroup>
+      <InputGroup>
+        <label htmlFor='openSameTab'>Open all links in the same tab</label>
+        <select
+          id='openSameTab'
+          name='openSameTab'
+          value={formData.openSameTab}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
     <Button>Save changes</Button>
     </form>
   )

client/src/interfaces/Forms.ts

@@ -11,4 +11,5 @@ export interface SettingsForm {
   pinCategoriesByDefault: number;
   hideHeader: number;
   useOrdering: string;
+  openSameTab: number;
 }

client/src/setupProxy.js

@@ -5,11 +5,16 @@ module.exports = function (app) {
     target: 'http://localhost:5005'
   })
 
+  const assetsProxy = createProxyMiddleware('/uploads', {
+    target: 'http://localhost:5005'
+  })
+
   const wsProxy = createProxyMiddleware('/socket', {
     target: 'http://localhost:5005',
     ws: true
   })
 
   app.use(apiProxy);
+  app.use(assetsProxy);
   app.use(wsProxy);
 };