feat(native): Improved layout in elk-native (#1359)

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 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>
+        <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>

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>
+    <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 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>
+      <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 />

nuxt.config.ts

@@ -48,6 +48,9 @@ export default defineNuxtConfig({
     '~/styles/default-theme.css',
     '~/styles/vars.css',
     '~/styles/global.css',
+    ...process.env.TAURI_PLATFORM === 'macos'
+      ? []
+      : ['~/styles/scrollbars.css'],
     '~/styles/tiptap.css',
     '~/styles/dropdown.css',
   ],

styles/global.css

@@ -12,32 +12,6 @@ html {
   src: url(/fonts/homemade-apple-v18.ttf) format('truetype');
 }
 
-* {
-  scrollbar-color: #8885 var(--c-border);
-}
-
-::-webkit-scrollbar {
-  width: 10px;
-}
-
-::-webkit-scrollbar:horizontal {
-  height: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--c-border);
-  border-radius: 1px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #8885;
-  border-radius: 1px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #8886;
-}
-
 ::-moz-selection {
   background: var(--c-bg-selection);
 }

styles/scrollbars.css

@@ -0,0 +1,25 @@
+* {
+  scrollbar-color: #8885 var(--c-border);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar:horizontal {
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--c-border);
+  border-radius: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #8885;
+  border-radius: 1px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #8886;
+}

unocss.config.ts

@@ -100,6 +100,24 @@ export default defineConfig({
       },
     },
   },
+  variants: [
+    (matcher) => {
+      if (!process.env.TAURI_PLATFORM || !matcher.startsWith('native:'))
+        return matcher
+      return {
+        matcher: matcher.slice(7),
+        layer: 'native',
+      }
+    },
+    (matcher) => {
+      if (process.env.TAURI_PLATFORM !== 'macos' || !matcher.startsWith('native-mac:'))
+        return matcher
+      return {
+        matcher: matcher.slice(11),
+        layer: 'native-mac',
+      }
+    },
+  ],
   rules: [
     // scrollbar-hide
     [/^scrollbar-hide$/, (_, { constructCSS }) => {