Skip to content

Add Japanese translations and related UI updates #1173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add Japanese translations and related UI updates #1173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
241b128
Re-apply Japanese translations and UI labels after rebase
hayato-444 May 25, 2025
d5678d3
Update Japanese translation for ja_JP.ts
hayato-444 May 25, 2025
606340c
Refactor SettingsModal.svelte for localization support (including Jap…
hayato-444 May 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions web/src/frontend/classic/components/AppBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
<Button
class="clickable"
icon={Bookmark}
iconDescription={'Bookmarks'}
iconDescription={$Locale.Frontend_Classic_BookmarkList_Heading()}
kind="ghost"
tooltipPosition="bottom"
tooltipAlignment="center"
Expand All @@ -104,17 +104,21 @@
{#if showWindowControls}
<HeaderGlobalAction
on:click={minimize}
iconDescription="Minimize"
iconDescription={$Locale.Frontend_Classic_Window_ButtonMinimize_Description()}
icon={Subtract}
/>
<HeaderGlobalAction
on:click={() => (winMaximized ? restore() : maximize())}
iconDescription="Maximize"
icon={winMaximized ? Copy : Checkbox}
on:click={() => (winMaximized ? restore() : maximize())}
iconDescription={
winMaximized
? $Locale.Frontend_Classic_Window_ButtonRestore_Description()
: $Locale.Frontend_Classic_Window_ButtonMaximize_Description()
}
icon={winMaximized ? Copy : Checkbox}
/>
<HeaderGlobalAction
on:click={() => close()}
iconDescription="Close"
iconDescription={$Locale.Frontend_Classic_Window_ButtonClose_Description()}
icon={Close}
class="close"
/>
Expand Down
48 changes: 26 additions & 22 deletions web/src/frontend/classic/components/BookmarksImport.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
<script lang="ts">
import { Modal, InlineLoading, Tag } from 'carbon-components-svelte';
import { type BookmarkImportResult, type BookmarkExportResult } from '.././../../engine/providers/BookmarkPlugin';
import { Locale, SidenavIconsOnTop } from '../stores/Settings';
export let isModalOpen = false;
let importResult: Promise<BookmarkImportResult>;
let exportResult: Promise<BookmarkExportResult>;
const importButtonInfo = { text: 'Import' };
const exportButtonInfo = { text: 'Export' };
const importButtonInfo = { text: $Locale.Frontend_Classic_Bookmark_ImportButton() };
const exportButtonInfo = { text: $Locale.Frontend_Classic_Bookmark_ExportButton() };
let pressedButton: undefined | { text: string } = undefined;
function OnSecondaryButtonClick(event: CustomEvent<{ text: string }>) {
switch (event.detail.text) {
case importButtonInfo.text:
case $Locale.Frontend_Classic_Bookmark_ImportButton():
pressedButton = importButtonInfo;
importResult = window.HakuNeko.BookmarkPlugin.Import();
return;
case exportButtonInfo.text:
case $Locale.Frontend_Classic_Bookmark_ExportButton():
pressedButton = exportButtonInfo;
exportResult = window.HakuNeko.BookmarkPlugin.Export();
return;
Expand All @@ -30,82 +32,84 @@
on:open
on:close
on:submit
modalHeading="Import/Export bookmarks"
modalHeading={$Locale.Frontend_Classic_Bookmark_ModalHeading()}
preventCloseOnClickOutside
primaryButtonText="Close"
primaryButtonText={$Locale.Frontend_Classic_Bookmark_CloseButton()}
secondaryButtons={[importButtonInfo, exportButtonInfo]}
on:click:button--primary={() => isModalOpen = false}
on:click:button--secondary={OnSecondaryButtonClick}
>
{#if !pressedButton}
<InlineLoading
status="inactive"
description="Import Hakuneko's bookmarks from previous version"
description={$Locale.Frontend_Classic_Bookmark_ImportDescription()}
/>
{/if}
{#if pressedButton === importButtonInfo}
{#await importResult}
<InlineLoading
status="active"
description="Import in progress ..."
description={$Locale.Frontend_Classic_Bookmark_Importing()}
/>
{:then results}
{#if results.cancelled}
<InlineLoading status="error" description="User canceled" />
<InlineLoading status="error" description={$Locale.Frontend_Classic_Bookmark_UserCanceled()} />
{:else}
<InlineLoading
status="finished"
description="Import completed"
description={$Locale.Frontend_Classic_Bookmark_ImportDone()}
/>
<div>
<Tag type="cyan">
({results.found})
</Tag> found
</Tag> {$Locale.Frontend_Classic_Bookmark_Found().replace('{0}', String(results.found))}
Copy link
Contributor

@27136773 27136773 May 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do not perform the replacements manually, let the localization provider do the correct formatting

$Locale.Frontend_Classic_Bookmark_Found(`${results.found}`)

Copy link
Contributor

@27136773 27136773 May 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other places in this PR as well

</div>
<div>
<Tag type="green">
({results.imported})
</Tag> imported
</Tag> {$Locale.Frontend_Classic_Bookmark_Imported().replace('{0}', String(results.imported))}

</div>
<div>
<Tag type="cool-gray">
({results.skipped})
</Tag> skipped
</Tag> {$Locale.Frontend_Classic_Bookmark_Skipped().replace('{0}', String(results.skipped))}
</div>
<div>
<Tag type="red">
({results.broken})
</Tag> broken
</Tag> {$Locale.Frontend_Classic_Bookmark_Broken().replace('{0}', String(results.broken))}
</div>
{/if}
{:catch error}
<InlineLoading status="error" description="Error: {error}"
></InlineLoading>
<InlineLoading status="error" description={$Locale.Frontend_Classic_Bookmark_Error(String(error))} />
{/await}
{/if}
{#if pressedButton === exportButtonInfo}
{#await exportResult}
<InlineLoading
status="active"
description="Export in progress ..."
description={$Locale.Frontend_Classic_Bookmark_Exporting()}
/>
{:then results}
{#if results.cancelled}
<InlineLoading status="error" description="User canceled" />
<InlineLoading status="error" description={$Locale.Frontend_Classic_Bookmark_UserCanceled()} />
{:else}
<InlineLoading
status="finished"
description="Export completed"
description={$Locale.Frontend_Classic_Bookmark_ExportDone()}
/>
<div>
<Tag type="green">
({results.exported})
</Tag> exported
</Tag> {$Locale.Frontend_Classic_Bookmark_Exported()}
</div>
{/if}
{:catch error}
<InlineLoading status="error" description="Error: {error}"
></InlineLoading>
<InlineLoading
status="error"
description={$Locale.Frontend_Classic_Bookmark_Error(error.message ?? String(error))}
/>
{/await}
{/if}
</Modal>
Expand Down
22 changes: 13 additions & 9 deletions web/src/frontend/classic/components/DownloadManagerStatus.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
import { DownloadTask, Status } from '../../../engine/DownloadTask';
import DownloadManager from './DownloadManager.svelte';
import { Locale } from '../stores/Settings';


let previousTasks: DownloadTask[] = [];
let currentDownload: DownloadTask;
Expand Down Expand Up @@ -117,20 +119,20 @@
kind="secondary"
size="small"
icon={Clean}
iconDescription="Clear finished tasks"
iconDescription={$Locale.Frontend_DownloadManager_ClearFinished()}
on:click={() => deleteTasks(Status.Completed)}
/>
<Button
size="small"
icon={RetryFailed}
iconDescription="Retry failed tasks"
iconDescription={$Locale.Frontend_DownloadManager_RetryFailed()}
on:click={() => retryTasks(Status.Failed)}
/>
<Button
kind="danger-tertiary"
size="small"
icon={TrashCan}
iconDescription="Delete all tasks"
iconDescription={$Locale.Frontend_DownloadManager_DeleteAll()}
on:click={() => deleteTasks()}
/>
</div>
Expand All @@ -141,14 +143,17 @@
<div class="label">
<CloudDownload size={32}></CloudDownload>
<div class="count">
Downloads ({downloadTasks.filter((job) =>
{$Locale.Frontend_DownloadManager_Active(
`${downloadTasks.filter((job) =>
[
Status.Downloading,
Status.Processing,
Status.Queued,
].includes(job.Status.Value),
)?.length})
</div>
)?.length}`
)}
</div>

</div>
<div class="downloads">
{#if downloadTasks.length > 0}
Expand All @@ -157,11 +162,10 @@
<ProgressBar
value={progress * 100}
status={statusmap[status]}
labelText="[{currentDownload.Media.Parent
.Title}] {currentDownload.Media.Title}"
labelText={`${currentDownload.Media.Parent.Title} - ${currentDownload.Media.Title}`}
></ProgressBar>
{:else}
<ProgressBar size="sm" value={0} labelText="<no tasks>"
<ProgressBar size="sm" value={0} labelText={$Locale.Frontend_DownloadManager_NoTasks()}
></ProgressBar>
{/if}
</div>
Expand Down
4 changes: 3 additions & 1 deletion web/src/frontend/classic/components/DownloadManagerTask.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@

import type { DownloadTask } from '../../../engine/DownloadTask';
import { Status } from '../../../engine/DownloadTask';
import { Locale } from '../stores/Settings';


interface Props {
job: DownloadTask;
Expand Down Expand Up @@ -82,7 +84,7 @@
kind="ghost"
size="small"
icon={TrashCan}
iconDescription="Delete"
iconDescription={$Locale.Frontend_DownloadManagerTask_Delete()}
on:click={() => window.HakuNeko.DownloadManager.Dequeue(job)}
/>
</div>
Expand Down
19 changes: 10 additions & 9 deletions web/src/frontend/classic/components/MediaItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
import View from 'carbon-icons-svelte/lib/View.svelte';
import ViewFilled from 'carbon-icons-svelte/lib/ViewFilled.svelte';
import VolumeFileStorage from 'carbon-icons-svelte/lib/VolumeFileStorage.svelte';


import { Tags, type Tag } from '../../../engine/Tags';
const availableLanguageTags = Tags.Language.toArray();
Expand Down Expand Up @@ -135,7 +136,7 @@
tooltipPosition="right"
tooltipAlignment="end"
icon={CloudDownload}
iconDescription="Download"
iconDescription={$Locale.Frontend_MediaItem_Download()}
onclick={() => addDownload(item as StoreableMediaContainer<MediaItem>)}
/>
{:else if downloadTaskStatus === Status.Queued}
Expand All @@ -144,7 +145,7 @@
kind="ghost"
tooltipPosition="right"
tooltipAlignment="end"
iconDescription="Cancel"
iconDescription={$Locale.Frontend_MediaItem_Cancel()}
onclick={() => addDownload(item as StoreableMediaContainer<MediaItem>)}
>
<PauseFuture fill="var(--cds-icon-secondary)" />
Expand All @@ -155,7 +156,7 @@
kind="ghost"
tooltipPosition="right"
tooltipAlignment="end"
iconDescription="Cancel (paused)"
iconDescription={$Locale.Frontend_MediaItem_CancelPaused()}
onclick={() => removeDownload(downloadTask)}
>
<Pause fill="var(--cds-toggle-off)" />
Expand All @@ -166,7 +167,7 @@
kind="ghost"
tooltipPosition="right"
tooltipAlignment="end"
iconDescription="Cancel (downloading...)"
iconDescription={$Locale.Frontend_MediaItem_CancelDownloading()}
onclick={() => removeDownload(downloadTask)}
>
<Download fill="var(--cds-support-info)" />
Expand All @@ -176,7 +177,7 @@
<Button
size="small"
kind="ghost"
iconDescription="Cancel (processing...)"
iconDescription={$Locale.Frontend_MediaItem_CancelProcessing()}
onclick={() => removeDownload(downloadTask)}
>
<VolumeFileStorage fill="var(--cds-support-info)" />
Expand All @@ -188,7 +189,7 @@
tooltipPosition="right"
tooltipAlignment="end"
icon={EventIncident}
iconDescription="Error: click to retry (detailed error in download tasks)"
iconDescription={$Locale.Frontend_MediaItem_ErrorRetry()}
onclick={() => downloadTask.Run()}
/>
{:else if downloadTaskStatus === Status.Completed}
Expand All @@ -197,7 +198,7 @@
kind="ghost"
tooltipPosition="right"
tooltipAlignment="end"
iconDescription="Download complete"
iconDescription={$Locale.Frontend_MediaItem_DownloadComplete()}
onclick={() => alert('Download complete. TODO: open folder using system explorer')}
>
<FolderOpen fill="var(--cds-support-03)" />
Expand All @@ -208,7 +209,7 @@
kind="ghost"
tooltipPosition="right"
tooltipAlignment="end"
iconDescription="Download"
iconDescription={$Locale.Frontend_MediaItem_Download()}
onclick={() => addDownload(item as StoreableMediaContainer<MediaItem>)}
>
<CloudDownload fill="var(--cds-icon-01)" />
Expand All @@ -220,7 +221,7 @@
icon={flagicon}
tooltipPosition="right"
tooltipAlignment="end"
iconDescription="View"
iconDescription={$Locale.Frontend_MediaItem_View()}
onclick={(event) => onView(event)}
/>
<ClickableTile class="title" onclick={(event) => onView(event)}>
Expand Down
Loading
Loading