Merge branch 'elk-zone:main' into main

.github/workflows/docker.yml

@@ -0,0 +1,46 @@
+name: build & push docker container
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - '*'
+  pull_request:
+    branches:
+      - main
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Docker meta
+        id: metal
+        uses: docker/metadata-action@v4
+        with:
+          images: |
+            ghcr.io/elk-zone/elk
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to GitHub Container Registry
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build and push
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          platforms: linux/amd64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.metal.outputs.tags }}
+          labels: ${{ steps.metal.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

Dockerfile

@@ -29,6 +29,16 @@ RUN pnpm build
 
 FROM base AS runner
 
+ARG UID=911
+ARG GID=911
+
+# Create a dedicated user and group
+RUN set -eux; \
+    addgroup -g $UID elk; \
+    adduser -u $GID -D -G elk elk;
+
+USER elk
+
 ENV NODE_ENV=production
 
 COPY --from=builder /elk/.output ./.output

components/common/dropdown/DropdownItem.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+  is?: string
   text?: string
   description?: string
   icon?: string
   checked?: boolean
   command?: boolean
-}>()
+}>(), {
+  is: 'div',
+})
 const emit = defineEmits(['click'])
 
 const { hide } = useDropdownContext() || {}
@@ -39,8 +42,10 @@ useCommand({
 </script>
 
 <template>
-  <div
-    v-bind="$attrs" ref="el"
+  <component
+    v-bind="$attrs"
+    :is="is"
+    ref="el"
     flex gap-3 items-center cursor-pointer px4 py3
     select-none
     hover-bg-active
@@ -67,5 +72,5 @@ useCommand({
 
     <div v-if="checked" i-ri:check-line />
     <slot name="actions" />
-  </div>
+  </component>
 </template>

components/main/MainContent.vue

@@ -5,6 +5,9 @@ defineProps<{
   /** Show the back button on both small and big screens */
   back?: boolean
 }>()
+
+const route = useRoute()
+const wideLayout = computed(() => route.meta.wideLayout ?? false)
 </script>
 
 <template>
@@ -13,9 +16,10 @@ defineProps<{
       sticky top-0 z10 backdrop-blur
       pt="[env(safe-area-inset-top,0)]"
       border="b base" bg="[rgba(var(--rbg-bg-base),0.7)]"
+      class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
     >
-      <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" data-tauri-drag-region>
-        <div flex gap-3 items-center overflow-hidden py2>
+      <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" data-tauri-drag-region class="native:xl:flex">
+        <div flex gap-3 items-center overflow-hidden py2 class="native-mac:pl-14 native-mac:sm:pl-0">
           <NuxtLink
             v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
             :aria-label="$t('nav.back')"
@@ -38,6 +42,8 @@ defineProps<{
       <slot name="header" />
     </div>
     <div :class="{ 'xl:block': $route.name !== 'tag' }" hidden h-6 />
-    <slot />
+    <div :class="isHydrated && wideLayout ? 'xl:w-full sm:max-w-600px' : 'sm:max-w-600px md:shrink-0'" m-auto>
+      <slot />
+    </div>
   </div>
 </template>

components/modal/ModalMediaPreview.vue

@@ -71,7 +71,7 @@ onUnmounted(() => locked.value = false)
       </div>
     </div>
 
-    <div absolute top-0 w-full flex justify-between>
+    <div absolute top-0 w-full flex justify-end>
       <button
         btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
         dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"

components/nav/NavLogo.vue

@@ -29,9 +29,9 @@
 
 <style scoped>
 svg path.wood {
-    fill: var(--c-text-secondary);
+    fill: var(--c-primary);
 }
 svg path.body {
-    fill: var(--c-text-base);
+    fill: var(--c-text-secondary);
 }
 </style>

components/nav/NavTitle.vue

@@ -23,8 +23,8 @@ router.afterEach(() => {
       external
     >
       <NavLogo shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip" />
-      <div hidden xl:block>
-        {{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
+      <div hidden xl:block text-secondary>
+        {{ $t('app_name') }} <sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
       </div>
     </NuxtLink>
     <div

components/status/StatusCard.vue

@@ -103,12 +103,12 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
       <template v-if="status.inReplyToAccountId">
         <StatusReplyingTo
           v-if="showReplyTo"
-          ml-6 pt-1 pl-5
+          ml-20px pt-1 pl-5
           :status="status"
           :is-self-reply="isSelfReply"
           :class="faded ? 'text-secondary-light' : ''"
         />
-        <div flex="~ col gap-1" items-center pos="absolute top-0 left-0" w="20.5" z--1>
+        <div flex="~ col gap-1" items-center pos="absolute top-0 left-0" w="77px" z--1>
           <template v-if="showReplyTo">
             <div w="1px" h="0.5" border="x base" mt-3 />
             <div w="1px" h="0.5" border="x base" />

components/user/UserSwitcher.vue

@@ -39,11 +39,13 @@ const clickUser = (user: UserLogin) => {
     </template>
     <div border="t base" pt2>
       <CommonDropdownItem
+        is="button"
         :text="$t('user.add_existing')"
         icon="i-ri:user-add-line"
         @click="openSigninDialog"
       />
       <CommonDropdownItem
+        is="button"
         v-if="isHydrated && currentUser"
         :text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])"
         icon="i-ri:logout-box-line rtl-flip"

config/i18n.ts

@@ -109,6 +109,11 @@ const locales: LocaleObjectData[] = [
     file: 'id-ID.json',
     name: 'Indonesia',
   },
+  {
+    code: 'fi-FI',
+    file: 'fi-FI.json',
+    name: 'Suomea',
+  },
 ].sort((a, b) => a.code.localeCompare(b.code))
 
 const datetimeFormats = Object.values(locales).reduce((acc, data) => {

layouts/default.vue

@@ -16,11 +16,11 @@ const isGrayscale = usePreferences('grayscaleMode')
 
 <template>
   <div h-full :data-mode="isHydrated && isGrayscale ? 'grayscale' : ''">
-    <main flex w-full mxa lg:max-w-80rem>
-      <aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
+    <main flex w-full mxa lg:max-w-80rem class="native:grid native:sm:grid-cols-[auto_1fr] native:lg:grid-cols-[auto_minmax(600px,2fr)_1fr]">
+      <aside class="hidden native:w-auto sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
         <div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
           <slot name="left">
-            <div flex="~ col" overflow-y-auto justify-between h-full max-w-full mt-5>
+            <div flex="~ col" overflow-y-auto justify-between h-full max-w-full pt-5 native:pt-7 overflow-x-hidden>
               <NavTitle />
               <NavSide command />
               <div flex-auto />
@@ -50,7 +50,7 @@ const isGrayscale = usePreferences('grayscaleMode')
           </slot>
         </div>
       </aside>
-      <div w-full min-h-screen :class="isHydrated && wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" border-base>
+      <div w-full min-h-screen border-base>
         <div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
           <slot />
         </div>
@@ -59,7 +59,7 @@ const isGrayscale = usePreferences('grayscaleMode')
           <NavBottom v-if="isHydrated" sm:hidden />
         </div>
       </div>
-      <aside v-if="isHydrated && !wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
+      <aside v-if="isHydrated && !wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide native:lg:w-full">
         <div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
           <slot name="right">
             <div flex-auto />

locales/de-DE.json

@@ -472,7 +472,7 @@
     "change_language": "Sprache ändern",
     "emoji": "Emoji",
     "explore_links_intro": "Diese Nachrichten werden gerade von Leuten auf diesem und anderen Servern des dezentralen Netzwerks besprochen.",
-    "explore_posts_intro": "Diese Beiträge von diesem Server gewinnen gerade unter den Leuten von diesem und anderen Servern des dezentralen Netzweks an Reichweite.",
+    "explore_posts_intro": "Diese Beiträge von diesem Server gewinnen gerade unter den Leuten von diesem und anderen Servern des dezentralen Netzwerks an Reichweite.",
     "explore_tags_intro": "Diese Hashtags gewinnen gerade unter den Leuten von diesem und anderen Servern des dezentralen Netzweks an Reichweite.",
     "toggle_code_block": "Codeblock umschalten"
   },