From 67a18561a2d83b97865cf2223c28dcee1908ed37 Mon Sep 17 00:00:00 2001
From: Darya Plotnytska <d.plotnytska.s@gmail.com>
Date: Mon, 16 Dec 2024 16:58:41 +0100
Subject: [PATCH] console: Add responsiveness

---
 .../total-end-devices-upseller-panel/index.js | 14 ++++-
 .../containers/shortcut-panel/index.js        | 59 +++++++++++++++++--
 .../shortcut-panel/shortcut-item/index.js     |  6 +-
 .../shortcut-item/shortcut-item.styl          | 13 ++--
 .../shortcut-panel/shortcut-panel.styl        | 17 ------
 pkg/webui/console/views/overview/overview.js  |  7 ++-
 6 files changed, 83 insertions(+), 33 deletions(-)
 delete mode 100644 pkg/webui/console/containers/shortcut-panel/shortcut-panel.styl

diff --git a/pkg/webui/console/components/total-end-devices-upseller-panel/index.js b/pkg/webui/console/components/total-end-devices-upseller-panel/index.js
index 109e147a36..b898315593 100644
--- a/pkg/webui/console/components/total-end-devices-upseller-panel/index.js
+++ b/pkg/webui/console/components/total-end-devices-upseller-panel/index.js
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import React from 'react'
+import classNames from 'classnames'
 
 import { IconBolt, IconDevice } from '@ttn-lw/components/icon'
 import Panel from '@ttn-lw/components/panel'
@@ -21,10 +22,11 @@ import Button from '@ttn-lw/components/button'
 import Message from '@ttn-lw/lib/components/message'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
+import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './total-end-devices-upseller-panel.styl'
 
-const TotalEndDevicesUpsellerPanel = () => {
+const TotalEndDevicesUpsellerPanel = ({ className }) => {
   const upgradeUrl = 'https://www.thethingsindustries.com/stack/plans/'
 
   return (
@@ -34,7 +36,7 @@ const TotalEndDevicesUpsellerPanel = () => {
       shortCutLinkButton
       shortCutLinkPath="#"
       shortCutLinkDisabled
-      className={style.panel}
+      className={classNames(className, style.panel)}
       compact
     >
       <div className={style.upseller}>
@@ -58,4 +60,12 @@ const TotalEndDevicesUpsellerPanel = () => {
   )
 }
 
+TotalEndDevicesUpsellerPanel.propTypes = {
+  className: PropTypes.string,
+}
+
+TotalEndDevicesUpsellerPanel.defaultProps = {
+  className: undefined,
+}
+
 export default TotalEndDevicesUpsellerPanel
diff --git a/pkg/webui/console/containers/shortcut-panel/index.js b/pkg/webui/console/containers/shortcut-panel/index.js
index 7e5f27dfc5..d630d97871 100644
--- a/pkg/webui/console/containers/shortcut-panel/index.js
+++ b/pkg/webui/console/containers/shortcut-panel/index.js
@@ -29,6 +29,7 @@ import {
 } from '@ttn-lw/components/icon'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
+import PropTypes from '@ttn-lw/lib/prop-types'
 
 import { setSearchOpen, setSearchScope } from '@console/store/actions/search'
 
@@ -36,23 +37,59 @@ import Panel from '../../../components/panel'
 
 import ShortcutItem from './shortcut-item'
 
-import style from './shortcut-panel.styl'
-
 const m = defineMessages({
   shortcuts: 'Quick actions',
-  addPersonalApiKey: 'Add new personal API key',
+  addEndDevice: 'Add end device',
+  addPersonalApiKey: 'Add API key',
 })
 
-const ShortcutPanel = () => {
+const ShortcutPanel = ({ panelClassName, mobile }) => {
   const dispatch = useDispatch()
   const handleRegisterDeviceClick = React.useCallback(() => {
     dispatch(setSearchScope(APPLICATION))
     dispatch(setSearchOpen(true))
   }, [dispatch])
 
+  if (mobile) {
+    return (
+      <div className="d-flex gap-cs-s">
+        <ShortcutItem
+          icon={IconApplication}
+          title={sharedMessages.createApplication}
+          link="/applications/add"
+          mobile
+        />
+        <ShortcutItem
+          icon={IconDevice}
+          title={m.addEndDevice}
+          action={handleRegisterDeviceClick}
+          mobile
+        />
+        <ShortcutItem
+          icon={IconUsersGroup}
+          title={sharedMessages.createOrganization}
+          link="/organizations/add"
+          mobile
+        />
+        <ShortcutItem
+          icon={IconKey}
+          title={m.addPersonalApiKey}
+          link="/user-settings/api-keys/add"
+          mobile
+        />
+        <ShortcutItem
+          icon={IconGateway}
+          title={sharedMessages.registerGateway}
+          link="/gateways/add"
+          mobile
+        />
+      </div>
+    )
+  }
+
   return (
-    <Panel title={m.shortcuts} icon={IconBolt} className="h-full">
-      <div className={classNames(style.shortcutGroup, 'd-flex gap-cs-xs w-full')}>
+    <Panel title={m.shortcuts} icon={IconBolt} className={classNames(panelClassName, 'h-full')}>
+      <div className="d-flex gap-cs-xs w-full">
         <ShortcutItem
           icon={IconApplication}
           title={sharedMessages.createApplication}
@@ -83,4 +120,14 @@ const ShortcutPanel = () => {
   )
 }
 
+ShortcutPanel.propTypes = {
+  mobile: PropTypes.bool,
+  panelClassName: PropTypes.string,
+}
+
+ShortcutPanel.defaultProps = {
+  panelClassName: undefined,
+  mobile: false,
+}
+
 export default ShortcutPanel
diff --git a/pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js b/pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js
index d263b51d49..ad69344286 100644
--- a/pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js
+++ b/pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js
@@ -25,7 +25,7 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './shortcut-item.styl'
 
-const ShortcutItem = ({ icon, link, action, title, className }) =>
+const ShortcutItem = ({ icon, link, action, title, className, mobile }) =>
   action ? (
     <Tooltip
       content={<Message content={title} />}
@@ -34,6 +34,7 @@ const ShortcutItem = ({ icon, link, action, title, className }) =>
     >
       <button onClick={action} className={classnames(style.shortcut, className)}>
         <Icon icon={icon} className={style.icon} size={28} />
+        {mobile && <Message content={title} className="lg-xl:d-none" />}
       </button>
     </Tooltip>
   ) : (
@@ -44,6 +45,7 @@ const ShortcutItem = ({ icon, link, action, title, className }) =>
     >
       <Link to={link} className={classnames(style.shortcut, className)}>
         <Icon icon={icon} className={style.icon} size={28} />
+        {mobile && <Message content={title} className="lg-xl:d-none" />}
       </Link>
     </Tooltip>
   )
@@ -53,6 +55,7 @@ ShortcutItem.propTypes = {
   className: PropTypes.string,
   icon: PropTypes.icon.isRequired,
   link: PropTypes.string,
+  mobile: PropTypes.bool,
   title: PropTypes.message.isRequired,
 }
 
@@ -60,6 +63,7 @@ ShortcutItem.defaultProps = {
   className: undefined,
   action: undefined,
   link: undefined,
+  mobile: false,
 }
 
 export default ShortcutItem
diff --git a/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl
index 5644e57b77..42b415a101 100644
--- a/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl
+++ b/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl
@@ -17,21 +17,24 @@
 
 .shortcut
   padding: $cs.s $cs.m
-  background: var(--c-bg-brand-light)
+  color: var(--c-text-brand-normal)
+  background-color: var(--c-bg-brand-light)
   border-radius: $br.l
   height: 4.5rem
   width: 100%
   display: flex
   align-items: center
   justify-content: center
+  gap: $cs.xs
+  font-weight: $fw.bold
   border: 0
 
+  +media-query(1304px)
+    padding: $cs.xxs $cs.xs
+
   .icon
     color: var(--c-icon-brand-normal)
 
   &:hover
     cursor: pointer
-
-@container panel (max-width: 320px)
-  .shortcut
-    width: 4.5rem
+    background-color: var(--c-bg-brand-semilight)
diff --git a/pkg/webui/console/containers/shortcut-panel/shortcut-panel.styl b/pkg/webui/console/containers/shortcut-panel/shortcut-panel.styl
deleted file mode 100644
index 13fd3528d3..0000000000
--- a/pkg/webui/console/containers/shortcut-panel/shortcut-panel.styl
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright © 2024 The Things Network Foundation, The Things Industries B.V.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-@container panel (max-width: 320px)
-  .shortcut-group
-    flex-wrap: wrap
diff --git a/pkg/webui/console/views/overview/overview.js b/pkg/webui/console/views/overview/overview.js
index 8e8213accb..ead1d2e950 100644
--- a/pkg/webui/console/views/overview/overview.js
+++ b/pkg/webui/console/views/overview/overview.js
@@ -35,9 +35,12 @@ const Overview = () => {
 
   return (
     <div className="container container--xl grid p-ls-s gap-ls-s md:p-cs-xs md:gap-cs-xs">
+      <div className="item-12 d-none xl:d-block md-lg:d-none">
+        <ShortcutPanel mobile />
+      </div>
       <div className="item-12 md-lg:item-4 d-flex direction-column gap-ls-s">
-        <ShortcutPanel />
-        <TotalEndDevicesUpsellerPanel />
+        <ShortcutPanel panelClassName="xl:d-none" />
+        <TotalEndDevicesUpsellerPanel className="h-full" />
       </div>
       <div className="item-12 md-lg:item-4">
         <BlurryNocMetricsPanel