Merge pull request #2936 from appwrite/fix-mobile-feedback-and-support

fix: mobile feedback issues

Author: HarshMN2345

src/lib/components/drop.svelte

@@ -141,7 +141,8 @@
     bind:this={tooltip}
     class:u-width-full-line={fullWidth}
     style:--arrow-size={`${arrowSize}px`}
-    style:z-index="21">
+    style:z-index="21"
+    style:pointer-events={show ? 'auto' : 'none'}>
     <div
         class="drop-arrow"
         class:is-popover={isPopover}

src/lib/components/sidebar.svelte

@@ -124,7 +124,7 @@
             </div>
         </div>
         <div slot="middle" class="middle-container" class:icons={state === 'icons'}>
-            {#if progressCard}
+            {#if progressCard && project}
                 <Tooltip placement="right" disabled={state !== 'icons'}>
                     <a
                         class="progress-card"

src/lib/components/support.svelte

@@ -88,7 +88,7 @@
                 </div>
 
                 {#if option.showSupport}
-                    <div class="u-flex u-gap-12 u-cross-center">
+                    <div class="support-premium-row">
                         {#if !hasPremiumSupport}
                             <Button
                                 href={upgradeURL}
@@ -113,14 +113,13 @@
                             </Button>
                         {/if}
 
-                        <div class="u-flex u-gap-6 u-cross-center">
+                        <div class="support-hours">
                             <span
                                 aria-hidden="true"
                                 class="{isSupportOnline()
                                     ? 'icon-check-circle u-color-text-success'
                                     : 'icon-x-circle'} u-padding-block-end-1"></span>
-
-                            {supportTimings}
+                            <span class="support-hours-text">{supportTimings}</span>
                         </div>
                     </div>
                 {:else}
@@ -194,4 +193,35 @@
         /* override required due to the card's background color */
         background: var(--bgcolor-neutral-default, #fafafb) !important;
     }
+
+    .support-premium-row {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.75rem 1rem;
+    }
+
+    .support-hours {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        min-width: 0;
+    }
+
+    .support-hours-text {
+        font-size: var(--font-size-xs, 0.75rem);
+        line-height: 1.35;
+        color: var(--fgcolor-neutral-secondary, #56565c);
+    }
+
+    @media (max-width: 520px) {
+        .support-premium-row {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .support-hours {
+            padding-inline-start: 0.125rem;
+        }
+    }
 </style>

src/lib/layout/shell.svelte

@@ -14,7 +14,7 @@
     import SideNavigation from '$lib/layout/navigation.svelte';
     import { hasOnboardingDismissed } from '$lib/helpers/onboarding';
     import { isSidebarOpen, noWidthTransition } from '$lib/stores/sidebar';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { BillingPlanGroup, type Models } from '@appwrite.io/console';
     import { getSidebarState, isInDatabasesRoute, updateSidebarState } from '$lib/helpers/sidebar';
     import { isTabletViewport } from '$lib/stores/viewport';
@@ -25,6 +25,8 @@
     export let showSideNavigation = false;
     export let selectedProject: Models.Project = null;
 
+    $: activeProject = selectedProject && page.params.project ? selectedProject : null;
+
     // variables
     let yOnMenuOpen: number;
     let showAccountMenu = false;
@@ -52,23 +54,21 @@
     }
 
     function getProgressCard() {
-        if (selectedProject && !hasOnboardingDismissed(selectedProject.$id, $user)) {
-            const { platforms, pingCount } = selectedProject;
-            let percentage = 33;
-
-            if (platforms.length > 0 && pingCount === 0) {
-                percentage = 66;
-            } else if (pingCount > 0) {
-                percentage = 100;
-            }
+        if (!activeProject || hasOnboardingDismissed(activeProject.$id, $user)) return undefined;
 
-            return {
-                title: 'Get started',
-                percentage
-            };
+        const { platforms, pingCount } = activeProject;
+        let percentage = 33;
+
+        if (platforms.length > 0 && pingCount === 0) {
+            percentage = 66;
+        } else if (pingCount > 0) {
+            percentage = 100;
         }
 
-        return undefined;
+        return {
+            title: 'Get started',
+            percentage
+        };
     }
 
     function handleResize() {
@@ -139,8 +139,9 @@
     // subscriptions
     isNewWizardStatusOpen.subscribe((value) => (showHeader = !value));
 
-    page.subscribe(({ url }) => {
-        $showSubNavigation = url.searchParams.get('openNavbar') === 'true';
+    $: {
+        const url = page.url;
+        showSubNavigation.set(url.searchParams.get('openNavbar') === 'true');
         clearTimeout(timeoutId);
 
         if (url.pathname.includes('project-')) {
@@ -150,7 +151,7 @@
         } else {
             showContentTransition = false;
         }
-    });
+    }
 
     // reactive blocks
     $: sideSize = $hasSubNavigation ? ($isNarrow ? '17rem' : '25rem') : '12.5rem';
@@ -185,17 +186,17 @@
             };
         }),
 
-        currentProject: selectedProject
+        currentProject: activeProject
     };
 
     $: state = $isSidebarOpen ? 'open' : 'closed';
 
-    $: subNavigation = $page.data.subNavigation;
+    $: subNavigation = page.data.subNavigation;
 
     $: shouldRenderSidebar =
         !$isNewWizardStatusOpen && showSideNavigation && !$showOnboardingAnimation;
-    $: hasSidebarSpace = shouldRenderSidebar && !$isTabletViewport && !!selectedProject;
-    $: isProjectBlocked = getIsProjectBlocked(selectedProject);
+    $: hasSidebarSpace = shouldRenderSidebar && !$isTabletViewport && !!activeProject;
+    $: isProjectBlocked = getIsProjectBlocked(activeProject);
     $: {
         if ($isSidebarOpen) {
             closeOpenDialogs();
@@ -219,6 +220,7 @@
 <main
     class:has-alert={$activeHeaderAlert?.show}
     class:is-open={$showSubNavigation}
+    class:is-sidebar-open={$isSidebarOpen}
     class:u-hide={$wizard.show || $wizard.cover}
     class:is-fixed-layout={$activeHeaderAlert?.show}
     class:no-header={!showHeader || $showOnboardingAnimation}
@@ -230,7 +232,7 @@
     <div class="shell-sidebar-area" inert={isProjectBlocked || undefined}>
         {#if shouldRenderSidebar}
             <Sidebar
-                project={selectedProject}
+                project={activeProject}
                 progressCard={getProgressCard()}
                 avatar={navbarProps.avatar}
                 bind:subNavigation
@@ -247,12 +249,12 @@
     <div
         class="content"
         class:has-transition={showContentTransition}
-        class:icons-content={state === 'icons' && selectedProject}
+        class:icons-content={state === 'icons' && activeProject}
         class:no-sidebar={!hasSidebarSpace}>
         <section class="main-content" data-test={showSideNavigation}>
-            {#if $page.data?.header}
+            {#if page.data?.header}
                 <div class="layout-header">
-                    <svelte:component this={$page.data.header} />
+                    <svelte:component this={page.data.header} />
                 </div>
             {/if}
             <slot />
@@ -278,6 +280,12 @@
         z-index: 20;
     }
 
+    @media (max-width: 1023px) {
+        main.is-sidebar-open .content {
+            pointer-events: none;
+        }
+    }
+
     .content {
         width: 100%;
 

src/routes/(console)/+layout.svelte

@@ -34,6 +34,7 @@
     import { feedback } from '$lib/stores/feedback';
     import { hasStripePublicKey, isCloud, VARS } from '$lib/system';
     import { stripe } from '$lib/stores/stripe';
+    import MobileFeedbackModal from './wizard/feedback/mobileFeedbackModal.svelte';
     import MobileSupportModal from './wizard/support/mobileSupportModal.svelte';
     import { showSupportModal } from './wizard/support/store';
     import { activeHeaderAlert, consoleVariables } from './store';
@@ -43,6 +44,7 @@
     import { UsageRates } from '$lib/components/billing';
     import { canSeeProjects } from '$lib/stores/roles';
     import { BottomModalAlert } from '$lib/components';
+    import { isSmallViewport } from '$lib/stores/viewport';
     import {
         IconAnnotation,
         IconBookOpen,
@@ -341,6 +343,10 @@
 
 <Create bind:show={$newOrgModal} />
 
+{#if $feedback.show && $isSmallViewport}
+    <MobileFeedbackModal />
+{/if}
+
 {#if $showSupportModal}
     <MobileSupportModal bind:show={$showSupportModal}></MobileSupportModal>
 {/if}