fix(import): show success message and propagate server error to UI

[behdadmansouri]

Summary

Fixes ActivityWatch/activitywatch#394

• Add a dismissible green success alert shown after a successful import
• Extract the server's error message from the HTTP response body (when the server returns a structured {"message": "..."} error) and display it directly to the user
• Fall back to the generic "see aw-server logs" message if no structured error is present (e.g. old server versions)
• Add import_success flag to data()

Test plan

• Import a valid file → green "Import completed successfully!" alert appears
• Import a file whose bucket already exists (with updated aw-server) → red alert shows "Bucket '...' already exists. Delete it first..."
• Import fails with old server → red alert shows the existing generic message

Note: This pairs with ActivityWatch/aw-server#165 which makes the server return structured errors. The UI gracefully falls back without that server change.

🤖 Implemented with Claude Code — AI assistance disclosed per contribution guidelines.

[greptile-apps]

Greptile Summary

This PR improves the import UX in Buckets.vue by showing a dismissible green success alert after a successful import and surfacing structured error messages from the server (via err.response.data.message) instead of always displaying a generic fallback.

• Adds import_success state and a green b-alert that clears on dismiss or on the next failed import.
• Extracts err?.response?.data?.message from HTTP error responses to show server-provided error text (e.g. "Bucket already exists"), falling back gracefully to the generic message for older server versions.
• Fixes a pre-existing dismissable typo to dismissible on the error alert and wires up @dismissed handlers on both alerts so dismiss button clicks correctly update component state.

Confidence Score: 4/5

Safe to merge; the change is confined to one component and only adds UI feedback for an existing import flow without touching any data-mutating logic.

The core import logic is unchanged and the new alert states are set correctly in success and failure paths. The one rough edge is that a stale success or error alert remains visible for the duration of a subsequent in-flight import, which is a cosmetic overlap rather than a data correctness issue.

src/views/Buckets.vue — the alert-state reset ordering in the import watcher.

Important Files Changed

Filename	Overview
src/views/Buckets.vue	Adds success alert and structured server-error extraction on import; dismissable typo fixed to dismissible; stale alert state not reset before a new import begins.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant User
    participant FileInput as b-form-file
    participant Watcher as import_file watcher
    participant Server as aw-server /0/import

    User->>FileInput: picks a file
    FileInput->>Watcher: "import_file = File"
    Watcher->>Server: POST /0/import (multipart)
    alt success
        Server-->>Watcher: 200 OK
        Watcher->>Watcher: "import_error = null, import_success = true"
        Watcher-->>User: green success alert shown
    else server returns structured error
        Server-->>Watcher: "4xx/5xx {message: "..."}"
        Watcher->>Watcher: "import_error = response.data.message"
        Watcher-->>User: red alert with server message
    else server returns unstructured error
        Server-->>Watcher: 4xx/5xx (no JSON body)
        Watcher->>Watcher: "import_error = generic fallback"
        Watcher-->>User: red alert "see aw-server logs"
    end
    Watcher->>Watcher: "loadBuckets(), import_file = null"

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant User
    participant FileInput as b-form-file
    participant Watcher as import_file watcher
    participant Server as aw-server /0/import

    User->>FileInput: picks a file
    FileInput->>Watcher: "import_file = File"
    Watcher->>Server: POST /0/import (multipart)
    alt success
        Server-->>Watcher: 200 OK
        Watcher->>Watcher: "import_error = null, import_success = true"
        Watcher-->>User: green success alert shown
    else server returns structured error
        Server-->>Watcher: "4xx/5xx {message: "..."}"
        Watcher->>Watcher: "import_error = response.data.message"
        Watcher-->>User: red alert with server message
    else server returns unstructured error
        Server-->>Watcher: 4xx/5xx (no JSON body)
        Watcher->>Watcher: "import_error = generic fallback"
        Watcher-->>User: red alert "see aw-server logs"
    end
    Watcher->>Watcher: "loadBuckets(), import_file = null"

Loading

Comments Outside Diff (1)

1. src/views/Buckets.vue, line 193-197 (link)

   Stale alert visible during a new in-flight import. Both import_success and import_error are only updated after importBuckets resolves, so if a user imports a file successfully (green alert appears), then picks a second file, the green alert stays visible while the spinner is also showing. Clearing both at the top of the watcher avoids the misleading overlap.

   Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

_{Reviews (1): Last reviewed commit: "fix(import): show success message and pr..." | Re-trigger Greptile}