Merge remote-tracking branch 'origin/main' into feat-csv-export

Author: abnegate

AGENTS.md

@@ -101,4 +101,23 @@ src/
 5. Before commit: `pnpm run check && pnpm run format && pnpm run lint && pnpm run test && pnpm run build`
 6. **Take screenshots**: For any UI changes, capture screenshots and include them in the PR description or comments before finalizing
 
+## Required Pre-Completion Checklist
+
+**CRITICAL**: Before finishing any work or marking a task complete, agents MUST run the following commands in order and ensure all pass:
+
+1. **`pnpm run format`** - Auto-fix all formatting issues
+2. **`pnpm run check`** - Verify TypeScript/Svelte types (must show 0 errors, 0 warnings)
+3. **`pnpm run lint`** - Check code style (ignore pre-existing issues in files you didn't modify)
+4. **`pnpm run test`** - Run all unit tests (all tests must pass)
+5. **`pnpm run build`** - Ensure production build succeeds
+
+If any command fails:
+
+- **Format/Lint**: Run `pnpm run format` to auto-fix, then re-check
+- **Type errors**: Fix all TypeScript errors in files you modified
+- **Test failures**: Fix failing tests or ensure failures are unrelated to your changes
+- **Build failures**: Debug and resolve build issues before proceeding
+
+**Never skip these checks** - they are mandatory quality gates before any work is considered complete.
+
 **Trust these instructions** - only search if incomplete/incorrect. See CONTRIBUTING.md for PR conventions. Use `--frozen-lockfile` always. Docker builds: multi-stage, final image is nginx serving static files from `/console` path.

src/lib/commandCenter/commandCenter.svelte

@@ -30,7 +30,12 @@
     import { getContext, setContext } from 'svelte';
     import { get, writable, type Readable } from 'svelte/store';
     import { fade } from 'svelte/transition';
-    import { commandCenterKeyDownHandler, disableCommands, registerCommands } from './commands';
+    import {
+        commandCenterKeyDownHandler,
+        disableCommands,
+        isTargetInputLike,
+        registerCommands
+    } from './commands';
     import { RootPanel } from './panels';
     import { addSubPanel, clearSubPanels, subPanels } from './subPanels';
     import { addNotification } from '$lib/stores/notifications';
@@ -95,13 +100,9 @@
         keys = [];
     }, 1000);
 
-    function isInputEvent(event: KeyboardEvent) {
-        return ['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName);
-    }
-
     const handleKeydown = (e: KeyboardEvent) => {
         if (!$subPanels.length) {
-            if (isInputEvent(e)) return;
+            if (isTargetInputLike(e.target)) return;
             keys = [...keys, e.key].slice(-10);
             resetKeys();
         }

src/lib/commandCenter/commands.ts

@@ -100,8 +100,11 @@ const commandsEnabled = derived(disabledMap, ($disabledMap) => {
     return Array.from($disabledMap.values()).every((disabled) => !disabled);
 });
 
-function isInputEvent(event: KeyboardEvent) {
-    return ['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName);
+export function isTargetInputLike(element: EventTarget | null) {
+    if (!(element instanceof HTMLElement)) return false;
+    return !!element.closest(
+        'input,textarea,select,[contenteditable],[role="combobox"],[role="textbox"],[role="searchbox"],[data-command-center-ignore]'
+    );
 }
 
 function getCommandRank(command: KeyedCommand) {
@@ -204,7 +207,12 @@ export const commandCenterKeyDownHandler = derived(
             for (const command of commandsArr) {
                 if (!isKeyedCommand(command)) continue;
                 if (!command.forceEnable) {
-                    if (command.disabled || !enabled || isInputEvent(event) || $wizard.show) {
+                    if (
+                        command.disabled ||
+                        !enabled ||
+                        isTargetInputLike(event.target) ||
+                        $wizard.show
+                    ) {
                         continue;
                     }
                 }

src/lib/commandCenter/searchers/organizations.ts

@@ -3,11 +3,12 @@ import { base } from '$app/paths';
 import { sdk } from '$lib/stores/sdk';
 import type { Searcher } from '../commands';
 import { isCloud } from '$lib/system';
+import { Query } from '@appwrite.io/console';
 
 export const orgSearcher = (async (query: string) => {
     const { teams } = !isCloud
         ? await sdk.forConsole.teams.list()
-        : await sdk.forConsole.billing.listOrganization();
+        : await sdk.forConsole.billing.listOrganization([Query.equal('platform', 'appwrite')]);
 
     return teams
         .filter((organization) => organization.name.toLowerCase().includes(query.toLowerCase()))

src/lib/components/archiveProject.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
     import { Button, InputText } from '$lib/elements/forms';
-    import { DropList, GridItem1, CardContainer, Modal } from '$lib/components';
+    import { GridItem1, CardContainer, Modal } from '$lib/components';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import {
         Badge,
         Icon,
         Typography,
-        Tag,
         Accordion,
         ActionMenu,
         Popover,
@@ -20,7 +19,6 @@
         IconFlutter,
         IconReact,
         IconUnity,
-        IconInfo,
         IconDotsHorizontal,
         IconInboxIn,
         IconSwitchHorizontal,
@@ -29,7 +27,6 @@
     import { getPlatformInfo } from '$lib/helpers/platform';
     import { Status, type Models } from '@appwrite.io/console';
     import type { ComponentType } from 'svelte';
-    import { BillingPlan } from '$lib/constants';
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { sdk } from '$lib/stores/sdk';
@@ -52,8 +49,9 @@
 
     let { projectsToArchive, organization, currentPlan }: Props = $props();
 
-    // Track Read-only info droplist per archived project
-    let readOnlyInfoOpen = $state<Record<string, boolean>>({});
+    // Check if current plan order is less than Pro (order < 1 means FREE plan)
+    let isPlanBelowPro = $derived(currentPlan?.order < 1);
+
     let showUnarchiveModal = $state(false);
     let projectToUnarchive = $state<Models.Project | null>(null);
     let showDeleteModal = $state(false);
@@ -97,7 +95,7 @@
     function isUnarchiveDisabled(): boolean {
         if (!organization || !currentPlan) return true;
 
-        if (organization.billingPlan === BillingPlan.FREE) {
+        if (isPlanBelowPro) {
             const currentProjectCount = organization.projects?.length || 0;
             const projectLimit = currentPlan.projects || 0;
 
@@ -196,10 +194,15 @@
 
 {#if projectsToArchive.length > 0}
     <div class="archive-projects-margin-top">
-        <Accordion title="Archived projects" badge={`${projectsToArchive.length}`}>
+        <Accordion
+            title={isPlanBelowPro ? 'Archived projects' : 'Pending archive'}
+            badge={`${projectsToArchive.length}`}>
             <Typography.Text tag="p" size="s">
-                These projects have been archived and are read-only. You can view and migrate their
-                data.
+                {#if isPlanBelowPro}
+                    These projects are archived and require a plan upgrade to restore access.
+                {:else}
+                    These projects will be archived at the end of your billing cycle.
+                {/if}
             </Typography.Text>
 
             <div class="archive-projects-margin">
@@ -216,36 +219,6 @@
                             <svelte:fragment slot="title">{formatted}</svelte:fragment>
                             <svelte:fragment slot="status">
                                 <div class="status-container">
-                                    <DropList
-                                        bind:show={readOnlyInfoOpen[project.$id]}
-                                        placement="bottom-start"
-                                        noArrow>
-                                        <Tag
-                                            size="s"
-                                            style="white-space: nowrap;"
-                                            on:click={(e) => {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                readOnlyInfoOpen = {
-                                                    ...readOnlyInfoOpen,
-                                                    [project.$id]: !readOnlyInfoOpen[project.$id]
-                                                };
-                                            }}>
-                                            <Icon icon={IconInfo} size="s" />
-                                            <span>Read only</span>
-                                        </Tag>
-                                        <svelte:fragment slot="list">
-                                            <li
-                                                class="drop-list-item u-width-250"
-                                                style="padding: var(--space-5, 12px) var(--space-6, 16px)">
-                                                <span class="u-block u-mb-8">
-                                                    Archived projects are read-only. You can view
-                                                    and migrate their data, but they no longer
-                                                    accept edits or requests.
-                                                </span>
-                                            </li>
-                                        </svelte:fragment>
-                                    </DropList>
                                     <Popover let:toggle padding="none" placement="bottom-end">
                                         <Button
                                             text
@@ -267,6 +240,7 @@
                                                 >Unarchive project</ActionMenu.Item.Button>
                                             <ActionMenu.Item.Button
                                                 leadingIcon={IconSwitchHorizontal}
+                                                disabled={isUnarchiveDisabled()}
                                                 on:click={() => handleMigrateProject(project)}
                                                 >Migrate project</ActionMenu.Item.Button>
                                             <div class="action-menu-divider">

src/lib/components/emptyCardImageCloud.svelte

@@ -1,13 +1,20 @@
-<script>
-    import { getNextTier, tierToPlan } from '$lib/stores/billing';
+<script lang="ts">
+    import { isSmallViewport } from '$lib/stores/viewport';
     import { organization } from '$lib/stores/organization';
+    import { getNextTier, tierToPlan } from '$lib/stores/billing';
     import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let source = 'empty_state_card';
+    export let responsive = false;
+
+    // type def for Layout.Stack!
+    let direction: 'column' | 'row' | 'row-reverse' | 'column-reverse' = 'row';
+
+    $: direction = responsive ? ($isSmallViewport ? 'column' : 'row') : 'row';
 </script>
 
 <Card.Base variant="secondary" padding="s" radius="s">
-    <Layout.Stack direction="row" gap="l">
+    <Layout.Stack {direction} gap="l">
         {#if $$slots?.image}
             <div style="flex-shrink:0">
                 <slot name="image" />

src/lib/components/expirationInput.svelte

@@ -134,7 +134,10 @@
             value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
         }
 
-        value = toLocaleDateISO(new Date(value).getTime());
+        // Only convert to ISO date if value is not null
+        if (value !== null) {
+            value = toLocaleDateISO(new Date(value).getTime());
+        }
     }
 
     $: helper =

src/lib/constants.ts

@@ -253,14 +253,13 @@ export const scopes: {
     },
     {
         scope: 'indexes.read',
-        description: "Access to read your project's database collection's indexes",
+        description: "Access to read your project's database table's indexes",
         category: 'Database',
         icon: 'database'
     },
     {
         scope: 'indexes.write',
-        description:
-            "Access to create, update, and delete your project's database collection's indexes",
+        description: "Access to create, update, and delete your project's database table's indexes",
         category: 'Database',
         icon: 'database'
     },

src/lib/elements/forms/inputSelect.svelte

@@ -56,6 +56,7 @@
     helper={error ?? helper}
     {required}
     state={error ? 'error' : 'default'}
+    data-command-center-ignore
     on:invalid={handleInvalid}
     on:input
     on:change

src/lib/stores/billing.ts

@@ -100,7 +100,7 @@ export function tierToPlan(tier: Tier) {
         case BillingPlan.ENTERPRISE:
             return tierEnterprise;
         default:
-            return tierFree;
+            return tierCustom;
     }
 }
 
@@ -557,7 +557,8 @@ export async function checkForMissingPaymentMethod() {
     const orgs = await sdk.forConsole.billing.listOrganization([
         Query.notEqual('billingPlan', BillingPlan.FREE),
         Query.isNull('paymentMethodId'),
-        Query.isNull('backupPaymentMethodId')
+        Query.isNull('backupPaymentMethodId'),
+        Query.equal('platform', 'appwrite')
     ]);
     if (orgs?.total) {
         orgMissingPaymentMethod.set(orgs.teams[0]);