Resources section and donate in-app

mathesar_ui/src/App.svelte

@@ -117,11 +117,17 @@
   }
 
   h1 {
-    margin: 0 0 1rem 0;
+    margin: 0 0 1.5rem 0;
     font-size: var(--size-ultra-large);
     font-weight: 500;
   }
 
+  h2 {
+    font-size: var(--size-x-large);
+    font-weight: 600;
+    margin: 0 0 1rem 0;
+  }
+
   hr {
     margin: 0;
     border: 0;
@@ -173,11 +179,6 @@
     font-weight: bold;
   }
 
-  .large-bold-header {
-    font-size: var(--size-large);
-    font-weight: 600;
-  }
-
   .bold-header {
     font-weight: 500;
   }

mathesar_ui/src/component-library/collapsible/Collapsible.scss

@@ -14,7 +14,6 @@
       padding: var(--Collapsible_trigger-padding, 0.5em);
       .collapsible-header-title {
         flex-grow: 1;
-        overflow: hidden;
         font-weight: var(--Collapsible_header-font-weight, 600);
       }
       svg {

mathesar_ui/src/component-library/help/Help.svelte

@@ -8,7 +8,37 @@
   type $$Props = ComponentProps<Tooltip>;
 </script>
 
-<Tooltip aria-label="Help" class="help-trigger" allowHover {...$$props}>
-  <Icon slot="trigger" {...iconHelp} />
-  <slot slot="content" />
-</Tooltip>
+<!--
+NOTE: This markup might seem superfluous, but we need both `.help` and
+`.help-trigger` because we're using `em` CSS units on `.help` and `rem` CSS
+units on `.help-trigger`.
+-->
+<span class="help">
+  <span class="help-trigger">
+    <Tooltip aria-label="Help" class="help-trigger" allowHover {...$$props}>
+      <Icon slot="trigger" {...iconHelp} />
+      <slot slot="content" />
+    </Tooltip>
+  </span>
+</span>
+
+<style>
+  .help {
+    display: inline-block;
+    position: relative;
+    /**
+     * Move the help bubble up slightly so that it appears somewhat like a
+     * superscript. We're using `em` here to ensure that the bubble moves
+     * up more when it's placed inside a heading with a larger font size.
+     */
+    top: -0.3em;
+  }
+  .help-trigger {
+    /**
+     * Force a font-size of 1rem so that the help bubbles display with a
+     * consistent size, even when they are placed inside headings with
+     * larger font sizes.
+     */
+    font-size: 1rem;
+  }
+</style>

mathesar_ui/src/components/AppHeader.svelte

@@ -2,7 +2,10 @@
   import { _ } from 'svelte-i18n';
 
   import {
+    iconCommunityChat,
     iconDatabase,
+    iconDocumentation,
+    iconDonation,
     iconLogout,
     iconSettingsMajor,
     iconUser,
@@ -12,6 +15,8 @@
     LOGOUT_URL,
     USER_PROFILE_URL,
     getDatabasePageUrl,
+    getDocsLink,
+    getMarketingLink,
   } from '@mathesar/routes/urls';
   import { databasesStore } from '@mathesar/stores/databases';
   import { getReleaseDataStoreFromContext } from '@mathesar/stores/releases';
@@ -68,7 +73,9 @@
           <LinkMenuItem icon={iconUser} href={USER_PROFILE_URL}>
             {$userProfile.getDisplayName()}
           </LinkMenuItem>
+
           <MenuDivider />
+
           {#if $userProfile.isMathesarAdmin}
             <LinkMenuItem
               icon={iconSettingsMajor}
@@ -77,7 +84,37 @@
             >
               {$_('administration')}
             </LinkMenuItem>
+            <MenuDivider />
           {/if}
+
+          <MenuHeading>{$_('resources')}</MenuHeading>
+          <LinkMenuItem
+            icon={iconDocumentation}
+            href={getDocsLink('userGuide')}
+            tinro-ignore
+            target="_blank"
+          >
+            {$_('user_guide')}
+          </LinkMenuItem>
+          <LinkMenuItem
+            icon={iconCommunityChat}
+            href={getMarketingLink('community')}
+            tinro-ignore
+            target="_blank"
+          >
+            {$_('community')}
+          </LinkMenuItem>
+          <LinkMenuItem
+            icon={iconDonation}
+            href={getMarketingLink('donate')}
+            tinro-ignore
+            target="_blank"
+          >
+            {$_('donate_to_mathesar')}
+          </LinkMenuItem>
+
+          <MenuDivider />
+
           <LinkMenuItem icon={iconLogout} href={LOGOUT_URL} tinro-ignore>
             {$_('log_out')}
           </LinkMenuItem>

mathesar_ui/src/components/DocsLink.svelte

@@ -5,33 +5,11 @@
   https://docs.mathesar.org
 -->
 <script lang="ts">
-  import { getDocsLink } from '@mathesar/routes/urls';
+  import { type DocsPage, getDocsLink } from '@mathesar/routes/urls';
 
-  const pages = {
-    // TODO_BETA: Add correct link to analytics information docs-page/website
-    analytics: '/analytics/',
-    import: '/user-guide/importing-data/',
-    relationships: '/user-guide/relationships/',
-    roles: '/user-guide/roles/',
-    rolesLogin: '/user-guide/roles/#login',
-    rolesInheritance: '/user-guide/roles/#inheritance',
-    storedRolePasswords: '/user-guide/stored-role-passwords/',
-    collaborators: '/user-guide/collaborators/',
-    internalSchemas: '/user-guide/schemas/#internal',
-    databases: '/user-guide/databases/',
-    databasePermissions: '/user-guide/databases/#permissions',
-    schemaPermissions: '/user-guide/schemas/#permissions',
-    tablePermissions: '/user-guide/tables/#permissions',
-    schemas: '/user-guide/schemas/',
-    userAdmin: '/user-guide/users/#admin',
-  };
-  type Page = keyof typeof pages;
-
-  export let page: Page;
-
-  $: href = getDocsLink(pages[page]);
+  export let page: DocsPage;
 </script>
 
-<a {href} target="_blank">
+<a href={getDocsLink(page)} target="_blank">
   <slot />
 </a>

mathesar_ui/src/components/InsetPageSection.svelte

@@ -1,9 +1,7 @@
 <script lang="ts"></script>
 
 <div class="inset-page-section">
-  {#if $$slots.header}
-    <div class="header"><slot name="header" /></div>
-  {/if}
+  <slot name="header" />
   <div class="section"><slot /></div>
 </div>
 

mathesar_ui/src/components/resources/CommunityResource.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+
+  import ResourceCard from '@mathesar/components/resources/ResourceCard.svelte';
+  import { iconCommunityChat } from '@mathesar/icons';
+  import { getMarketingLink } from '@mathesar/routes/urls';
+</script>
+
+<ResourceCard icon={iconCommunityChat} href={getMarketingLink('community')}>
+  <span slot="title">{$_('chat_with_community')}</span>
+  <span slot="description">{$_('connect_with_community_help')}</span>
+  <span slot="link-text">{$_('join_chat')}</span>
+</ResourceCard>

mathesar_ui/src/components/resources/DocumentationResource.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+
+  import ResourceCard from '@mathesar/components/resources/ResourceCard.svelte';
+  import { iconDocumentation } from '@mathesar/icons';
+  import { getDocsLink } from '@mathesar/routes/urls';
+</script>
+
+<ResourceCard icon={iconDocumentation} href={getDocsLink('userGuide')}>
+  <span slot="title">{$_('documentation')}</span>
+  <span slot="description">{$_('user_guide_description')}</span>
+  <span slot="link-text">{$_('open_user_guide')}</span>
+</ResourceCard>

mathesar_ui/src/components/resources/DonateResource.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+
+  import ResourceCard from '@mathesar/components/resources/ResourceCard.svelte';
+  import { iconDonation } from '@mathesar/icons';
+  import { getMarketingLink } from '@mathesar/routes/urls';
+</script>
+
+<ResourceCard icon={iconDonation} href={getMarketingLink('donate')}>
+  <span slot="title">{$_('support_our_mission')}</span>
+  <span slot="description">{$_('donate_blurb')}</span>
+  <span slot="link-text">{$_('donate_to_mathesar')}</span>
+</ResourceCard>

mathesar_ui/src/components/resources/ResourceCard.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { IconProps } from '@mathesar/component-library/types';
+  import { iconExternalHyperlink } from '@mathesar/icons';
+  import { AnchorButton, Icon } from '@mathesar-component-library';
+
+  export let href: string;
+  export let icon: IconProps;
+</script>
+
+<div class="resource-card">
+  <div class="title"><Icon {...icon} /> <slot name="title" /></div>
+  <div class="description"><slot name="description" /></div>
+  <div class="button">
+    <AnchorButton appearance="secondary" {href} target="_blank">
+      <slot name="link-text" />
+      <Icon {...iconExternalHyperlink} />
+    </AnchorButton>
+  </div>
+</div>
+
+<style>
+  .resource-card {
+    border-radius: var(--border-radius-l);
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-x-small);
+  }
+  .title {
+    font-weight: 500;
+  }
+  .description {
+    color: var(--color-text-muted);
+    flex: 1 0 auto;
+  }
+</style>

mathesar_ui/src/components/resources/index.ts

@@ -0,0 +1,3 @@
+export { default as DocumentationResource } from './DocumentationResource.svelte';
+export { default as CommunityResource } from './CommunityResource.svelte';
+export { default as DonateResource } from './DonateResource.svelte';

mathesar_ui/src/i18n/languages/en/dict.json

@@ -60,6 +60,7 @@
   "cell": "Cell",
   "change_password": "Change Password",
   "change_role": "Change Role",
+  "chat_with_community": "Chat With Community",
   "check_for_updates": "Check for Updates",
   "child_role_new_items_scroll_hint": "Scroll or click here to see the child role.",
   "child_roles": "Child Roles",
@@ -105,6 +106,7 @@
   "columns_to_extract": "Columns to Extract",
   "columns_to_move": "Columns to Move",
   "columns_unique_values_help": "The columns in this table that should contain unique values.",
+  "community": "Community",
   "configure_in_mathesar": "Configure in Mathesar",
   "configure_password": "Configure Password",
   "configure_value": "Configure ''{value}''",
@@ -229,7 +231,10 @@
   "disconnect_database_with_name": "Disconnect Database [identifier]?",
   "display_language": "Display Language",
   "display_name": "Display Name",
+  "documentation": "Documentation",
   "documentation_and_resources": "Documentation & Resources",
+  "donate_blurb": "Help us build and maintain Mathesar with a donation to The Mathesar Foundation, a 501(c)(3) nonprofit organization.",
+  "donate_to_mathesar": "Donate To Mathesar",
   "drop_role": "Drop Role",
   "drop_role_name": "Drop role [name]",
   "drop_role_name_question": "Drop role [name]?",
@@ -331,6 +336,7 @@
   "inspector": "Inspector",
   "internal_database": "Internal Database",
   "internal_schema_help": "These schemas are necessary for Mathesar to function and will automatically be installed on the database after connecting.",
+  "join_chat": "Join Chat",
   "join_community_chat": "Join Community Chat",
   "join_email_list": "Join Email List",
   "keep_first_row_as_data": "Set generic column names, keeping the first row as data",
@@ -455,6 +461,7 @@
   "open_record": "Open Record",
   "open_table_in_data_explorer": "Open this table in Data Explorer to query and analyze your data.",
   "open_table_record": "Open a Record from [tableName]",
+  "open_user_guide": "Open User Guide",
   "operation_requires_pg_user_have_createdb": "This operation requires the \"{username}\" PostgreSQL user to have CREATEDB privileges.",
   "or": "or",
   "overridden": "Overridden",
@@ -552,6 +559,7 @@
   "remove_stored_password_help": "Removing this stored password will prevent collaborators assigned to this role from accessing databases on server ''{server}''.",
   "removing_role_configuration_warning": "Removing this configuration will prevent collaborators assigned to this role from accessing databases on server ''{server}''.",
   "reset": "Reset",
+  "resources": "Resources",
   "restrict_to_unique": "Restrict to Unique",
   "restrict_to_unique_help": "Ensures all values in this column are unique. Ideal for IDs, usernames, and other unique identifiers.",
   "result": "Result",
@@ -672,6 +680,7 @@
   "summarize_column_with_identifier": "Summarize the [identifier] column?",
   "summarize_in_data_explorer": "Summarize in Data Explorer",
   "summarize_in_data_explorer_help": "Open a pre-configured exploration based on the current table display.",
+  "support_our_mission": "Support Our Mission",
   "sync_external_changes": "Sync External Changes",
   "sync_external_changes_data_help": "External changes to data (e.g. adding or editing rows) will be automatically reflected without clicking this button.",
   "sync_external_changes_structure_help": "If you make structural changes to the database outside Mathesar (e.g. using another tool to add a schema, table, or column), those changes will not be reflected in Mathesar until you manually sync them with this button.",
@@ -775,6 +784,8 @@
   "use_existing_pg_user": "Use an existing PostgreSQL user",
   "use_text_for_all_columns": "Use \"Text\" for all column data types",
   "user": "User",
+  "user_guide": "User Guide",
+  "user_guide_description": "Our User Guide covers all aspects of Mathesar, from basic usage to advanced features.",
   "user_name": "User name",
   "user_needs_create_connect_privileges": "The user needs CONNECT and CREATE privileges on the database.",
   "user_not_found": "User not found",

mathesar_ui/src/icons/index.ts

@@ -4,6 +4,7 @@ import {
   faArrowRight,
   faArrowRightFromBracket,
   faBackspace,
+  faBook,
   faCalendarDay,
   faCalendarWeek,
   faCaretRight,
@@ -15,6 +16,7 @@ import {
   faClock,
   faClone,
   faCogs,
+  faComments,
   faCopy,
   faDatabase,
   faDiagramNext,
@@ -32,6 +34,7 @@ import {
   faGrip,
   faHammer,
   faHashtag,
+  faHeart,
   faICursor,
   faInfo,
   faKey,
@@ -161,12 +164,15 @@ export const iconReinstall = { data: faRotateBack };
 //
 // (These names should all be nouns)
 
+export const iconCommunityChat: IconProps = { data: faComments };
 export const iconConnection: IconProps = { data: faPlug };
 export const iconConstraint: IconProps = { data: faKey };
 export const iconConstraintUnique: IconProps = { data: faSnowflake };
 export const iconDatabase: IconProps = { data: faDatabase };
 export const iconDbIdentifierDelimiter: IconProps = { data: faArrowRight };
 export const iconDisplayOptions: IconProps = { data: faPalette };
+export const iconDocumentation: IconProps = { data: faBook };
+export const iconDonation: IconProps = { data: faHeart };
 export const iconExploration: IconProps = { data: explorationIcon };
 export const iconExternalHyperlink: IconProps = { data: faUpRightFromSquare };
 export const iconFiltering: IconProps = { data: faFilter };

mathesar_ui/src/pages/admin-privacy/PrivacyPage.svelte

@@ -74,10 +74,3 @@
     </LabeledInput>
   </div>
 </div>
-
-<style>
-  h2 {
-    font-size: var(--size-x-large);
-    font-weight: var(--font-weight-medium);
-  }
-</style>