[UI] Move import button to the side of the Install one by flavioislima · Pull Request #5339 · Heroic-Games-Launcher/HeroicGamesLauncher

flavioislima · 2026-02-20T13:18:48Z

Use the following Checklist if you have changed something on the Backend or Frontend:

Tested the feature and it's working on a current and clean install.
Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
Created / Updated Tests (If necessary)
Created / Updated documentation (If necessary)

flavioislima · 2026-02-20T13:19:58Z

src/frontend/screens/Game/GamePage/index.css

    height: auto;
    grid-template-columns: 1fr;
-    grid-template-rows: min-content 1fr 1fr min-content;
+    grid-template-rows: min-content 400px 2fr min-content;


Not related but I saw that the game page is broken on small windows:

So this fixes it:

arielj

One thing I noticed with this change (well I guess it's not this PR but the previous one) is that the Import game option works differently if you use it from the details page and if you use in with the install modal open: when you use the import game without the install dialog the game is added with the default/shared wine prefix configure, but if you use the Import game button in the install dialog it sets the correct per-game prefix.

I wonder if this button should actually add a new modal that lets you configure the wine stuff and pick a folder instead of just a file picker?

Not sure if that needs to be fixed in this PR, but it makes this button way more visible now so maybe it's good to address that here so we don't forget to fix it later?

Another things that I noticed (but maybe it's been like this forever) is that while the game is being imported we don't disable the install/import buttons, so a user can trigger both the import and after that open the download dialog and trigger an installation or another import. We should disable the Install dialog when importing too

arielj · 2026-02-22T16:06:09Z

src/frontend/screens/Game/GamePage/index.css

  }
 }

+@media screen and (max-width: 1000px) {


here it's better to use a container query or even better just let flexbox wrap to a new line if it needs to

with this 1000px based on the viewport things may not fit depending on the language or the width of the sidebar

… import actions

…uncher into ui/import_btn_change

…onent

changes made

flavioislima · 2026-03-12T17:46:56Z

@arielj implemented a simple modal to select the wine prefix and version now:

Also disabled the button while importing.

arielj

One thing I noticed with these changes is that now there's no way to import a game from the library view because the install dialog only shows the install button now

I think this can be also handled in relation to the other comment I made about maybe not changing the DownloadDialog but adding a new ImportDialog, then the Import Game button in the DownloadDialog could close itself and open the ImportDialog, so it will work also from the library

one more thing that I'm not sure if it's correct or not is that the global isImporting state is well global but at the same time related to importing a game and also it's not clear for example why we wouldn't be able to import a GOG game wile an Epic game is being imported

maybe instead of making it a global state it can just check the state of that particular game?

arielj · 2026-03-13T22:33:05Z

src/frontend/screens/Library/components/InstallModal/DownloadDialog/index.tsx

-                  <>
-                    <span>
-                      {`${t('install.disk-space-left', 'Space Available')}: `}
+        {!isImportMode && (


there are lines inside this checking if isImportMode is true/false but this first statement already ensures isImportMode is false anywhere inside it

arielj · 2026-03-13T22:40:13Z

src/frontend/screens/Library/components/InstallModal/DownloadDialog/index.tsx

    useContext(ContextProvider)

+  const { action = 'install' } = useInstallGameModal()
+  const isImportMode = action === 'import'


I don't think it's a good idea to reuse the install dialog for the import dialog

this is doing a lot of unnecessary stuff when isImportMode: is fecthing install info, SDLs info, calculating the download size, checking available disk space, checking DLC, and then the return JSX is full of {!isImportMode && ... for everything except the children

I think it will be way more clean to have an ImportDialog based on what we have inthe DownloadDialog but without all the extra stuff we are ignoring

arielj · 2026-03-13T22:42:31Z

src/frontend/screens/Library/components/InstallModal/index.tsx

-            ) : null}
-          </SideloadDialog>
-        )}
+        {renderContent()}


is there a reason to move this out of here into a function? I ask because it's not clear to me from the diff is something was changed or just extracted into a function (and not sure why either, what's the benefit if this?)

arielj · 2026-03-13T22:46:51Z

src/frontend/helpers/library.ts

+          wineCrossoverBottle
+        }
+      })
+    }


what happens if the import fails here? I understand here we are saving the setting before importing the game?

I think it's better to send the settings in the window.api.importGame call and create the settings on the backend once we know the game was imported successfully

arielj · 2026-03-13T22:59:29Z

src/frontend/screens/Game/GamePage/index.css

  }
 }

+@container (max-width: 470px) {


this can be problematic with translations

we can do this to not depend on a pixel size here:

// in line 313 .installButtons { gap: var(--space-xs); justify-content: flex-start; // line 280 is making this centered which doesn't work flex-wrap: wrap; // so it wraps as needed }

but we also need to remove the max-width of .gameConfigContainer .mainInfoWrapper .mainInfo .buttons, now it's max-width: 250px; but there's no reason for that, there's more space already

flavioislima added 3 commits February 20, 2026 12:46

[UI] Put Import button on the side of Install

a482fd3

fix: small screens gap

2073a97

fix: gameConfigContainer on small screens

ecfff1e

flavioislima commented Feb 20, 2026

View reviewed changes

flavioislima added the pr:ready-for-review Feature-complete, ready for the grind! :P label Feb 20, 2026

flavioislima added this to the 2.20 milestone Feb 20, 2026

flavioislima requested review from CommandMC, Etaash-mathamsetty, arielj and imLinguin February 20, 2026 13:20

refactor: simplify button disable logic in MainButton component

5904aa2

flavioislima modified the milestones: 2.20, 2.21 Feb 20, 2026

arielj requested changes Feb 22, 2026

View reviewed changes

arielj previously requested changes Feb 22, 2026

View reviewed changes

arielj linked an issue Feb 22, 2026 that may be closed by this pull request

[Ui/UX] Import button is not immediately visible #1116

Open

flavioislima added 5 commits March 12, 2026 17:15

style: update media query for installButtons to use container query

abd518d

feat: show wine picker modal on importing

5b432f4

feat: add importing state and update MainButton logic for install and…

6df966c

… import actions

Merge branch 'main' of github.com:Heroic-Games-Launcher/HeroicGamesLa…

b0d22eb

…uncher into ui/import_btn_change

refactor: simplify path dialog title and label in DownloadDialog comp…

216633f

…onent

arielj requested changes Mar 13, 2026

View reviewed changes

arielj reviewed Mar 13, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[UI] Move import button to the side of the Install one#5339

[UI] Move import button to the side of the Install one#5339
flavioislima wants to merge 9 commits intomainfrom
ui/import_btn_change

flavioislima commented Feb 20, 2026 •

edited

Loading

Uh oh!

flavioislima Feb 20, 2026

Uh oh!

arielj left a comment •

edited

Loading

Uh oh!

arielj Feb 22, 2026

Uh oh!

flavioislima commented Mar 12, 2026

Uh oh!

arielj left a comment

Uh oh!

arielj Mar 13, 2026

Uh oh!

arielj Mar 13, 2026

Uh oh!

arielj Mar 13, 2026

Uh oh!

arielj Mar 13, 2026

Uh oh!

arielj Mar 13, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

flavioislima commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

flavioislima Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

arielj left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arielj Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

flavioislima commented Mar 12, 2026

Uh oh!

arielj left a comment

Choose a reason for hiding this comment

Uh oh!

arielj Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

arielj Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

arielj Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

arielj Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

arielj Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

flavioislima commented Feb 20, 2026 •

edited

Loading

arielj left a comment •

edited

Loading

arielj Mar 13, 2026 •

edited

Loading