compile android app

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+android
+ios
+.git
+.DS_Store
+*.log

.gitignore

@@ -14,6 +14,7 @@
 
 # production
 /build
+/dist/
 
 # misc
 .DS_Store

.kamal/secrets

@@ -0,0 +1,8 @@
+# Secrets for Sanasto Wiki deployment
+# DO NOT COMMIT SECRETS TO GIT! This file should read from environment or secure storage.
+
+# Registry password (GitHub Container Registry token or Docker Hub password)
+KAMAL_REGISTRY_PASSWORD=$KAMAL_REGISTRY_PASSWORD
+
+# Rails master key for credentials
+RAILS_MASTER_KEY=$(cat config/master.key)

Caddyfile

@@ -0,0 +1,8 @@
+:80 {
+  root * /usr/share/caddy
+  file_server
+  try_files {path} /index.html
+
+  @assets path /assets/*
+  header @assets Cache-Control "public, max-age=31536000, immutable"
+}

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:20-alpine AS build
+
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM caddy:2.8-alpine
+
+COPY --from=build /app/dist /usr/share/caddy
+COPY ./Caddyfile /etc/caddy/Caddyfile
+
+EXPOSE 80

android/.idea/compiler.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="CompilerConfiguration">
+    <bytecodeTargetLevel target="21" />
+  </component>
+</project>

android/.idea/deploymentTargetSelector.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="deploymentTargetSelector">
+    <selectionStates>
+      <SelectionState runConfigName="app">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
+    </selectionStates>
+  </component>
+</project>

android/.idea/misc.xml

@@ -1,6 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">

android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#FFFFFF</color>
+    <color name="ic_launcher_background">#F8FAFC</color>
-</resources>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='utf-8'?>
 <resources>
-    <string name="app_name">nextjs-tailwind-capacitor</string>
+    <string name="app_name">Sanasto</string>
-    <string name="title_activity_main">nextjs-tailwind-capacitor</string>
+    <string name="title_activity_main">Sanasto</string>
     <string name="package_name">com.example.app</string>
     <string name="custom_url_scheme">com.example.app</string>
 </resources>

android/build.gradle

@@ -7,7 +7,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.0.0'
+        classpath 'com.android.tools.build:gradle:8.13.2'
         classpath 'com.google.gms:google-services:4.3.15'
 
         // NOTE: Do not place your application dependencies here; they belong

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 #Fri Feb 06 00:46:15 CET 2026
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

config/deploy.yml

@@ -0,0 +1,27 @@
+# Name of your application. Used to uniquely configure containers.
+service: sanasto-app
+
+# Name of the container image.
+image: soverein/sanasto-app
+
+# Deploy to these servers.
+servers:
+  web:
+    - app.rin.no
+
+# Enable SSL auto certification via Let's Encrypt and allow for multiple apps on a single web server.
+proxy:
+  ssl: true
+  host: sanasto.app
+  app_port: 80
+
+# Credentials for your image host.
+registry:
+  server: git.rin.no
+  username: deploybot
+  password:
+    - KAMAL_REGISTRY_PASSWORD
+
+# Configure builder setup.
+builder:
+  arch: amd64

dist/assets/workbox-window.prod.es5-BIl4cyR9.js

@@ -1,2 +0,0 @@
-try{self["workbox:window:7.3.0"]&&_()}catch{}function b(n,r){return new Promise((function(t){var o=new MessageChannel;o.port1.onmessage=function(f){t(f.data)},n.postMessage(r,[o.port2])}))}function P(n,r){(r==null||r>n.length)&&(r=n.length);for(var t=0,o=Array(r);t<r;t++)o[t]=n[t];return o}function j(n,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(n,W(o.key),o)}}function S(n,r){var t=typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(t)return(t=t.call(n)).next.bind(t);if(Array.isArray(n)||(t=(function(f,c){if(f){if(typeof f=="string")return P(f,c);var a={}.toString.call(f).slice(8,-1);return a==="Object"&&f.constructor&&(a=f.constructor.name),a==="Map"||a==="Set"?Array.from(f):a==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?P(f,c):void 0}})(n))||r){t&&(n=t);var o=0;return function(){return o>=n.length?{done:!0}:{done:!1,value:n[o++]}}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
-In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function w(n,r){return w=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,o){return t.__proto__=o,t},w(n,r)}function W(n){var r=(function(t,o){if(typeof t!="object"||!t)return t;var f=t[Symbol.toPrimitive];if(f!==void 0){var c=f.call(t,o);if(typeof c!="object")return c;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)})(n,"string");return typeof r=="symbol"?r:r+""}try{self["workbox:core:7.3.0"]&&_()}catch{}var m=function(){var n=this;this.promise=new Promise((function(r,t){n.resolve=r,n.reject=t}))};function y(n,r){var t=location.href;return new URL(n,t).href===new URL(r,t).href}var d=function(n,r){this.type=n,Object.assign(this,r)};function l(n,r,t){return t?r?r(n):n:(n&&n.then||(n=Promise.resolve(n)),r?n.then(r):n)}function k(){}var L={type:"SKIP_WAITING"};function E(n,r){return n&&n.then?n.then(k):Promise.resolve()}var O=(function(n){function r(c,a){var e,i;return a===void 0&&(a={}),(e=n.call(this)||this).nn={},e.tn=0,e.rn=new m,e.en=new m,e.on=new m,e.un=0,e.an=new Set,e.cn=function(){var u=e.fn,s=u.installing;e.tn>0||!y(s.scriptURL,e.sn.toString())||performance.now()>e.un+6e4?(e.vn=s,u.removeEventListener("updatefound",e.cn)):(e.hn=s,e.an.add(s),e.rn.resolve(s)),++e.tn,s.addEventListener("statechange",e.ln)},e.ln=function(u){var s=e.fn,v=u.target,h=v.state,p=v===e.vn,g={sw:v,isExternal:p,originalEvent:u};!p&&e.mn&&(g.isUpdate=!0),e.dispatchEvent(new d(h,g)),h==="installed"?e.wn=self.setTimeout((function(){h==="installed"&&s.waiting===v&&e.dispatchEvent(new d("waiting",g))}),200):h==="activating"&&(clearTimeout(e.wn),p||e.en.resolve(v))},e.yn=function(u){var s=e.hn,v=s!==navigator.serviceWorker.controller;e.dispatchEvent(new d("controlling",{isExternal:v,originalEvent:u,sw:s,isUpdate:e.mn})),v||e.on.resolve(s)},e.gn=(i=function(u){var s=u.data,v=u.ports,h=u.source;return l(e.getSW(),(function(){e.an.has(h)&&e.dispatchEvent(new d("message",{data:s,originalEvent:u,ports:v,sw:h}))}))},function(){for(var u=[],s=0;s<arguments.length;s++)u[s]=arguments[s];try{return Promise.resolve(i.apply(this,u))}catch(v){return Promise.reject(v)}}),e.sn=c,e.nn=a,navigator.serviceWorker.addEventListener("message",e.gn),e}var t,o;o=n,(t=r).prototype=Object.create(o.prototype),t.prototype.constructor=t,w(t,o);var f=r.prototype;return f.register=function(c){var a=(c===void 0?{}:c).immediate,e=a!==void 0&&a;try{var i=this;return l((function(u,s){var v=u();return v&&v.then?v.then(s):s(v)})((function(){if(!e&&document.readyState!=="complete")return E(new Promise((function(u){return window.addEventListener("load",u)})))}),(function(){return i.mn=!!navigator.serviceWorker.controller,i.dn=i.pn(),l(i.bn(),(function(u){i.fn=u,i.dn&&(i.hn=i.dn,i.en.resolve(i.dn),i.on.resolve(i.dn),i.dn.addEventListener("statechange",i.ln,{once:!0}));var s=i.fn.waiting;return s&&y(s.scriptURL,i.sn.toString())&&(i.hn=s,Promise.resolve().then((function(){i.dispatchEvent(new d("waiting",{sw:s,wasWaitingBeforeRegister:!0}))})).then((function(){}))),i.hn&&(i.rn.resolve(i.hn),i.an.add(i.hn)),i.fn.addEventListener("updatefound",i.cn),navigator.serviceWorker.addEventListener("controllerchange",i.yn),i.fn}))})))}catch(u){return Promise.reject(u)}},f.update=function(){try{return this.fn?l(E(this.fn.update())):l()}catch(c){return Promise.reject(c)}},f.getSW=function(){return this.hn!==void 0?Promise.resolve(this.hn):this.rn.promise},f.messageSW=function(c){try{return l(this.getSW(),(function(a){return b(a,c)}))}catch(a){return Promise.reject(a)}},f.messageSkipWaiting=function(){this.fn&&this.fn.waiting&&b(this.fn.waiting,L)},f.pn=function(){var c=navigator.serviceWorker.controller;return c&&y(c.scriptURL,this.sn.toString())?c:void 0},f.bn=function(){try{var c=this;return l((function(a,e){try{var i=a()}catch(u){return e(u)}return i&&i.then?i.then(void 0,e):i})((function(){return l(navigator.serviceWorker.register(c.sn,c.nn),(function(a){return c.un=performance.now(),a}))}),(function(a){throw a})))}catch(a){return Promise.reject(a)}},(function(c,a,e){return a&&j(c.prototype,a),Object.defineProperty(c,"prototype",{writable:!1}),c})(r,[{key:"active",get:function(){return this.en.promise}},{key:"controlling",get:function(){return this.on.promise}}])})((function(){function n(){this.Pn=new Map}var r=n.prototype;return r.addEventListener=function(t,o){this.jn(t).add(o)},r.removeEventListener=function(t,o){this.jn(t).delete(o)},r.dispatchEvent=function(t){t.target=this;for(var o,f=S(this.jn(t.type));!(o=f()).done;)(0,o.value)(t)},r.jn=function(t){return this.Pn.has(t)||this.Pn.set(t,new Set),this.Pn.get(t)},n})());export{O as Workbox,d as WorkboxEvent,b as messageSW};

dist/icon-maskable.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <defs>
-    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#4f46e5" />
-      <stop offset="1" stop-color="#06b6d4" />
-    </linearGradient>
-  </defs>
-  <rect width="512" height="512" fill="url(#g)" />
-  <g fill="#ffffff">
-    <path d="M144 170h224v36H144z" />
-    <path d="M144 238h144v36H144z" />
-    <path d="M144 306h224v36H144z" />
-  </g>
-</svg>

dist/icon.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <defs>
-    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#4f46e5" />
-      <stop offset="1" stop-color="#06b6d4" />
-    </linearGradient>
-  </defs>
-  <rect width="512" height="512" rx="112" fill="url(#g)" />
-  <g fill="#ffffff">
-    <path d="M168 170h176v36H168z" />
-    <path d="M168 238h120v36H168z" />
-    <path d="M168 306h176v36H168z" />
-  </g>
-</svg>

dist/index.html

@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
-    <link rel="apple-touch-icon" href="/icon.svg" />
-    <meta name="theme-color" content="#4f46e5" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sanasto</title>
-    <script type="module" crossorigin src="/assets/index-E314AbIc.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DFjWKkpb.css">
-  <link rel="manifest" href="/manifest.webmanifest"></head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>

dist/manifest.webmanifest

@@ -1 +0,0 @@
-{"name":"Sanasto","short_name":"Sanasto","description":"Sanasto Wiki glossary, available offline.","start_url":"/","display":"standalone","background_color":"#f8fafc","theme_color":"#4f46e5","lang":"en","scope":"/","icons":[{"src":"/icon.svg","sizes":"any","type":"image/svg+xml","purpose":"any"},{"src":"/icon-maskable.svg","sizes":"any","type":"image/svg+xml","purpose":"maskable"}]}

dist/sw.js

@@ -1 +0,0 @@
-if(!self.define){let e,s={};const i=(i,n)=>(i=new URL(i+".js",n).href,s[i]||new Promise(s=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=s,document.head.appendChild(e)}else e=i,importScripts(i),s()}).then(()=>{let e=s[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e}));self.define=(n,r)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(s[o])return;let l={};const t=e=>i(e,o),c={module:{uri:o},exports:l,require:t};s[o]=Promise.all(n.map(e=>c[e]||t(e))).then(e=>(r(...e),l))}}define(["./workbox-8c29f6e4"],function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"index.html",revision:"7979cc20fe4207e7ead76582183913a9"},{url:"assets/workbox-window.prod.es5-BIl4cyR9.js",revision:null},{url:"assets/sql-wasm-C1U8OeUW.wasm",revision:null},{url:"assets/index-E314AbIc.js",revision:null},{url:"assets/index-DFjWKkpb.css",revision:null},{url:"icon-maskable.svg",revision:"b5bdfd2e8b27d40ffd2ecec18df40399"},{url:"icon.svg",revision:"9c8737138b1ae42fe741cfa733870adf"},{url:"manifest.webmanifest",revision:"2ba70cf48495a11a3499135943788be6"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html")))});

dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

docs/AGENTS.md

@@ -15,7 +15,7 @@ Build a Vue-based PWA in the project root named **Sanasto**. The UI should mirro
   - Red tint for rows with missing translations.
 
 ## Data/API
-- Swagger: `https://sanasto.rin.no/api/swagger`
+- Swagger: `https://sanasto.wiki/api/swagger`
 - Endpoint: `GET /api/entries?since=ISO8601`
 - Entry fields: `id`, `category`, `fi`, `en`, `sv`, `no`, `ru`, `de`, `updated_at`.
 

index.html

@@ -2,8 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
     <link rel="icon" type="image/svg+xml" href="/icon.svg" />
-    <link rel="apple-touch-icon" href="/icon.svg" />
+    <link rel="apple-touch-icon" href="/icon-512.png" />
     <meta name="theme-color" content="#4f46e5" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sanasto</title>

package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "presync": "npm run build",
     "sync": "npx cap sync",
-    "android": "npx cap run android",
+    "android": "npm run build && npx cap sync android",
     "ios": "npx cap run ios"
   },
   "dependencies": {

public/icon-maskable.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <defs>
-    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#4f46e5" />
-      <stop offset="1" stop-color="#06b6d4" />
-    </linearGradient>
-  </defs>
-  <rect width="512" height="512" fill="url(#g)" />
-  <g fill="#ffffff">
-    <path d="M144 170h224v36H144z" />
-    <path d="M144 238h144v36H144z" />
-    <path d="M144 306h224v36H144z" />
-  </g>
-</svg>

public/icon.svg

@@ -1,14 +1,46 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-  <defs>
+<svg
-    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+   width="512"
-      <stop offset="0" stop-color="#4f46e5" />
+   height="512"
-      <stop offset="1" stop-color="#06b6d4" />
+   viewBox="0 0 512 512"
-    </linearGradient>
+   version="1.1"
-  </defs>
+   id="svg3"
-  <rect width="512" height="512" rx="112" fill="url(#g)" />
+   sodipodi:docname="icon.svg"
-  <g fill="#ffffff">
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
-    <path d="M168 170h176v36H168z" />
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-    <path d="M168 238h120v36H168z" />
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-    <path d="M168 306h176v36H168z" />
+   xmlns="http://www.w3.org/2000/svg"
-  </g>
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3" />
+  <sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.5917969"
+     inkscape:cx="256"
+     inkscape:cy="256"
+     inkscape:window-width="1920"
+     inkscape:window-height="1043"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3" />
+  <!-- Background -->
+  <rect
+     width="512"
+     height="512"
+     fill="#4f46e5"
+     rx="64"
+     id="rect1" />
+  <!-- Open book icon - scaled and centered -->
+  <path
+     id="path1"
+     style="baseline-shift:baseline;display:inline;overflow:visible;vector-effect:none;fill:#ffffff;stroke-linecap:round;stroke-linejoin:round;enable-background:accumulate;stop-color:#000000;stop-opacity:1;opacity:1"
+     d="M 160.42969 83.410156 C 119.4801 83.410156 81.95121 94.40372 53.105469 113.56836 A 21.240073 21.240073 0 0 0 43.621094 131.25781 L 43.621094 407.35156 A 21.240073 21.240073 0 0 0 76.611328 425.04297 C 97.377495 411.24627 127.21626 401.97852 160.42969 401.97852 C 193.64311 401.97852 223.48189 411.24627 244.24805 425.04297 A 21.237949 21.237949 0 0 0 244.83984 425.38281 A 21.237949 21.237949 0 0 0 245.9668 426.0332 A 21.237949 21.237949 0 0 0 246.60547 426.39453 A 21.237949 21.237949 0 0 0 247.29883 426.68945 A 21.237949 21.237949 0 0 0 248.49023 427.18359 A 21.237949 21.237949 0 0 0 249.16602 427.45703 A 21.237949 21.237949 0 0 0 249.88477 427.65625 A 21.237949 21.237949 0 0 0 251.15039 427.99609 A 21.237949 21.237949 0 0 0 251.86133 428.17969 A 21.237949 21.237949 0 0 0 252.58594 428.28125 A 21.237949 21.237949 0 0 0 253.87891 428.45117 A 21.237949 21.237949 0 0 0 254.60938 428.54102 A 21.237949 21.237949 0 0 0 255.34375 428.54688 A 21.237949 21.237949 0 0 0 256 428.58984 A 21.237949 21.237949 0 0 0 256.65625 428.54688 A 21.237949 21.237949 0 0 0 257.39062 428.54102 A 21.237949 21.237949 0 0 0 258.12109 428.45117 A 21.237949 21.237949 0 0 0 259.41406 428.28125 A 21.237949 21.237949 0 0 0 260.13867 428.17969 A 21.237949 21.237949 0 0 0 260.84961 427.99609 A 21.237949 21.237949 0 0 0 262.11523 427.65625 A 21.237949 21.237949 0 0 0 262.83398 427.45703 A 21.237949 21.237949 0 0 0 263.50977 427.18359 A 21.237949 21.237949 0 0 0 264.70117 426.68945 A 21.237949 21.237949 0 0 0 265.39453 426.39453 A 21.237949 21.237949 0 0 0 266.0332 426.0332 A 21.237949 21.237949 0 0 0 267.16016 425.38281 A 21.237949 21.237949 0 0 0 267.75195 425.04297 C 288.51811 411.24627 318.35689 401.97852 351.57031 401.97852 C 384.80719 401.97852 414.61784 411.24317 435.38867 425.04297 A 21.240073 21.240073 0 0 0 468.37891 407.35156 L 468.37891 131.25781 A 21.240073 21.240073 0 0 0 458.89453 113.56836 C 430.05344 94.406813 392.53892 83.410156 351.57031 83.410156 C 315.97653 83.410156 282.96864 91.716323 256 106.47461 C 229.03136 91.716323 196.02347 83.410156 160.42969 83.410156 z M 160.42969 125.88477 C 188.87562 125.88477 214.84618 132.6836 234.76172 143.30273 L 234.76172 372.76367 C 212.41599 364.18522 187.15157 359.50391 160.42969 359.50391 C 133.68474 359.50391 108.45607 364.26642 86.095703 372.85938 L 86.095703 143.35742 C 106.01746 132.72393 131.96088 125.88477 160.42969 125.88477 z M 351.57031 125.88477 C 380.05922 125.88477 405.98509 132.72263 425.9043 143.35742 L 425.9043 372.85938 C 403.54963 364.26801 378.325 359.50391 351.57031 359.50391 C 324.84843 359.50391 299.58401 364.18522 277.23828 372.76367 L 277.23828 143.30273 C 297.15382 132.6836 323.12438 125.88477 351.57031 125.88477 z " />
 </svg>

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.vue

@@ -23,11 +23,21 @@ const startsWith = ref<string | null>(null)
 const preferredLanguage = ref<Language['code']>('fi')
 const lastSyncAt = ref<string | null>(null)
 const isOnline = ref(navigator.onLine)
-const isSyncing = ref(false)
 const syncError = ref<string | null>(null)
+const isMobile = ref(false)
+const secondaryLanguage = ref<Language['code']>('en')
+let mediaQuery: MediaQueryList | null = null
+let mediaHandler: ((event: MediaQueryListEvent) => void) | null = null
 
 const displayLanguages = computed(() => {
   const others = languages.filter((lang) => lang.code !== preferredLanguage.value)
+  if (isMobile.value) {
+    const secondary = secondaryLanguage.value
+    if (secondary === preferredLanguage.value) {
+      return others.slice(0, 1)
+    }
+    return others.filter((lang) => lang.code === secondary).slice(0, 1)
+  }
   if (preferredLanguage.value === 'en') {
     return others
   }
@@ -80,34 +90,13 @@ const filteredEntries = computed(() => {
   })
 })
 
-const completionByLanguage = computed(() => {
-  const totals: Record<string, number> = {}
-  const counts: Record<string, number> = {}
-  languages.forEach((lang) => {
-    totals[lang.code] = entries.value.length
-    counts[lang.code] = entries.value.filter((entry) => !!entry[lang.code]).length
-  })
-  return (code: Language['code']) => {
-    const total = totals[code] || 0
-    const count = counts[code] || 0
-    if (!total) {
-      return 0
-    }
-    return Math.round((count / total) * 100)
-  }
-})
-
 const hasMissingTranslations = (entry: Entry) => {
   return languages.some((lang) => !entry[lang.code])
 }
 
-const filteredMissingCount = computed(() => {
-  return filteredEntries.value.filter((entry) => hasMissingTranslations(entry)).length
-})
-
 const lastSyncLabel = computed(() => {
   if (!lastSyncAt.value) {
-    return 'Never synced'
+    return isOnline.value ? 'Never synced' : 'Waiting for internet access'
   }
   return new Date(lastSyncAt.value).toLocaleString()
 })
@@ -116,31 +105,33 @@ const alphaLetters = computed(() => {
   return Array.from({ length: 26 }, (_, index) => String.fromCharCode(65 + index))
 })
 
-const clearFilters = () => {
+const ensureSecondaryLanguage = () => {
-  categoryFilter.value = null
+  if (secondaryLanguage.value === preferredLanguage.value) {
-  languageFilter.value = null
+    const fallback = languages.find((lang) => lang.code !== preferredLanguage.value)
-  startsWith.value = null
+    secondaryLanguage.value = fallback ? fallback.code : preferredLanguage.value
+  }
 }
 
-const setLanguageFilter = (code: Language['code'] | null) => {
+const swapLanguages = () => {
-  languageFilter.value = code
+  const current = preferredLanguage.value
-  startsWith.value = null
+  preferredLanguage.value = secondaryLanguage.value
+  secondaryLanguage.value = current
+  ensureSecondaryLanguage()
 }
 
 const syncNow = async () => {
   if (!db.value) {
     return
   }
-  isSyncing.value = true
   syncError.value = null
   try {
     const result = await syncEntries(db.value)
     lastSyncAt.value = result.lastSyncAt ?? lastSyncAt.value
     entries.value = listEntries(db.value)
+    isOnline.value = true
   } catch (error) {
     syncError.value = error instanceof Error ? error.message : 'Sync failed'
-  } finally {
+    isOnline.value = false
-    isSyncing.value = false
   }
 }
 
@@ -160,6 +151,13 @@ onMounted(async () => {
 
   window.addEventListener('online', handleOnline)
   window.addEventListener('offline', handleOffline)
+  mediaQuery = window.matchMedia('(max-width: 900px)')
+  isMobile.value = mediaQuery.matches
+  mediaHandler = (event: MediaQueryListEvent) => {
+    isMobile.value = event.matches
+  }
+  mediaQuery.addEventListener('change', mediaHandler)
+  ensureSecondaryLanguage()
 
   if (isOnline.value) {
     await syncNow()
@@ -169,6 +167,9 @@ onMounted(async () => {
 onBeforeUnmount(() => {
   window.removeEventListener('online', handleOnline)
   window.removeEventListener('offline', handleOffline)
+  if (mediaQuery && mediaHandler) {
+    mediaQuery.removeEventListener('change', mediaHandler)
+  }
 })
 </script>
 
@@ -178,16 +179,12 @@ onBeforeUnmount(() => {
       <div class="header-inner">
         <div class="brand">
           <span class="brand-strong">Sanasto</span>
-          <span class="brand-light">Wiki</span>
+          <span class="brand-light">Kristillisyyden sanasto</span>
         </div>
         <div class="header-actions">
-          <div class="status-pill" :class="{ offline: !isOnline }">
+          <a class="link-button" href="https://sanasto.wiki" target="_blank" rel="noopener noreferrer">
-            <span class="status-dot" />
+            Visit Sanasto Wiki
-            <span>{{ isOnline ? 'Online' : 'Offline' }}</span>
+          </a>
-          </div>
-          <button class="btn btn-primary" :disabled="isSyncing" @click="syncNow">
-            {{ isSyncing ? 'Syncing…' : 'Sync now' }}
-          </button>
         </div>
       </div>
       <div class="header-sub">
@@ -238,30 +235,6 @@ onBeforeUnmount(() => {
               {{ category }}
             </button>
           </div>
-          <div class="filter-group">
-            <span class="filter-label">Language</span>
-            <button class="chip dark" :class="{ active: !languageFilter }" @click="setLanguageFilter(null)">
-              All
-            </button>
-            <button
-              v-for="language in languages"
-              :key="language.code"
-              class="chip dark"
-              :class="{ active: languageFilter === language.code }"
-              @click="setLanguageFilter(language.code)"
-            >
-              {{ language.name }}
-            </button>
-          </div>
-          <div class="filter-group">
-            <span class="filter-label">Primary column</span>
-            <select v-model="preferredLanguage" class="select">
-              <option v-for="language in languages" :key="language.code" :value="language.code">
-                {{ language.name }}
-              </option>
-            </select>
-          </div>
-          <button class="btn btn-ghost" @click="clearFilters">Reset filters</button>
         </div>
 
         <div v-if="languageFilter" class="alphabet-row">
@@ -286,14 +259,48 @@ onBeforeUnmount(() => {
 
       <section class="stats-row">
         <div>
-          <h2 class="section-title">Translation Table</h2>
+          <div class="section-heading">
-          <p class="section-subtitle">
+            <h2 class="section-title">Translation Table</h2>
-            {{ filteredEntries.length }} of {{ entries.length }} entries
+            <span class="section-subtitle">
-          </p>
+              {{ filteredEntries.length }} of {{ entries.length }} entries
+            </span>
+          </div>
         </div>
-        <div class="stats">
+        <div class="language-controls" v-if="isMobile">
-          <span class="badge">Missing: {{ filteredMissingCount }}</span>
+          <div class="language-control">
-          <span class="badge success">Complete: {{ filteredEntries.length - filteredMissingCount }}</span>
+            <select
+              v-model="preferredLanguage"
+              class="select"
+              aria-label="Primary language"
+              @change="ensureSecondaryLanguage"
+            >
+              <option v-for="language in languages" :key="language.code" :value="language.code">
+                {{ language.name }}
+              </option>
+            </select>
+          </div>
+          <a class="swap-link" href="#" aria-label="Swap languages" @click.prevent="swapLanguages">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M7 7h7m0 0l-2-2m2 2l-2 2M17 17h-7m0 0l2-2m-2 2l2 2M5 12a7 7 0 0112.03-4.95M19 12a7 7 0 01-12.03 4.95" />
+            </svg>
+          </a>
+          <div class="language-control secondary">
+            <select
+              v-model="secondaryLanguage"
+              class="select"
+              aria-label="Secondary language"
+              @change="ensureSecondaryLanguage"
+            >
+              <option
+                v-for="language in languages"
+                :key="language.code"
+                :value="language.code"
+                :disabled="language.code === preferredLanguage"
+              >
+                {{ language.name }}
+              </option>
+            </select>
+          </div>
         </div>
       </section>
 
@@ -307,14 +314,12 @@ onBeforeUnmount(() => {
                     {{ languages.find((lang) => lang.code === preferredLanguage)?.name || 'Primary' }}
                     <span class="th-code">{{ preferredLanguage.toUpperCase() }}</span>
                   </div>
-                  <div class="th-sub">Category / Status</div>
                 </th>
                 <th v-for="language in displayLanguages" :key="language.code">
                   <div class="th-title">
                     {{ language.name }}
                     <span class="th-code">{{ language.code.toUpperCase() }}</span>
                   </div>
-                  <div class="th-sub completion">{{ completionByLanguage(language.code) }}% complete</div>
                 </th>
               </tr>
             </thead>
@@ -331,12 +336,6 @@ onBeforeUnmount(() => {
               >
                 <td class="sticky-col">
                   <div class="entry-title">{{ entry[preferredLanguage] || 'Untitled' }}</div>
-                  <div class="entry-meta">
-                    <span class="meta-tag">{{ entry.category || 'General' }}</span>
-                    <span class="meta-pill" :class="entry[preferredLanguage] ? 'verified' : 'unverified'">
-                      {{ entry[preferredLanguage] ? 'Verified' : 'Unverified' }}
-                    </span>
-                  </div>
                 </td>
                 <td v-for="language in displayLanguages" :key="language.code">
                   <span v-if="entry[language.code]">{{ entry[language.code] }}</span>

src/lib/sync.ts

@@ -6,7 +6,7 @@ const LAST_SYNC_KEY = 'last_sync_at'
 
 export async function syncEntries(db: Database) {
   const lastSyncAt = getMeta(db, LAST_SYNC_KEY)
-  const url = new URL('https://sanasto.rin.no/api/entries')
+  const url = new URL('https://sanasto.wiki/api/entries')
   if (lastSyncAt) {
     url.searchParams.set('since', lastSyncAt)
   }

src/style.css

@@ -32,6 +32,7 @@ body {
   min-height: 100vh;
   background: radial-gradient(circle at 10% 20%, #eef2ff 0%, #f8fafc 45%, #f1f5f9 100%);
   color: var(--slate-900);
+  overflow-x: hidden;
 }
 
 #app {
@@ -96,34 +97,6 @@ body {
   justify-content: flex-end;
 }
 
-.status-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  border-radius: 999px;
-  border: 1px solid #bbf7d0;
-  background: #ecfdf3;
-  color: var(--emerald-600);
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.status-pill.offline {
-  border-color: #fecaca;
-  background: #fef2f2;
-  color: var(--red-500);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  background: currentColor;
-}
-
 .meta-row {
   display: flex;
   align-items: center;
@@ -147,6 +120,7 @@ body {
 .content {
   flex: 1;
   max-width: 1200px;
+  width: 100%;
   margin: 0 auto;
   padding: 24px 20px 40px;
   display: flex;
@@ -154,10 +128,27 @@ body {
   gap: 24px;
 }
 
+@media (orientation: landscape) and (max-width: 1023px) {
+  .header-inner,
+  .header-sub,
+  .content {
+    max-width: 500px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .header-inner,
+  .header-sub,
+  .content {
+    max-width: 1200px;
+  }
+}
+
 .search-area {
   display: flex;
   flex-direction: column;
   gap: 16px;
+  width: 100%;
 }
 
 .search-field {
@@ -181,6 +172,7 @@ body {
 
 .search-input {
   width: 100%;
+  min-width: 0;
   padding: 18px 44px 18px 50px;
   border-radius: 18px;
   border: 1px solid var(--slate-200);
@@ -190,6 +182,12 @@ body {
   box-shadow: var(--shadow-sm);
 }
 
+.search-input[type='search']::-webkit-search-cancel-button,
+.search-input[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .search-input:focus {
   outline: 2px solid rgba(79, 70, 229, 0.2);
   border-color: var(--indigo-600);
@@ -212,6 +210,7 @@ body {
   flex-wrap: wrap;
   gap: 12px 20px;
   align-items: center;
+  width: 100%;
 }
 
 .filter-group {
@@ -308,6 +307,22 @@ body {
   color: var(--slate-600);
 }
 
+.link-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--slate-200);
+  background: #ffffff;
+  color: var(--indigo-600);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  text-decoration: none;
+}
+
 .stats-row {
   display: flex;
   align-items: center;
@@ -316,6 +331,49 @@ body {
   gap: 12px;
 }
 
+.language-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.language-control {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-start;
+}
+
+.language-control.secondary {
+  margin-left: auto;
+  justify-content: flex-end;
+}
+
+.swap-link {
+  border: 1px solid var(--slate-200);
+  background: transparent;
+  color: var(--slate-600);
+  border-radius: 10px;
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.swap-link svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .section-title {
   margin: 0;
   font-size: 18px;
@@ -323,8 +381,14 @@ body {
   color: var(--slate-900);
 }
 
+.section-heading {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
 .section-subtitle {
-  margin: 4px 0 0;
+  margin: 0;
   font-size: 12px;
   color: var(--slate-600);
 }
@@ -356,11 +420,13 @@ body {
   border: 1px solid var(--slate-200);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
+  width: 100%;
 }
 
 .table-scroll {
   max-height: 68vh;
   overflow: auto;
+  max-width: 100%;
 }
 
 .glossary {
@@ -428,45 +494,11 @@ body {
   color: #94a3b8;
 }
 
-.th-sub.completion {
-  color: var(--emerald-600);
-  font-weight: 700;
-}
-
 .entry-title {
   font-weight: 700;
   color: var(--slate-900);
 }
 
-.entry-meta {
-  margin-top: 6px;
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  font-size: 11px;
-  color: var(--slate-600);
-}
-
-.meta-tag {
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  font-weight: 700;
-}
-
-.meta-pill {
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-weight: 700;
-}
-
-.meta-pill.verified {
-  color: var(--emerald-600);
-}
-
-.meta-pill.unverified {
-  color: var(--amber-500);
-}
-
 .empty-cell {
   padding: 24px;
   color: var(--slate-600);
@@ -494,6 +526,25 @@ body {
     align-items: flex-start;
   }
 
+  .language-controls {
+    width: 100%;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .language-control {
+    width: 100%;
+  }
+
+  .language-control.secondary {
+    margin-left: 0;
+  }
+
+  .language-control .select {
+    width: 100%;
+  }
+
   .table-scroll {
     max-height: none;
   }

vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
     vue(),
     VitePWA({
       registerType: 'autoUpdate',
-      includeAssets: ['icon.svg', 'icon-maskable.svg'],
+      includeAssets: ['icon.svg', 'icon-192.png', 'icon-512.png', 'icon-maskable.png'],
       manifest: {
         name: 'Sanasto',
         short_name: 'Sanasto',
@@ -19,15 +19,19 @@ export default defineConfig({
         start_url: '/',
         icons: [
           {
-            src: '/icon.svg',
+            src: '/icon-192.png',
-            sizes: 'any',
+            sizes: '192x192',
-            type: 'image/svg+xml',
+            type: 'image/png',
-            purpose: 'any',
           },
           {
-            src: '/icon-maskable.svg',
+            src: '/icon-512.png',
-            sizes: 'any',
+            sizes: '512x512',
-            type: 'image/svg+xml',
+            type: 'image/png',
+          },
+          {
+            src: '/icon-maskable.png',
+            sizes: '512x512',
+            type: 'image/png',
             purpose: 'maskable',
           },
         ],