feat: support and feedback modal with third party support (#13056)

web/src/lib/components/shared-components/help-and-feedback-modal.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import { type ServerAboutResponseDto } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiBugOutline, mdiFaceAgent, mdiGit, mdiGithub, mdiInformationOutline } from '@mdi/js';
+  import { discordPath } from '$lib/assets/svg-paths';
+
+  export let onClose: () => void;
+
+  export let info: ServerAboutResponseDto;
+</script>
+
+<Portal>
+  <FullScreenModal title={$t('support_and_feedback')} {onClose}>
+    <p>{$t('official_immich_resources')}</p>
+    <div class="flex flex-col sm:grid sm:grid-cols-2 gap-2 mt-3">
+      <div>
+        <a href="https://{info.version}.archive.immich.app/docs/overview/introduction" target="_blank" rel="noreferrer">
+          <Icon path={mdiInformationOutline} size="1.5em" class="inline-block" />
+          <p
+            class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
+            id="documentation-label"
+          >
+            {$t('documentation')}
+          </p>
+        </a>
+      </div>
+
+      <div>
+        <a href="https://github.com/immich-app/immich/" target="_blank" rel="noreferrer">
+          <Icon path={mdiGithub} size="1.5em" class="inline-block" />
+          <p
+            class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
+            id="github-label"
+          >
+            {$t('source')}
+          </p>
+        </a>
+      </div>
+
+      <div>
+        <a href="https://discord.immich.app" target="_blank" rel="noreferrer">
+          <Icon path={discordPath} class="inline-block" size="1.5em" />
+          <p
+            class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
+            id="github-label"
+          >
+            {$t('discord')}
+          </p>
+        </a>
+      </div>
+
+      <div>
+        <a href="https://github.com/immich-app/immich/issues/new/choose" target="_blank" rel="noreferrer">
+          <Icon path={mdiBugOutline} size="1.5em" class="inline-block" />
+          <p
+            class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
+            id="github-label"
+          >
+            {$t('bugs_and_feature_requests')}
+          </p>
+        </a>
+      </div>
+    </div>
+    {#if info.thirdPartyBugFeatureUrl || info.thirdPartySourceUrl || info.thirdPartyDocumentationUrl || info.thirdPartySupportUrl}
+      <p class="mt-3">{$t('third_party_resources')}</p>
+      <p class="text-xs mt-1">
+        {$t('support_third_party_description')}
+      </p>
+      <div class="flex flex-col sm:grid sm:grid-cols-2 gap-2 mt-3">
+        {#if info.thirdPartyDocumentationUrl}
+          <div>
+            <a href={info.thirdPartyDocumentationUrl} target="_blank" rel="noreferrer">
+              <Icon path={mdiInformationOutline} size="1.5em" class="inline-block" />
+              <p
+                class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
+                id="documentation-label"
+              >
+                {$t('documentation')}
+              </p>
+            </a>
+          </div>
+        {/if}
+
+        {#if info.thirdPartySourceUrl}
+          <div>
+            <a href={info.thirdPartySourceUrl} target="_blank" rel="noreferrer">
+              <Icon path={mdiGit} size="1.5em" class="inline-block" />
+              <p
+                class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
+                id="github-label"
+              >
+                {$t('source')}
+              </p>
+            </a>
+          </div>
+        {/if}
+
+        {#if info.thirdPartySupportUrl}
+          <div>
+            <a href={info.thirdPartySupportUrl} target="_blank" rel="noreferrer">
+              <Icon path={mdiFaceAgent} class="inline-block" size="1.5em" />
+              <p
+                class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
+                id="github-label"
+              >
+                {$t('support')}
+              </p>
+            </a>
+          </div>
+        {/if}
+
+        {#if info.thirdPartyBugFeatureUrl}
+          <div>
+            <a href={info.thirdPartyBugFeatureUrl} target="_blank" rel="noreferrer">
+              <Icon path={mdiBugOutline} size="1.5em" class="inline-block" />
+              <p
+                class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
+                id="github-label"
+              >
+                {$t('bugs_and_feature_requests')}
+              </p>
+            </a>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </FullScreenModal>
+</Portal>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -8,32 +8,45 @@
   import { featureFlags } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { handleLogout } from '$lib/utils/auth';
-  import { logout } from '@immich/sdk';
-  import { mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
+  import { getAboutInfo, logout, type ServerAboutResponseDto } from '@immich/sdk';
+  import { mdiHelpCircleOutline, mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import { AppRoute } from '../../../constants';
-  import ImmichLogo from '../immich-logo.svelte';
-  import SearchBar from '../search-bar/search-bar.svelte';
+  import { AppRoute } from '$lib/constants';
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import ThemeButton from '../theme-button.svelte';
   import UserAvatar from '../user-avatar.svelte';
   import AccountInfoPanel from './account-info-panel.svelte';
+  import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
+  import { onMount } from 'svelte';
 
   export let showUploadButton = true;
   export let onUploadClick: () => void;
 
   let shouldShowAccountInfo = false;
   let shouldShowAccountInfoPanel = false;
+  let shouldShowHelpPanel = false;
   let innerWidth: number;
 
   const onLogout = async () => {
     const { redirectUri } = await logout();
     await handleLogout(redirectUri);
   };
+
+  let aboutInfo: ServerAboutResponseDto;
+
+  onMount(async () => {
+    aboutInfo = await getAboutInfo();
+  });
 </script>
 
 <svelte:window bind:innerWidth />
 
+{#if shouldShowHelpPanel}
+  <HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} info={aboutInfo} />
+{/if}
+
 <section id="dashboard-navbar" class="fixed z-[900] h-[var(--navbar-height)] w-screen text-sm">
   <SkipLink text={$t('skip_to_content')} />
   <div
@@ -49,7 +62,7 @@
         {/if}
       </div>
 
-      <section class="flex place-items-center justify-end gap-2 md:gap-4 w-full sm:w-auto">
+      <section class="flex place-items-center justify-end gap-1 md:gap-2 w-full sm:w-auto">
         {#if $featureFlags.search}
           <CircleIconButton
             href={AppRoute.SEARCH}
@@ -63,6 +76,20 @@
 
         <ThemeButton padding="2" />
 
+        <div
+          use:clickOutside={{
+            onEscape: () => (shouldShowHelpPanel = false),
+          }}
+        >
+          <CircleIconButton
+            id="support-feedback-button"
+            title={$t('support_and_feedback')}
+            icon={mdiHelpCircleOutline}
+            on:click={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
+            padding="1"
+          />
+        </div>
+
         {#if !$page.url.pathname.includes('/admin') && showUploadButton}
           <LinkButton on:click={onUploadClick} class="hidden lg:block">
             <div class="flex gap-2">
@@ -87,7 +114,7 @@
         >
           <button
             type="button"
-            class="flex"
+            class="flex pl-2"
             on:mouseover={() => (shouldShowAccountInfo = true)}
             on:focus={() => (shouldShowAccountInfo = true)}
             on:blur={() => (shouldShowAccountInfo = false)}